diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor index 3bca23a..49e1428 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor @@ -1,6 +1,7 @@ @page "/demo" +
-
- -
-
- - @* *@ - Open Sidebar - - -
- -
- - Open Filters -
+
+ +
+ + Sidebar +
+
+
+
+
+
+
+ + @* *@ +
+
+
+
+
+
+ + + 3 + +
+
+

Borders

Use border utilities to quickly style the border, border color and border-radius of an element. @@ -463,7 +494,7 @@

Examples

-
+
@@ -475,11 +506,11 @@
-
+

Outline buttons

-
+
@@ -495,15 +526,15 @@

Sizes

-
+
-
+
-
+
@@ -512,20 +543,63 @@

Button states

-
+
-
+
+ +
+
+

Segmented Buttons

+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + + + + +
+ + +
+ + + + + + + + + +
+ +
+
@@ -726,6 +800,22 @@ + +
+
+
+
+
+ +
+
+
+
+
+ + + +
Se - - + + +
Header
@@ -912,6 +1002,10 @@
Product 1
0023 001445669 1
Product serial code
+
+ Test + Test 1 +
@@ -931,8 +1025,8 @@
-
- +
+
@@ -1005,11 +1099,11 @@
-
+
-
- - +
+ +
@@ -1041,7 +1135,7 @@ @* *@
- lorem20 + ssss
@@ -1126,7 +1220,7 @@ - @@ -1172,6 +1266,42 @@
+
+
+
+
+
Snackbar message text
+ @*
*@ +
+
+ + + +
+
+
+
+
Snackbar dialog title
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus
+
+
Snackbar action
+
+
+ +
+
+
+
diff --git a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor new file mode 100644 index 0000000..99153f9 --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor @@ -0,0 +1,1141 @@ +@page "/democomp" + + +
+
+ + + + +
+ + + +
+ +
+ @* + Sidebar *@ +
+
+
+
+
+
+
+ + @* *@ +
+
+
+
+
+
+ + + 3 + +
+
+
+ + + + + + + +
+

Buttons

+

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, + states, and more. +

+
+

Examples

+
+ + + + + + + + + + +
+
+
+
+

Outline buttons

+
+ + + + + + + + + + +
+
+
+
+

Sizes

+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Button states

+
+ + + +
+
+ + + +
+
+ +
+
+

Segmented Buttons

+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + + + + +
+ + +
+ + + + + + + + + +
+ +
+ + + +
+
+

Icon Buttons

+ +
+ + + + + + + + +
+ +
+ +
+ +
+

Radio +

+

Radio buttons allow the user to select a single choice from a group of options. + + +

+
+
+ +
+ + + + + + +
+ + @*
+
+ + +
+ +
+ + +
+ +
+ + +
+
*@ + + + +
+ + + + + + +
+ + + @*
+
+ + +
+ +
+ + +
+ +
+ + +
+
*@ + + + +
+ + + + + + +
+
+
+
+ +
+

Input +

+

Inputs buttons allow the user to select a single choice from a group of options. +

+ + +
+
+ + +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+ + +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+ + +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+ +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+ + + + +
+
+
+
+ + + +
+
+
+
+ + + + +
+ + + + + + +
+ + +
+ + + + + + + + + + + + + + +
+
+
+
Header
+ + Action + Another action +
+ Something else here +
+
+ +
+ +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+ + +
+ +
+ + +
+ + +
+ + +
+ +

Grid

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+ + + + +
+
+

Data Grid

+

Data grid DENSE + COLLAPSE + SELECT

+ + +
+
+ +
+
+
+
Chip label text
+
+
+
+ +
+
+
+
+ + + +
+
+
+ Date of entry + Product + Material code + Price +
+
+ +
+
+
+
+ +
+
+
+
Chip label text
+
+
+
+ + +
+
+
+
Select all
+
+
+
+ + +
+
+
+
Select all active
+
+
+
+ + + + +
+ +
+ +
+ +
+ @* *@ + +
+ +
+ + +
+ +
+
+
+
Product 1
+ 0023 001445669 1 +
Product serial code
+
+ Test + Test 1 +
+
+
+ +
Material 29
+
+ +
+ +
77,29
+
+
+ +
+
+ +
+
+
+
+ + + + +
+

Form wizard

+ + +
+
+
+
Description for step 1
+ @*
+
+
+
+
+
+
+
*@ + +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+ +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
+
+
+ + +
+
2
+
+ +
+
3
+
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+
+
+
+
+ + +
+ + + + +
+

Card

+

Cards contain content and actions that relate information about a subject.

+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+
Profile title
+
Profile subhead
+
+
+ +
+ + +
+
+

Card Title

+

Card Subhead

+
+ + +
+ + +
+

Cards contain content and actions that relate information about a subject.

