From 24d6799f72eac9d20854dcd1b002a0f2072d0139 Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Fri, 17 Feb 2023 10:10:34 +0100 Subject: [PATCH 1/2] Add styles for buttons, sidebar, toggle, input, checkbox, radio, grid --- .../Pages/Demo.razor | 449 ++++++++++++++---- .../Styles/Connected.Components.scss | 8 +- .../Styles/components/_buttons.scss | 36 +- .../Styles/components/_checkbox.scss | 260 ++++++---- .../Styles/components/_grid.scss | 58 +++ .../Styles/components/_index.scss | 3 +- .../Styles/components/_inputs.scss | 71 ++- .../Styles/components/_radio.scss | 340 ++++++++++--- .../Styles/components/_sidebar.scss | 442 +++++++++++++---- .../Styles/components/_toggle.scss | 107 +++++ .../Styles/globals/_core.scss | 51 +- .../Styles/globals/_reset.scss | 12 +- .../Styles/globals/_typography.scss | 23 +- .../Styles/globals/_variables.scss | 131 +++-- .../Styles/layout/_css_documentation.scss | 36 +- .../Styles/layout/_document.scss | 7 +- .../Styles/util/_breakpoints.scss | 6 +- .../Styles/util/_colors.scss | 3 +- .../Styles/util/_functions.scss | 2 +- .../Styles/util/_utilities.scss | 29 ++ 20 files changed, 1623 insertions(+), 451 deletions(-) create mode 100644 src/Connected.Components/Styles/components/_toggle.scss diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor index f59846a..a5727b0 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor @@ -1,83 +1,123 @@ @page "/demo" - +
+
  • + + + Main navbar link 2 + +
    + 22 +
    +     +     + + Main navbar link 2 + +
    • +
  • + + + Main navbar link 3 + +
    + 22 +
    +     +     + + Main navbar link 3 + +
    • -
    +
  • + + + Main navbar link 4 + +
    + 22 +
    +     +     + + Main navbar link 4 + +
    • +
    + + + +
    + -
    -
    -
    - +
    - - - - - - -
    -
    +
    +
    +
    + + @* *@ + Open Sidebar -
    -
    - - Open Sidebar +
    +
    + + Open Filters +
    +

    Borders

    Use border utilities to quickly style the border, border color and border-radius of an element. @@ -152,19 +192,19 @@ 

    - 
