diff --git a/nuget.config b/nuget.config
index 8467dcb..1da1b53 100644
--- a/nuget.config
+++ b/nuget.config
@@ -1,33 +1,19 @@
-
+
-
-
-
-
-
-
-
+
+
+
-
\ No newline at end of file
+
+
+
diff --git a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
index 4f4f3e3..bd9e724 100644
--- a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
+++ b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
@@ -5,37 +5,377 @@
-
- -
- Default Square
- Info Square
- Success Square
- Warning Square
- Error Square
-
- -
-
- Default Square
-
-
- Info Square
-
- Success Square
-
- Warning Square
-
- Error Square
-
- -
- Default Square
-
- Info Square
- Success Square
-
- Warning Square
-
- Error Square
-
-
+
+@code {
+ Theme MyCustomTheme = new Theme()
+ {
+ Palette = new Palette()
+ {
+ Error = "#ffd8e4",
+ ErrorContrastText = "#31111d",
+ //ErrorDarken = Colors.Green.Accent4,
+ },
+ LayoutProperties = new LayoutProperties()
+ {
+ DefaultBorderRadius = "1rem",
+ }
+ };
+}
+
+
+ Alert
+ An alert is used to notify the user about an important message without interrupting the ongoing task.
+
+
+
+
+ -
+ Simple alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+ -
+ Outlined alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+ -
+ Outlined alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+
+ Dense
+ Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal.
+
+
+
+ -
+ Dense Default
+ Dense Info
+ Dense Success
+ Dense Warning
+ Dense Errorr
+
+ -
+ Dense Default
+ Dense Info
+ Dense Success
+ Dense Warning
+ Dense Error
+
+ -
+ Dense Default
+ Dense Info
+ Dense Success
+ Dense Warning
+ Dense Error
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+ <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+ <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+ <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+ <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 dense">Dense Errorr</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+ No Icons
+ You can disable the alert icons with the bool GlyphVisible set to false.
+
+
+ -
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+ -
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+ -
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+ <Alert Severity="Severity.Info" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+ <Alert Severity="Severity.Success" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+ <Alert Severity="Severity.Warning" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+ <Alert Severity="Severity.Error" GlyphVisible="false" ClassList="my-2">No Icon Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+ Rounded and Square
+ By default, the alert is set to rounded corners by your theme's
+ default value. If you need a square Alert but don't want to change the theme, insert class rounded-0 in
+ ClassList or change the default radius width classes rounded-sm, rounded-lg, rounded-xl.
+
+
+ -
+ Rounded-0 Default
+ Rounded Info
+ Rounded-sm Success
+ Rounded-lg Warning
+ Rounded-xl Error
+
+ -
+ Rounded-0 Default
+ Rounded Info
+ Rounded-sm Success
+ Rounded-lg Warning
+ Rounded-xl Error
+
+ -
+ Rounded-0 Default
+ Rounded Info
+ Rounded-sm Success
+ Rounded-lg Warning
+ Rounded-xl Error
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+ <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+ <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+ <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+ <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+
+ Elevation
+ The component also accepts the Elevation class set a scale from elevation-1 to elevation-24 in ClassList.
+
+
+ -
+ elevation-8
+
+ -
+ elevation-16
+
+ -
+ elevation-24
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-8">elevation-8 Default</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-16">elevation-16 Default</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-24">elevation-24 Default</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+ Content Alignment
+ Insert Utility class for the Alignment property in ClassList to define the content alignment - justify-center or justify-end
+
+
+ -
+ Default Alignment
+
+ -
+ Center Alignment
+
+ -
+ Right Alignment
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">Default Alignment</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 justify-center">Center Alignment</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 justify-end">Right Alignment</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+ Close Icon and Event
+ Set the CloseGlyphVisible property to True to display a Close icon.
+ CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert
+
+
+ -
+ Time to leave. Please close me!
+
+ -
+ Time to leave. Please close me!
+
+ -
+ RTime to leave. Please close me!
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2">Time to leave. Please close me!</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Info" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-center">Time to leave. Please close me!</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Success" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-end">RTime to leave. Please close me!</Alert>
+ </Item>
+</Grid>
+
diff --git a/src/Connected.Components/.config/dotnet-tools.json b/src/Connected.Components/.config/dotnet-tools.json
index 271e0bc..aaaa200 100644
--- a/src/Connected.Components/.config/dotnet-tools.json
+++ b/src/Connected.Components/.config/dotnet-tools.json
@@ -1,12 +1,12 @@
{
- "version": 1,
- "isRoot": true,
- "tools": {
- "excubo.webcompiler": {
- "version": "3.5.10",
- "commands": [
- "webcompiler"
- ]
- }
- }
+ "version": 1,
+ "isRoot": true,
+ "tools": {
+ "connected.webcompiler": {
+ "version": "1.0.7-prerelease.g67169cf2c5",
+ "commands": [
+ "webcompiler"
+ ]
+ }
+ }
}
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Alert/Alert.razor b/src/Connected.Components/Components/Alert/Alert.razor
index d74cc7b..3da8dc8 100644
--- a/src/Connected.Components/Components/Alert/Alert.razor
+++ b/src/Connected.Components/Components/Alert/Alert.razor
@@ -2,11 +2,8 @@
@inherits UIComponent
-
-
+
+
@if (GlyphVisible)
{
diff --git a/src/Connected.Components/Styles/components/_alert.scss b/src/Connected.Components/Styles/components/_alert.scss
index c10e24d..21a0a8d 100644
--- a/src/Connected.Components/Styles/components/_alert.scss
+++ b/src/Connected.Components/Styles/components/_alert.scss
@@ -1,7 +1,7 @@
@import "../abstracts/variables";
.alert {
- display: flex;
+ display: flex;
padding: 6px 16px;
border-radius: var(--default-borderradius);
background-color: transparent;
@@ -12,12 +12,12 @@
}
&.dense {
- padding: 0px 12px;
+ padding: 0px 12px;
}
-}
+}
.alert-text {
- &-normal {
+ &-normal {
color: var(--palette-text-primary);
background-color: var(--palette-dark-hover);
}
@@ -95,10 +95,23 @@
}
.alert-position {
- //flex: 1;
+ flex: 1;
+ display: flex;
+}
+
+.alert-content {
+ flex: 1;
display: flex;
}
+.alert.justify-end .alert-content {
+ justify-content: flex-end;
+}
+
+.alert.justify-center .alert-content {
+ justify-content: center;
+}
+
.alert-close {
display: flex;
flex: 0;
diff --git a/src/Connected.Components/Styles/core/_colors.scss b/src/Connected.Components/Styles/core/_colors.scss
index 227833a..3076233 100644
--- a/src/Connected.Components/Styles/core/_colors.scss
+++ b/src/Connected.Components/Styles/core/_colors.scss
@@ -26,7 +26,7 @@ $pink: (
'darken-2': #c2185b,
'darken-3': #ad1457,
'darken-4': #880e4f,
- 'accent-1': #ff80ab,
+ 'accent-1': #00ff00,//#ff80ab,
'accent-2': #ff4081,
'accent-3': #f50057,
'accent-4': #c51162
diff --git a/src/Connected.Components/Styles/utilities/borders/_border-radius.scss b/src/Connected.Components/Styles/utilities/borders/_border-radius.scss
index 7e2dfd8..cc8abff 100644
--- a/src/Connected.Components/Styles/utilities/borders/_border-radius.scss
+++ b/src/Connected.Components/Styles/utilities/borders/_border-radius.scss
@@ -1,4 +1,4 @@
-$border-radiuses: ( "0": 0, "sm": 2px, "lg": 8px, "xl": 24px);
+$border-radiuses: ( "0": 0, "sm": 4px, "lg": 8px, "xl": 24px);
@each $size, $value in $border-radiuses {
.rounded-#{$size} {