From 6d18a84a0dbcdabbc2dd137b5fb7216b97b6750b Mon Sep 17 00:00:00 2001 From: Jordan-Tompit Date: Wed, 22 Feb 2023 10:40:59 +0100 Subject: [PATCH] added styles to classes --- .../Pages/Demo.razor | 1468 ++++++++++------- .../Components/Link.razor | 7 - .../Components/Link.razor.cs | 49 - .../Styles/components/_chip.scss | 218 +++ .../Styles/components/_grid.scss | 209 ++- .../Styles/components/_index.scss | 4 +- .../Styles/components/_modal.scss | 229 +++ .../Styles/components/_sidebar.scss | 6 +- .../Styles/globals/_variables.scss | 6 + .../Styles/layout/_css_documentation.scss | 7 - .../Styles/util/_functions.scss | 4 +- 11 files changed, 1502 insertions(+), 705 deletions(-) delete mode 100644 src/Connected.Components/Components/Link.razor delete mode 100644 src/Connected.Components/Components/Link.razor.cs create mode 100644 src/Connected.Components/Styles/components/_chip.scss create mode 100644 src/Connected.Components/Styles/components/_modal.scss diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor index a5727b0..eba1596 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor @@ -103,95 +103,95 @@ -
-
-
- - @* *@ - Open Sidebar +
+
+ + @* *@ + Open Sidebar -
-
- - Open Filters +
+ +
+ + Open Filters +
+
+
+

Borders

+

Use border utilities to quickly style the border, border color and border-radius of an element. + Great for images, buttons, or any other element. Responsive classes are available that use the + same viewport width breakpoints as the grid system. +

+
+

Position

+
+
b-1
+ bt-1 + br-1 + bb-1 + bl-1 + bx-1 + by-1
-
-

Borders

-

Use border utilities to quickly style the border, border color and border-radius of an element. - Great for images, buttons, or any other element. Responsive classes are available that use the - same viewport width breakpoints as the grid system. -

-
-

Position

-
-
b-1
- bt-1 - br-1 - bb-1 - bl-1 - bx-1 - by-1 -
-
-
-
-

Color

-
- b-1
b-c-core - b-1
b-c-primary - b-1
b-c-secondary - b-1
b-c-success - b-1
b-c-info - b-1
b-c-warning - b-1
b-c-danger - b-1
b-c-white - b-1
b-c-light - b-1
b-c-dark - b-1
b-c-black -
-
-
-
-

Border-radius

-
- b-1 b-r-0 - b-1 b-r-1 - b-1 b-r-2 - b-1 b-r-3 - b-1 b-r-4 - b-1 b-r-5 - b-1 b-r-circle - b-1 b-r-pill -
+
+
+

Color

+
+ b-1
b-c-core + b-1
b-c-primary + b-1
b-c-secondary + b-1
b-c-success + b-1
b-c-info + b-1
b-c-warning + b-1
b-c-danger + b-1
b-c-white + b-1
b-c-light + b-1
b-c-dark + b-1
b-c-black
-
- +
+
+
+

Border-radius

+
+ b-1 b-r-0 + b-1 b-r-1 + b-1 b-r-2 + b-1 b-r-3 + b-1 b-r-4 + b-1 b-r-5 + b-1 b-r-circle + b-1 b-r-pill +
+
+ + + +
+

Colors

+

Convey meaning through color with a handful of color utility classes. Includes support for + styling links with hover states, too. +

+

Color

+
+ text-core + text-primary + text-secondary + text-success + text-info + text-warning + text-danger + text-white + text-light + text-dark + text-black +
-
-

Colors

-

Convey meaning through color with a handful of color utility classes. Includes support for - styling links with hover states, too. -

-

Color

-
- text-core - text-primary - text-secondary - text-success - text-info - text-warning - text-danger - text-white - text-light - text-dark - text-black -
- -
- 
+                

+                    
                                 
                                 <span class="text-core">text-core</span>
                                 <span class="text-primary">text-primary</span>
