Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes and new components in Styles: appbar, badge, icon-bittons, buttons, card, chip, dropdown, grid, icons, inputs, modal, sidebar, snaclbar, top loading bar

Browse Source
This commit is contained in:
Janko Jordan 2023-03-06 15:38:28 +01:00
parent 72e13a7c66
commit 04309b1514
22 changed files with 2648 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
src/Connected.Components.Showcase.Runner/Pages/Demo.razor
View File

@ -1,6 +1,7 @@
@page "/demo"
<body class="">
<div class="top-loading-bar"></div>
<div class="document-container d-flex">
<aside>
@ -22,7 +23,9 @@
<ul class="navbar mt-sm-5 pt-sm-5">
<li class="navbar-item fab">
<a href="#">
<i class='bx bx-pencil'></i>
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.Create" class="icon-root svg-icon icon icon icon-size-md" />
</div>
<span class="navbar-link">New document</span>
</a>
<span class="navbar-tooltip">
@ -30,10 +33,18 @@
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-home'></i>
<span class="navbar-link">Main navbar link 1</span>
<div class="navbar-leading-icon">
<div class="badge-group">
<Glyph SVG="@Icons.Material.Filled.PublishedWithChanges" class="icon-root svg-icon icon icon-size-md" />
<span class="badge-content">
<span class="badge badge-top right bg-danger badge-overlap">22</span>
</span>
</div>
</div>
<span class="navbar-link">Tasks</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
@ -41,15 +52,19 @@
</span>
</a>
<span class="navbar-tooltip">
Main navbar link 1
Tasks
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-shape-square'></i>
<span class="navbar-link">Main navbar link 2</span>
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon icon-size-md" />
</div>
<span class="navbar-link">Notification</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
@ -57,13 +72,15 @@
</span>
</a>
<span class="navbar-tooltip">
Main navbar link 2
Notification
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-message-square-dots'></i>
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.DateRange" class="icon-root svg-icon icon icon-size-md" />
</div>
<span class="navbar-link">Main navbar link 3</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
@ -78,7 +95,9 @@
<li class="navbar-item">
<a href="#">
<i class='bx bx-customize'></i>
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.MailOutline" class="icon-root svg-icon icon icon-size-md" />
</div>
<span class="navbar-link">Main navbar link 4</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
@ -98,26 +117,38 @@
</aside>
<main class="main @sidebarClosed @sidebarRightClosed">
<div class="appbar">
<div class="d-flex justify-space-between">
<div>
<i class='bx bx-menu' @onclick="ToggleSidebar"></i>
@* <Glyph SVG="@Icons.Material.Rounded.Dangerous" /> *@
<span class="text">Open Sidebar</span>
</div>
<div>
<i class='bx bx-filter' @onclick="ToggleSidebarRight"></i>
<span class="text">Open Filters</span>
</div>
<div class="d-none d-sm-inline-block" @onclick="ToggleSidebar">
<Glyph SVG="@Icons.Material.Outlined.Menu" class="icon-root svg-icon" />
<span class="text"> Sidebar</span>
</div>
<div class="d-flex gap-5 items-center">
<div class="form-group-alt">
<div class="search-group-content">
<div class="search-leading-icon"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" /></div>
<div class="search-area">
<form>
<input id="search" type="search" placeholder="Search about recipes">
@* <input class="button" type="button" value="Search"> *@
</form>
</div>
<div class="search-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
</div>
</div>
<div class="badge-group">
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon-size-md" />
<span class="badge-content badge-top right">
<span class="badge badge-top right bg-core badge-overlap">3</span>
</span>
</div>
</div>
</div>
<section id="borders" class="mt-3 b-1 b-r-4 p-5">
<h2>Borders</h2>
<p>Use border utilities to quickly style the border, border color and border-radius of an element.
@ -463,7 +494,7 @@
</p>
<div>
<h4 class="text-core mt-5">Examples</h4>
<div class="d-flex flex-wrap gap-3 ">
<div class="btn-content">
<button type="button" href="#" class="btn btn-core">click me</button>
<button type="button" href="#" class="btn btn-primary">click me</button>
<button type="button" href="#" class="btn btn-secondary">click me</button>
@ -479,7 +510,7 @@
<hr class="mt-4 mb-4">
<div>
<h4 class="text-core mt-5">Outline buttons</h4>
<div class="d-flex flex-wrap gap-3 ">
<div class="btn-content">
<button type="button" href="#" class="btn btn-outline-core">click me</button>
<button type="button" href="#" class="btn btn-outline-primary">click me</button>
<button type="button" href="#" class="btn btn-outline-secondary">click me</button>
@ -495,15 +526,15 @@
<hr class="mt-4 mb-4">
<div>
<h4 class="text-core mt-5">Sizes</h4>
<div class="">
<div class="btn-content">
<button type="button" href="#" class="btn btn-sm btn-core">small button</button>
<button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
</div>
<div class="mt-4 ">
<div class="btn-content">
<button type="button" href="#" class="btn btn-lg btn-core">large button</button>
<button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
</div>
<div class="mt-4 ">
<div class="btn-content">
<button type="button" href="#" class="btn btn-block btn-core">full width button</button>
<button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
button</button>
@ -512,20 +543,63 @@
<hr class="mt-4 mb-4">
<div>
<h4 class="text-core mt-5">Button states</h4>
<div class="">
<div class="btn-content">
<button type="button" href="#" class="btn btn-core active" aria-pressed="true">active
button</button>
<button type="button" href="#" class="btn btn-core">normal button</button>
<button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">disabled
button</button>
</div>
<div class="mt-4">
<div class="btn-content">
<button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
<button type="button" href="#" class="btn btn-outline-core">normal button</button>
<button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
button</button>
</div>
</div>
<hr class="mt-4 mb-4">
<div>
<h4 class="text-core mt-5">Segmented Buttons</h4>
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
<input type="checkbox" class="btn btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-sm btn-outline-success" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-sm btn-outline-success" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-sm btn-outline-success" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
<input type="radio" class=" btn btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-core" for="btnradio1"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon icon-size-md" />Radio 1</label>
<input type="radio" class="btn btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-core" for="btnradio2"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon icon-size-md" />Radio 2</label>
<input type="radio" class="btn btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-core" for="btnradio3"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon icon-size-md" />Radio 3</label>
</div>
</div>
</section>
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
@ -726,6 +800,22 @@
<div class="form-group-alt">
<div class="search-group-content">
<div class="search-cta-icon"><Glyph SVG="@Icons.Material.Filled.HorizontalRule" class="icon-root svg-icon icon-size-md" /></div>
<div class="search-area">
<form>
<input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">
</form>
</div>
<div class="search-cta-icon"><Glyph SVG="@Icons.Material.Filled.Add" class="icon-root svg-icon icon-size-md" /></div>
</div>
</div>
<div class="form-group">
<select type="textarea" required="required">
<option value="" disabled selected hidden></option>
@ -789,9 +879,10 @@
</div>
<div class="btn-box my-5">
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
<div class="btn-content">
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
</div>
</form>
@ -825,14 +916,14 @@
<p>Data grid DENSE + COLLAPSE + SELECT</p>
<div class="chip-icon float-left" @onclick="ToggleSidebarRight"><i class='bx bx-filter'></i></div>
<div class="chip-icon float-left" @onclick="ToggleSidebarRight"><Glyph SVG="@Icons.Material.Filled.FilterList" class="icon-root svg-icon" /></div>
<div class="horizontal-scroll-container">
<div class="chip-group">
<div class="chip-group-content">
<div class="chip-leading-icon"><i class='bx bx-user'></i></div>
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Face" class="icon-root svg-icon" /></div>
<div class="chip-label">Chip label text</div>
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
</div>
</div>
@ -840,37 +931,36 @@
<div class="chip-group-content">
<div class="chip-leading-icon"> <img class="img-fluid" src="https://source.unsplash.com/random?face" /> </div>
<div class="chip-label">Chip label text</div>
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
</div>
</div>
<div class="chip-group filter"> <!-- TO DO on chip-group filter toggle class active-->
<div class="chip-group-content">
<div class="chip-leading-icon"><i class='bx bx-check'></i></div>
<div class="chip-label">Chip label text</div>
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
<div class="chip-label">Select all</div>
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
</div>
</div>
<div class="chip-group filter active"> <!-- TO DO on chip-group filter toggle class active-->
<div class="chip-group-content">
<div class="chip-leading-icon"><i class='bx bx-check'></i></div>
<div class="chip-label">Chip label text</div>
<div class="chip-cta-icon"><i class='bx bx-x'></i></div>
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
<div class="chip-label">Select all active</div>
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
</div>
</div>
<div class="chip-group">
<div class="chip-group-content">
<div class="chip-leading-icon"><i class='bx bx-user'></i></div>
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.DateRange" class="icon-root svg-icon" /></div>
<div class="chip-label">
<select type="textarea" placeholder="Select">Se
</select>
<select type="textarea" placeholder="Select">Selecta</select>
<div class="drop-down">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@ -912,6 +1002,10 @@
<div class="text-hc">Product 1</div>
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
<div class="text-small">Product serial code</div>
<div class="badge-group">
<span class="badge-label bg-core">Test</span>
<span class="badge-label bg-core">Test 1</span>
</div>
</div>
<div class="col-12 col-md-4">
<label>Material code</label>
@ -931,8 +1025,8 @@
</div>
</div>
</div>
<div style="font-size:1.75rem; margin-top:-.25rem" class="data-grid-collapse-cta" @onclick="ToggleNav">
<i class='bx bx-chevron-down'></i>
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
</div>
</div>
</div>
@ -1005,11 +1099,11 @@
</div>
<div class="btn-box text-right my-5 d-flex justify-space-between">
<div class="btn-content justify-space-between">
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
<div>
<button type="button" @onclick="TogglePreviousSlide" class="btn btn-core mr-2" aria-pressed="true"><i class='bx bx-chevron-left'></i>Back</button>
<button type="button" @onclick="ToggleNextSlide" class="btn btn-core mr-2" aria-pressed="true">Next<i class='bx bx-chevron-right'></i></button>
<div class="btn-group">
<button type="button" @onclick="TogglePreviousSlide" class="btn btn-core" aria-pressed="true"><Glyph SVG="@Icons.Material.Filled.ChevronLeft" class="icon-root svg-icon" /> Back</button>
<button type="button" @onclick="ToggleNextSlide" class="btn btn-core" aria-pressed="true">Next <Glyph SVG="@Icons.Material.Filled.ChevronRight" class="icon-root svg-icon" /></button>
</div>
</div>
@ -1041,7 +1135,7 @@
@* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
</div>
<div class="modal-body">
lorem20
ssss
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
@ -1126,7 +1220,7 @@
<span class="input-glyph-wraper">
<span class="input-glyph">
<span class="input-glyph button">
<svg class="icon-root svg-icon icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<svg class="icon-root svg-icon icon-size-md" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
@Icons.Material.Filled.Analytics
</svg>
</span>
@ -1172,6 +1266,42 @@
</div>
</aside>
</div>
<div class="snackbar-group bottom right"> <!--set position top, right, bottom, left -->
<div class="snackbar success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
<div class="snackbar-content">
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
<div class="snackbar-message">Snackbar message text</div>
@* <div class="snackbar-cta-icon"><i class='bx bx-x'></i></div> *@
</div>
</div>
<div class="snackbar banner"> <!-- Banners remain until dismissed by the user, or if the state that caused the banner is resolved -->
<div class="snackbar-content">
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
<div class="snackbar-message">
<div class="snackbar-title">Snackbar banner title</div>
<div class="snackbar-label">Snackbar banner message text </div>
</div>
<div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
</div>
</div>
<div class="snackbar dialog"> <!-- Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) -->
<div class="snackbar-content">
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
<div class="snackbar-message">
<div class="snackbar-title">Snackbar dialog title</div>
<div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div>
<div class="snackbar-action">
<div class="btn btn-secondary">Snackbar action</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade show"></div>
</body>

