Changes and new components in Styles: appbar, badge, icon-bittons, buttons, card, chip, dropdown, grid, icons, inputs, modal, sidebar, snaclbar, top loading bar
This commit is contained in:
parent
72e13a7c66
commit
04309b1514
@ -1,6 +1,7 @@
|
|||||||
@page "/demo"
|
@page "/demo"
|
||||||
|
|
||||||
<body class="">
|
<body class="">
|
||||||
|
<div class="top-loading-bar"></div>
|
||||||
<div class="document-container d-flex">
|
<div class="document-container d-flex">
|
||||||
|
|
||||||
<aside>
|
<aside>
|
||||||
@ -22,7 +23,9 @@
|
|||||||
<ul class="navbar mt-sm-5 pt-sm-5">
|
<ul class="navbar mt-sm-5 pt-sm-5">
|
||||||
<li class="navbar-item fab">
|
<li class="navbar-item fab">
|
||||||
<a href="#">
|
<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>
|
<span class="navbar-link">New document</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
<span class="navbar-tooltip">
|
||||||
@ -30,10 +33,18 @@
|
|||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<i class='bx bx-home'></i>
|
<div class="navbar-leading-icon">
|
||||||
<span class="navbar-link">Main navbar link 1</span>
|
<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">
|
<span class="navbar-link navbar-link-detail">
|
||||||
<div class="badge-label">
|
<div class="badge-label">
|
||||||
22
|
22
|
||||||
@ -41,15 +52,19 @@
|
|||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
<span class="navbar-tooltip">
|
||||||
Main navbar link 1
|
Tasks
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<i class='bx bx-shape-square'></i>
|
<div class="navbar-leading-icon">
|
||||||
<span class="navbar-link">Main navbar link 2</span>
|
<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">
|
<span class="navbar-link navbar-link-detail">
|
||||||
<div class="badge-label">
|
<div class="badge-label">
|
||||||
22
|
22
|
||||||
@ -57,13 +72,15 @@
|
|||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
<span class="navbar-tooltip">
|
||||||
Main navbar link 2
|
Notification
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item">
|
||||||
<a href="#">
|
<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">Main navbar link 3</span>
|
||||||
<span class="navbar-link navbar-link-detail">
|
<span class="navbar-link navbar-link-detail">
|
||||||
<div class="badge-label">
|
<div class="badge-label">
|
||||||
@ -78,7 +95,9 @@
|
|||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item">
|
||||||
<a href="#">
|
<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">Main navbar link 4</span>
|
||||||
<span class="navbar-link navbar-link-detail">
|
<span class="navbar-link navbar-link-detail">
|
||||||
<div class="badge-label">
|
<div class="badge-label">
|
||||||
@ -98,26 +117,38 @@
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<main class="main @sidebarClosed @sidebarRightClosed">
|
<main class="main @sidebarClosed @sidebarRightClosed">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="appbar">
|
||||||
|
|
||||||
<div class="d-flex justify-space-between">
|
<div class="d-none d-sm-inline-block" @onclick="ToggleSidebar">
|
||||||
<div>
|
<Glyph SVG="@Icons.Material.Outlined.Menu" class="icon-root svg-icon" />
|
||||||
<i class='bx bx-menu' @onclick="ToggleSidebar"></i>
|
<span class="text"> Sidebar</span>
|
||||||
@* <Glyph SVG="@Icons.Material.Rounded.Dangerous" /> *@
|
|
||||||
<span class="text">Open Sidebar</span>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="d-flex gap-5 items-center">
|
||||||
<div>
|
<div class="form-group-alt">
|
||||||
<i class='bx bx-filter' @onclick="ToggleSidebarRight"></i>
|
<div class="search-group-content">
|
||||||
<span class="text">Open Filters</span>
|
<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>
|
</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">
|
<section id="borders" class="mt-3 b-1 b-r-4 p-5">
|
||||||
<h2>Borders</h2>
|
<h2>Borders</h2>
|
||||||
<p>Use border utilities to quickly style the border, border color and border-radius of an element.
|
<p>Use border utilities to quickly style the border, border color and border-radius of an element.
|
||||||
@ -463,7 +494,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-core mt-5">Examples</h4>
|
<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-core">click me</button>
|
||||||
<button type="button" href="#" class="btn btn-primary">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>
|
<button type="button" href="#" class="btn btn-secondary">click me</button>
|
||||||
@ -479,7 +510,7 @@
|
|||||||
<hr class="mt-4 mb-4">
|
<hr class="mt-4 mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-core mt-5">Outline buttons</h4>
|
<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-core">click me</button>
|
||||||
<button type="button" href="#" class="btn btn-outline-primary">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>
|
<button type="button" href="#" class="btn btn-outline-secondary">click me</button>
|
||||||
@ -495,15 +526,15 @@
|
|||||||
<hr class="mt-4 mb-4">
|
<hr class="mt-4 mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-core mt-5">Sizes</h4>
|
<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-core">small button</button>
|
||||||
<button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
|
<button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
|
||||||
</div>
|
</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-core">large button</button>
|
||||||
<button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
|
<button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
|
||||||
</div>
|
</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="btn btn-block btn-core">full width button</button>
|
||||||
<button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
|
<button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
|
||||||
button</button>
|
button</button>
|
||||||
@ -512,20 +543,63 @@
|
|||||||
<hr class="mt-4 mb-4">
|
<hr class="mt-4 mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="text-core mt-5">Button states</h4>
|
<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 type="button" href="#" class="btn btn-core active" aria-pressed="true">active
|
||||||
button</button>
|
button</button>
|
||||||
<button type="button" href="#" class="btn btn-core">normal 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 type="button" href="#" class="btn btn-core disabled" aria-disabled="true">disabled
|
||||||
button</button>
|
button</button>
|
||||||
</div>
|
</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 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">normal button</button>
|
||||||
<button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
|
<button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
|
||||||
button</button>
|
button</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
<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">
|
<div class="form-group">
|
||||||
<select type="textarea" required="required">
|
<select type="textarea" required="required">
|
||||||
<option value="" disabled selected hidden></option>
|
<option value="" disabled selected hidden></option>
|
||||||
@ -789,9 +879,10 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</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-secondary" aria-pressed="true">Cancel</button>
|
||||||
|
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@ -825,14 +916,14 @@
|
|||||||
<p>Data grid DENSE + COLLAPSE + SELECT</p>
|
<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="horizontal-scroll-container">
|
||||||
|
|
||||||
<div class="chip-group">
|
<div class="chip-group">
|
||||||
<div class="chip-group-content">
|
<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-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>
|
</div>
|
||||||
|
|
||||||
@ -840,37 +931,36 @@
|
|||||||
<div class="chip-group-content">
|
<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-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-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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="chip-group filter"> <!-- TO DO on chip-group filter toggle class active-->
|
<div class="chip-group filter"> <!-- TO DO on chip-group filter toggle class active-->
|
||||||
<div class="chip-group-content">
|
<div class="chip-group-content">
|
||||||
<div class="chip-leading-icon"><i class='bx bx-check'></i></div>
|
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
||||||
<div class="chip-label">Chip label text</div>
|
<div class="chip-label">Select all</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="chip-group filter active"> <!-- TO DO on chip-group filter toggle class active-->
|
<div class="chip-group filter active"> <!-- TO DO on chip-group filter toggle class active-->
|
||||||
<div class="chip-group-content">
|
<div class="chip-group-content">
|
||||||
<div class="chip-leading-icon"><i class='bx bx-check'></i></div>
|
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
||||||
<div class="chip-label">Chip label text</div>
|
<div class="chip-label">Select all active</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>
|
</div>
|
||||||
|
|
||||||
<div class="chip-group">
|
<div class="chip-group">
|
||||||
<div class="chip-group-content">
|
<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">
|
<div class="chip-label">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<select type="textarea" placeholder="Select">Se
|
<select type="textarea" placeholder="Select">Selecta</select>
|
||||||
</select>
|
|
||||||
|
|
||||||
<div class="drop-down">
|
<div class="drop-down">
|
||||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
@ -912,6 +1002,10 @@
|
|||||||
<div class="text-hc">Product 1</div>
|
<div class="text-hc">Product 1</div>
|
||||||
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
|
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
|
||||||
<div class="text-small">Product serial code</div>
|
<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>
|
||||||
<div class="col-12 col-md-4">
|
<div class="col-12 col-md-4">
|
||||||
<label>Material code</label>
|
<label>Material code</label>
|
||||||
@ -931,8 +1025,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size:1.75rem; margin-top:-.25rem" class="data-grid-collapse-cta" @onclick="ToggleNav">
|
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
|
||||||
<i class='bx bx-chevron-down'></i>
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1005,11 +1099,11 @@
|
|||||||
</div>
|
</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>
|
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
|
||||||
<div>
|
<div class="btn-group">
|
||||||
<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="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 mr-2" aria-pressed="true">Next<i class='bx bx-chevron-right'></i></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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1041,7 +1135,7 @@
|
|||||||
@* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
|
@* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
lorem20
|
ssss
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
|
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
|
||||||
@ -1126,7 +1220,7 @@
|
|||||||
<span class="input-glyph-wraper">
|
<span class="input-glyph-wraper">
|
||||||
<span class="input-glyph">
|
<span class="input-glyph">
|
||||||
<span class="input-glyph button">
|
<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
|
@Icons.Material.Filled.Analytics
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
@ -1172,6 +1266,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</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>
|
<div class="modal-backdrop fade show"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
1141
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
Normal file
1141
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
|
||||||
<div style="@GlyphStyleList">
|
|
||||||
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
|
|
||||||
@((MarkupString)SVG)
|
@((MarkupString)SVG)
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
|
||||||
43
src/Connected.Components/Styles/components/_appbar.scss
Normal file
43
src/Connected.Components/Styles/components/_appbar.scss
Normal 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
239
src/Connected.Components/Styles/components/_badge.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,6 +1,23 @@
|
|||||||
@use "../globals/" as *;
|
@use "../globals/" as *;
|
||||||
@use "../util/" 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) {
|
@mixin btn($bg-color: #e2e2e2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -17,7 +34,7 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: $base-font-size * 1.5;
|
line-height: $base-font-size * 1.5;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: $border-radius-pill;
|
border-radius: $border-radius-btn;
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -43,6 +60,8 @@
|
|||||||
&.active {
|
&.active {
|
||||||
background-color: darken($val, 15);
|
background-color: darken($val, 15);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.btn-outline-#{$key} {
|
.btn-outline-#{$key} {
|
||||||
// @include btn();
|
// @include btn();
|
||||||
@ -89,16 +108,12 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.disabled,
|
|
||||||
.btn:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
//pointer-events: none;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-core {
|
.btn-core {
|
||||||
background-color: var(--bg-core-primary) !important;
|
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 {
|
&:hover {
|
||||||
background-color: var(--bg-core-primary-darken) !important;
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
}
|
}
|
||||||
@ -113,6 +128,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.btn-outline-core {
|
.btn-outline-core {
|
||||||
color: var(--bg-core-primary-darken) !important;
|
color: var(--bg-core-primary-darken) !important;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
@ -132,3 +149,11 @@
|
|||||||
color: set-color (var(--bg-core-primary-darken)) !important;
|
color: set-color (var(--bg-core-primary-darken)) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
104
src/Connected.Components/Styles/components/_card.scss
Normal file
104
src/Connected.Components/Styles/components/_card.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -8,8 +8,11 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
overflow: auto;
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
scroll-snap-type: both mandatory;
|
scroll-snap-type: both mandatory;
|
||||||
|
scroll-padding: 0.25rem;
|
||||||
|
-webkit-overflow-scrolling:scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||||
@ -22,7 +25,13 @@
|
|||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none; /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.horizontal-scroll-container:focus-within {
|
||||||
|
overflow: inherit;
|
||||||
|
overflow-x: auto;
|
||||||
|
@include breakpoint (sm) {
|
||||||
|
overflow-x: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chip-icon {
|
.chip-icon {
|
||||||
--height: 2.5rem;
|
--height: 2.5rem;
|
||||||
@ -33,7 +42,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--bg-core-primary-darken);
|
background-color: var(--accent-color);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
|
transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
|
||||||
@ -42,7 +51,7 @@
|
|||||||
.chip-icon:hover,
|
.chip-icon:hover,
|
||||||
.chip-icon:active,
|
.chip-icon:active,
|
||||||
.chip-icon:active {
|
.chip-icon:active {
|
||||||
background-color: var(--bg-core-primary-dark);
|
background-color: var(--accent-color-hover);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -116,18 +125,22 @@
|
|||||||
/*filter*/
|
/*filter*/
|
||||||
.chip-group.filter {
|
.chip-group.filter {
|
||||||
border: 1px solid var(--bg-core-primary);
|
border: 1px solid var(--bg-core-primary);
|
||||||
background-color: var(--bg-core-primary-light);
|
background-color: var(--bg-core-primary-lighten);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
&:hover{
|
&:hover{
|
||||||
background-color: var(--bg-core-primary-lighten);
|
background-color: var(--bg-core-primary);
|
||||||
}
|
}
|
||||||
&:active,
|
&:active,
|
||||||
&.active{
|
&.active{
|
||||||
border: 1px solid var(--bg-core-primary);
|
border: 1px solid var(--bg-core-primary);
|
||||||
|
background-color: var(--bg-core-primary-lighten);
|
||||||
|
&:active:hover,
|
||||||
|
&.active:hover{
|
||||||
background-color: var(--bg-core-primary);
|
background-color: var(--bg-core-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chip-group.filter .chip-leading-icon{
|
.chip-group.filter .chip-leading-icon{
|
||||||
//display: none;
|
//display: none;
|
||||||
@ -153,66 +166,32 @@
|
|||||||
}
|
}
|
||||||
/*end select*/
|
/*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: */
|
.chip-group input {
|
||||||
.select-selected:after {
|
appearance: none;
|
||||||
position: absolute;
|
border: none;
|
||||||
content: "";
|
outline: none;
|
||||||
top: 14px;
|
background: transparent;
|
||||||
right: 10px;
|
font-family: inherit;
|
||||||
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): */
|
&:focus-within ~ .drop-down {
|
||||||
.select-selected.select-arrow-active:after {
|
height: auto;
|
||||||
border-color: transparent transparent #fff transparent;
|
max-height: max-content;
|
||||||
top: 7px;
|
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-down*/
|
||||||
|
|
||||||
/*END CHIP*/
|
/*END CHIP*/
|
||||||
85
src/Connected.Components/Styles/components/_dropdown.scss
Normal file
85
src/Connected.Components/Styles/components/_dropdown.scss
Normal 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);
|
||||||
|
}
|
||||||
@ -146,7 +146,7 @@ $columns: 12;
|
|||||||
|
|
||||||
.data-grid-row-content{
|
.data-grid-row-content{
|
||||||
display: grid;
|
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 {
|
.data-grid:not(.data-grid.dense) .data-grid-row-content {
|
||||||
@ -232,12 +232,37 @@ $columns: 12;
|
|||||||
}
|
}
|
||||||
/*END DENSE ACTIVE*/
|
/*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 {
|
.data-grid.select .data-grid-select {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: .5rem;
|
margin-top: .5rem;
|
||||||
margin-right: .5rem;
|
margin-right: .75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.data-grid .data-grid-img,
|
||||||
.data-grid .data-grid-select,
|
.data-grid .data-grid-select,
|
||||||
.data-grid .data-grid-collapse-cta{
|
.data-grid .data-grid-collapse-cta{
|
||||||
display: none;
|
display: none;
|
||||||
@ -251,11 +276,12 @@ $columns: 12;
|
|||||||
/*COLLAPSE*/
|
/*COLLAPSE*/
|
||||||
.data-grid.collapse .data-grid-collapse-cta {
|
.data-grid.collapse .data-grid-collapse-cta {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: .5rem;
|
margin-top: .25rem;
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.collapsed{
|
.collapsed{
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -276,14 +302,33 @@ $columns: 12;
|
|||||||
transition: all 0.5s ease-in;
|
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);
|
transform: rotate(0);
|
||||||
transition: all 0.5s ease-in;
|
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);
|
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*/
|
/*form-wizard*/
|
||||||
|
|
||||||
@ -309,7 +354,7 @@ overflow: hidden;
|
|||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-step.next{
|
.form-step.next {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
31
src/Connected.Components/Styles/components/_icons.scss
Normal file
31
src/Connected.Components/Styles/components/_icons.scss
Normal 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;
|
||||||
|
}
|
||||||
@ -7,3 +7,12 @@
|
|||||||
@forward "toggle";
|
@forward "toggle";
|
||||||
@forward "chip";
|
@forward "chip";
|
||||||
@forward "modal";
|
@forward "modal";
|
||||||
|
@forward "snackbar";
|
||||||
|
@forward "icons";
|
||||||
|
@forward "appbar";
|
||||||
|
@forward "buttons-segmented";
|
||||||
|
@forward "top-loading-bar";
|
||||||
|
@forward "badge";
|
||||||
|
@forward "buttons-icons";
|
||||||
|
@forward "dropdown";
|
||||||
|
@forward "card";
|
||||||
@ -24,7 +24,7 @@ form{
|
|||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="radio"], [type="radio"]),
|
.form-group input:not([type="radio"], [type="radio"], #search),
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
background: none;
|
background: none;
|
||||||
@ -140,6 +140,7 @@ form{
|
|||||||
.error .input-glyph.error {
|
.error .input-glyph.error {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: $danger;
|
color: $danger;
|
||||||
|
//font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-glyph.error {
|
.input-glyph.error {
|
||||||
@ -161,12 +162,15 @@ form{
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: $base-margin;
|
margin-left: $base-margin;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-glyph i {
|
.input-glyph i,
|
||||||
|
.input-glyph svg {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*GLYPH BUTTON*/
|
/*GLYPH BUTTON*/
|
||||||
.input-glyph.button {
|
.input-glyph.button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -215,91 +219,86 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.drop-down{
|
/*form group-alt*/
|
||||||
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 {
|
||||||
|
--height: 2.5rem;
|
||||||
|
|
||||||
|
//border: 1px solid var(--bg-core-primary);
|
||||||
|
padding: .15rem;
|
||||||
|
height: max-content;
|
||||||
|
//min-width: max-content;
|
||||||
.dropdown-header {
|
color: var(--text-core);
|
||||||
display: block;
|
border-radius: $border-radius-pill;
|
||||||
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);
|
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 {
|
/* Chrome, Safari, Edge, Opera */
|
||||||
height: 0;
|
.form-group-alt input::-webkit-outer-spin-button,
|
||||||
margin: 0.5rem 0;
|
.form-group-alt input::-webkit-inner-spin-button {
|
||||||
overflow: hidden;
|
-webkit-appearance: none;
|
||||||
border-top: 1px solid var(--bg-core-primary-light);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
$sidebar-width-open:300px;
|
$sidebar-width-open:300px;
|
||||||
$sidebar-width-closed:75px;
|
$sidebar-width-closed:75px;
|
||||||
$sidebar-right-width-open:300px;
|
$sidebar-right-width-open:350px;
|
||||||
$sidebar-right-width-closed:0px;
|
$sidebar-right-width-closed:0px;
|
||||||
|
|
||||||
.sidebar{
|
.sidebar{
|
||||||
@ -15,13 +15,23 @@ $sidebar-right-width-closed:0px;
|
|||||||
color: $text-core;
|
color: $text-core;
|
||||||
background: var(--bg-core-primary-light);
|
background: var(--bg-core-primary-light);
|
||||||
border-right: 1px solid rgba(0,0,0,.025);
|
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;
|
z-index: $sidebar-zindex;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(md) {
|
||||||
|
width: $sidebar-width-open;
|
||||||
|
}
|
||||||
|
@include breakpoint(xl) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-radius: $border-radius-lg 0 0 $border-radius-lg;
|
||||||
width: $sidebar-width-open;
|
width: $sidebar-width-open;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -32,37 +42,94 @@ $sidebar-right-width-closed:0px;
|
|||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
width: $sidebar-width-closed;
|
width: $sidebar-width-closed;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
|
border-radius: $border-radius-lg 0 0 $border-radius-lg;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//to do move to core
|
||||||
.main {
|
.main {
|
||||||
width: calc(100% - 1.5rem) ;
|
width: calc(100% - 1.5rem) ;
|
||||||
margin-inline:auto;
|
margin-inline:auto;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
@include breakpoint (sm) {
|
@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);
|
width: calc(100% - $sidebar-width-open - $sidebar-right-width-open);
|
||||||
padding: 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main.close{
|
.main.close{
|
||||||
@include breakpoint (sm) {
|
@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{
|
.main.close-r{
|
||||||
@include breakpoint (sm) {
|
@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{
|
.main.close.close-r{
|
||||||
@include breakpoint (sm) {
|
@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);
|
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
|
//profile
|
||||||
.sidebar .profile-details{
|
.sidebar .profile-details{
|
||||||
@ -75,7 +142,7 @@ $sidebar-right-width-closed:0px;
|
|||||||
border-radius: $border-radius-lg 0 0 0;
|
border-radius: $border-radius-lg 0 0 0;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@include breakpoint (sm) {
|
@include breakpoint (sm) {
|
||||||
padding-top: 12px;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,6 +162,8 @@ $sidebar-right-width-closed:0px;
|
|||||||
|
|
||||||
.sidebar .profile-details .profile-description {
|
.sidebar .profile-details .profile-description {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .profile-details .profile-name{
|
.sidebar .profile-details .profile-name{
|
||||||
@ -109,16 +178,22 @@ $sidebar-right-width-closed:0px;
|
|||||||
color:var(--text-core-lc)
|
color:var(--text-core-lc)
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .profile-details i{
|
.sidebar .profile-details button{
|
||||||
height: 50px;
|
align-self: flex-start;
|
||||||
min-width: 50px;
|
}
|
||||||
text-align: center;
|
|
||||||
line-height: 50px;
|
.sidebar .profile-details i,
|
||||||
font-size: 20px;
|
.sidebar .profile-details svg{
|
||||||
cursor: pointer;
|
// height: 50px;
|
||||||
transition: all 0.3s ease;
|
// min-width: 50px;
|
||||||
|
// text-align: center;
|
||||||
|
// line-height: 50px;
|
||||||
|
// font-size: 20px;
|
||||||
|
// cursor: pointer;
|
||||||
}
|
}
|
||||||
.sidebar.close .profile-details i,
|
.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-name,
|
||||||
.sidebar.close .profile-details .profile-job{
|
.sidebar.close .profile-details .profile-job{
|
||||||
display: none;
|
display: none;
|
||||||
@ -179,7 +254,7 @@ $sidebar-right-width-closed:0px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .navbar .navbar-item.fab{
|
.sidebar .navbar .navbar-item.fab{
|
||||||
background-color:#ffdad9;
|
background-color: var(--accent-color);
|
||||||
border-radius: $border-radius-lg;
|
border-radius: $border-radius-lg;
|
||||||
margin-bottom: 36px;
|
margin-bottom: 36px;
|
||||||
transition: all 0.3s ease;
|
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:hover,
|
||||||
.sidebar .navbar .navbar-item.fab:active,
|
.sidebar .navbar .navbar-item.fab:active,
|
||||||
.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;
|
height: 50px;
|
||||||
min-width: 50px;
|
min-width: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -202,6 +277,36 @@ $sidebar-right-width-closed:0px;
|
|||||||
transition: all 0.3s ease;
|
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{
|
.sidebar .navbar .navbar-item a{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -215,7 +320,6 @@ $sidebar-right-width-closed:0px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .navbar .navbar-item a .navbar-link:first-child {
|
.sidebar .navbar .navbar-item a .navbar-link:first-child {
|
||||||
|
|
||||||
padding-left: 1.5rem;
|
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*/
|
/*BOOTOMBAR*/
|
||||||
@include breakpoint-down(sm) {
|
@include breakpoint-down(sm) {
|
||||||
@ -321,7 +408,11 @@ $sidebar-right-width-closed:0px;
|
|||||||
.sidebar.bottombar .profile-description,
|
.sidebar.bottombar .profile-description,
|
||||||
.sidebar.close.bottombar .profile-description,
|
.sidebar.close.bottombar .profile-description,
|
||||||
.sidebar.bottombar .profile-details i,
|
.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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -376,17 +467,29 @@ $sidebar-right-width-closed:0px;
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100vh;
|
height: 100svh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: $text-core;
|
color: $text-core;
|
||||||
background: var(--bg-core-primary-lighten);
|
background: var(--bg-core-primary-lighten);
|
||||||
border-right: 1px solid rgba(0,0,0,.025);
|
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;
|
z-index: $sidebar-right-zindex;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
@include breakpoint(sm) {
|
@include breakpoint(sm) {
|
||||||
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
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;
|
position: relative;
|
||||||
width: $sidebar-right-width-open;
|
width: $sidebar-right-width-open;
|
||||||
}
|
}
|
||||||
@ -404,6 +507,11 @@ $sidebar-right-width-closed:0px;
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header{
|
||||||
|
padding-top: .75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.right .navbar .navbar-item:hover,
|
.sidebar.right .navbar .navbar-item:hover,
|
||||||
@ -412,6 +520,10 @@ $sidebar-right-width-closed:0px;
|
|||||||
background: var(--bg-core-primary);
|
background: var(--bg-core-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// .scrollable {
|
// .scrollable {
|
||||||
// display: block;
|
// display: block;
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
@ -451,9 +563,6 @@ $sidebar-right-width-closed:0px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scroll-wrapper {
|
.scroll-wrapper {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
203
src/Connected.Components/Styles/components/_snackbar.scss
Normal file
203
src/Connected.Components/Styles/components/_snackbar.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -25,6 +25,7 @@ $blue-50: #f2f4fd;
|
|||||||
$blue-100: #e5eafa;
|
$blue-100: #e5eafa;
|
||||||
$blue-200: #cbd6f5;
|
$blue-200: #cbd6f5;
|
||||||
$blue-300: #b2c1f1;
|
$blue-300: #b2c1f1;
|
||||||
|
$blue-300a: #b2c1f190;
|
||||||
$blue-400: #98adec;
|
$blue-400: #98adec;
|
||||||
$blue-500: #7e98e7;
|
$blue-500: #7e98e7;
|
||||||
$blue-600: #657ab9;
|
$blue-600: #657ab9;
|
||||||
@ -33,6 +34,8 @@ $blue-800: #323d5c;
|
|||||||
$blue-900: #191e2e;
|
$blue-900: #191e2e;
|
||||||
|
|
||||||
--bg-core-primary: #{$blue-300}; // body-background;
|
--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-light: #{$blue-50}; // light
|
||||||
--bg-core-primary-lighten: #{$blue-200}; // lighten
|
--bg-core-primary-lighten: #{$blue-200}; // lighten
|
||||||
--bg-core-primary-darken: #{$blue-400}; // darken;
|
--bg-core-primary-darken: #{$blue-400}; // darken;
|
||||||
@ -49,6 +52,9 @@ $blue-900: #191e2e;
|
|||||||
--border-core: #{$blue-200}; //border
|
--border-core: #{$blue-200}; //border
|
||||||
--element-bg-core: #{$element-bg-core}; // elements-background
|
--element-bg-core: #{$element-bg-core}; // elements-background
|
||||||
--element-fg-core: #{$element-fg-core}; // elements-foreground
|
--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
|
--border-core: #{$violet-200}; //border
|
||||||
--element-bg-core: #{$element-bg-core}; // elements-background
|
--element-bg-core: #{$element-bg-core}; // elements-background
|
||||||
--element-fg-core: #{$element-fg-core}; // elements-foreground
|
--element-fg-core: #{$element-fg-core}; // elements-foreground
|
||||||
}
|
|
||||||
|
--accent-color: #ffdad9;
|
||||||
|
--accent-color-hover: #fbc5c3;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -132,10 +141,11 @@ $black: #000;
|
|||||||
$blue: #0dbcf0c4;
|
$blue: #0dbcf0c4;
|
||||||
$red: #ff7f78;
|
$red: #ff7f78;
|
||||||
$yellow: #ffb480;
|
$yellow: #ffb480;
|
||||||
$green: #8fcaa3;
|
$green: #80d89e;
|
||||||
$cyan: #729fe9;
|
$cyan: #729fe9;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$primary: $blue;
|
$primary: $blue;
|
||||||
$secondary: $gray-400;
|
$secondary: $gray-400;
|
||||||
$success: $green;
|
$success: $green;
|
||||||
@ -147,7 +157,7 @@ $dark: $gray-900;
|
|||||||
|
|
||||||
//color palette
|
//color palette
|
||||||
$theme-colors: (
|
$theme-colors: (
|
||||||
//"core": $bg-core-primary,
|
// "core": $core,
|
||||||
"primary": $primary,
|
"primary": $primary,
|
||||||
"secondary": $secondary,
|
"secondary": $secondary,
|
||||||
"success": $success,
|
"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;
|
$transition: all 0.15s ease-in-out;
|
||||||
|
|
||||||
//z-index
|
//z-index
|
||||||
|
$appbar-zindex: 897;
|
||||||
$sidebar-zindex: 899;
|
$sidebar-zindex: 899;
|
||||||
$sidebar-right-zindex: 898;
|
$sidebar-right-zindex: 898;
|
||||||
$backdrop-zindex: 999;
|
$backdrop-zindex: 999;
|
||||||
|
$dropdown-zindex: 10000;
|
||||||
$modal-zindex: 10000;
|
$modal-zindex: 10000;
|
||||||
|
$snackbar-zindex: 10001;
|
||||||
|
$top-loading-bar-zindex: 10002;
|
||||||
|
|
||||||
|
|||||||
@ -15,3 +15,5 @@
|
|||||||
@return #FFF;
|
@return #FFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user