@@ -205,558 +205,673 @@
                                 <span class="text-dark">text-dark</span>
                                 <span class="text-black">text-black</span>
                                 

+                

+                

+                
Background color

+                

+                    
bg-core

+                    
bg-primary

+                    
bg-secondary

+                    
bg-success

+                    
bg-info

+                    
bg-warning

+                    
bg-danger

+                    
bg-white

+                    
bg-light

+                    
bg-dark

+                    
bg-black

+                

+                

+
+                
Link color

+                

+                    text-core 
+                    text-primary 
+                    text-secondary 
+                    text-success
+                    text-info
+                    text-warning
+                    text-danger
+                    text-white
+                    text-light
+                    text-dark
+                    text-black
+                

+
+ + +
+

Text

+

Documentation and examples for common text utilities to control size, alignment, wrapping, + weight, and + more. +

+ + +

Text sizes

+
+
+
This is h5
+

text-small
This is small font + size
+ Lorem + ipsum dolor sit, amet + consectetur + adipisicing + elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione? +

-
-

Background color

-
-
bg-core
-
bg-primary
-
bg-secondary
-
bg-success
-
bg-info
-
bg-warning
-
bg-danger
-
bg-white
-
bg-light
-
bg-dark
-
bg-black
-
-
- -

Link color

-
- text-core - text-primary - text-secondary - text-success - text-info - text-warning - text-danger - text-white - text-light - text-dark - text-black -
-
- - -
-

Text

-

Documentation and examples for common text utilities to control size, alignment, wrapping, - weight, and - more. -

+
+

This is h4

+

No class required
This is base font size
Lorem + ipsum + dolor sit amet consectetur, + adipisicing elit. + Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero + ratione. +

+
+
+

This is h3

+

text-medium
This is medium font +
+ Lorem + ipsum + dolor sit, amet consectetur + adipis + elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas? +

+
+
+

This is h2

+

text-large
This is large font +
+ Lorem + ipsum + dolor sit, amet consectetur + adipisicing + elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est + maiores. +

+
+
+

This is h1

+

text-extralarge
This is + extra + large + font
+ Lorem + ipsum dolor sit amet, + consectetur adipisicing elit. Beatae, modi! +

+
+
+

text-sm-medium +
Medium size text on viewports sized SM (small) or wider. +

+
+
+

text-md-medium +
Medium size text on viewports sized MD (medium) or wider. +

+
+
+

text-lg-medium +
Medium size text on viewports sized LG (large) or wider. +

+
+
+

text-xl-medium +
Medium size text on viewports sized XL (extra-large) or wider. +

+
+
- -

Text sizes

-
-
-
This is h5
-

text-small
This is small font - size
- Lorem - ipsum dolor sit, amet - consectetur - adipisicing - elit. Eum quis neque ullam, eos eaque nam voluptate veniam dolor ex ratione? -

+
+

Text alignment

+

Easily realign text to components with text alignment classes. +

+
+
+

text-left

+

Left aligned text on all viewport sizes

-
-

This is h4

-

No class required
This is base font size
Lorem - ipsum - dolor sit amet consectetur, - adipisicing elit. - Explicabo modi dicta eveniet quia, repudiandae perspiciatis omnis vitae nihil vero - ratione. -

+
+
+

text-center

+

Center aligned text on all viewport sizes.

-
-

This is h3

-

text-medium
This is medium font -
- Lorem - ipsum - dolor sit, amet consectetur - adipisicing - elit. Alias praesentium quo est pariatur sed nobis maiores rem aperiam ut voluptas? -

+
+
+

text-right

+

Right aligned text on all viewport sizes.

-
-

This is h2

-

text-large
This is large font -
- Lorem - ipsum - dolor sit, amet consectetur - adipisicing - elit. Obcaecati nihil totam, modi minus excepturi laboriosam maiores. Provident quos est - maiores. -

+
+
+

text-justify