-<span class="text-core">text-core</span>
-<span class="text-primary">text-primary</span>
-<span class="text-secondary">text-secondary</span>
-<span class="text-success">text-success</span>
-<span class="text-info">text-info</span>
-<span class="text-warning">text-warning</span>
-<span class="text-danger">text-danger</span>
-<span class="text-white">text-white</span>
-<span class="text-light">text-light</span>
-<span class="text-dark">text-dark</span>
-<span class="text-black">text-black</span>
-
    + + <span class="text-core">text-core</span> + <span class="text-primary">text-primary</span> + <span class="text-secondary">text-secondary</span> + <span class="text-success">text-success</span> + <span class="text-info">text-info</span> + <span class="text-warning">text-warning</span> + <span class="text-danger">text-danger</span> + <span class="text-white">text-white</span> + <span class="text-light">text-light</span> + <span class="text-dark">text-dark</span> + <span class="text-black">text-black</span> +

    Background color

    @@ -457,15 +497,15 @@

    Sizes

    - +
    - +
    -
    @@ -496,40 +536,110 @@

    -
    +
    + +
    + + + + + +
    + + @*
    - - + +
    - - + +
    - - + + +
    +
    *@ + + + +
    + + + + + +
    + @*
    - - + +
    - - + +
    - - + +
    -
    +
    *@ + + +
    + + + + + + +
    +
    @@ -541,7 +651,7 @@
    -
    +
    @@ -646,6 +756,7 @@ +
    Header
    @@ -678,11 +789,9 @@
    -
    - - +
    + +
    @@ -707,10 +816,166 @@
    12
    + +
    + + + + + + + +
      +
    • +
      +
      Product 1
      + 0023 001445669 1 +
      Product serial code
      +
      +
      +
      77,29
      +
      + +
      +
      + You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected +
      +
      +
      • + +
    • +
      +
      Product 2
      + 0023 001445669 2 +
      You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
      +
      +
      +
      727,29
      +
      +
      • +
    + + + + + + +
    - + @code { private string sidebarClosed { get; set; } = "close"; @@ -720,12 +985,20 @@ 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; } = "showMenu"; + private string NavClosed { get; set; } = ""; private void ToggleNav() { - NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "showMenu" : ""; + NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } -} +} \ No newline at end of file diff --git a/src/Connected.Components/Styles/Connected.Components.scss b/src/Connected.Components/Styles/Connected.Components.scss index 7829ff0..0bdfb75 100644 --- a/src/Connected.Components/Styles/Connected.Components.scss +++ b/src/Connected.Components/Styles/Connected.Components.scss @@ -1,4 +1,4 @@ -@import 'globals/_index'; -@import 'layout/_index'; -@import 'components/_index'; -@import 'util/_index'; \ No newline at end of file +@forward 'globals'; +@forward 'layout'; +@forward 'components'; +@forward 'util'; \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_buttons.scss b/src/Connected.Components/Styles/components/_buttons.scss index 5b46b0e..09c7678 100644 --- a/src/Connected.Components/Styles/components/_buttons.scss +++ b/src/Connected.Components/Styles/components/_buttons.scss @@ -12,12 +12,12 @@ user-select: none; background-color: $bg-color; border: 1px solid transparent; - padding: 0.375rem 1rem; + padding: 0.3rem 1.35rem; font-size: $base-font-size; text-transform: uppercase; line-height: $base-font-size * 1.5; text-decoration: none; - border-radius: $base-border-radius * 20; + border-radius: $border-radius-pill; transition: $transition; } @@ -46,12 +46,12 @@ } .btn-outline-#{$key} { // @include btn(); - color: $val; + color: darken($val, 10); background-color: transparent; - border: 1px solid $val; + border: 1px solid darken($val, 10); &:hover { - color: darken($val, 10); - border: 1px solid darken($val, 10); + color: darken($val, 30); + border: 1px solid darken($val, 30); } &:focus-visible, &.focus { @@ -67,24 +67,24 @@ } .btn.btn-sm { - font-size: $font-size-sm; - line-height: $font-size-sm * 1.5; - padding: 0.25rem 0.75rem; - border-radius: $base-border-radius; + font-size: .75rem; + line-height: $font-size-sm * 1.25; + padding: 0.4rem 1rem; + //border-radius: $base-border-radius; } .btn.btn-lg { font-size: $font-size-md; line-height: $font-size-md * 1.5; - padding: 0.5rem 1.25rem; - border-radius: $base-border-radius * 2.5; + padding: 0.5rem 1.65rem; + //border-radius: $base-border-radius * 2.5; } .btn.btn-block { font-size: $font-size-md; line-height: $font-size-md * 1.5; - padding: 0.5rem 1.25rem; - border-radius: $base-border-radius * 2.5; + padding: 0.5rem 1.5rem; + //border-radius: $base-border-radius * 2.5; display: block; width: 100%; } @@ -114,12 +114,12 @@ } .btn-outline-core { - color: var(--bg-core-primary) !important; + color: var(--bg-core-primary-darken) !important; background-color: transparent !important; - border: 1px solid var(--bg-core-primary) !important; + border: 1px solid var(--bg-core-primary-darken) !important; &:hover { - color: var(--bg-core-primary-darken) !important; - border: 1px solid var(--bg-core-primary-darken) !important; + color: var(--bg-core-primary-dark) !important; + border: 1px solid var(--bg-core-primary-dark) !important; } &:focus-visible, &.focus { diff --git a/src/Connected.Components/Styles/components/_checkbox.scss b/src/Connected.Components/Styles/components/_checkbox.scss index cf01d5d..908c33a 100644 --- a/src/Connected.Components/Styles/components/_checkbox.scss +++ b/src/Connected.Components/Styles/components/_checkbox.scss @@ -1,102 +1,188 @@ -$color3: #f4f4f4; -$color4: var(--bg-core-primary-darken); +$checkbox-primary-color: var(--bg-core-primary-darken); +$checkbox-secondary-color: #f4f4f4; +$checkbox-disabled-color: darken($checkbox-secondary-color, 25%); .checkbox-group { - margin: 0.5rem; - position:relative; - input[type="checkbox"] { - position: absolute; - opacity: 0; - + .checkbox-label { - &:before { - content: ""; - background: transparent; - border-radius: 0%; - border: 2px solid $color4; - display: inline-block; - width: 1.25em; - height: 1.25em; - position: relative; - top: .15rem; - margin-right: .75em; - vertical-align: top; - cursor: pointer; - text-align: center; - z-index: 1; - transition: all 250ms ease; - } - } - &:checked { - + .checkbox-label { - &:before { - background-color: $color4; - box-shadow: inset 0 0 0 2px $color3; + --width: 1.25rem; + --height: var(--width); + --inset: calc(var(--width) / 10); + + margin: 0.75rem 0; + width: max-content; + cursor: pointer; + position:relative; + display: flex; + align-items: center; + gap:.75rem; + z-index: 1; + + &.reversed{ + justify-content: space-between; + width: 100%; + + & :nth-child(1) {order:2;} + & :nth-child(2) {order:1;} } + + &.column{ + flex-direction: column; + gap:.25rem; + width: 100%; } - } - // &:checked { - // + .checkbox-label { - // &:after { - // background: $color3; - // z-index: 1; - // opacity: 1; - // scale: 0.25; - // clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); - - // } - // } - // } - &:focus { - + .checkbox-label { - &:before { - outline: none; - border-color: $color4; - } - } - } - &:disabled { - + .checkbox-label { - color: darken($color3, 25%); - pointer-events: none; - &:before { - box-shadow: inset 0 0 0 2px $color3; - border-color: darken($color3, 25%); - background: darken($color3, 25%); - } - } - } - + .checkbox-label { - &:empty { - &:before { - margin-right: 0; + + input[type="checkbox"] { + position: absolute; + opacity: 0; } - } - } +} + +.checkbox-fill { + position: relative; + display: inline-block; + width: var(--width); + height: var(--height); + background: transperent; + border: 2px solid $checkbox-primary-color; + transition: background 0.2s ease-in-out; } + +.checkbox-input:checked ~ .checkbox-fill { + background: var(--bg-core-primary-darken); + box-shadow: inset 0 0 0 var(--inset) $checkbox-secondary-color; + +} + +.checkbox-input:focus-within ~ .checkbox-fill { + outline: 1px solid $checkbox-primary-color; + } +.checkbox-input:disabled ~ .checkbox-fill { + box-shadow: inset 0 0 0 var(--inset) $checkbox-secondary-color; + border-color: $checkbox-disabled-color; + background: $checkbox-disabled-color; + pointer-events: none; + } + .checkbox-input:disabled ~ .checkbox-label { + color: $checkbox-disabled-color; + } -.checkbox-label:after { - content: ""; - display: inline-block; - width: 35px; - height: 35px; - border-radius: 50%; - background-color: transparent; - position: absolute; - left: -8px; - top: -6px; - scale: .75; - transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); -} + + .checkbox-fill::before { + content: ""; + display: inline-block; + width: calc(var(--width) * 1.8); + height: calc(var(--width) * 1.8); + border-radius: 50%; + background-color: transparent; + position: absolute; + z-index: -1; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + scale: .75; + transform-origin: left top; + transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s; + } + + .checkbox-fill:hover::before { + background: var(--bg-core-primary-lighten); + scale: 1; + opacity: .5; + } + + + + + +// $checkbox-primary-color: var(--bg-core-primary-darken); +// $checkbox-secondary-color: #f4f4f4; +// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%); + +// .checkbox-group { +// margin: 0.5rem; +// position:relative; + +// input[type="checkbox"] { +// position: absolute; +// opacity: 0; + +// + .checkbox-label { +// &:before { +// content: ""; +// background: transparent; +// border: 2px solid $checkbox-primary-color; +// display: inline-block; +// width: 1.25em; +// height: 1.25em; +// position: relative; +// top: .15rem; +// margin-right: .75em; +// vertical-align: top; +// cursor: pointer; +// text-align: center; +// z-index: 1; +// transition: all 250ms ease; +// } +// } +// &:checked { +// + .checkbox-label { +// &:before { +// background-color: $checkbox-primary-color; +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; + +// } +// } +// } +// &:focus { +// + .checkbox-label { +// &:before { +// outline: 1px solid $checkbox-primary-color; +// border-color: $checkbox-primary-color; +// } +// } +// } +// &:disabled { +// + .checkbox-label { +// color: darken($checkbox-secondary-color, 25%); +// pointer-events: none; +// &:before { +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; +// border-color: $checkbox-disabled-color; +// background: $checkbox-disabled-color; +// } +// } +// } +// + .checkbox-label { +// &:empty { +// &:before { +// margin-right: 0; +// } +// } +// } +// } +// } +// .checkbox-label:after { +// content: ""; +// display: inline-block; +// width: 35px; +// height: 35px; +// border-radius: 50%; +// background-color: transparent; +// position: absolute; +// left: -8px; +// top: -6px; +// scale: .75; +// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); +// } -.checkbox-label:hover:after { - background: var(--bg-core-primary-lighten); - scale: 1; - opacity: .5; -} \ No newline at end of file +// .checkbox-label:hover:after { +// background: var(--bg-core-primary-lighten); +// scale: 1; +// opacity: .5; +// } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_grid.scss b/src/Connected.Components/Styles/components/_grid.scss index 6a994b3..0bfe0d7 100644 --- a/src/Connected.Components/Styles/components/_grid.scss +++ b/src/Connected.Components/Styles/components/_grid.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @use "../util" as *; @use "../globals" as *; @@ -102,3 +104,59 @@ $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"); } } } + +/*grid-css*/ +$columns: 12; + +@mixin create-selectors($breakpoint: null) { + $infix: if($breakpoint == null, '', '-#{$breakpoint}'); + + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + grid-column-end: span $i; + padding: $base-padding; + } + .col-offset#{$infix}-#{$i} { + grid-column-start: $i + 1; + } + .row#{$infix}-#{$i} { + grid-row-end: span $i; + } + .row-offset#{$infix}-#{$i} { + grid-row-start: $i + 1; + } + } +} + + + +.row { + display: grid; + grid-template-columns: repeat($columns, 1fr); +} + +@include create-selectors; + +@each $breakpoint, $width in $breakpoints-up { + @media (min-width: $width) { + @include create-selectors($breakpoint); + } +} + +.collapse{ + max-height: 0; + overflow: hidden; + padding-top: 0; + padding-bottom: 0; + //opacity: 0; + transition: all 0.5s ease-out; +} + +.collapse.show{ + max-height: 25vh; + overflow: auto; + padding-top: initial; + padding-bottom: initial; + //opacity: 1; + transition: all 0.5s ease-in; +} \ 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 62e9a2a..fa4868c 100644 --- a/src/Connected.Components/Styles/components/_index.scss +++ b/src/Connected.Components/Styles/components/_index.scss @@ -3,4 +3,5 @@ @forward "sidebar"; @forward "radio"; @forward "inputs"; -@forward "checkbox"; \ No newline at end of file +@forward "checkbox"; +@forward "toggle"; \ 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 da9aad1..46c65af 100644 --- a/src/Connected.Components/Styles/components/_inputs.scss +++ b/src/Connected.Components/Styles/components/_inputs.scss @@ -10,7 +10,7 @@ $width: 100%; form{ display: block; - margin-top: 1rem; + //padding-top: 1rem; } .form-group{ @@ -36,12 +36,13 @@ form{ width: 100%; border: none; border-radius: 0; - border-bottom: 1px solid $border-core; + border-bottom: 1px solid var(--border-core); &:focus { outline: none; } &:focus ~ label.label-animated, - &:valid ~ label.label-animated { + &:valid ~ label.label-animated, + &:disabled ~ label.label-animated { top: -12px; font-size: $font-size-sm; color: var(--bg-core-primary-darken); @@ -204,31 +205,71 @@ select { height: auto; max-height: max-content; opacity: 1; - transition: all $trans-time ease-in-out; + pointer-events: initial; + + } + &:focus-within ~ .backdrop { + opacity: 1; + display: block; } } - .drop-down{ - position: absolute; - opacity: 0; - display: flex; - flex-direction: column; - top: 46px; - left: 0; - min-width: 100%; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + min-width: 80%; + width: 80%; height: 0; max-height: 0; - //padding: $base-padding; + 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; + +} + +.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; + } } + + + + + .dropdown-header { display: block; padding: 0.5rem 1.5rem; @@ -253,12 +294,12 @@ select { .dropdown-item:focus, .dropdown-item:hover { color: var(--text-core-hc); text-decoration: none; - background-color: var(--bg-core-primary-lighten); + background-color: var(--bg-core-primary-light); } .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; - border-top: 1px solid $border-core; + border-top: 1px solid var(--bg-core-primary-light); } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_radio.scss b/src/Connected.Components/Styles/components/_radio.scss index a9bcd14..e132d57 100644 --- a/src/Connected.Components/Styles/components/_radio.scss +++ b/src/Connected.Components/Styles/components/_radio.scss @@ -1,86 +1,276 @@ -$color1: #f4f4f4; -$color2: var(--bg-core-primary-darken); +$radio-primary-color: var(--bg-core-primary-darken); +$radio-secondary-color: #f4f4f4; +$radio-disabled-color: darken($radio-secondary-color, 25%); .radio-group { - margin: 0.5rem; - position:relative; - input[type="radio"] { - position: absolute; - opacity: 0; - + .radio-label { - &:before { - content: ""; - background: $color1; - border-radius: 100%; - border: 2px solid $color2; - display: inline-block; - width: 1.25em; - height: 1.25em; - position: relative; - top: .15rem; - margin-right: .75em; - vertical-align: top; - cursor: pointer; - text-align: center; - z-index: 1; - transition: all 250ms ease; - } - } - &:checked { - + .radio-label { - &:before { - background-color: $color2; - box-shadow: inset 0 0 0 2px $color1; - } - } - } - &:focus { - + .radio-label { - &:before { - outline: none; - border-color: $color2; - } - } - } - &:disabled { - + .radio-label { - color: darken($color1, 25%); - pointer-events: none; - &:before { - box-shadow: inset 0 0 0 2px $color1; - border-color: darken($color1, 25%); - background: darken($color1, 25%); + --width: 1.25rem; + --height: var(--width); + --inset: calc(var(--width) / 10); + + margin: 0.75rem 0; + width: max-content; + cursor: pointer; + position:relative; + display: flex; + align-items: center; + gap:.75rem; + z-index: 1; + + &.reversed{ + justify-content: space-between; + width: 100%; + + & :nth-child(1) {order:2;} + & :nth-child(2) {order:1;} } + + &.column{ + flex-direction: column; + gap:.25rem; + width: 100%; } - } - + .radio-label { - &:empty { - &:before { - margin-right: 0; + + input[type="radio"] { + position: absolute; + opacity: 0; } - } - } +} + +.radio-fill { + position: relative; + display: inline-block; + width: var(--width); + height: var(--height); + border-radius: 50%; + background: transperent; + border: 2px solid $radio-primary-color; + transition: background 0.2s ease-in-out; } + +.radio-input:checked ~ .radio-fill { + background: var(--bg-core-primary-darken); + box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color; + } +.radio-input:focus-within ~ .radio-fill { + outline: 1px solid $radio-primary-color; + +} +.radio-input:disabled ~ .radio-fill { + box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color; + border-color: $radio-disabled-color; + background: $radio-disabled-color; + pointer-events: none; + } -.radio-label:after { - content: ""; - display: inline-block; - width: 35px; - height: 35px; - border-radius: 50%; - background-color: transparent; - position: absolute; - left: -8px; - top: -6px; - scale: .75; - transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); -} + .radio-input:disabled ~ .radio-label { + color: $radio-disabled-color; + } + + + + + .radio-fill::before { + content: ""; + display: inline-block; + width: calc(var(--width) * 1.8); + height: calc(var(--width) * 1.8); + border-radius: 50%; + background-color: transparent; + position: absolute; + z-index: -1; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + scale: .75; + transform-origin: left top; + transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s; + } + + .radio-fill:hover::before { + background: var(--bg-core-primary-lighten); + scale: 1; + opacity: .5; + } + + + +// $checkbox-primary-color: var(--bg-core-primary-darken); +// $checkbox-secondary-color: #f4f4f4; +// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%); + +// .checkbox-group { +// margin: 0.5rem; +// position:relative; + +// input[type="checkbox"] { +// position: absolute; +// opacity: 0; + +// + .checkbox-label { +// &:before { +// content: ""; +// background: transparent; +// border: 2px solid $checkbox-primary-color; +// display: inline-block; +// width: 1.25em; +// height: 1.25em; +// position: relative; +// top: .15rem; +// margin-right: .75em; +// vertical-align: top; +// cursor: pointer; +// text-align: center; +// z-index: 1; +// transition: all 250ms ease; +// } +// } +// &:checked { +// + .checkbox-label { +// &:before { +// background-color: $checkbox-primary-color; +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; + +// } +// } +// } +// &:focus { +// + .checkbox-label { +// &:before { +// outline: 1px solid $checkbox-primary-color; +// border-color: $checkbox-primary-color; +// } +// } +// } +// &:disabled { +// + .checkbox-label { +// color: darken($checkbox-secondary-color, 25%); +// pointer-events: none; +// &:before { +// box-shadow: inset 0 0 0 2px $checkbox-secondary-color; +// border-color: $checkbox-disabled-color; +// background: $checkbox-disabled-color; +// } +// } +// } +// + .checkbox-label { +// &:empty { +// &:before { +// margin-right: 0; +// } +// } +// } +// } +// } + +// .checkbox-label:after { +// content: ""; +// display: inline-block; +// width: 35px; +// height: 35px; +// border-radius: 50%; +// background-color: transparent; +// position: absolute; +// left: -8px; +// top: -6px; +// scale: .75; +// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); +// } + +// .checkbox-label:hover:after { +// background: var(--bg-core-primary-lighten); +// scale: 1; +// opacity: .5; +// } + + +// $radio-primary-color: var(--bg-core-primary-darken); +// $radio-secondary-color: #f4f4f4; +// $radio-disabled-color: darken($radio-secondary-color, 25%); + +// .radio-group { +// margin: 0.5rem; +// position:relative; + +// input[type="radio"] { +// position: absolute; +// opacity: 0; + +// + .radio-label { +// &:before { +// content: ""; +// background: transparent; +// border-radius: 50%; +// border: 2px solid $radio-primary-color; +// display: inline-block; +// width: 1.25em; +// height: 1.25em; +// position: relative; +// top: .15rem; +// margin-right: .75em; +// vertical-align: top; +// cursor: pointer; +// text-align: center; +// z-index: 1; +// transition: all 250ms ease; +// } +// } +// &:checked { +// + .radio-label { +// &:before { +// background-color: $radio-primary-color; +// box-shadow: inset 0 0 0 2px $radio-secondary-color; +// } +// } +// } +// &:focus { +// + .radio-label { +// &:before { +// outline: 1px solid $radio-primary-color; +// border-color: $radio-primary-color; +// } +// } +// } +// &:disabled { +// + .radio-label { +// color: darken($radio-secondary-color, 25%); +// pointer-events: none; +// &:before { +// box-shadow: inset 0 0 0 2px $radio-secondary-color; +// border-color: $radio-disabled-color; +// background: $radio-disabled-color; +// } +// } +// } +// + .radio-label { +// &:empty { +// &:before { +// margin-right: 0; +// } +// } +// } +// } +// } + +// .radio-label:after { +// content: ""; +// display: inline-block; +// width: 35px; +// height: 35px; +// border-radius: 50%; +// background-color: transparent; +// position: absolute; +// left: -8px; +// top: -6px; +// scale: .75; +// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); +// } + +// .radio-label:hover:after { +// background: var(--bg-core-primary-lighten); +// scale: 1; +// opacity: .5; +// } -.radio-label:hover:after { - background: var(--bg-core-primary-lighten); - scale: 1; - opacity: .5; -} \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_sidebar.scss b/src/Connected.Components/Styles/components/_sidebar.scss index 1cb1779..44d3d65 100644 --- a/src/Connected.Components/Styles/components/_sidebar.scss +++ b/src/Connected.Components/Styles/components/_sidebar.scss @@ -2,28 +2,35 @@ @use '../util/' as *; +$sidebar-width-open:300px; +$sidebar-width-closed:75px; +$sidebar-right-width-open:300px; +$sidebar-right-width-closed:0px; + .sidebar{ position: fixed; + padding-inline: 0.75rem; height: 100vh; width: 100%; color: $text-core; - background: var(--bg-core-primary); - //margin: -2rem 2rem -2rem -2rem; + 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; z-index: 100; transition: all 0.3s ease; @include breakpoint(sm) { - height: calc(100% + 4rem); + height: 100%; position: relative; - width: 300px; + width: $sidebar-width-open; } } .sidebar.close{ width: 0; - transform: translateX(-75px); + transform: translateX($sidebar-width-closed); @include breakpoint(sm) { - width: 75px; + width: $sidebar-width-closed; transform: translateX(0); } } @@ -31,59 +38,80 @@ .main { width: calc(100% - 1.5rem) ; margin-inline:auto; + transition: all 0.3s ease; @include breakpoint (sm) { - width: calc(100% - 300px);; + width: calc(100% - $sidebar-width-open - $sidebar-right-width-open); padding: 2rem; } } .main.close{ @include breakpoint (sm) { - width: calc(100% - 75px); + width: calc(100% - $sidebar-width-closed - $sidebar-width-open); + } + } + + .main.close-r{ + @include breakpoint (sm) { + width: calc(100% - $sidebar-right-width-open); } } + .main.close.close-r{ + @include breakpoint (sm) { + width: calc(100% - $sidebar-right-width-closed - $sidebar-width-closed); + } + } + + //profile .sidebar .profile-details{ display: flex; justify-content: space-between; align-items: center; - color: #fff; - background-color: rgba(0,0,0,.6); - } + padding-top: 0; + //color: #fff; + //background-color: var(--bg-core-primary); + border-radius: $border-radius-lg 0 0 0; + transition: all 0.3s ease; + @include breakpoint (sm) { + padding-top: 12px; + } +} .sidebar .profile-details .avatar{ - min-width: calc(70px - 1rem); + min-width: 50px; text-align: center; - margin: 1rem 0 1rem 1rem; - - } + margin-right: 12px; +} .sidebar .profile-details img{ - height: 40px; - width: 40px; + height: 50px; + width: 50px; object-fit: cover; border-radius: 50%; - //transition: all 0.5s ease; - } + padding: 5px; +} - .sidebar .profile-details .name-job{ - margin-right: auto; - +.sidebar .profile-details .profile-description { + margin-right: auto; } .sidebar .profile-details .profile-name{ font-weight: 600; white-space: nowrap; + color:var(--text-core-hc) } + .sidebar .profile-details .profile-job{ font-size: 12px; font-weight: 500; + color:var(--text-core-lc) } .sidebar .profile-details i{ height: 50px; - min-width: 70px; + min-width: 50px; text-align: center; line-height: 50px; font-size: 20px; @@ -94,137 +122,359 @@ .sidebar.close .profile-details .profile-name, .sidebar.close .profile-details .profile-job{ display: none; - } +} - //links - .sidebar .nav-links{ - height: 100%; + /*NAV*/ + .sidebar nav{ + position: sticky; + top: 0; + +} + + + .sidebar .navbar{ + height: auto; + //padding: 12px; padding: 0; overflow: auto; + display: flex; + flex-direction: column; } - .sidebar.close .nav-links{ + + .sidebar.close .navbar{ overflow: visible; } - .sidebar .nav-links::-webkit-scrollbar{ + + .sidebar .navbar::-webkit-scrollbar{ display: none; } - .sidebar .nav-links li{ + + .sidebar .navbar .navbar-header{ + display: block; + padding: 0.5rem 0; + margin-bottom: 0; + font-size: $font-size-sm; + color: var(--text-core-lc); + white-space: nowrap; + } + + + .sidebar .navbar .navbar-item{ position: relative; list-style: none; transition: all 0.4s ease; + margin-bottom: 12px; + line-height: 50px; + border-radius: $border-radius-pill; } - .sidebar .nav-links li:hover{ + + .sidebar .navbar .navbar-item:hover, + .sidebar .navbar .navbar-item:active, + .sidebar .navbar .navbar-item.active{ background: var(--bg-core-primary-lighten); } - .sidebar .nav-links li .iocn-link{ - display: flex; - align-items: center; - justify-content: space-between; + + .sidebar.close .navbar .navbar-item{ + border-radius: 50%; + } + + .sidebar .navbar .navbar-item.fab{ + background-color:#ffdad9; + border-radius: $border-radius-lg; + margin-bottom: 36px; + transition: all 0.3s ease; } - .sidebar.close .nav-links li .iocn-link{ - display: block + + .sidebar .navbar .navbar-item.fab:hover, + .sidebar .navbar .navbar-item.fab:active, + .sidebar .navbar .navbar-item.fab.active{ + background-color: #fbc5c3; } - .sidebar .nav-links li i{ + + .sidebar .navbar .navbar-item i{ height: 50px; - min-width: 70px; + min-width: 50px; text-align: center; line-height: 50px; - color: var(--text-core-vc); - font-size: 20px; + color: var(--text-core-lc); + font-size: 22px; cursor: pointer; transition: all 0.3s ease; } - .sidebar .nav-links li.showMenu i.arrow{ - transform: rotate(-180deg); - } - .sidebar.close .nav-links i.arrow{ - display: none; - } - .sidebar .nav-links li a{ + + .sidebar .navbar .navbar-item a{ display: flex; align-items: center; text-decoration: none; } - .sidebar .nav-links li a .link_name{ + + .sidebar .navbar .navbar-item a .navbar-link{ flex: 1 0 auto; - font-weight: 400; + font-weight: $font-weight-400; color: var(--text-core); - //transition: all 0.4s ease; } - .sidebar.close .nav-links li a .link_name{ + + .sidebar .navbar .navbar-item a .navbar-link:first-child { + + padding-left: 1.5rem; +} + + .sidebar.close .navbar .navbar-item a .navbar-link{ opacity: 0; pointer-events: none; + display: none; + } + .sidebar .navbar .navbar-item a .navbar-link.navbar-link-detail{ + flex: 0 0 auto; + font-weight: $font-weight-600; + color: var(--text-core-hc); + text-align: right; + padding-right: 1rem; } - - - - .sidebar .nav-links li .sub-menu{ - padding: 6px 6px 14px 70px; - margin-top: -10px; - background:var(--bg-core-primary-lighten); - display: none; - } - .sidebar .nav-links li.showMenu .sub-menu{ - display: block; - } - .sidebar .nav-links li .sub-menu a{ - color: var(--text-core); - font-size: 15px; - padding: 5px 0; - white-space: nowrap; - - transition: all 0.3s ease; - } - .sidebar .nav-links li .sub-menu a:hover{ - color: var(--bg-core-primary-darken); - } - .sidebar.close .nav-links li .sub-menu{ +/*TOOLTIP*/ + .sidebar.close .navbar .navbar-item .navbar-tooltip{ position: absolute; - left: 100%; - top: -10px; + background: #fff; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); + width: max-content; + left: calc(100% + 12px); + top: 0; margin-top: 0; padding: 10px 20px; - border-radius: 0 6px 6px 0; + border-radius: $border-radius-lg; opacity: 0; display: block; pointer-events: none; transition: 0s; } - .sidebar.close .nav-links li:hover .sub-menu{ - top: 0; + + .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{ + left: calc(100% + 24px); opacity: 1; pointer-events: auto; transition: all 0.4s ease; } - .sidebar .nav-links li .sub-menu .link_name{ - display: none; - } - .sidebar.close .nav-links li .sub-menu .link_name{ -font-weight: 600; + + .sidebar.close .navbar .navbar-tooltip { opacity: 1; display: block; } - .sidebar .nav-links li .sub-menu.blank{ - opacity: 1; - pointer-events: auto; - padding: 3px 20px 6px 16px; - opacity: 0; - pointer-events: none; + + .sidebar .navbar .navbar-tooltip { + display: none; } - .sidebar .nav-links li:hover .sub-menu.blank{ - top: 50%; - transform: translateY(-50%); + + + + .sidebar-divider { + height: 0; + margin: 0.5rem 0; + overflow: hidden; + border-top: 1px solid var(--border-core-lighten); } + .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) { + .main { + margin-bottom: rem(75); + } - + .sidebar.bottombar, + .sidebar.close.bottombar { + position: fixed; + bottom: 0; + transform: translateX(0); + display: flex; + align-items: center; + height: rem(75); + width: 100%; + color: $text-core; + background: var(--bg-core-primary-light); + border-radius: 0; + z-index: 100; + + } + .sidebar.bottombar .profile-description, + .sidebar.close.bottombar .profile-description, + .sidebar.bottombar .profile-details i, + .sidebar.close.bottombar .profile-deteils i { + display: none; + } + + .sidebar.bottombar nav, + .sidebar.close.bottombar nav { + position: relative; + width: 100%; + + } + + .sidebar.bottombar .navbar, + .sidebar.close.bottombar .navbar { + padding: 0; + flex-direction: row; + justify-content: space-around; + } + + .sidebar.bottombar .navbar .navbar-item, + .sidebar.close.bottombar .navbar .navbar-item { + margin-bottom: 0; + } + + .sidebar.bottombar .navbar-link, + .sidebar.close.bottombar .navbar-link { + display: none; + } + + .sidebar.bottombar .navbar .navbar-item .navbar-tooltip, + .sidebar.close.bottombar .navbar .navbar-item .navbar-tooltip { + display: none; + } + + .sidebar.bottombar .navbar-item.fab, + .sidebar.close.bottombar .navbar-item.fab { + position: absolute; + right: 1rem; + top: -4rem; + } + + .sidebar.bottombar .sidebar-divider, + .sidebar.close.bottombar .sidebar-divider { + display: none; + } + + +} + +/*RIGHT SIDEBAR*/ + + +.sidebar.right{ + position: fixed; + top: 0; + right: 0; + height: 100vh; + 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; + z-index: 99; + transition: all 0.3s ease; + + @include breakpoint(sm) { + height: 100%; + position: relative; + width: $sidebar-right-width-open; + } +} + +.sidebar.right.close-r{ + width: 0; + transform: translateX($sidebar-right-width-closed); + padding: 0; + + @include breakpoint(sm) { + width: $sidebar-right-width-closed; + transform: translateX(0); + z-index: -1; + opacity: 0; + pointer-events: none; + } +} + +.sidebar.right .navbar .navbar-item:hover, +.sidebar.right .navbar .navbar-item:active, +.sidebar.right .navbar .navbar-item.active{ + background: var(--bg-core-primary); +} +// .scrollable { +// display: block; +// height: 100%; +// max-height: 100vh; +// min-height: 0; +// } + +// .scroll-wrapper { +// position: relative; +// width: 100%; +// height: 100%; +// background-color: turquoise; +// } + +// .scroll-container { +// position: relative; +// width: 100%; +// height: 100%; +// touch-action: pan-y; +// overflow-x: hidden; +// overflow-y: auto; +// } + +// .scroll-content { +// height: auto; +// transform: none; +// position: relative; +// min-height: 100%; +// } + +.scrollable { + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + max-height: calc(100vh - 50px); +} + +.scroll-wrapper { + + + + position: relative; + width: auto; + height: 100%; + pointer-events: none; +} + .scroll-container { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + max-height: 100%; + overflow: hidden; + pointer-events: auto; + background-clip: padding-box; + } + + .scroll-content { + position: relative; + overflow-y: auto; + flex: 1 1 auto; + } \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_toggle.scss b/src/Connected.Components/Styles/components/_toggle.scss new file mode 100644 index 0000000..ce32d17 --- /dev/null +++ b/src/Connected.Components/Styles/components/_toggle.scss @@ -0,0 +1,107 @@ +@use "../globals/" as *; +@use "../util/" as *; + +$toggle-primary-color: var(--bg-core-primary-darken); +$toggle-secondary-color: #ddd; +$toggle-disabled-color: darken($toggle-secondary-color, 25%); + +.toggle-group { + --width: 42px; + --height: calc(var(--width) / 2); + --border-radius: calc(var(--height) / 2); + + margin: 0.75rem 0; + width: max-content; + cursor: pointer; + position:relative; + display: flex; + align-items: center; + gap:.75rem; + + &.reversed{ + justify-content: space-between; + width: 100%; + + & :nth-child(1) {order:2;} + & :nth-child(2) {order:1;} + } + + &.column{ + flex-direction: column; + gap:.25rem; + width: 100%; + } + + input[type="checkbox"] { + position: absolute; + opacity: 0; + } +} + + .toggle-fill { + position: relative; + width: var(--width); + height: var(--height); + border-radius: var(--border-radius); + background: $toggle-secondary-color; + //margin-right: .75rem; + transition: background 0.2s ease-in-out; + } + + .toggle-input:checked ~ .toggle-fill { + background: var(--bg-core-primary-darken); + } + + .toggle-input:focus-within ~ .toggle-fill { + outline: 1px solid $toggle-primary-color; +} + + .toggle-input:disabled ~ .toggle-fill { + background: $toggle-disabled-color; + pointer-events: none; + } + + .toggle-input:disabled ~ .toggle-label { + color: $toggle-disabled-color; + } + + .toggle-fill::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + height: calc(var(--height) - 4px); + width: calc(var(--height) - 4px); + background: #ffffff; + border-radius: var(--border-radius); + transition: transform 0.2s; + } + + .toggle-input:checked ~ .toggle-fill::after { + transform: translateX(var(--height)); + } + + .toggle-fill::before { + content: ""; + display: inline-block; + width: calc(var(--height) * 1.8); + height: calc(var(--height) * 1.8); + border-radius: 50%; + background-color: transparent; + position: absolute; + left: calc(30% - var(--height)); + top: calc(60% - var(--height)); + scale: .75; + transform-origin: center; + transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s; + } + + .toggle-fill:hover::before { + background: var(--bg-core-primary-lighten); + scale: 1; + opacity: .5; + } + + .toggle-input:checked ~ .toggle-fill::before { + transform: translateX(var(--height)); + } \ 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 09398c4..7f71698 100644 --- a/src/Connected.Components/Styles/globals/_core.scss +++ b/src/Connected.Components/Styles/globals/_core.scss @@ -8,15 +8,15 @@ body{ background: linear-gradient(to left, var(--bg-core-primary-lighten), var(--bg-core-end)); font-family: 'Open Sans', sans-serif; font-size: $base-font-size; - //font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9+0.1vw, $base-font-size); + //font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9 + 0.1vw, $base-font-size); color: var(--text-core); @include breakpoint(sm){ background: linear-gradient(to left, var(--bg-core-primary), var(--bg-core-end)); } } - + //hr classes hr { border-top: 1px solid var(--border-core); @@ -25,11 +25,11 @@ hr { background-color:var(--border-core); color: var(--border-core); } - + //section section, -.section{ -margin-bottom: 1rem; +.section{ +margin-bottom: 1rem; } @@ -39,4 +39,43 @@ margin-bottom: 1rem; } - \ No newline at end of file + /*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/_reset.scss b/src/Connected.Components/Styles/globals/_reset.scss index e3ad22f..ab7be73 100644 --- a/src/Connected.Components/Styles/globals/_reset.scss +++ b/src/Connected.Components/Styles/globals/_reset.scss @@ -1,7 +1,5 @@ /* Box sizing rules */ -*, -*::before, -*::after { +*, *::before, *::after { box-sizing: border-box; } @@ -48,7 +46,13 @@ a:not([class]) { text-decoration-skip-ink: auto; } -a, a:hover { +a { + text-decoration: none; + transition: color 0.15s ease-in-out; +} + + +a:hover { text-decoration: none; transition: color 0.15s ease-in-out; } diff --git a/src/Connected.Components/Styles/globals/_typography.scss b/src/Connected.Components/Styles/globals/_typography.scss index c58e688..68089d9 100644 --- a/src/Connected.Components/Styles/globals/_typography.scss +++ b/src/Connected.Components/Styles/globals/_typography.scss @@ -113,7 +113,7 @@ p, @each $property, $map in $fw { $prefix: map-get($map, "prefix"); - $values: map-get($map, "values"); + $values: map-get($map, "values"); @each $k, $v in $values { @if $breakName != "" { @@ -157,6 +157,27 @@ p, text-overflow: ellipsis; } +.text-hc { + color: var(--text-core-hc); +} + +.text-lc { + color: var(--text-core-lc); +} + +a.text-link{ + color: var(--bg-core-primary-dark); + border-bottom:1px dotted; + transition: all 0.15s ease-in-out; +} + +a.text-link:hover{ + color: var(--bg-core-primary-darken); + border-bottom:none; + + +} + // $fs: ( // "font-size": ( // "prefix": "fs", diff --git a/src/Connected.Components/Styles/globals/_variables.scss b/src/Connected.Components/Styles/globals/_variables.scss index 542fd2e..49b65e4 100644 --- a/src/Connected.Components/Styles/globals/_variables.scss +++ b/src/Connected.Components/Styles/globals/_variables.scss @@ -1,8 +1,8 @@ @use "sass:math"; //theme colors -$bg-core-primary: hsl(225, 68%, 85%); // body-background; -$bg-core-start: $bg-core-primary; +//$bg-core-primary: hsl(225, 68%, 85%); // body-background; +//$bg-core-start: $bg-core-primary; $bg-core-end: #fafafa; $text-core-hc: #212121; //title @@ -10,67 +10,112 @@ $text-core: #525252; //text $text-core-lc: #7d7d80; //metadata $text-core-vc: #969699; //ikona-text -$border-core: lighten($bg-core-primary, 7%); //border +//$border-core: lighten($bg-core-primary, 7%); //border $element-bg-core: rgba(255, 255, 255, 0.5); // elements-background $element-fg-core: rgba(255, 255, 255, 0.25); // elements-foreground + + + + + + :root { - --bg-core-primary: #{$bg-core-primary}; // body-background; - --bg-core-primary-lighten: hsl(225, 68%, 90%); // lighten - --bg-core-primary-darken: hsl(225, 68%, 75%); // darken; - --bg-core-start: #{$bg-core-primary}; - --bg-core-end: #{$bg-core-end}; +$blue-50: #f2f4fd; +$blue-100: #e5eafa; +$blue-200: #cbd6f5; +$blue-300: #b2c1f1; +$blue-400: #98adec; +$blue-500: #7e98e7; +$blue-600: #657ab9; +$blue-700: #4c5b8b; +$blue-800: #323d5c; +$blue-900: #191e2e; + + --bg-core-primary: #{$blue-300}; // body-background; + --bg-core-primary-light: #{$blue-50}; // light + --bg-core-primary-lighten: #{$blue-200}; // lighten + --bg-core-primary-darken: #{$blue-400}; // darken; + --bg-core-primary-dark: #{$blue-600}; // dark; + --bg-core-start: #{$blue-300}; // body-background + --bg-core-end: #{$bg-core-end}; // body-background --text-core-hc: #{$text-core-hc}; //title - --text-core: #{$text-core}; //text + --text-core: #{$blue-800}; //text --text-core-lc: #{$text-core-lc}; //metadata --text-core-vc: #{$text-core-vc}; //ikona-text - --bg-core-primary-lighter: hsl(225, 68%, 90%); //hover - --border-core: #{$border-core}; //border + --border-core-lighten:#{$blue-100}; //border-lighten + --border-core: #{$blue-200}; //border --element-bg-core: #{$element-bg-core}; // elements-background --element-fg-core: #{$element-fg-core}; // elements-foreground } -.pink, -:root:has(pink:checked) { - --bg-core-primary: hsl(310 50% 90%); - --bg-core-primary-lighten: hsl(310 50% 95%); //lighten - --bg-core-primary-darken: hsl(310 50% 85%); //darken - --element-bg-core: hsl(310 50% 100% / 50%); - --text-core: hsl(310 50% 15%); - --border-core: hsl(310 50% 90%); + +.pink { +$violet-50: #f0eef6; +$violet-100: #e1dced; +$violet-200: #c2b9db; +$violet-300: #a496c8; +$violet-400: #8573b6; +$violet-500: #6750a4; +$violet-600: #524083; +$violet-700: #3e3062; +$violet-800: #151021; +$violet-900: #212529; + + --bg-core-primary: #{$violet-300}; // body-background; + --bg-core-primary-light: #{$violet-50}; // light + --bg-core-primary-lighten: #{$violet-200}; // lighten + --bg-core-primary-darken: #{$violet-400}; // darken; + --bg-core-primary-dark: #{$violet-600}; // dark; + --bg-core-start: #{$violet-200}; // body-background + --bg-core-end: #{$bg-core-end}; // body-background + + --text-core-hc: #{$text-core-hc}; //title + --text-core: #{$violet-800}; //text + --text-core-lc: #{$text-core-lc}; //metadata + --text-core-vc: #{$text-core-vc}; //ikona-text + + --border-core-lighten:#{$violet-100}; //border-lighten + --border-core: #{$violet-200}; //border + --element-bg-core: #{$element-bg-core}; // elements-background + --element-fg-core: #{$element-fg-core}; // elements-foreground } -.dark, -:root:has(dark:checked) { + + +.dark { --bg-core-primary: hsl(0 0% 10% / 100%); // body-background; - --bg-core-primary-lighten: hsl(0 0% 15% / 100%); // lighten - --bg-core-primary-darken: hsl(0 0% 5% / 100%); // darken; - --bg-core-start: var(--bg-core-primary); - --bg-core-end: hsl(0 0% 15% / 100%); + --bg-core-primary-light: hsl(0 0% 15% / 100%); // light + --bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten + --bg-core-primary-darken: hsl(0 0% 7% / 100%); // darken; + --bg-core-primary-dark: hsl(0 0% 5% / 100%); // dark; + --bg-core-start: hsl(0 0% 10% / 100%); // body-background + --bg-core-end: hsl(0 0% 15% / 100%); // body-background --text-core-hc: hsl(0 0% 97% / 100%); //title --text-core: hsl(0 0% 73% / 100%); //text --text-core-lc: hsl(0 0% 53% / 100%); //metadata --text-core-vc: hsl(0 0% 60% / 100%); //ikona-text - --border-core: hsl(0 0% 27% / 100%); //border + --border-core-lighten:hsl(0 0% 17% / 100%); //border-lighten + --border-core: hsl(0 0% 20% / 100%); //border --element-bg-core: hsl(0 0% 13% / 100%); // elements-background - --element-fg-core: hsl(0 0% 20% / 100%); // elements-foreground + --element-fg-core: hsl(0 0% 15% / 100%); // elements-foreground } // colors -$blue: #0d6efd; -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #d63384; -$red: #dc3545; -$orange: #fd7e14; -$yellow: #ffc107; -$green: #00c851; //#198754; -$teal: #20c997; -$cyan: #0dcaf0; +// $blue: #0d6efd; +// $indigo: #6610f2; +// $purple: #6f42c1; +// $pink: #d63384; +// $red: #dc3545; +// $orange: #fd7e14; +// $yellow: #ffc107; +// $green: #00c851; //#198754; +// $teal: #20c997; +// $cyan: #0dcaf0; $white: #fff; $gray-100: #f8f9fa; @@ -84,13 +129,20 @@ $gray-800: #343a40; $gray-900: #212529; $black: #000; +$blue: #0dbcf0c4; +$red: #ff7f78; +$yellow: #ffb480; +$green: #8fcaa3; +$cyan: #729fe9; + + $primary: $blue; -$secondary: $gray-600; +$secondary: $gray-400; $success: $green; $info: $cyan; $warning: $yellow; $danger: $red; -$light: $gray-400; +$light: $gray-300; $dark: $gray-900; //color palette @@ -138,6 +190,7 @@ $font-weight-800: 800; // extra bold $base-border-radius: 0.3rem; $border-radius-sm: math.div($base-border-radius, 2); $border-radius-lg: $base-border-radius * 2; +$border-radius-pill: 100vw; // box-shadow $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default; diff --git a/src/Connected.Components/Styles/layout/_css_documentation.scss b/src/Connected.Components/Styles/layout/_css_documentation.scss index e5e9329..ec69af6 100644 --- a/src/Connected.Components/Styles/layout/_css_documentation.scss +++ b/src/Connected.Components/Styles/layout/_css_documentation.scss @@ -1,16 +1,21 @@ @use "../globals" as *; + +.color-picker-container { + margin-bottom: 1rem; +} + .color-picker > fieldset { border: 0; display: flex; - flex-direction: column; - gap: 2rem; + //flex-direction: column; + gap: 1.5rem; width: fit-content; //background: #fff; - padding: 1rem 3rem; - position: fixed; - top: 1rem; - right: 0; + padding: 0.5rem 1.5rem; + //position: fixed; + //top: 1rem; + //right: 0; border-radius: 0 0 1rem 1rem; } @@ -31,14 +36,15 @@ background-color: var(--radio-color); } -.color-picker input[type="radio"]light { +.color-picker input[type="radio"] { --radio-color: hsl(225, 68%, 85%); } -.color-picker input[type="radio"]pink { - --radio-color: pink; + +.color-picker input[type="radio"] { + --radio-color: rebeccapurple; } -.color-picker input[type="radio"]dark { +.color-picker input[type="radio"] { --radio-color: #232323; } @@ -58,8 +64,16 @@ background: var(--element-fg-core); border: 1px solid; border-color: var(--border-core); - color: inherit; + //color: inherit; border-radius: $border-radius-lg; } +.simple-grid-wraper{ + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + padding: calc($base-padding * 4); + line-height: 1.4; +} + diff --git a/src/Connected.Components/Styles/layout/_document.scss b/src/Connected.Components/Styles/layout/_document.scss index dc8e0a9..46f1dcc 100644 --- a/src/Connected.Components/Styles/layout/_document.scss +++ b/src/Connected.Components/Styles/layout/_document.scss @@ -20,6 +20,10 @@ //test-sidebar +.document-container { + background-color: var(--element-bg-core); +} + .document-container { //padding: rem(32); @@ -33,7 +37,8 @@ border-radius: $border-radius-lg; // padding: rem(32); box-shadow: $base-box-shadow; - overflow: hidden; + //overflow: hidden; + overflow-x: clip; } } \ No newline at end of file diff --git a/src/Connected.Components/Styles/util/_breakpoints.scss b/src/Connected.Components/Styles/util/_breakpoints.scss index a962b65..16e92e3 100644 --- a/src/Connected.Components/Styles/util/_breakpoints.scss +++ b/src/Connected.Components/Styles/util/_breakpoints.scss @@ -2,7 +2,8 @@ $breakpoints-up: ( - "": "", + "": "1", + //'xs': rem(1), 'sm': rem(576), 'md': rem(768), 'lg': rem(992), @@ -11,7 +12,8 @@ $breakpoints-up: ( // 639px, 1149px, 1399px $breakpoints-down: ( - "": "", + "": "0", + //'xs': rem(0), 'sm': rem(575), 'md': rem(767), 'lg': rem(991), diff --git a/src/Connected.Components/Styles/util/_colors.scss b/src/Connected.Components/Styles/util/_colors.scss index e973e63..40395f7 100644 --- a/src/Connected.Components/Styles/util/_colors.scss +++ b/src/Connected.Components/Styles/util/_colors.scss @@ -58,8 +58,7 @@ } //change --bg-core-primary for dark -.dark, -:root:has(dark:checked) { +.dark { $val: hsl(216 100% 70%); .text-core { diff --git a/src/Connected.Components/Styles/util/_functions.scss b/src/Connected.Components/Styles/util/_functions.scss index 047cb5b..063b94f 100644 --- a/src/Connected.Components/Styles/util/_functions.scss +++ b/src/Connected.Components/Styles/util/_functions.scss @@ -8,7 +8,7 @@ // change text color based on background color - set-color(color-value) @function set-color($color) { - @if (lightness($color) > 55) { + @if (lightness($color) > 74) { @return #333; } @else { diff --git a/src/Connected.Components/Styles/util/_utilities.scss b/src/Connected.Components/Styles/util/_utilities.scss index ae5f41f..aba34cb 100644 --- a/src/Connected.Components/Styles/util/_utilities.scss +++ b/src/Connected.Components/Styles/util/_utilities.scss @@ -160,6 +160,35 @@ } } + + //Position classes + $positionProps: ( + "absolute", + "fixed", + "inherit", + "initial", + "relative", + "revert", + "static", + "sticky", + "unset", + ); + + @each $pos in $positionProps { + @if $breakName != "" { + @media (min-width: $breakValue) { + .position-#{$breakName}-#{$pos} { + position: #{$pos} !important; + } + } + } @else { + .position-#{$pos} { + position: #{$pos} !important; + } + } + } + + //Display classes $displayProps: ( "block", From 9726016f2105569ea1ca515b70475fa43aa3a6c6 Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Fri, 17 Feb 2023 10:14:55 +0100 Subject: [PATCH 2/2] Add new components --- src/Connected.Components.Showcase.Runner/wwwroot/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Connected.Components.Showcase.Runner/wwwroot/index.html b/src/Connected.Components.Showcase.Runner/wwwroot/index.html index 1c123c0..3a6c8ca 100644 --- a/src/Connected.Components.Showcase.Runner/wwwroot/index.html +++ b/src/Connected.Components.Showcase.Runner/wwwroot/index.html @@ -3,6 +3,7 @@ + Connected.Components.Showcase.Runner @@ -27,4 +28,4 @@ - + \ No newline at end of file