1141
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor Normal file
View File

File diff suppressed because it is too large Load Diff

5
src/Connected.Components/Components/Glyph.razor
View File

@ -1,6 +1,3 @@

<div style="@GlyphStyleList">
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
@((MarkupString)SVG)
</svg>
</div>

43
src/Connected.Components/Styles/components/_appbar.scss Normal file
View File

@ -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);
}
}
}

239
src/Connected.Components/Styles/components/_badge.scss Normal file
View File

@ -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);
}
}

67
src/Connected.Components/Styles/components/_buttons-icons.scss Normal file
View File

@ -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;
}
}
}

107
src/Connected.Components/Styles/components/_buttons-segmented.scss Normal file
View File

@ -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;
}

41
src/Connected.Components/Styles/components/_buttons.scss
View File

@ -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();
@ -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;
}
}

104
src/Connected.Components/Styles/components/_card.scss Normal file
View File

@ -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;
}
}

95
src/Connected.Components/Styles/components/_chip.scss
View File

@ -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;
}
.chip-group input {
appearance: none;
border: none;
outline: none;
background: transparent;
font-family: inherit;
/* 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;
}
&:focus-within ~ .drop-down {
height: auto;
max-height: max-content;
opacity: 1;
pointer-events: initial;
border-radius: .6rem;
/* 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;
}
&:focus-within ~ .backdrop {
opacity: 1;
display: block;
}
}
/* 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*/

85
src/Connected.Components/Styles/components/_dropdown.scss Normal file
View File

@ -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);
}