+

Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur + adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere + reprehenderit, aut assumenda. Velit.

-
-

This is h1

-

text-extralarge
This is - extra - large - font
- Lorem - ipsum dolor sit amet, - consectetur adipisicing elit. Beatae, modi! -

+
+
+

text-sm-right

+

Right aligned text on viewports sized SM (small) or wider.

-
-

text-sm-medium -
Medium size text on viewports sized SM (small) or wider. -

+
+
+

text-md-right

+

Right aligned text on viewports sized MD (medium) or wider.

-
-

text-md-medium -
Medium size text on viewports sized MD (medium) or wider. -

+
+
+

text-lg-right

+

Right aligned text on viewports sized LG (large) or wider.

-
-

text-lg-medium -
Medium size text on viewports sized LG (large) or wider. -

-
-
-

text-xl-medium -
Medium size text on viewports sized XL (extra-large) or wider. -

-
-
- -
-

Text alignment

-

Easily realign text to components with text alignment classes. -

-
-
-

text-left

-

Left aligned text on all viewport sizes

-
-
-
-

text-center

-

Center aligned text on all viewport sizes.

-
-
-
-

text-right

-

Right aligned text on all viewport sizes.

-
-
-
-

text-justify

-

Justified text on all viewport sizes. Lorem ipsum dolor sit, amet consectetur - adipisicing elit. Temporibus consequatur nisi amet modi in voluptatum facere - reprehenderit, aut assumenda. Velit.

-
-
-
-

text-sm-right

-

Right aligned text on viewports sized SM (small) or wider.

-
-
-
-

text-md-right

-

Right aligned text on viewports sized MD (medium) or wider.

-
-
-
-

text-lg-right

-

Right aligned text on viewports sized LG (large) or wider.

-
-
-
-

text-xl-right

-

Right aligned text on viewports sized XL (extra-large) or wider.

-
+
+
+

text-xl-right

+

Right aligned text on viewports sized XL (extra-large) or wider.

+
-
-

Font weight

-

Quickly change the weight (boldness). -

-
-

text-thin

-
-

This is thin text

-
-
-

text-regular

-
-

This is normal weight text - no class required

-
-
-

text-semibold

-
-

This is semibold text

-
-
-

text-bold

-
-

This is bold text

-
-
-

text-extrabold

-
-

This is extra bold text

-
-
-

text-sm-bold

-
-

Bold text on viewports sized SM (small) or wider.

-
+
+

Font weight

+

Quickly change the weight (boldness). +

+
+

text-thin

+
+

This is thin text

-
- - -
-

Text transform

-

Transform text in components with text capitalization classes or italicize text. -

-
-

text-italic

-
-

This is italic text

-
-
-

text-lowercase

-
-

This is lowercased text

-
-
-

text-uppercase

-
-

This is uppercased text

-
-
-

text-capitalize

-
-

This is capitalized text

-
-
-

text-nowrap

-
- This text should overflow the parent. -
-
-

text-truncate

-
- - This is text is truncated - -
+
+

text-regular

+
+

This is normal weight text - no class required

+
+
+

text-semibold

+
+

This is semibold text

+
+
+

text-bold

+
+

This is bold text

+
+
+

text-extrabold

+
+

This is extra bold text

+
+
+

text-sm-bold

+
+

Bold text on viewports sized SM (small) or wider.

- +
-
-

Buttons

-

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

+

Text transform

+

Transform text in components with text capitalization classes or italicize text.

-
-

Examples

-
- - - - - - - - - - -
-
-
-
-

Outline buttons

-
- - - - - - - - - - -
-
-
-
-

Sizes

-
- - +
+

text-italic

+
+

This is italic text

-
- - +
+

text-lowercase

+
+

This is lowercased text

-
- - +
+

text-uppercase

+
+

This is uppercased text

-
-
-
-

Button states

-
- - - +
+

text-capitalize

+
+

This is capitalized text

-
- - - +
+