+
+ +
+
+ + +
+
+ +
+
+ +
+ +
+ + + + +
+ + + + +
+
+
+
+
+
Snackbar message text
+
+
+ + + +
+
+
+
+
Snackbar dialog title
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus
+
+
Snackbar action
+
+
+ +
+
+
+ +
+ + +@code { + private string sidebarClosed { get; set; } = "close"; + + private void ToggleSidebar() + { + sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : ""; + } + + private string sidebarRightClosed { get; set; } = "close-r"; + + private void ToggleSidebarRight() + { + sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; + } + + + + private string NavClosed { get; set; } = ""; + + private void ToggleNav() + { + NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; + } + + + private string NextSlide { get; set; } = ""; + + private void ToggleNextSlide() + { + NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : ""; + } + + + private string PreviousSlide { get; set; } = ""; + + private void TogglePreviousSlide() + { + PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : ""; + } +} + + + + diff --git a/src/Connected.Components/Components/Glyph.razor b/src/Connected.Components/Components/Glyph.razor index 429fc6d..2d0b9c3 100644 --- a/src/Connected.Components/Components/Glyph.razor +++ b/src/Connected.Components/Components/Glyph.razor @@ -1,6 +1,3 @@ - -
- + @((MarkupString)SVG) -
\ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_appbar.scss b/src/Connected.Components/Styles/components/_appbar.scss new file mode 100644 index 0000000..ac274ba --- /dev/null +++ b/src/Connected.Components/Styles/components/_appbar.scss @@ -0,0 +1,43 @@ +@use "../util" as *; +@use "../globals" as *; + +$appbar-width-open: 300px; + +.appbar { + position: sticky; + margin-inline: -0.75rem; + top: 0; + padding: 1.25rem 0.75rem; + display: flex; + align-items: center; + justify-content: space-between; + color: $text-core; + //background-color: #dbe2f8; + z-index: $appbar-zindex; + transition: all 0.3s ease; + // background: radial-gradient(rgba(255,255,255,.05), rgba(255,255,255,.025)); + backdrop-filter: blur(15px); + // margin-inline: -1.75rem; + background: linear-gradient( + to left, + var(--bg-core-primary), + var(--bg-core-end) + ); + background-attachment: fixed; + &::after { + content: ""; + position: absolute; + inset: 0; + background-color: rgba(255, 255, 255, 0.65); + pointer-events: none; + z-index: -1; + } + + @include breakpoint(sm) { + margin-inline: -2rem; + padding: 1.25rem 1.75rem; + &::after { + background-color: rgba(255, 255, 255, 0.5); + } + } +} diff --git a/src/Connected.Components/Styles/components/_badge.scss b/src/Connected.Components/Styles/components/_badge.scss new file mode 100644 index 0000000..ba64411 --- /dev/null +++ b/src/Connected.Components/Styles/components/_badge.scss @@ -0,0 +1,239 @@ +@use "../globals/" as *; +@use "../util/" as *; + +.badge-group { + position: relative; + //display: inline-block; + display: flex; + flex-wrap: wrap; + gap: .5rem ; + margin-top:.25rem; + + .badge-content { + top: 0; + left: 0; + flex: 0 1; + width: 100%; + height: 100%; + display: flex; + pointer-events: none; + position: absolute; + opacity: 1; + transition: $transition; + + &.badge { + + &-top { + align-items: flex-start; + + &.left { + justify-content: flex-start; + } + + &.center { + justify-content: center; + } + + &.right { + justify-content: flex-end; + } + } + + &-center { + align-items: center; + + &.left { + justify-content: flex-start; + } + + &.center { + justify-content: center + } + + &.right { + justify-content: flex-end; + } + } + + &-bottom { + align-items: flex-end; + + &.left { + justify-content: flex-start; + } + + &.center { + justify-content: center; + } + + &.right { + justify-content: flex-end; + } + } + } + } +} + +.badge { + border-radius: 12px; + font-size: $font-size-sm; + height: 22px; + letter-spacing: 0; + min-width: 22px; + padding: 4px 6px; + pointer-events: auto; + + position: absolute; + display: flex; + justify-content: center; + align-items: center; + text-indent: 0; + top: auto; + transition: .3s cubic-bezier(.25,.8,.5,1); + white-space: nowrap; + + &.bg-core { + color: var(--text-core); + background-color: var(--bg-core-primary-lighten); + } + + &.badge-outline { + border-color: var(--bg-core-primary-light); + border-style: solid; + border-width: 2px; + padding: 3px 4px; + + &.badge-icon { + padding: 4px 6px; + + & .icon-badge { + margin-left: -4px; + margin-inline-start: -4px; + margin-inline-end: unset; + margin-top: -4px; + } + } + } + + &.badge-icon { + width: 20px; + height: 20px; + + & .icon-badge { + color: inherit; + font-size: 12px; + margin-left: -2px; + margin-inline-start: -2px; + margin-inline-end: unset; + } + } + + &.badge-dot { + border-radius: 50%; + height: 9px; + min-width: 0; + padding: 0; + width: 9px; + } + + &.badge { + + &-top { + &.left { + inset: auto calc(100% - 4px) calc(100% - 4px) auto; + + &.badge-overlap { + inset: auto calc(100% - 12px) calc(100% - 12px) auto; + } + } + + &.center { + bottom: calc(100% - 4px); + + &.badge-overlap { + bottom: calc(100% - 12px); + } + } + + &.right { + inset: auto auto calc(100% - 4px) calc(100% - 4px); + + &.badge-overlap { + inset: auto auto calc(100% - 12px) calc(100% - 12px); + } + } + } + + &-center { + &.left { + right: calc(100% - 4px); + + &.badge-overlap { + right: calc(100% - 12px); + } + } + + &.center { + } + + &.right { + left: calc(100% - 4px); + + &.badge-overlap { + left: calc(100% - 12px); + } + } + } + + &-bottom { + &.left { + inset: calc(100% - 4px) calc(100% - 4px) auto auto; + + &.badge-overlap { + inset: calc(100% - 12px) calc(100% - 12px) auto auto; + } + } + + &.center { + top: calc(100% - 4px); + + &.badge-overlap { + top: calc(100% - 12px); + } + } + + &.right { + inset: calc(100% - 4px) auto auto calc(100% - 4px); + + &.badge-overlap { + inset: calc(100% - 12px) auto auto calc(100% - 12px); + } + } + } + } +} + +.badge-label { + border-radius: $base-border-radius; + font-size: $font-size-sm; + //color: var(--text-core-hc); + display: flex; + justify-content: center; + align-items: center; + min-width: 20px; + height: 20px; + letter-spacing: 0; + padding: 12px 10px; + pointer-events: auto; + text-indent: 0; + white-space: nowrap; + background-color: transparent; + transition: .3s cubic-bezier(.25,.8,.5,1); + position: relative; + isolation: isolate; + + &.bg-core { + color: var(--text-core); + background-color: var(--bg-core-primary-lighten); + } +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_buttons-icons.scss b/src/Connected.Components/Styles/components/_buttons-icons.scss new file mode 100644 index 0000000..a8f6c10 --- /dev/null +++ b/src/Connected.Components/Styles/components/_buttons-icons.scss @@ -0,0 +1,67 @@ +@use "../globals/" as *; +@use "../util/" as *; + +.btn-icon { + font-size: inherit; + flex: 0 0 auto; + padding: 8px; + line-height: 1; + text-align: center; + border-radius: $border-radius-pill; + cursor: pointer; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + +} + + +.btn-icon-alt { + font-size: inherit; + flex: 0 0 auto; + border: 1px solid transparent; + padding: 8px; + line-height: 1; + text-align: center; + border-radius: $border-radius-pill; + cursor: pointer; + background-color: transparent; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + &:hover { + background-color: rgba(0,0,0,.075) + } + &:focus-visible, + &.focus { + outline: 0; + background-color: var(--bg-core-primary-light); + box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten); + } + &:active, + &.active { + color: #fff; + background-color: var(--bg-core-primary); + } + } + + + + @each $key, $val in $theme-colors { + .btn-icon-alt.#{$key} { + background-color: transparent; + color: $val; + &:hover { + //background-color: lighten($val, 24); + background-color: rgba($val, .1); + } + &:focus-visible, + &.focus { + outline: 0; + color: set-color($val); + background-color: rgba($val, .5); + box-shadow: 0 0 0 0.15rem lighten($val, 20); + } + &:active, + &.active { + color: set-color($val); + background-color: $val; + } + } +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_buttons-segmented.scss b/src/Connected.Components/Styles/components/_buttons-segmented.scss new file mode 100644 index 0000000..1ca7023 --- /dev/null +++ b/src/Connected.Components/Styles/components/_buttons-segmented.scss @@ -0,0 +1,107 @@ +@use "../globals/" as *; +@use "../util/" as *; + + +$border-radius-btn-segmented: 100vw; + + + + +.btn-segmented { + gap: 0; + } + +.btn-segmented > * { + border-radius: 0; + &:first-of-type{ + border-radius: $border-radius-btn-segmented 0 0 $border-radius-btn-segmented; + } + &:last-of-type{ + border-radius: 0 $border-radius-btn-segmented $border-radius-btn-segmented 0; + } + } + +.btn-segmented > *:not(:first-of-type) { + margin-left: calc(1px * -1); +} + +.btn-segmented .btn-check { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; +} + +.btn-segmented .btn-outline-core { + color: var(--bg-core-primary-dark); + background-color: transparent; + border: 1px solid var(--bg-core-primary-dark)!important; + &:hover{ + background-color: var(--bg-core-primary-light); + color: var(--text-core); + } + &:focus-visible, + &.focus { + outline: 0; + box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten); + } + &:active, + &.active{ + color: var(--bg-core-primary-dark); + background-color:var(--bg-core-primary-lighten) ; + border-color: var(--bg-core-primary-dark) ; + } +} +.btn-check:checked+.btn-outline-core{ + color: var(--bg-core-primary-dark)!important; + background-color:var(--bg-core-primary-lighten)!important ; + border-color: var(--bg-core-primary-dark)!important ; +} + +@each $key, $val in $theme-colors { + .btn-segmented .btn-outline-#{$key} { + color:darken($val, 30); + background-color: lighten($val, 30%); + border: 1px solid darken($val, 40); + &:hover { + color: darken($val, 35); + background-color: lighten($val, 25); + } + &:focus-visible, + &.focus { + outline: 0; + box-shadow: 0 0 0 0.15rem lighten($val, 20); + } + &:active, + &.active { + background-color: lighten($val, 10); + color: darken($val, 35); + } + } + .btn-check:checked+.btn-outline-#{$key} { + background-color: lighten($val, 10); + color: darken($val, 35); + } +} + + +// .btn-segmented .btn-check:checked+.btn{ +// color: var(--bg-core-primary-dark); +// background-color:var(--bg-core-primary-lighten) !important; +// border-color: var(--bg-core-primary-dark) !important; +// transition: all .35s ease-in-out; + +// } + +.btn-segmented .btn-check:checked+.btn svg{ + display: inline-block; + margin-right: .5rem; + margin-left: -.5rem; +} + +.btn-segmented .btn-check+.btn svg{ + display: none; +} + + + + diff --git a/src/Connected.Components/Styles/components/_buttons.scss b/src/Connected.Components/Styles/components/_buttons.scss index 09c7678..064bf53 100644 --- a/src/Connected.Components/Styles/components/_buttons.scss +++ b/src/Connected.Components/Styles/components/_buttons.scss @@ -1,6 +1,23 @@ @use "../globals/" as *; @use "../util/" as *; +$border-radius-btn: 100vw; + + +.btn-content { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 1rem 0; +} + +.btn-group { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + +} + @mixin btn($bg-color: #e2e2e2) { display: inline-block; cursor: pointer; @@ -17,7 +34,7 @@ text-transform: uppercase; line-height: $base-font-size * 1.5; text-decoration: none; - border-radius: $border-radius-pill; + border-radius: $border-radius-btn; transition: $transition; } @@ -43,6 +60,8 @@ &.active { background-color: darken($val, 15); } + + } .btn-outline-#{$key} { // @include btn(); @@ -62,7 +81,7 @@ &.active { background-color: darken($val, 15); color: set-color($val); - } + } } } @@ -89,16 +108,12 @@ width: 100%; } -.btn.disabled, -.btn:disabled { - opacity: 0.4; - //pointer-events: none; - cursor: not-allowed; -} + .btn-core { background-color: var(--bg-core-primary) !important; - color: set-color (var(--bg-core-primary)) !important; + //color: set-color (var(--bg-core-primary-lighten)) !important; + color: rgba(255,255,255,.85) !important; &:hover { background-color: var(--bg-core-primary-darken) !important; } @@ -113,6 +128,8 @@ } } + + .btn-outline-core { color: var(--bg-core-primary-darken) !important; background-color: transparent !important; @@ -132,3 +149,11 @@ color: set-color (var(--bg-core-primary-darken)) !important; } } + + + + + + + + diff --git a/src/Connected.Components/Styles/components/_card.scss b/src/Connected.Components/Styles/components/_card.scss new file mode 100644 index 0000000..20cbfed --- /dev/null +++ b/src/Connected.Components/Styles/components/_card.scss @@ -0,0 +1,104 @@ +@use "../globals/" as *; +@use "../util/" as *; + +$box-padding: 0 0 0.25rem 0; + +.card { + background-color: var(--element-fg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; +} + +.card-header-cta { + position: absolute; + top: 0.75rem; + right: 0.75rem; + z-index: 1; +} + +.card-media { + width: 100%; + max-height: 250px; + margin-bottom: .75rem; + & img { + object-fit: cover; + width: inherit; + } +} + +.card-container { + padding: 0 .75rem .75rem; + display: flex; + flex-direction: column; +} + +.card-container { + padding: 0.75rem; + display: flex; + flex-direction: column; + flex: 1; +} + +.card-container > * { + //flex: 1; +} + +.card-avatar { + display: flex; + align-items: center; + margin: 0 0.75rem; + padding: $box-padding; + + & img { + height: 40px; + width: 40px; + object-fit: cover; + border-radius: 50%; + margin-right: 0.5rem; + } + & .avatar-title { + font-weight: 600; + white-space: nowrap; + color: var(--text-core-hc); + } + & .avatar-subhead { + font-size: 12px; + font-weight: 500; + color: var(--text-core-lc); + } +} + +.card-header { + padding: $box-padding; + + & .card-header-title { + font-size: 1.5rem; + color: var(--text-core-hc); + } + + & .card-header-subhead { + font-size: 1.05rem; + font-weight: 500; + line-height: 0.5; + color: var(--text-core-lc); + } +} + +.card-content { + padding: $box-padding; +} + +.card-actions { + padding: $box-padding; + margin-top: auto; + display: flex; + flex-wrap: wrap; +align-content: end; + & .btn-content{ + margin: 0 .25rem; + } +} diff --git a/src/Connected.Components/Styles/components/_chip.scss b/src/Connected.Components/Styles/components/_chip.scss index 5e8bc05..65234e7 100644 --- a/src/Connected.Components/Styles/components/_chip.scss +++ b/src/Connected.Components/Styles/components/_chip.scss @@ -8,8 +8,11 @@ position: relative; flex-wrap: nowrap; gap: .5rem; - overflow: auto; + overflow-x: auto; + overflow-y: hidden; scroll-snap-type: both mandatory; + scroll-padding: 0.25rem; + -webkit-overflow-scrolling:scroll; } /* Hide scrollbar for Chrome, Safari and Opera */ @@ -22,7 +25,13 @@ scrollbar-width: none; /* Firefox */ } - + .horizontal-scroll-container:focus-within { + overflow: inherit; + overflow-x: auto; + @include breakpoint (sm) { + overflow-x: inherit; + } + } .chip-icon { --height: 2.5rem; @@ -33,7 +42,7 @@ align-items: center; justify-content: center; border-radius: 50%; - background-color: var(--bg-core-primary-darken); + background-color: var(--accent-color); overflow: hidden; cursor: pointer; transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); @@ -42,7 +51,7 @@ .chip-icon:hover, .chip-icon:active, .chip-icon:active { - background-color: var(--bg-core-primary-dark); + background-color: var(--accent-color-hover); } @@ -116,16 +125,20 @@ /*filter*/ .chip-group.filter { border: 1px solid var(--bg-core-primary); - background-color: var(--bg-core-primary-light); + background-color: var(--bg-core-primary-lighten); cursor: pointer; overflow: hidden; &:hover{ - background-color: var(--bg-core-primary-lighten); + background-color: var(--bg-core-primary); } &:active, &.active{ border: 1px solid var(--bg-core-primary); - background-color: var(--bg-core-primary); + background-color: var(--bg-core-primary-lighten); + &:active:hover, + &.active:hover{ + background-color: var(--bg-core-primary); + } } } @@ -153,66 +166,32 @@ } /*end select*/ - /*drop-down*/ - /* The container must be positioned relative: */ - .custom-select { - position: relative; - font-family: Arial; - } - - .custom-select select { - display: none; /*hide original SELECT element: */ - } - - .select-selected { - background-color: DodgerBlue; - } - - /* Style the arrow inside the select element: */ - .select-selected:after { - position: absolute; - content: ""; - top: 14px; - right: 10px; - width: 0; - height: 0; - border: 6px solid transparent; - border-color: #fff transparent transparent transparent; - } - - /* Point the arrow upwards when the select box is open (active): */ - .select-selected.select-arrow-active:after { - border-color: transparent transparent #fff transparent; - top: 7px; - } - - /* style the items (options), including the selected item: */ - .select-items div,.select-selected { - color: #ffffff; - padding: 8px 16px; - border: 1px solid transparent; - border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; - cursor: pointer; - } - - /* Style items (options): */ - .select-items { - position: absolute; - background-color: DodgerBlue; - top: 100%; - left: 0; - right: 0; - z-index: 99; - } - - /* Hide the items when the select box is closed: */ - .select-hide { - display: none; + + + +.chip-group input { + appearance: none; + border: none; + outline: none; + background: transparent; + font-family: inherit; + + &:focus-within ~ .drop-down { + height: auto; + max-height: max-content; + opacity: 1; + pointer-events: initial; + border-radius: .6rem; + } - - .select-items div:hover, .same-as-selected { - background-color: rgba(0, 0, 0, 0.1); + &:focus-within ~ .backdrop { + opacity: 1; + display: block; } +} + + + /*end-down*/ /*END CHIP*/ \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_dropdown.scss b/src/Connected.Components/Styles/components/_dropdown.scss new file mode 100644 index 0000000..77a852e --- /dev/null +++ b/src/Connected.Components/Styles/components/_dropdown.scss @@ -0,0 +1,85 @@ +@use "../globals/" as *; +@use "../util/" as *; + +.drop-down { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 80%; + width: 80%; + height: 0; + max-height: 0; + display: flex; + flex-direction: column; + opacity: 0; + pointer-events: none; + z-index: $dropdown-zindex; + list-style: none; + background-color: #fff; + box-shadow: $base-box-shadow; + border-radius: $border-radius-lg; + transition: all 0.3s ease-in-out; +} + +@include breakpoint(sm) { + .drop-down { + position: absolute; + top: 46px; + left: 0; + opacity: 0; + min-width: 100%; + width: 100%; + transform: none; + border-radius: 0 0 $border-radius-lg $border-radius-lg; + } +} + +.backdrop { + display: none; + opacity: 0; + z-index: $backdrop-zindex; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.5); + transition: all 0.3s ease-in-out; +} + +.dropdown-header { + display: block; + padding: 0.5rem 1.5rem; + margin-bottom: 0; + font-size: $font-size-sm; + color: var(--text-core-lc); + white-space: nowrap; +} + +.dropdown-item { + display: block; + width: 100%; + padding: 0.5rem 1.5rem; + clear: both; + color: inherit; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; +} + +.dropdown-item:focus, +.dropdown-item:hover { + color: var(--text-core-hc); + text-decoration: none; + background-color: var(--bg-core-primary-light); +} + +.dropdown-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid var(--bg-core-primary-light); +} diff --git a/src/Connected.Components/Styles/components/_grid.scss b/src/Connected.Components/Styles/components/_grid.scss index fcf8d49..1bbf4fd 100644 --- a/src/Connected.Components/Styles/components/_grid.scss +++ b/src/Connected.Components/Styles/components/_grid.scss @@ -146,7 +146,7 @@ $columns: 12; .data-grid-row-content{ display: grid; - grid-template-columns: auto 1fr auto; + grid-template-columns: auto auto 1fr auto; } .data-grid:not(.data-grid.dense) .data-grid-row-content { @@ -232,12 +232,37 @@ $columns: 12; } /*END DENSE ACTIVE*/ +/*IMG*/ +.data-grid.image .data-grid-img { + --height:60px; + + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.6rem; + background-color: var(--bg-core-primary-light); + height: var(--height); + aspect-ratio: 1/1; + overflow: hidden; + margin-top: .5rem; + margin-right: .75rem; +} + +.data-grid.image .data-grid-img img { + object-fit: cover; + height: var(--height); + aspect-ratio: 1/1; +} + + +/*SELECT*/ .data-grid.select .data-grid-select { display: block; margin-top: .5rem; - margin-right: .5rem; + margin-right: .75rem; } +.data-grid .data-grid-img, .data-grid .data-grid-select, .data-grid .data-grid-collapse-cta{ display: none; @@ -251,11 +276,12 @@ $columns: 12; /*COLLAPSE*/ .data-grid.collapse .data-grid-collapse-cta { display: block; - margin-top: .5rem; + margin-top: .25rem; margin-left: .5rem; cursor: pointer; } + .collapsed{ max-height: 0; overflow: hidden; @@ -276,14 +302,33 @@ $columns: 12; transition: all 0.5s ease-in; } -.data-grid .data-grid-collapse-cta i { +.data-grid .data-grid-collapse-cta i, +.data-grid .data-grid-collapse-cta svg { + display: block; + border-radius: 50%; + cursor: pointer; + background-color: transparent; transform: rotate(0); transition: all 0.5s ease-in; } -.data-grid.show .data-grid-collapse-cta i { + +.data-grid.show .data-grid-collapse-cta i, +.data-grid.show .data-grid-collapse-cta svg { transform: rotate(180deg); + transition: all 0.5s ease-in; } +.data-grid-collapse-cta:hover i, +.data-grid-collapse-cta:hover svg{ + background-color: var(--bg-core-primary-lighten); +} + + + + + + + /*form-wizard*/ @@ -309,7 +354,7 @@ overflow: hidden; transform: translateX(0); } - .form-step.next{ + .form-step.next { transform: translateX(-100%); } diff --git a/src/Connected.Components/Styles/components/_icons.scss b/src/Connected.Components/Styles/components/_icons.scss new file mode 100644 index 0000000..68501b4 --- /dev/null +++ b/src/Connected.Components/Styles/components/_icons.scss @@ -0,0 +1,31 @@ + .icon-root { + width: 1em; + height: 1em; + display: inline-block; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + flex-shrink: 0; + user-select: none; + vertical-align: -0.125em; + + &:focus { + outline: none; + } + + &.svg-icon { + fill: currentColor; + } + } + + .icon-size-sm{ + font-size: 1.25rem; + } + + .icon-size-md { + font-size: 1.5rem; + vertical-align: -0.25em; + } + + .icon-size-lg { + font-size: 2.25rem; + vertical-align: -0.35em; + } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_index.scss b/src/Connected.Components/Styles/components/_index.scss index 4871f72..5e38ba8 100644 --- a/src/Connected.Components/Styles/components/_index.scss +++ b/src/Connected.Components/Styles/components/_index.scss @@ -6,4 +6,13 @@ @forward "checkbox"; @forward "toggle"; @forward "chip"; -@forward "modal"; \ No newline at end of file +@forward "modal"; +@forward "snackbar"; +@forward "icons"; +@forward "appbar"; +@forward "buttons-segmented"; +@forward "top-loading-bar"; +@forward "badge"; +@forward "buttons-icons"; +@forward "dropdown"; +@forward "card"; \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_inputs.scss b/src/Connected.Components/Styles/components/_inputs.scss index 46c65af..b29b024 100644 --- a/src/Connected.Components/Styles/components/_inputs.scss +++ b/src/Connected.Components/Styles/components/_inputs.scss @@ -24,7 +24,7 @@ form{ resize: none; } - input:not([type="radio"], [type="radio"]), + .form-group input:not([type="radio"], [type="radio"], #search), textarea, select { background: none; @@ -140,6 +140,7 @@ form{ .error .input-glyph.error { display: flex; color: $danger; + //font-size: 1.25rem; } .input-glyph.error { @@ -161,12 +162,15 @@ form{ justify-content: center; align-items: center; margin-left: $base-margin; + } -.input-glyph i { +.input-glyph i, +.input-glyph svg { font-size: 1.25rem; z-index: 1; } + /*GLYPH BUTTON*/ .input-glyph.button { cursor: pointer; @@ -215,91 +219,86 @@ select { } -.drop-down{ - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - min-width: 80%; - width: 80%; - height: 0; - max-height: 0; - display: flex; - flex-direction: column; - opacity: 0; - pointer-events: none; - z-index: 1500; - list-style: none; - background-color: #fff; - box-shadow: $base-box-shadow; - border-radius: $border-radius-lg; - transition: all $trans-time ease-in-out; - -} +/*form group-alt*/ -.backdrop{ - display: none; - opacity: 0; - z-index: 1499; - position: fixed; - top: 0; - right:0; - bottom:0; - left:0; - overflow: hidden; - background-color: rgba(0,0,0,.5); - transition: all $trans-time ease-in-out; -} - -@include breakpoint(sm) { -.drop-down{ - position: absolute; - top: 46px; - left: 0; - opacity: 0; - min-width: 100%; - width: 100%; - transform: none; - border-radius: 0 0 $border-radius-lg $border-radius-lg; - } -} + .form-group-alt { + --height: 2.5rem; + + //border: 1px solid var(--bg-core-primary); + padding: .15rem; + height: max-content; + //min-width: max-content; + color: var(--text-core); + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary-light); + display: inline-block; + position:relative; + transition: $transition; + } + + .form-group-alt input { + border: none; + outline: none; + background: transparent; + font-family: inherit; +} +/* Chrome, Safari, Edge, Opera */ +.form-group-alt input::-webkit-outer-spin-button, +.form-group-alt input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +/* Firefox */ +.form-group-alt input[type=number] { + -moz-appearance: textfield; +} + .form-group-alt:focus-within { + background-color: var(--bg-core-primary-lighten); +} -.dropdown-header { - display: block; - padding: 0.5rem 1.5rem; - margin-bottom: 0; - font-size: $font-size-sm; - color: var(--text-core-lc); - white-space: nowrap; + /*search*/ + .form-group-alt .input-group-content{ + height: var(--height); + display: flex; + align-items: center; + justify-content: center; } - -.dropdown-item { - display: block; - width: 100%; - padding: 0.5rem 1.5rem; - clear: both; - color: inherit; - text-align: inherit; - white-space: nowrap; + + .form-group-alt .input-leading-icon { + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + color: var(--text-core-lc); + height: var(--height); + aspect-ratio: 1 / 1; + overflow: hidden; + } + + .form-group-alt .input-cta-icon{ + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; background-color: transparent; - border: 0; -} + cursor: pointer; + height: var(--height); + aspect-ratio: 1 / 1; + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .form-group-alt .input-area{ + flex: 1; + } + + .form-group-alt .input-cta-icon:hover{ + background-color: var(--bg-core-primary-lighten); + } -.dropdown-item:focus, .dropdown-item:hover { - color: var(--text-core-hc); - text-decoration: none; - background-color: var(--bg-core-primary-light); -} -.dropdown-divider { - height: 0; - margin: 0.5rem 0; - overflow: hidden; - border-top: 1px solid var(--bg-core-primary-light); - } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_modal.scss b/src/Connected.Components/Styles/components/_modal.scss index 9dc789c..7914a0e 100644 --- a/src/Connected.Components/Styles/components/_modal.scss +++ b/src/Connected.Components/Styles/components/_modal.scss @@ -182,7 +182,7 @@ - .modal-dialog { + .modal-dialog { max-width: 100%; max-height: 100%; padding: 0; diff --git a/src/Connected.Components/Styles/components/_sidebar.scss b/src/Connected.Components/Styles/components/_sidebar.scss index 26465e9..9c287b1 100644 --- a/src/Connected.Components/Styles/components/_sidebar.scss +++ b/src/Connected.Components/Styles/components/_sidebar.scss @@ -4,7 +4,7 @@ $sidebar-width-open:300px; $sidebar-width-closed:75px; -$sidebar-right-width-open:300px; +$sidebar-right-width-open:350px; $sidebar-right-width-closed:0px; .sidebar{ @@ -15,15 +15,25 @@ $sidebar-right-width-closed:0px; color: $text-core; background: var(--bg-core-primary-light); border-right: 1px solid rgba(0,0,0,.025); - border-radius: $border-radius-lg 0 0 $border-radius-lg; + border-radius: $border-radius-lg; z-index: $sidebar-zindex; transition: all 0.3s ease; @include breakpoint(sm) { height: 100%; - position: relative; - width: $sidebar-width-open; + position: absolute; + width: 50%; } + + @include breakpoint(md) { + width: $sidebar-width-open; + } + @include breakpoint(xl) { + height: 100%; + position: relative; + border-radius: $border-radius-lg 0 0 $border-radius-lg; + width: $sidebar-width-open; + } } .sidebar.close{ @@ -32,37 +42,94 @@ $sidebar-right-width-closed:0px; @include breakpoint(sm) { width: $sidebar-width-closed; transform: translateX(0); + border-radius: $border-radius-lg 0 0 $border-radius-lg; + } } + +//to do move to core .main { width: calc(100% - 1.5rem) ; margin-inline:auto; transition: all 0.3s ease; + @include breakpoint (sm) { + width: 100%; + padding: 0 1rem 0 calc($sidebar-width-closed + 1rem); + } + + @include breakpoint (md) { + padding: 0 2rem 0 calc($sidebar-width-closed + 2rem); + } + + @include breakpoint (xl) { width: calc(100% - $sidebar-width-open - $sidebar-right-width-open); - padding: 2rem; + padding: 0 2rem; } } .main.close{ @include breakpoint (sm) { - width: calc(100% - $sidebar-width-closed - $sidebar-width-open); + width: 100%; + padding: 0 1rem 0 calc($sidebar-width-closed + 1rem); + + } + + @include breakpoint (md) { + padding: 0 2rem 0 calc($sidebar-width-closed + 2rem); + } + @include breakpoint (xl) { + width: calc(100% - $sidebar-width-closed - $sidebar-right-width-open); + padding: 0 2rem; } } .main.close-r{ @include breakpoint (sm) { - width: calc(100% - $sidebar-right-width-open); + width: 100%; + padding: 0 1rem 0 calc($sidebar-width-closed + 1rem); + } + @include breakpoint (md) { + padding: 0 2rem 0 calc($sidebar-width-closed + 2rem); + } + @include breakpoint (xl) { + width: calc(100% - $sidebar-width-open); + padding: 0 2rem; } } .main.close.close-r{ @include breakpoint (sm) { + width: 100%; + padding: 0 1rem 0 calc($sidebar-width-closed + 1rem); + + } + @include breakpoint (md) { + padding: 0 2rem 0 calc($sidebar-width-closed + 2rem); + } + @include breakpoint (xl) { width: calc(100% - $sidebar-right-width-closed - $sidebar-width-closed); + padding: 0 2rem; + } } +.sidebar .sidebar-toggler{ + display: none; +} + +.sidebar.close .sidebar-toggler{ + display: block; + position: absolute; + right: -63px; + top: 23px; + font-size: 1.25rem; +} + +// .sidebar.close .sidebar-toggler-close{ +// position: relative; +// } //profile .sidebar .profile-details{ @@ -75,7 +142,7 @@ $sidebar-right-width-closed:0px; border-radius: $border-radius-lg 0 0 0; transition: all 0.3s ease; @include breakpoint (sm) { - padding-top: 12px; + padding-top: 1rem; } } @@ -95,6 +162,8 @@ $sidebar-right-width-closed:0px; .sidebar .profile-details .profile-description { margin-right: auto; + transition: all 0.3s ease; + } .sidebar .profile-details .profile-name{ @@ -109,16 +178,22 @@ $sidebar-right-width-closed:0px; color:var(--text-core-lc) } - .sidebar .profile-details i{ - height: 50px; - min-width: 50px; - text-align: center; - line-height: 50px; - font-size: 20px; - cursor: pointer; - transition: all 0.3s ease; + .sidebar .profile-details button{ + align-self: flex-start; + } + + .sidebar .profile-details i, + .sidebar .profile-details svg{ + // height: 50px; + // min-width: 50px; + // text-align: center; + // line-height: 50px; + // font-size: 20px; + // cursor: pointer; } .sidebar.close .profile-details i, + .sidebar.close .profile-details svg, + .sidebar.close .profile-details button, .sidebar.close .profile-details .profile-name, .sidebar.close .profile-details .profile-job{ display: none; @@ -179,7 +254,7 @@ $sidebar-right-width-closed:0px; } .sidebar .navbar .navbar-item.fab{ - background-color:#ffdad9; + background-color: var(--accent-color); border-radius: $border-radius-lg; margin-bottom: 36px; transition: all 0.3s ease; @@ -188,10 +263,10 @@ $sidebar-right-width-closed:0px; .sidebar .navbar .navbar-item.fab:hover, .sidebar .navbar .navbar-item.fab:active, .sidebar .navbar .navbar-item.fab.active{ - background-color: #fbc5c3; + background-color: var(--accent-color-hover); } - .sidebar .navbar .navbar-item i{ + .sidebar .navbar .navbar-item i { height: 50px; min-width: 50px; text-align: center; @@ -202,6 +277,36 @@ $sidebar-right-width-closed:0px; transition: all 0.3s ease; } + // .sidebar .navbar .navbar-item svg { + // height: 26px; + // margin-block: 12px; + // min-width: 50px; + // text-align: center; + // line-height: 50px; + // color: var(--text-core-lc); + // font-size: 22px; + // cursor: pointer; + // transition: all 0.3s ease; + // } + .sidebar .navbar .navbar-leading-icon{ + display: flex; + align-items: center; + justify-content: center; + height: 50px; + min-width: 50px; + cursor: pointer; + transition: all 0.3s ease; + color: var(--text-core-lc); +} + +.sidebar .navbar .badge-content{ + opacity: 0; +} + +.sidebar.close .navbar .badge-content{ + opacity: 1; + } + .sidebar .navbar .navbar-item a{ display: flex; align-items: center; @@ -215,7 +320,6 @@ $sidebar-right-width-closed:0px; } .sidebar .navbar .navbar-item a .navbar-link:first-child { - padding-left: 1.5rem; } @@ -277,24 +381,7 @@ $sidebar-right-width-closed:0px; } - .badge-label { - border-radius: $base-border-radius; - font-size: $font-size-sm; - color: var(--text-core-hc); - display: flex; - justify-content: center; - align-items: center; - min-width: 20px; - height: 20px; - letter-spacing: 0; - padding: 12px; - pointer-events: auto; - text-indent: 0; - white-space: nowrap; - background-color: transparent; - transition: .3s cubic-bezier(.25,.8,.5,1); -} /*BOOTOMBAR*/ @include breakpoint-down(sm) { @@ -321,7 +408,11 @@ $sidebar-right-width-closed:0px; .sidebar.bottombar .profile-description, .sidebar.close.bottombar .profile-description, .sidebar.bottombar .profile-details i, - .sidebar.close.bottombar .profile-deteils i { + .sidebar.bottombar .profile-details svg, + .sidebar.bottombar .profile-details button, + .sidebar.close.bottombar .profile-deteils i, + .sidebar.close.bottombar .profile-deteils svg, + .sidebar.close.bottombar .profile-deteils button { display: none; } @@ -376,20 +467,32 @@ $sidebar-right-width-closed:0px; position: fixed; top: 0; right: 0; - height: 100vh; + height: 100svh; width: 100%; color: $text-core; background: var(--bg-core-primary-lighten); border-right: 1px solid rgba(0,0,0,.025); - border-radius: 0 $border-radius-lg $border-radius-lg 0; + border-radius: 0; z-index: $sidebar-right-zindex; transition: all 0.3s ease; @include breakpoint(sm) { + position: absolute; height: 100%; - position: relative; - width: $sidebar-right-width-open; + border-radius: $border-radius-lg; + width: 50%; } + + @include breakpoint(md) { + width: $sidebar-right-width-open; + } + + @include breakpoint(xl) { + height: 100%; + border-radius: 0 $border-radius-lg $border-radius-lg 0; + position: relative; + width: $sidebar-right-width-open; + } } .sidebar.right.close-r{ @@ -404,6 +507,11 @@ $sidebar-right-width-closed:0px; opacity: 0; pointer-events: none; } + +} + +.sidebar-header{ + padding-top: .75rem; } .sidebar.right .navbar .navbar-item:hover, @@ -412,6 +520,10 @@ $sidebar-right-width-closed:0px; background: var(--bg-core-primary); } + + + + // .scrollable { // display: block; // height: 100%; @@ -451,9 +563,6 @@ $sidebar-right-width-closed:0px; } .scroll-wrapper { - - - position: relative; width: auto; height: 100%; diff --git a/src/Connected.Components/Styles/components/_snackbar.scss b/src/Connected.Components/Styles/components/_snackbar.scss new file mode 100644 index 0000000..c4b2b78 --- /dev/null +++ b/src/Connected.Components/Styles/components/_snackbar.scss @@ -0,0 +1,203 @@ +@use '../globals/' as *; +@use '../util/' as *; + + +.snackbar-group{ + position: fixed; + z-index: $snackbar-zindex; + // top: 0; + // right: 0; + display: flex; + flex-direction: column; + overflow-y: auto; + max-height: 100svh; + //background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15)); + border: 1px solid rgba(255,255,255,.25); + border-radius: 0.6rem; + backdrop-filter: blur(25px) opacity(0.5); +} + +.snackbar{ + width: 350px; + //min-height: 60px; + background-color: var(--bg-core-primary-light); + margin: 0 .75rem .75rem; + padding: 1rem; + border-radius: $border-radius-lg; + filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15)); + transform: translateX(100%); + animation: slidein 0.3s ease-in-out forwards; +} + +@keyframes slidein { + 100%{ + transform: translateX(0); + } +} + +.snackbar:first-of-type{ + margin-top: 1rem; +} + + +.snackbar:after { + content: ""; + position: absolute; + inset: 0; + border-radius: $border-radius-lg; + opacity: .3; + pointer-events: none; +} + +.snackbar.danger:after, +.snackbar.danger .snackbar-leading-icon { + background-color: $danger; +} + +.snackbar.warning:after, +.snackbar.warning .snackbar-leading-icon { + background-color: $warning; +} + +.snackbar.success:after, +.snackbar.success .snackbar-leading-icon { + background-color: $success; +} + +.snackbar.info:after, +.snackbar.info .snackbar-leading-icon { + background-color: $info; +} + +.snackbar-content { + --height: 2rem; + + display: flex; + //align-items: center; + justify-content: center; + + .snackbar-leading-icon{ + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary); + height: var(--height); + aspect-ratio: 1 / 1; + overflow: hidden; + } + + .snackbar-leading-icon img{ + object-fit: cover; + height: var(--height); + aspect-ratio: 1 / 1; + } + + .snackbar-cta-icon{ + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: transparent; + cursor: pointer; + height: var(--height); + aspect-ratio: 1 / 1; + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .snackbar-message{ + font-size: $font-size-sm; + margin: 0 .85rem; + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + flex: 1; + } + + .snackbar-title{ + font-size: $font-size-sm; + font-weight: $font-weight-600; + color: $text-core-hc; + } + + .snackbar-action { + display: flex; + flex-wrap: wrap; + gap: .5rem; + margin-top: 0.5rem; + } + + .snackbar-action .btn{ + font-size: .85rem; + text-transform: none; + padding: .1rem .7rem; + border-radius: 0.35rem; + } + + .snackbar-cta-icon:hover{ + background-color: rgba(0,0,0,.15); + } +} + +.snackbar-group{ + &.top{ + top: 0; + } + &.right{ + right: 0; + } + &.bottom{ + bottom: 150px; + } + &.left{ + left: 0; + } + + + @include breakpoint(sm) { + &.top{ + top: 0; + } + &.right{ + right: 0; + } + &.bottom{ + bottom: 0; + } + &.left{ + left: 0; + } + } + + @include breakpoint(lg) { + &.top{ + top: 0; + } + &.right{ + right: 0; + } + &.bottom{ + bottom: 0; + } + &.left{ + left: 0; + } + } + } + + +.snackbar{ + width: 90%; + margin: 0 auto .75rem auto; + + + @include breakpoint(sm) { + width: 50vw; + margin: 0 .75rem .75rem; + } + + @include breakpoint(lg) { + width: 350px; + } + } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_top-loading-bar.scss b/src/Connected.Components/Styles/components/_top-loading-bar.scss new file mode 100644 index 0000000..8eac19e --- /dev/null +++ b/src/Connected.Components/Styles/components/_top-loading-bar.scss @@ -0,0 +1,41 @@ + +@use "../globals/" as *; +@use "../util/" as *; + +.top-loading-bar.active{ + position: fixed; + top: 0; + width: 100vw; + height: 2px; + z-index: $top-loading-bar-zindex; + background-color: transparent; + + } + + .top-loading-bar.active:before{ + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--bg-core-primary-dark); + transform-origin: left; + animation: animate 4s linear infinite; + } + + @keyframes animate { + 0%,20%{ + transform: scaleX(0); + } + 40%{ + transform: scaleX(1); + transform-origin: left; + } + 40.000001%,60%{ + transform: scaleX(1); + transform-origin: right; + } + 80%,100%{ + transform: scaleX(0); + transform-origin: right; + } +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/globals/_core.scss b/src/Connected.Components/Styles/globals/_core.scss index 7f71698..b48e108 100644 --- a/src/Connected.Components/Styles/globals/_core.scss +++ b/src/Connected.Components/Styles/globals/_core.scss @@ -39,43 +39,3 @@ margin-bottom: 1rem; } - /*ICONS*/ -.icon-default { - color: var(--bg-core-primary); -} - - -.disabled { - .icon-root, .svg-icon, .icon-default { - color: var(--bg-core-primary-light); - } -} - -.icon-root { - width: 1em; - height: 1em; - display: inline-block; - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - flex-shrink: 0; - user-select: none; - - &:focus { - outline: none; - } - - &.svg-icon { - fill: currentColor; - } -} - -.icon-size-small { - font-size: 1.25rem; -} - -.icon-size-medium { - font-size: 1.5rem; -} - -.icon-size-large { - font-size: 2.25rem; -} \ No newline at end of file diff --git a/src/Connected.Components/Styles/globals/_variables.scss b/src/Connected.Components/Styles/globals/_variables.scss index 1069ef2..9b4b3f8 100644 --- a/src/Connected.Components/Styles/globals/_variables.scss +++ b/src/Connected.Components/Styles/globals/_variables.scss @@ -25,6 +25,7 @@ $blue-50: #f2f4fd; $blue-100: #e5eafa; $blue-200: #cbd6f5; $blue-300: #b2c1f1; +$blue-300a: #b2c1f190; $blue-400: #98adec; $blue-500: #7e98e7; $blue-600: #657ab9; @@ -33,6 +34,8 @@ $blue-800: #323d5c; $blue-900: #191e2e; --bg-core-primary: #{$blue-300}; // body-background; + --bg-core-primary-a: #{$blue-300a}; // body-background; + --bg-core-primary-light: #{$blue-50}; // light --bg-core-primary-lighten: #{$blue-200}; // lighten --bg-core-primary-darken: #{$blue-400}; // darken; @@ -49,6 +52,9 @@ $blue-900: #191e2e; --border-core: #{$blue-200}; //border --element-bg-core: #{$element-bg-core}; // elements-background --element-fg-core: #{$element-fg-core}; // elements-foreground + + --accent-color: #ffdad9; + --accent-color-hover: #fbc5c3; } @@ -81,7 +87,10 @@ $violet-900: #212529; --border-core: #{$violet-200}; //border --element-bg-core: #{$element-bg-core}; // elements-background --element-fg-core: #{$element-fg-core}; // elements-foreground -} + + --accent-color: #ffdad9; + --accent-color-hover: #fbc5c3; + } @@ -132,10 +141,11 @@ $black: #000; $blue: #0dbcf0c4; $red: #ff7f78; $yellow: #ffb480; -$green: #8fcaa3; +$green: #80d89e; $cyan: #729fe9; + $primary: $blue; $secondary: $gray-400; $success: $green; @@ -147,7 +157,7 @@ $dark: $gray-900; //color palette $theme-colors: ( - //"core": $bg-core-primary, + // "core": $core, "primary": $primary, "secondary": $secondary, "success": $success, @@ -199,7 +209,12 @@ $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default; $transition: all 0.15s ease-in-out; //z-index +$appbar-zindex: 897; $sidebar-zindex: 899; $sidebar-right-zindex: 898; $backdrop-zindex: 999; +$dropdown-zindex: 10000; $modal-zindex: 10000; +$snackbar-zindex: 10001; +$top-loading-bar-zindex: 10002; + diff --git a/src/Connected.Components/Styles/util/_functions.scss b/src/Connected.Components/Styles/util/_functions.scss index 50c3ca7..1e89735 100644 --- a/src/Connected.Components/Styles/util/_functions.scss +++ b/src/Connected.Components/Styles/util/_functions.scss @@ -14,4 +14,6 @@ @else { @return #FFF; } -} \ No newline at end of file +} + +