57
src/Connected.Components/Styles/components/_grid.scss
View File

@ -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%);
}

31
src/Connected.Components/Styles/components/_icons.scss Normal file
View File

@ -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;
}

9
src/Connected.Components/Styles/components/_index.scss
View File

@ -7,3 +7,12 @@
@forward "toggle";
@forward "chip";
@forward "modal";
@forward "snackbar";
@forward "icons";
@forward "appbar";
@forward "buttons-segmented";
@forward "top-loading-bar";
@forward "badge";
@forward "buttons-icons";
@forward "dropdown";
@forward "card";

165
src/Connected.Components/Styles/components/_inputs.scss
View File

@ -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;
}
.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*/
.form-group-alt {
--height: 2.5rem;
.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;
//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;
}
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid var(--bg-core-primary-light);
/* 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);
}
/*search*/
.form-group-alt .input-group-content{
height: var(--height);
display: flex;
align-items: center;
justify-content: center;
}
.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;
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);
}

199
src/Connected.Components/Styles/components/_sidebar.scss
View File

@ -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%;

203
src/Connected.Components/Styles/components/_snackbar.scss Normal file
View File

@ -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;
}
}

41
src/Connected.Components/Styles/components/_top-loading-bar.scss Normal file
View File

@ -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;
}
}

40
src/Connected.Components/Styles/globals/_core.scss
View File

@ -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;
}

21
src/Connected.Components/Styles/globals/_variables.scss
View File

@ -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;

2
src/Connected.Components/Styles/util/_functions.scss
View File

@ -15,3 +15,5 @@
@return #FFF;
}
}