text-nowrap

+
+ This text should overflow the parent. +
+
+

text-truncate

+
+ + This is text is truncated +
-
- -
-

Radio -

-

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

-
-
- -
- - - - - +
+
+ + +
+

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

+
+ + + +
+
+ + + +
+
+
-
+
+

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. -

+
+

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
+ + + + + + + -
+ +
-
- - -
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
+
+
+
+ +
+
+
+
Chip label text
+
+
+
+ + +
+
+
+
Chip label text
+
+
+
+ + +
+
+
+
Chip label text
+
+
+
+ +
+
+
+
+ + + + +
Header
@@ -768,100 +883,179 @@
-
-
- - -
Some helping Text
-
At least 6 characters required
- - - - - - - - - -
- - -
-
- - +
- - -
- +
-
-

Grid

-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
+
+ +
+ +
+ @* *@ + +
+
+
+
+
Product 1
+ 0023 001445669 1 +
Product serial code
+
+
+ +
Material 29
+
+
+ +
77,29
+
+
+ +
+
+ +
+
+
+
+

Form wizard

+
+
+
+
Description for step 1
+ @*
+
+
+
+
+
+
+
*@ + +
+ + +
Some helping Text
+
At least 6 characters required
+ + + + + + + + + + +
-
    -
  • -
    -
    Product 1
    - 0023 001445669 1 -
    Product serial code
    -
    -
    -
    77,29
    -
    +
    + + +
    Some helping Text
    +
    At least 6 characters required
    + + + + + + + + + + +
    +
+
+ -
-
- You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected +
+
2
- -
  • -
    -
    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"; @@ -987,11 +1182,11 @@ private string sidebarRightClosed { get; set; } = "close-r"; - private void ToggleSidebarRight() + private void ToggleSidebarRight() { sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : ""; } - + private string NavClosed { get; set; } = ""; @@ -1001,4 +1196,23 @@ NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : ""; } -} \ No newline at end of file + + 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/Link.razor b/src/Connected.Components/Components/Link.razor deleted file mode 100644 index deea63d..0000000 --- a/src/Connected.Components/Components/Link.razor +++ /dev/null @@ -1,7 +0,0 @@ - - @Text - diff --git a/src/Connected.Components/Components/Link.razor.cs b/src/Connected.Components/Components/Link.razor.cs deleted file mode 100644 index d9562e1..0000000 --- a/src/Connected.Components/Components/Link.razor.cs +++ /dev/null @@ -1,49 +0,0 @@ -using Connected.Utilities; -using Microsoft.AspNetCore.Components; - -namespace Connected.Components; -public partial class Link -{ - [Parameter, EditorRequired] - public string Url { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Text { get; set; } = string.Empty; - - [Parameter, EditorRequired] - public string Target { get; set; } = "_self"; - - [Parameter] - public string Class { get; set; } = string.Empty; - - private string LinkClassList - { - get - { - return new CssBuilder() - .AddClass(Class) - .Build(); - } - } - - [Parameter] - public string Style { get; set; } = string.Empty; - - private string LinkStyleList - { - get - { - return new StyleBuilder() - .AddStyle(Style) - .Build(); - } - } - - protected override async Task OnParametersSetAsync() - { - if (string.IsNullOrEmpty(Text)) Text = Url; - await base.OnParametersSetAsync(); - } -} - - diff --git a/src/Connected.Components/Styles/components/_chip.scss b/src/Connected.Components/Styles/components/_chip.scss new file mode 100644 index 0000000..5e8bc05 --- /dev/null +++ b/src/Connected.Components/Styles/components/_chip.scss @@ -0,0 +1,218 @@ +@use "../util" as *; +@use "../globals" as *; + +/*CHIP*/ +/* scroll container */ +.horizontal-scroll-container { + display: flex; + position: relative; + flex-wrap: nowrap; + gap: .5rem; + overflow: auto; + scroll-snap-type: both mandatory; + } + + /* Hide scrollbar for Chrome, Safari and Opera */ + .horizontal-scroll-container::-webkit-scrollbar { + display: none; + } + /* Hide scrollbar for IE, Edge and Firefox */ + .horizontal-scroll-container { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } + + + + .chip-icon { + --height: 2.5rem; + height: var(--height); + aspect-ratio: 1 / 1; + display: flex; + flex: 1 0 auto; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: var(--bg-core-primary-darken); + overflow: hidden; + cursor: pointer; + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .chip-icon:hover, + .chip-icon:active, + .chip-icon:active { + background-color: var(--bg-core-primary-dark); + + } + +.chip-icon.float-left { + float: left; + margin: .05rem .5rem .15rem 0; + margin-top: -.25rem; + clear: both; + } + + .chip-group { + --height: 1.5rem; + + border: 1px solid var(--bg-core-primary); + padding: .15rem; + 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; + scroll-snap-align: start; + } + + .chip-group-content{ + height: var(--height); + display: flex; + align-items: center; + justify-content: center; + } + + .chip-leading-icon { + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary-light); + height: var(--height); + aspect-ratio: 1 / 1; + overflow: hidden; + } + + .chip-leading-icon img{ + object-fit: cover; + height: var(--height); + aspect-ratio: 1 / 1; + } + + .chip-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); + } + + .chip-label{ + font-size: $font-size-sm; + margin:0 .85rem; + } + + .chip-cta-icon:hover{ + background-color: var(--bg-core-primary-lighten); + } + + + /*filter*/ + .chip-group.filter { + border: 1px solid var(--bg-core-primary); + background-color: var(--bg-core-primary-light); + cursor: pointer; + overflow: hidden; + &:hover{ + background-color: var(--bg-core-primary-lighten); + } + &:active, + &.active{ + border: 1px solid var(--bg-core-primary); + background-color: var(--bg-core-primary); + } + } + + .chip-group.filter .chip-leading-icon{ + //display: none; + max-width: 0; + transform: translateX(calc(var(--height) * -1.25)); + transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25); + } + + .chip-group.filter.active .chip-leading-icon{ + display: flex; + align-items: center; + justify-content: center; + border-radius: $border-radius-pill; + background-color: var(--bg-core-primary-light); + height: var(--height); + aspect-ratio: 1 / 1; + transform: translateX(0); + max-width: var(--height); + } + + .chip-group.select .chip-cta-icon{ + display: none; + } + /*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; + } + + .select-items div:hover, .same-as-selected { + background-color: rgba(0, 0, 0, 0.1); + } + /*end-down*/ + + /*END CHIP*/ \ 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 0bfe0d7..fcf8d49 100644 --- a/src/Connected.Components/Styles/components/_grid.scss +++ b/src/Connected.Components/Styles/components/_grid.scss @@ -105,7 +105,7 @@ $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"); } } -/*grid-css*/ +/*DATA GRID*/ $columns: 12; @mixin create-selectors($breakpoint: null) { @@ -128,11 +128,10 @@ $columns: 12; } } - - -.row { +.row{ display: grid; grid-template-columns: repeat($columns, 1fr); + position: relative; } @include create-selectors; @@ -143,20 +142,212 @@ $columns: 12; } } -.collapse{ + + +.data-grid-row-content{ + display: grid; + grid-template-columns: auto 1fr auto; +} + +.data-grid:not(.data-grid.dense) .data-grid-row-content { + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + padding: 1rem 1.25rem; + margin-bottom: 1rem; + position: relative; + overflow: hidden; + &:last-child{ + margin-bottom: 0; + } +} + +/*ACTIVE*/ +.data-grid:not(.data-grid.dense) .data-grid-row-content:before { + content: ""; + position: absolute; + width: 0; + inset:0; + background: var(--bg-core-primary-lighten); + transition: width 300ms ease-in-out; +} + +.data-grid:not(.data-grid.dense) .data-grid-row-content.active:before { + width: calc(100% + 1.25rem * 2); +} +/*END ACTIVE*/ + +.data-grid.dense { + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: $border-radius-lg; + padding: 1rem 1.25rem; + margin-bottom: 1rem; + overflow: hidden; + &:last-child{ + margin-bottom: 0; + } +} + +/*DENSE*/ +.data-grid.dense .data-grid-row-content { + border-bottom: 1px solid var(--border-core); + padding-bottom: .5rem; + margin-bottom: .5rem; + position: relative; + &:last-child{ + border-bottom: 0; + padding-bottom: 0; + margin-bottom: 0 + } +} +/*END DENSE*/ + +/*DENSE ACTIVE*/ +.data-grid.dense .data-grid-row-content:before { + content: ""; + position: absolute; + width: 0; + inset: -.55rem -1.25rem -1px; + background: var(--bg-core-primary-lighten); + transition: width 300ms ease-in-out; +} + +.data-grid.dense .data-grid-row-content.active:before { + width: calc(100% + 1.25rem * 2); +} + +.data-grid.dense .data-grid-row-content:first-child:before { + top: -1rem; + bottom: -1px; +} + +.data-grid.dense .data-grid-row-content:last-child:before { + top: -10px; + bottom: -1rem; +} + +.data-grid.dense .data-grid-row-content:only-child:before { + inset: -1rem -1.25rem ; +} +/*END DENSE ACTIVE*/ + +.data-grid.select .data-grid-select { + display: block; + margin-top: .5rem; + margin-right: .5rem; +} + +.data-grid .data-grid-select, +.data-grid .data-grid-collapse-cta{ + display: none; +} + +.data-grid label { + font-size: $font-size-sm; + color: $text-core-lc; +} + +/*COLLAPSE*/ +.data-grid.collapse .data-grid-collapse-cta { + display: block; + margin-top: .5rem; + margin-left: .5rem; + cursor: pointer; +} + +.collapsed{ max-height: 0; overflow: hidden; - padding-top: 0; - padding-bottom: 0; + padding-top: 0!important; + padding-bottom: 0!important; + border-top: 0px solid transparent; //opacity: 0; transition: all 0.5s ease-out; } -.collapse.show{ +.collapsed.show { max-height: 25vh; overflow: auto; padding-top: initial; padding-bottom: initial; + border-top: 1px solid var(--bg-core-primary-light); //opacity: 1; transition: all 0.5s ease-in; -} \ No newline at end of file +} + +.data-grid .data-grid-collapse-cta i { + transform: rotate(0); + transition: all 0.5s ease-in; +} +.data-grid.show .data-grid-collapse-cta i { + transform: rotate(180deg); +} + + +/*form-wizard*/ + +.form-wizard { + background-color: var(--element-bg-core); + border: 1px solid var(--border-core); + border-radius: 0.6rem; + padding: 1rem 1.25rem; + position: relative; + +} + +.form-outer { +display: flex; +flex-wrap: nowrap; +overflow: hidden; +} + +.form-step { + width: 100%; + flex: 1 0 auto; + transition: all 0.5s ease-out; + transform: translateX(0); + } + + .form-step.next{ + transform: translateX(-100%); + } + + .form-step.previous{ + transform: translateX(100%); + } + + +.dots { + --width: .75rem; + --height: var(--width); + + position: absolute; + bottom: calc(var(--width) / -2); + left: 50%; + transform: translateX(-50%); + + + .dot { + width: var(--width); + height: var(--height); + border-radius: 50%; + background-color: var(--bg-core-primary-lighten); + display: inline-block; + outline: 1px solid #fff; + transition: all 300ms ease-in-out; + } + + .dot.active, + .dot.next { + background-color: var(--bg-core-primary); + outline: 2px solid var(--bg-core-primary); + outline-offset: 2px; + } + + .dot.completed { + background-color: $success; + } +} + +/*end form-wizard*/ \ 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 fa4868c..4871f72 100644 --- a/src/Connected.Components/Styles/components/_index.scss +++ b/src/Connected.Components/Styles/components/_index.scss @@ -4,4 +4,6 @@ @forward "radio"; @forward "inputs"; @forward "checkbox"; -@forward "toggle"; \ No newline at end of file +@forward "toggle"; +@forward "chip"; +@forward "modal"; \ No newline at end of file diff --git a/src/Connected.Components/Styles/components/_modal.scss b/src/Connected.Components/Styles/components/_modal.scss new file mode 100644 index 0000000..9dc789c --- /dev/null +++ b/src/Connected.Components/Styles/components/_modal.scss @@ -0,0 +1,229 @@ +@use "../util" as *; +@use "../globals" as *; + +// stylelint-disable function-disallowed-list + +// .modal-open - body class for killing the scroll +.scroll-disabled{ + overflow: hidden; + padding-right: 0; + } +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and stuff + + +// Container that the modal scrolls within + + +.modal { + --modal-zindex: #{$modal-zindex}; + --modal-width: 60vw; + --modal-height: 50vh; + --modal-padding: 1.5rem; + --modal-margin: 1.5rem; + --modal-color: var(--text-core); + --modal-bg: var(--bg-core-primary-light); + --modal-border-color: var(--bg-core-primary-light); + --modal-border-width: 1px; + --modal-border-radius: 1rem; + --modal-box-shadow: 0 0.5rem 1rem rgba(var(--bg-core-primary), 0.15); + + --modal-header-padding-x: 1.5rem; //close button + --modal-header-padding-y: 1.5rem; //close button + --modal-header-bg: var(--modal-bg); + --modal-header-padding: 1.5rem; + --modal-header-border-color: var(--bg-core-primary-light); + --modal-header-border-width: 1px; + + --modal-footer-bg: var(--modal-bg); + --modal-footer-padding: 1.5rem; + --modal-footer-border-color: var(--bg-core-primary-light); + --modal-footer-border-width: 1px; + + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,.65); + z-index: var(--modal-zindex); + display: none; + opacity: 0; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + transition: opacity .15s linear; + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a + // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 + // See also https://github.com/twbs/bootstrap/issues/17695 + } + + + + // When fading in the modal, animate it to slide down + .modal.fade { + opacity: 1; + transition: opacity .15s linear; + } + .modal.show{ + display: block; + + } + + // When trying to close, animate focus to scale + .modal.modal-static { + transform:scale(1.1); + } + + + // Shell div to position the modal with bottom padding + .modal-dialog { + position: relative; + width: auto; + margin: var(--modal-margin); + // allow clicks to pass through for custom click handling to close modal + pointer-events: none; + } + + .modal-dialog-scrollable { + height: calc(100% - var(--modal-margin) * 2); + + + .modal-content { + max-height: 100%; + overflow: hidden; + } + + .modal-body { + overflow-y: auto; + } + } + + .modal-dialog-centered { + display: flex; + align-items: center; + min-height: calc(100% - var(--modal-margin) * 2); + + } + + // Actual modal + .modal-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` + // counteract the pointer-events: none; in the .modal-dialog + color: var(--modal-color); + pointer-events: auto; + background-color: var(--modal-bg); + background-clip: padding-box; + border: var(--modal-border-width) solid var(--modal-border-color); + border-radius: var(--modal-border-radius); + box-shadow: var(--modal-box-shadow); + // Remove focus outline from opened modal + outline: 0; + } + + + + // Modal header + // Top section of the modal w/ title and dismiss + .modal-header { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends + padding: var(--modal-header-padding); + background-color: var(--modal-header-bg); + border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color); + + + .btn-close { + padding: calc(var(--modal-header-padding-y) * .5) calc(var(--modal-header-padding-x) * .5); + margin: calc(-.5 * var(--modal-header-padding-y)) calc(-.5 * var(--modal-header-padding-x)) calc(-.5 * var(--modal-header-padding-y)) auto; + } + } + + // Title text within header + .modal-title { + margin-bottom: 0; + + } + + // Modal body + // Where all modal content resides (sibling of .modal-header and .modal-footer) + .modal-body { + position: relative; + // Enable `flex-grow: 1` so that the body take up as much space as possible + // when there should be a fixed height on `.modal-dialog`. + flex: 1 1 auto; + padding: var(--modal-padding); + } + + // Footer (for actions) + .modal-footer { + display: flex; + flex-shrink: 0; + flex-wrap: wrap; + align-items: center; // vertically center + justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items + padding: var(--modal-footer-padding); + background-color: var(--modal-footer-bg); + border-radius: var(--modal-border-radius); + gap: .5rem; + +} + // Automatically set modal's width for larger viewports + + + + .modal-dialog { + max-width: 100%; + max-height: 100%; + padding: 0; + + + @include breakpoint(sm) { + max-width: 75vw; + margin-right: auto; + margin-left: auto; + padding: var(--modal-padding); + + } + + @include breakpoint(lg) { + max-width: var(--modal-width); + margin-right: auto; + margin-left: auto; + } + } + + + // // Modal background + // .modal-backdrop { + // opacity: 0; + // display: none; + // position: fixed; + // top: 0; + // left: 0; + // z-index: #{$backdrop-zindex}; + // width: 100vw; + // height: 100vh; + // background-color: #000; + // transition: opacity .15s linear; + // } + + // .modal-backdrop.fade { + // opacity: .5; + // transition: opacity .15s linear; + // } + + // .modal-backdrop.show { + // display: block; + // } + diff --git a/src/Connected.Components/Styles/components/_sidebar.scss b/src/Connected.Components/Styles/components/_sidebar.scss index 44d3d65..26465e9 100644 --- a/src/Connected.Components/Styles/components/_sidebar.scss +++ b/src/Connected.Components/Styles/components/_sidebar.scss @@ -16,7 +16,7 @@ $sidebar-right-width-closed:0px; 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; + z-index: $sidebar-zindex; transition: all 0.3s ease; @include breakpoint(sm) { @@ -315,7 +315,7 @@ $sidebar-right-width-closed:0px; color: $text-core; background: var(--bg-core-primary-light); border-radius: 0; - z-index: 100; + z-index: $sidebar-zindex; } .sidebar.bottombar .profile-description, @@ -382,7 +382,7 @@ $sidebar-right-width-closed:0px; 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; + z-index: $sidebar-right-zindex; transition: all 0.3s ease; @include breakpoint(sm) { diff --git a/src/Connected.Components/Styles/globals/_variables.scss b/src/Connected.Components/Styles/globals/_variables.scss index 49b65e4..1069ef2 100644 --- a/src/Connected.Components/Styles/globals/_variables.scss +++ b/src/Connected.Components/Styles/globals/_variables.scss @@ -197,3 +197,9 @@ $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default; // transition $transition: all 0.15s ease-in-out; + +//z-index +$sidebar-zindex: 899; +$sidebar-right-zindex: 898; +$backdrop-zindex: 999; +$modal-zindex: 10000; diff --git a/src/Connected.Components/Styles/layout/_css_documentation.scss b/src/Connected.Components/Styles/layout/_css_documentation.scss index ec69af6..d915a29 100644 --- a/src/Connected.Components/Styles/layout/_css_documentation.scss +++ b/src/Connected.Components/Styles/layout/_css_documentation.scss @@ -69,11 +69,4 @@ } -.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/util/_functions.scss b/src/Connected.Components/Styles/util/_functions.scss index 063b94f..50c3ca7 100644 --- a/src/Connected.Components/Styles/util/_functions.scss +++ b/src/Connected.Components/Styles/util/_functions.scss @@ -12,6 +12,6 @@ @return #333; } @else { - @return #FFF; + @return #FFF; } -} \ No newline at end of file +} \ No newline at end of file