Compare commits
3 Commits
489fb97a2a
...
909cfd0d81
| Author | SHA1 | Date | |
|---|---|---|---|
|
909cfd0d81 | ||
|
|
bcce62f28e | ||
| e4b246a8bc |
@ -1,4 +1,5 @@
|
|||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
@namespace Connected.Components.Showcase.Runner
|
||||||
|
|
||||||
<ModalDialog/>
|
<ModalDialog/>
|
||||||
|
|
||||||
|
|||||||
@ -40,20 +40,17 @@
|
|||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<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" data-tooltip="New document" data-tooltip-conf="right danger shadow">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="navbar-leading-icon">
|
<div class="navbar-leading-icon">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Create" class="icon-root svg-icon icon icon icon-size-md" />
|
<Glyph SVG="@Icons.Material.Outlined.Create" class="icon-root svg-icon icon icon icon-size-md" />
|
||||||
</div>
|
</div>
|
||||||
<span class="navbar-link">New document</span>
|
<span class="navbar-link">New document</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
|
||||||
New document
|
|
||||||
</span>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item" data-tooltip="Tasks" data-tooltip-conf="right shadow">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="navbar-leading-icon">
|
<div class="navbar-leading-icon">
|
||||||
<div class="badge-group">
|
<div class="badge-group">
|
||||||
@ -70,15 +67,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
|
||||||
Tasks
|
|
||||||
</span>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item" data-tooltip="Notification" data-tooltip-conf="right shadow">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="navbar-leading-icon">
|
<div class="navbar-leading-icon">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon icon-size-md" />
|
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon icon-size-md" />
|
||||||
@ -90,12 +84,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
|
||||||
Notification
|
|
||||||
</span>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item" data-tooltip="Calendar" data-tooltip-conf="right shadow">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="navbar-leading-icon">
|
<div class="navbar-leading-icon">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.DateRange" class="icon-root svg-icon icon icon-size-md" />
|
<Glyph SVG="@Icons.Material.Outlined.DateRange" class="icon-root svg-icon icon icon-size-md" />
|
||||||
@ -107,12 +98,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
|
||||||
Calendar
|
|
||||||
</span>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="navbar-item">
|
<li class="navbar-item" data-tooltip="Main navigation" data-tooltip-conf="right shadow">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<div class="navbar-leading-icon">
|
<div class="navbar-leading-icon">
|
||||||
<Glyph SVG="@Icons.Material.Filled.Apps" class="icon-root svg-icon icon icon-size-md" />
|
<Glyph SVG="@Icons.Material.Filled.Apps" class="icon-root svg-icon icon icon-size-md" />
|
||||||
@ -124,9 +112,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="navbar-tooltip">
|
|
||||||
Main navigation
|
|
||||||
</span>
|
|
||||||
</li>
|
</li>
|
||||||
<div class="sidebar-divider"></div>
|
<div class="sidebar-divider"></div>
|
||||||
</ul>
|
</ul>
|
||||||
@ -142,36 +127,123 @@
|
|||||||
|
|
||||||
<div class="appbar">
|
<div class="appbar">
|
||||||
|
|
||||||
<div class="d-none d-sm-inline-block" @onclick="ToggleSidebar">
|
<div class="">
|
||||||
@* <button class="btn btn-icon-alt">
|
<button class="btn btn-icon-alt d-inline-block d-sm-none">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Menu" class="icon-root svg-icon" />
|
<Glyph SVG="@Icons.Material.Outlined.ArrowBack" class="icon-root svg-icon icon-size-md" />
|
||||||
</button>
|
</button>
|
||||||
<span class="text"> Sidebar</span> *@
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex gap-5 items-center">
|
<div class="d-flex gap-2 gap-sm-5 items-center">
|
||||||
<div class="form-group-alt">
|
<div class="form-group-alt">
|
||||||
<div class="input-group-content">
|
<div class="input-group-content">
|
||||||
<div class="input-leading-icon"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" /></div>
|
<button class="btn btn-icon-alt input-cta-icon mr-1" tabindex="1">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" />
|
||||||
|
<div class="input-cta-icon-more"><Glyph SVG="@Icons.Material.Outlined.ArrowDropDown" class="icon-root svg-icon icon-size-sm" /></div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="search-drop-down" id="select" tabindex="-1">
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-header">Search in</div>
|
||||||
|
|
||||||
|
<a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon mr-2" />Search all content</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Outlined.Warehouse" class="icon-root svg-icon mr-2" />Search warehouse only</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="input-area">
|
<div class="input-area">
|
||||||
<form>
|
<form>
|
||||||
<input id="search" type="search" placeholder="Search about recipes">
|
<input id="search" type="search" placeholder="Search about recipes" autocomplete="off" tabindex="2">
|
||||||
@* <input class="button" type="button" value="Search"> *@
|
@* <input class="button" type="button" value="Search"> *@
|
||||||
|
|
||||||
|
<div class="search-drop-down" id="search" tabindex="-1">
|
||||||
|
|
||||||
|
<div class="dropdown-header">Epic search</div>
|
||||||
|
|
||||||
|
<div class="alert alert-sm info p-2 mx-3">
|
||||||
|
<div class="alert-content">
|
||||||
|
<div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.Info" class="icon-root svg-icon icon-size-md" /></div>
|
||||||
|
<div class="alert-message">Your search is currently limited to warehouse only!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon mr-2" /> Se</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="#"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon mr-2" />Sear</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
<div tabindex="3" class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="badge-group">
|
<div class="badge-group mt-0">
|
||||||
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon-size-md" />
|
<button aria-label="delete" type="button" class="btn btn-core btn-icon">
|
||||||
|
<span class="icon-button-label"style="font-size:1.25rem"
|
||||||
|
<Glyph SVG="@Icons.Material.Outlined.PlaylistAddCheck" class="icon-root svg-icon " />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="badge-content badge-top right">
|
<span class="badge-content badge-top right">
|
||||||
<span class="badge badge-top right bg-core badge-overlap">3</span>
|
<span class="badge badge-top right bg-warning badge-overlap">3</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
||||||
|
<h2>Alerts</h2>
|
||||||
|
<p>An alert is used to notify the user about an important message without interrupting the ongoing task.</p>
|
||||||
|
|
||||||
|
<div class="grid grid-col-2">
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<div class="alert alert-sm danger"> <!--classes for smaller size (alert-sm) and color(danger, warning, success, info) -->
|
||||||
|
<div class="alert-content">
|
||||||
|
<div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" /></div>
|
||||||
|
<div class="alert-message">Meltdown is imminent!</div>
|
||||||
|
<div class="alert-cta-icon">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert elevation-1 alert-sm warning"> <!-- + class for shadow (elevation-1) -->
|
||||||
|
<div class="alert-content">
|
||||||
|
<div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.WarningAmber" class="icon-root svg-icon" /></div>
|
||||||
|
<div class="alert-message">The reactor temperature exceeds the optimal range.</div>
|
||||||
|
<div class="alert-cta-icon">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-banner alert-sm success"> <!-- + class for banner (alert-bannner) alert-cta-icon(X) is visible -->
|
||||||
|
<div class="alert-content">
|
||||||
|
<div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.CheckCircle" class="icon-root svg-icon" /></div>
|
||||||
|
<div class="alert-message">The reactor is running at optimum temperature.</div>
|
||||||
|
<div class="alert-cta-icon">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert info"> <!-- default alert -->
|
||||||
|
<div class="alert-content">
|
||||||
|
<div class="alert-leading-icon"><Glyph SVG="@Icons.Material.Outlined.Info" class="icon-root svg-icon" /></div>
|
||||||
|
<div class="alert-message">The reactor was fired up successfully.</div>
|
||||||
|
<div class="alert-cta-icon">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -316,20 +388,20 @@
|
|||||||
|
|
||||||
<div class="btn-content" role="group" aria-label="Basic example">
|
<div class="btn-content" role="group" aria-label="Basic example">
|
||||||
|
|
||||||
<button aria-label="delete" type="button" class="btn btn-danger btn-icon">
|
<button data-tooltip="Description here" data-tooltip-conf="bottom warning" aria-label="plane" type="button" class="btn btn-danger btn-icon">
|
||||||
<span class="icon-button-label">
|
<span class="icon-button-label">
|
||||||
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
|
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button aria-label="delete" type="button" class="btn btn-outline-success btn-icon">
|
<button data-tooltip="Description here" data-tooltip-conf="top success" aria-label="plane" type="button" class="btn btn-outline-success btn-icon">
|
||||||
<span class="icon-button-label">
|
<span class="icon-button-label">
|
||||||
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
|
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
<button class="btn btn-icon-alt btn-icon-alt-info" >
|
<button data-tooltip="Description here" data-tooltip-conf="right inherit" class="btn btn-icon-alt btn-icon-alt-info" >
|
||||||
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon" />
|
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -608,7 +680,7 @@
|
|||||||
DateTime date = DateTime.Today;
|
DateTime date = DateTime.Today;
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group col-span-3">
|
||||||
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
|
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
|
||||||
<label class="label-animated">Message</label>
|
<label class="label-animated">Message</label>
|
||||||
<div class="input-helper-text">Some helping Text</div>
|
<div class="input-helper-text">Some helping Text</div>
|
||||||
@ -728,7 +800,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data-grid dense image select collapse mt-5">
|
<div class="data-grid dense select collapse mt-5">
|
||||||
<!--dense select collapse-->
|
<!--dense select collapse-->
|
||||||
<div class="data-grid-row-content @NavClosed">
|
<div class="data-grid-row-content @NavClosed">
|
||||||
<!--active-->
|
<!--active-->
|
||||||
@ -743,36 +815,40 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data-grid-img">
|
|
||||||
|
|
||||||
<img class="img-fluid" src="https://source.unsplash.com/random?face" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="data-grid-container">
|
<div class="data-grid-container show-image-vertical"> <!--class for show-image or show-image-vertical moved here-->
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-md-4">
|
<div class="data-grid-img">
|
||||||
<div class="text-hc">Product 1</div>
|
<img class="img-fluid" src="https://source.unsplash.com/random?face" />
|
||||||
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
|
</div>
|
||||||
<div class="text-small">Product serial code</div>
|
|
||||||
<div class="badge-group">
|
<div class="data-grid-wrapper"> <!--becourse we move img div in data-grid-container-->
|
||||||
<span class="badge-label bg-core">Test</span>
|
<div class="row">
|
||||||
<span class="badge-label bg-core">Test 1</span>
|
<div class="col-12 col-md-4">
|
||||||
|
<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>
|
||||||
|
<div class="">Material 29</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-md-4 text-md-right">
|
||||||
|
<label>Price</label>
|
||||||
|
<div class="text-semibold ">77,29</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-4">
|
<div class="row collapsed @NavClosed">
|
||||||
<label>Material code</label>
|
<div class="col-12 col-md-4 ">
|
||||||
<div class="">Material 29</div>
|
<div class="text-small">
|
||||||
</div>
|
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
|
||||||
|
</div>
|
||||||
<div class="col-12 col-md-4 text-md-right">
|
|
||||||
<label>Price</label>
|
|
||||||
<div class="text-semibold ">77,29</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row collapsed @NavClosed">
|
|
||||||
<div class="col-12 col-md-4 ">
|
|
||||||
<div class="text-small">
|
|
||||||
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -782,6 +858,57 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="pagination filled">
|
||||||
|
<li class="pagination-item">
|
||||||
|
<button aria-label="Previous page" type="button" disabled="" class="btn btn-icon-alt">
|
||||||
|
<span class="icon-button-label">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="pagination-item pagination-item-selected">
|
||||||
|
<button aria-current="page" aria-label="Current page 1" type="button" class="btn btn-icon">
|
||||||
|
<span class="button-label">1</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="pagination-item">
|
||||||
|
<button aria-label="Page 2" type="button" class="btn btn-icon">
|
||||||
|
<span class="button-label">2</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="pagination-item">
|
||||||
|
<button aria-label="Page 3" type="button" class="btn btn-icon">
|
||||||
|
<span class="button-label">3</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="pagination-item">
|
||||||
|
<button aria-label="Page 4" type="button" class="btn btn-icon">
|
||||||
|
<span class="button-label">4</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="pagination-item">
|
||||||
|
<button aria-label="Next page" type="button" class="btn btn-icon-alt">
|
||||||
|
<span class="icon-button-label">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -939,32 +1066,121 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="tabs" class="mt-3 b-1 b-r-4 p-5">
|
||||||
|
<h2>Tabs</h2>
|
||||||
|
<p>Cards contain content and actions that relate information about a subject.</p>
|
||||||
|
|
||||||
|
<div class="tabs tabs-rounded">
|
||||||
|
|
||||||
|
<div class="tabs-toolbar">
|
||||||
|
<div class="tabs-toolbar-inner">
|
||||||
|
<div class="tabs-scroll-button">
|
||||||
|
<button class="btn btn-icon-alt">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-toolbar-content">
|
||||||
|
<div class="tabs-toolbar-wrapper">
|
||||||
|
|
||||||
|
<div class="tab">
|
||||||
|
Tab One
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab">
|
||||||
|
Tab Two
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab tab-active">
|
||||||
|
Tab Three
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab disabled">
|
||||||
|
Tab Disabled
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-slider tab-slider-horizontal" style="min-width:160px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-scroll-button">
|
||||||
|
<button class="btn btn-icon-alt">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-panels p-5">
|
||||||
|
<p class="typography typography-body1">Content Three</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section id="modal">
|
<section id="modal">
|
||||||
<!-- TO DO close modal on pres esc and when clicked outside the modal-->
|
<!-- TO DO close modal on pres esc and when clicked outside the modal-->
|
||||||
<!-- TO DO when modal is open add class to body .scroll-disabled-->
|
<!-- TO DO when modal is open add class to body .scroll-disabled-->
|
||||||
|
|
||||||
<!-- Button trigger modal -->
|
<!-- Button trigger modal -->
|
||||||
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
|
<div class="btn-content">
|
||||||
Launch backdrop modal
|
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
|
||||||
</button>
|
Launch backdrop modal
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
|
||||||
|
Launch image modal
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
<div class="modal fade " tabindex="-1"> <!--@NavClosed-->
|
<div class="modal fade " tabindex="-1">
|
||||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3 class="modal-title">Modal title</h3>
|
<h3 class="modal-title">Modal title</h3>
|
||||||
@* <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">
|
||||||
ssss
|
ssss
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
|
<button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
|
||||||
<button type="button" class="btn btn-core">Understood</button>
|
<button type="button" class="btn btn-core">Understood</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--IMAGE MODAL-->
|
||||||
|
<div class="modal modal-image fade" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
|
||||||
|
<button @onclick="ToggleModal" type="button" class="btn btn-icon-alt close" data-bs-dismiss="modal" aria-label="Close">
|
||||||
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
||||||
|
</button>
|
||||||
|
<img class="img-fluid" src="https://source.unsplash.com/random?face">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Basic Modal -->
|
||||||
|
<div class="modal modal-basic fade @ModalClosed" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title">Delete selected images?</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
Images will be permenantly removed from your account and synced devices.
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleModal">Close</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-core">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -1000,18 +1216,25 @@
|
|||||||
<div class="color-picker-container">
|
<div class="color-picker-container">
|
||||||
|
|
||||||
<form class="color-picker" action="">
|
<form class="color-picker" action="">
|
||||||
<fieldset>
|
|
||||||
|
|
||||||
|
<label class="radio-group">
|
||||||
|
<input class="radio-input light" id="light" name="theme" type="radio" >
|
||||||
|
<div class="radio-fill light"></div>
|
||||||
<label for="light" class="visually-hidden">Light</label>
|
<label for="light" class="visually-hidden">Light</label>
|
||||||
<input type="radio" id="light" name="theme" checked>
|
</label>
|
||||||
|
|
||||||
|
<label class="radio-group" >
|
||||||
|
<input class="radio-input pink" id="pink" name="theme" type="radio" checked>
|
||||||
|
<div class="radio-fill pink"></div>
|
||||||
|
<label for="pink" class="visually-hidden">Pink</label>
|
||||||
|
</label>
|
||||||
|
|
||||||
<label for="pink" class="visually-hidden">Pink theme</label>
|
<label class="radio-group" >
|
||||||
<input type="radio" id="pink" name="theme">
|
<input class="radio-input dark" id="dark" name="theme" type="radio">
|
||||||
|
<div class="radio-fill dark"></div>
|
||||||
|
<label for="dark" class="visually-hidden">Dark</label>
|
||||||
|
</label>
|
||||||
|
|
||||||
<label for="dark" class="visually-hidden">Dark theme</label>
|
|
||||||
<input type="radio" id="dark" name="theme">
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1168,11 +1391,11 @@
|
|||||||
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
|
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
|
||||||
}
|
}
|
||||||
|
|
||||||
private string ModalShown { get; set; } = "";
|
private string ModalClosed { get; set; } = "";
|
||||||
|
|
||||||
private void ToggleModal()
|
private void ToggleModal()
|
||||||
{
|
{
|
||||||
ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
|
ModalClosed = string.IsNullOrWhiteSpace(ModalClosed) ? "show" : "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,25 +1,25 @@
|
|||||||
@using Connected.Models.Modal;
|
@using Connected.Models.Modal;
|
||||||
@if (IsVisible)
|
@if (IsVisible)
|
||||||
{
|
{
|
||||||
<div class="modal fade show" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
|
<div class="@ClassList" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
|
||||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||||
<div class="modal-content" @onclick="PreventClose">
|
<div class="modal-content" @onclick="PreventClose">
|
||||||
@if (!ModalOptions.NoHeader)
|
@if (!ModalOptions.NoHeader)
|
||||||
{
|
{
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3 class="modal-title">@Title</h3>
|
<h3 class="modal-title">@Title</h3>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
@Content
|
@Content
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
@foreach (ModalButton button in buttons)
|
|
||||||
{
|
|
||||||
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="modal-footer">
|
||||||
|
@foreach (ModalButton button in buttons)
|
||||||
|
{
|
||||||
|
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
@ -1,7 +1,10 @@
|
|||||||
using Connected.Models.Modal;
|
using Connected.Enums;
|
||||||
|
using Connected.Models.Modal;
|
||||||
using Connected.Services;
|
using Connected.Services;
|
||||||
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
using System.Reflection;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class ModalDialog : IDisposable
|
public partial class ModalDialog : IDisposable
|
||||||
@ -18,6 +21,33 @@ public partial class ModalDialog : IDisposable
|
|||||||
|
|
||||||
protected ModalOptions? ModalOptions { get; set; }
|
protected ModalOptions? ModalOptions { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public string? Class { get; set; }
|
||||||
|
|
||||||
|
private CssBuilder ClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder()
|
||||||
|
.AddClass(Type)
|
||||||
|
.AddClass("fade")
|
||||||
|
.AddClass("show")
|
||||||
|
.AddClass(Class);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private string Type
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
var type = Helper.GetEnumDescription(ModalOptions?.Type ?? ModalType.Default);
|
||||||
|
|
||||||
|
if (!string.IsNullOrWhiteSpace(type))
|
||||||
|
type = $"-{type}";
|
||||||
|
|
||||||
|
return $"modal{type}";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
|
|||||||
@ -9,4 +9,6 @@ public class Event
|
|||||||
this.Delegate = Delegate;
|
this.Delegate = Delegate;
|
||||||
args = Args;
|
args = Args;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static Event Empty => new Event(null, null);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,14 @@
|
|||||||
namespace Connected.Models.Modal;
|
using Connected.Enums;
|
||||||
|
|
||||||
|
namespace Connected.Models.Modal;
|
||||||
public class ModalOptions
|
public class ModalOptions
|
||||||
{
|
{
|
||||||
public bool DisableEscKey { get; set; } = false;
|
public bool DisableEscKey { get; set; } = false;
|
||||||
public bool DisableBackdropClick { get; set; } = false;
|
public bool DisableBackdropClick { get; set; } = false;
|
||||||
public bool NoHeader { get; set; } = false;
|
public bool NoHeader { get; set; } = false;
|
||||||
|
|
||||||
|
public ModalType Type { get; set; } = ModalType.Default;
|
||||||
|
|
||||||
public ModalOptions()
|
public ModalOptions()
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
using Connected.Models.Modal;
|
using Connected.Models.Modal;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using System.ComponentModel;
|
using System.ComponentModel;
|
||||||
|
using System.Diagnostics.CodeAnalysis;
|
||||||
|
|
||||||
namespace Connected.Services;
|
namespace Connected.Services;
|
||||||
public class ModalDialogService
|
public class ModalDialogService
|
||||||
@ -14,6 +15,25 @@ public class ModalDialogService
|
|||||||
OnShow?.Invoke(title, body, buttons, options);
|
OnShow?.Invoke(title, body, buttons, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public void ShowDialog<T>(string title, RenderFragment<T> content, T model, List<ModalButton>? buttons = null, ModalOptions? options = null)
|
||||||
|
{
|
||||||
|
var body = content(model);
|
||||||
|
|
||||||
|
OnShow?.Invoke(title, body, buttons ?? new(), options ?? new());
|
||||||
|
}
|
||||||
|
|
||||||
|
public void ShowDialog<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] TComponent, TModel>(string title, TModel model, List<ModalButton>? buttons = null, ModalOptions? options = null) where TComponent : Microsoft.AspNetCore.Components.IComponent where TModel : class
|
||||||
|
{
|
||||||
|
RenderFragment<TModel> fragment = (model) => __builder =>
|
||||||
|
{
|
||||||
|
__builder.OpenComponent<TComponent>(0);
|
||||||
|
__builder.AddAttribute(1, "Model", model);
|
||||||
|
__builder.CloseComponent();
|
||||||
|
};
|
||||||
|
|
||||||
|
OnShow?.Invoke(title, fragment(model), buttons ?? new(), options ?? new());
|
||||||
|
}
|
||||||
|
|
||||||
public void ShowDialog(string title, MarkupString content, List<ModalButton> buttons, ModalOptions options)
|
public void ShowDialog(string title, MarkupString content, List<ModalButton> buttons, ModalOptions options)
|
||||||
{
|
{
|
||||||
var body = new RenderFragment(x => x.AddContent(1, content));
|
var body = new RenderFragment(x => x.AddContent(1, content));
|
||||||
@ -30,6 +50,4 @@ public class ModalDialogService
|
|||||||
{
|
{
|
||||||
OnClose?.Invoke();
|
OnClose?.Invoke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
126
src/Connected.Components/Styles/components/_alerts.scss
Normal file
126
src/Connected.Components/Styles/components/_alerts.scss
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
@use "../util" as *;
|
||||||
|
@use "../globals" as *;
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
position: relative;
|
||||||
|
// background-color: var(--bg-core-primary-light);
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
|
opacity: 0.3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.danger:after {
|
||||||
|
background-color: $danger;
|
||||||
|
}
|
||||||
|
.alert.danger .alert-leading-icon {
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.warning:after {
|
||||||
|
background-color: $warning;
|
||||||
|
}
|
||||||
|
.alert.warning .alert-leading-icon {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.success:after {
|
||||||
|
background-color: $success;
|
||||||
|
}
|
||||||
|
.alert.success .alert-leading-icon {
|
||||||
|
color: $success;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.info:after {
|
||||||
|
background-color: $info;
|
||||||
|
}
|
||||||
|
.alert.info .alert-leading-icon {
|
||||||
|
color: $info;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-content {
|
||||||
|
--height: 2.5rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.alert-leading-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: $border-radius-pill;
|
||||||
|
background-color: transparent;
|
||||||
|
height: var(--height);
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-message {
|
||||||
|
font-size: $base-font-size;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.alert-cta-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.alert-banner .alert-content .alert-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);
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*SM*/
|
||||||
|
.alert.alert-sm {
|
||||||
|
max-width: max-content;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
padding: 0.75rem 1.25rem 0.75rem 0.75rem;
|
||||||
|
&:after {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.alert-sm .alert-content {
|
||||||
|
--height: 1.5rem;
|
||||||
|
|
||||||
|
.alert-leading-icon {
|
||||||
|
height: var(--height);
|
||||||
|
margin-right: 0.35rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-message {
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
.alert-cta-icon {
|
||||||
|
margin-left: 0.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*elevation*/
|
||||||
|
.alert.elevation-1 {
|
||||||
|
box-shadow: $base-box-shadow;
|
||||||
|
}
|
||||||
@ -16,7 +16,7 @@ $appbar-width-open: 300px;
|
|||||||
z-index: $appbar-zindex;
|
z-index: $appbar-zindex;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
// background: radial-gradient(rgba(255,255,255,.05), rgba(255,255,255,.025));
|
// background: radial-gradient(rgba(255,255,255,.05), rgba(255,255,255,.025));
|
||||||
backdrop-filter: blur(15px);
|
//backdrop-filter: blur(15px);
|
||||||
// margin-inline: -1.75rem;
|
// margin-inline: -1.75rem;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to left,
|
to left,
|
||||||
|
|||||||
@ -130,11 +130,11 @@ $border-radius-btn: 100vw;
|
|||||||
|
|
||||||
|
|
||||||
.btn-core {
|
.btn-core {
|
||||||
background-color: var(--bg-core-primary) !important;
|
background-color: var(--bg-core-primary-lighten) !important;
|
||||||
color: set-color (var(--bg-core-primary-lighten)) !important;
|
color: set-color (var(--bg-core-primary-lighten)) !important;
|
||||||
//color: rgba(255,255,255,.85) !important;
|
//color: rgba(255,255,255,.85) !important;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--bg-core-primary-darken) !important;
|
background-color: var(--bg-core-primary) !important;
|
||||||
}
|
}
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&.focus {
|
&.focus {
|
||||||
|
|||||||
@ -104,6 +104,13 @@
|
|||||||
background-color: var(--bg-core-primary-light);
|
background-color: var(--bg-core-primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-item:active,
|
||||||
|
.dropdown-item.active {
|
||||||
|
color: var(--text-core-hc);
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: var(--bg-core-primary);
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-divider {
|
.dropdown-divider {
|
||||||
height: 0;
|
height: 0;
|
||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
|
|||||||
@ -74,7 +74,7 @@ $columns: 12;
|
|||||||
|
|
||||||
.data-grid-row-content{
|
.data-grid-row-content{
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.data-grid:not(.data-grid.dense) .data-grid-row-content {
|
.data-grid:not(.data-grid.dense) .data-grid-row-content {
|
||||||
@ -90,6 +90,80 @@ $columns: 12;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*IMG*/
|
||||||
|
.data-grid-container.show-image {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
@include breakpoint(sm) {
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid-container.show-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);
|
||||||
|
max-width: var(--height);
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-right: .75rem;
|
||||||
|
|
||||||
|
@include breakpoint(sm) {
|
||||||
|
--height:60px;
|
||||||
|
height: var(--height);
|
||||||
|
max-width: var(--height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*vertical image on small screens*/
|
||||||
|
.data-grid-container.show-image-vertical {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
@include breakpoint(sm) {
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid-container.show-image-vertical .data-grid-img {
|
||||||
|
--height:120px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 0.6rem;
|
||||||
|
background-color: var(--bg-core-primary-light);
|
||||||
|
height: var(--height);
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-right: .75rem;
|
||||||
|
|
||||||
|
@include breakpoint(sm) {
|
||||||
|
--height:60px;
|
||||||
|
height: var(--height);
|
||||||
|
max-width: var(--height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid-container.show-image .data-grid-img img {
|
||||||
|
object-fit: cover;
|
||||||
|
height: var(--height);
|
||||||
|
min-width: var(--height);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid-container .data-grid-img{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*ACTIVE*/
|
/*ACTIVE*/
|
||||||
.data-grid:not(.data-grid.dense) .data-grid-row-content:before {
|
.data-grid:not(.data-grid.dense) .data-grid-row-content:before {
|
||||||
content: "";
|
content: "";
|
||||||
@ -160,28 +234,6 @@ $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*/
|
/*SELECT*/
|
||||||
.data-grid.select .data-grid-select {
|
.data-grid.select .data-grid-select {
|
||||||
@ -190,7 +242,6 @@ $columns: 12;
|
|||||||
margin-right: .75rem;
|
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;
|
||||||
|
|||||||
@ -17,3 +17,8 @@
|
|||||||
@forward "dropdown";
|
@forward "dropdown";
|
||||||
@forward "card";
|
@forward "card";
|
||||||
@forward "date-picker";
|
@forward "date-picker";
|
||||||
|
@forward "tabs";
|
||||||
|
@forward "pagination";
|
||||||
|
@forward "alerts";
|
||||||
|
@forward "master-search";
|
||||||
|
@forward "tooltip";
|
||||||
@ -13,7 +13,7 @@ form{
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
flex: 1 0 300px;//TEMP
|
//flex: 1 0 300px;//TEMP
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
@ -194,95 +194,3 @@ form{
|
|||||||
.input-glyph.button.reset {
|
.input-glyph.button.reset {
|
||||||
display:none
|
display:none
|
||||||
}
|
}
|
||||||
|
|
||||||
/*form group-alt*/
|
|
||||||
|
|
||||||
.form-group-alt {
|
|
||||||
--height: 2.5rem;
|
|
||||||
|
|
||||||
//border: 1px solid var(--bg-core-primary);
|
|
||||||
padding: .15rem;
|
|
||||||
height: max-content;
|
|
||||||
//min-width: max-content;
|
|
||||||
color: var(--text-core);
|
|
||||||
border-radius: $border-radius-pill;
|
|
||||||
background-color: var(--bg-core-primary-light);
|
|
||||||
display: inline-block;
|
|
||||||
position:relative;
|
|
||||||
transition: $transition;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group-alt input {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
background: transparent;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chrome, Safari, Edge, Opera */
|
|
||||||
.form-group-alt input::-webkit-outer-spin-button,
|
|
||||||
.form-group-alt input::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Firefox */
|
|
||||||
.form-group-alt input[type=number] {
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group-alt:focus-within {
|
|
||||||
background-color: var(--bg-core-primary-lighten);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*search*/
|
|
||||||
|
|
||||||
/* clears the 'X'*/
|
|
||||||
input[type="search"]::-webkit-search-decoration,
|
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
|
||||||
input[type="search"]::-webkit-search-results-button,
|
|
||||||
input[type="search"]::-webkit-search-results-decoration {
|
|
||||||
-webkit-appearance:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
202
src/Connected.Components/Styles/components/_master-search.scss
Normal file
202
src/Connected.Components/Styles/components/_master-search.scss
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
@use "../util" as *;
|
||||||
|
@use "../globals" as *;
|
||||||
|
|
||||||
|
/*form group-alt*/
|
||||||
|
.form-group-alt {
|
||||||
|
--height: 2.5rem;
|
||||||
|
|
||||||
|
//border: 1px solid var(--bg-core-primary);
|
||||||
|
padding: 0.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;
|
||||||
|
isolation: isolate;
|
||||||
|
transition: $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*INPUT RESET*/
|
||||||
|
.form-group-alt input {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chrome, Safari, Edge, Opera */
|
||||||
|
.form-group-alt input::-webkit-outer-spin-button,
|
||||||
|
.form-group-alt input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
.form-group-alt input[type="number"] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* clears the 'X' in search*/
|
||||||
|
input[type="search"]::-webkit-search-decoration,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-results-button,
|
||||||
|
input[type="search"]::-webkit-search-results-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*focus within*/
|
||||||
|
.form-group-alt:focus-within {
|
||||||
|
background-color: var(--bg-core-primary-lighten);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
//appearance: none;
|
||||||
|
|
||||||
|
&:focus-within ~ #search.search-drop-down {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within ~ .backdrop {
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-cta-icon {
|
||||||
|
&:focus-within ~ #select.search-drop-down {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within ~ .backdrop {
|
||||||
|
opacity: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*SEARCH CONTENT*/
|
||||||
|
.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;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group-alt .input-cta-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
border-radius: $border-radius-pill;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
height: var(--height);
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
z-index: 1;
|
||||||
|
transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0.5rem var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-cta-icon-more {
|
||||||
|
position: absolute;
|
||||||
|
right: -7px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.form-group-alt .input-area {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group-alt input {
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group-alt .input-cta-icon:hover {
|
||||||
|
background-color: var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*DROPDOWN*/
|
||||||
|
.search-drop-down {
|
||||||
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
left: 0;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
min-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: calc(100dvh - 85px);
|
||||||
|
pointer-events: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: -1;
|
||||||
|
list-style: none;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: $base-box-shadow;
|
||||||
|
border-radius: 0 0 1.5rem 1.5rem;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
height: auto;
|
||||||
|
overflow: auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
@ -58,9 +58,6 @@
|
|||||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||||
// https://github.com/twbs/bootstrap/pull/10951.
|
// https://github.com/twbs/bootstrap/pull/10951.
|
||||||
outline: 0;
|
outline: 0;
|
||||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
|
||||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
|
||||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -227,3 +224,105 @@
|
|||||||
// display: block;
|
// display: block;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
/*IMAGE MODAL*/
|
||||||
|
.modal.modal-image{
|
||||||
|
|
||||||
|
--modal-image-height: 80vh;
|
||||||
|
--modal-image-border-width: 0;
|
||||||
|
|
||||||
|
|
||||||
|
.modal-content{
|
||||||
|
overflow: hidden;
|
||||||
|
height: var( --modal-image-height);
|
||||||
|
border: var(--modal-image-border-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.close{
|
||||||
|
float: right;
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 15px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 0;
|
||||||
|
text-shadow: none;
|
||||||
|
color: inherit;
|
||||||
|
background-color: rgba(255,255,255,.35);
|
||||||
|
&:hover{
|
||||||
|
background-color: rgba(255,255,255,.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
height: 100%;
|
||||||
|
object-fit:cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*ACTION MODAL*/
|
||||||
|
.modal.modal-basic{
|
||||||
|
|
||||||
|
--modal-basic-width: 40vw;
|
||||||
|
--modal-basic-height: 40vh;
|
||||||
|
--modal-basic-padding: 1.5rem;
|
||||||
|
--modal-basic-color: var(--text-core);
|
||||||
|
--modal-basic-bg: var(--bg-core-primary-light);
|
||||||
|
--modal-basic-border-color: var(--bg-core-primary-light);
|
||||||
|
--modal-basic-border-width: 1px;
|
||||||
|
--modal-basic-border-radius: 1rem;
|
||||||
|
|
||||||
|
--modal-basic-header-bg: var(--modal-basic-bg);
|
||||||
|
--modal-basic-header-padding: 1.5rem 1.5rem 0;
|
||||||
|
--modal-basic-header-border-color: var(--bg-core-primary-light);
|
||||||
|
--modal-basic-header-border-width: 1px;
|
||||||
|
|
||||||
|
--modal-basic-footer-bg: var(--modal-basic-bg);
|
||||||
|
--modal-basic-footer-padding: 0 1.5rem 1.5rem;
|
||||||
|
--modal-basic-footer-border-color: var(--bg-core-primary-light);
|
||||||
|
--modal-basic-footer-border-width: 1px;
|
||||||
|
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding: var(--modal-basic-header-padding);
|
||||||
|
background-color: var(--modal-basic-header-bg);
|
||||||
|
border-bottom: var(--modal-basic-header-border-width) solid var(--modal-basic-header-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: var(--modal-basic-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: var(--modal-basic-footer-padding);
|
||||||
|
background-color: var(--modal-basic-footer-bg);
|
||||||
|
border-radius: var(--modal-basic-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-dialog {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@include breakpoint(sm) {
|
||||||
|
max-width: 75vw;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: var(--modal-basic-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(lg) {
|
||||||
|
max-width: var(--modal-basic-width);
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
129
src/Connected.Components/Styles/components/_pagination.scss
Normal file
129
src/Connected.Components/Styles/components/_pagination.scss
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
@use "../util" as *;
|
||||||
|
@use "../globals" as *;
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.25rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
/*RECTANGULAR*/
|
||||||
|
&.square .pagination-item .btn {
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
}
|
||||||
|
/*TEXT*/
|
||||||
|
&
|
||||||
|
.pagination-item
|
||||||
|
.btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
|
||||||
|
background-color: transparent;
|
||||||
|
color: inherit;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--bg-core-primary) !important;
|
||||||
|
}
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*FILLED*/
|
||||||
|
&.filled
|
||||||
|
.pagination-item
|
||||||
|
.btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
|
||||||
|
background-color: var(--bg-core-primary-lighten);
|
||||||
|
color: set-color var(--bg-core-primary-lighten);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--bg-core-primary) !important;
|
||||||
|
}
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*OUTLINED*/
|
||||||
|
&.outlined
|
||||||
|
.pagination-item
|
||||||
|
.btn:not([aria-label="Next page"], [aria-label="Previous page"]) {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--bg-core-primary-dark);
|
||||||
|
border: 1px solid var(--bg-core-primary-dark);
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-core) !important;
|
||||||
|
border: 1px solid var(--bg-core-primary-dark) !important;
|
||||||
|
}
|
||||||
|
&:focus-visible,
|
||||||
|
&.focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
background-color: var(--bg-core-primary-darken) !important;
|
||||||
|
color: set-color (var(--bg-core-primary-darken)) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-item {
|
||||||
|
& > * {
|
||||||
|
height: 2rem;
|
||||||
|
min-width: 2rem;
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 6px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pagination-item-selected) > * {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typography[disabled] {
|
||||||
|
color: #ccc !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-small {
|
||||||
|
.pagination-item {
|
||||||
|
& > * {
|
||||||
|
height: 26px;
|
||||||
|
min-width: 26px;
|
||||||
|
margin: 0 1px;
|
||||||
|
padding: 0 4px;
|
||||||
|
border-radius: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-large {
|
||||||
|
.pagination-item {
|
||||||
|
& > * {
|
||||||
|
height: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-disable-elevation .pagination-item .btn {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-rtl .pagination-item .icon-root {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -42,9 +42,9 @@ $radio-disabled-color: darken($radio-secondary-color, 25%);
|
|||||||
width: var(--width);
|
width: var(--width);
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: transperent;
|
background-color: transperent;
|
||||||
border: 2px solid $radio-primary-color;
|
border: 2px solid $radio-primary-color;
|
||||||
transition: background 0.2s ease-in-out;
|
transition: background-color 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-input:checked ~ .radio-fill {
|
.radio-input:checked ~ .radio-fill {
|
||||||
|
|||||||
@ -239,7 +239,7 @@ $sidebar-right-width-closed:0px;
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
line-height: 50px;
|
// line-height: 50px;
|
||||||
border-radius: $border-radius-pill;
|
border-radius: $border-radius-pill;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -266,16 +266,16 @@ $sidebar-right-width-closed:0px;
|
|||||||
background-color: var(--accent-color-hover);
|
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;
|
||||||
line-height: 50px;
|
// //line-height: 50px;
|
||||||
color: var(--text-core-lc);
|
// color: var(--text-core-lc);
|
||||||
font-size: 22px;
|
// font-size: 22px;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
// transition: all 0.3s ease;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// .sidebar .navbar .navbar-item svg {
|
// .sidebar .navbar .navbar-item svg {
|
||||||
// height: 26px;
|
// height: 26px;
|
||||||
@ -339,37 +339,37 @@ $sidebar-right-width-closed:0px;
|
|||||||
|
|
||||||
|
|
||||||
/*TOOLTIP*/
|
/*TOOLTIP*/
|
||||||
.sidebar.close .navbar .navbar-item .navbar-tooltip{
|
// .sidebar.close .navbar .navbar-item .navbar-tooltip{
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
// box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||||
width: max-content;
|
// width: max-content;
|
||||||
left: calc(100% + 12px);
|
// left: calc(100% + 12px);
|
||||||
top: 0;
|
// top: 0;
|
||||||
margin-top: 0;
|
// margin-top: 0;
|
||||||
padding: 10px 20px;
|
// padding: 10px 20px;
|
||||||
border-radius: $border-radius-lg;
|
// border-radius: $border-radius-lg;
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
display: block;
|
// display: block;
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
transition: 0s;
|
// transition: 0s;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
|
// .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
|
||||||
left: calc(100% + 24px);
|
// left: calc(100% + 24px);
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
pointer-events: auto;
|
// pointer-events: auto;
|
||||||
transition: all 0.4s ease;
|
// transition: all 0.4s ease;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.sidebar.close .navbar .navbar-tooltip {
|
// .sidebar.close .navbar .navbar-tooltip {
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
display: block;
|
// display: block;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.sidebar .navbar .navbar-tooltip {
|
// .sidebar .navbar .navbar-tooltip {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
310
src/Connected.Components/Styles/components/_tabs.scss
Normal file
310
src/Connected.Components/Styles/components/_tabs.scss
Normal file
@ -0,0 +1,310 @@
|
|||||||
|
@use "../globals/" as *;
|
||||||
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&.tabs-reverse {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-vertical {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-vertical-reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-rounded {
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
|
||||||
|
.tabs-toolbar {
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-panels {
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-toolbar {
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--bg-core-primary-light);
|
||||||
|
|
||||||
|
&.tabs-border-left {
|
||||||
|
border-top-right-radius: 0 !important;
|
||||||
|
border-bottom-right-radius: 0 !important;
|
||||||
|
border-right: 1px solid $element-fg-core;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-border-right {
|
||||||
|
border-top-left-radius: 0 !important;
|
||||||
|
border-bottom-left-radius: 0 !important;
|
||||||
|
border-left: 1px solid $element-fg-core;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-border-top {
|
||||||
|
border-bottom-left-radius: 0 !important;
|
||||||
|
border-bottom-right-radius: 0 !important;
|
||||||
|
border-bottom: 1px solid $element-fg-core;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-border-bottom {
|
||||||
|
border-top-left-radius: 0 !important;
|
||||||
|
border-top-right-radius: 0 !important;
|
||||||
|
border-top: 1px solid $element-fg-core;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-rounded {
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-vertical {
|
||||||
|
.tabs-toolbar-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.tabs-scroll-button {
|
||||||
|
.button-root {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
.icon-button-label {
|
||||||
|
.icon-root{
|
||||||
|
transform:rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tabs-toolbar-inner {
|
||||||
|
display: flex;
|
||||||
|
min-height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tabs-toolbar-content {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
& .tabs-toolbar-wrapper {
|
||||||
|
width: max-content;
|
||||||
|
position: inherit;
|
||||||
|
display: flex;
|
||||||
|
transition: .3s cubic-bezier(.25,.8,.5,1);
|
||||||
|
|
||||||
|
&.tabs-centered {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-panels {
|
||||||
|
position: relative;
|
||||||
|
transition: .3s cubic-bezier(.25,.8,.5,1);
|
||||||
|
|
||||||
|
&.tabs-vertical {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
width:100%;
|
||||||
|
min-width: 160px;
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
min-height: 48px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.75;
|
||||||
|
user-select: none;
|
||||||
|
white-space: normal;
|
||||||
|
letter-spacing: 0.02857em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--bg-core-primary-lighten);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tab-active {
|
||||||
|
color: var(--bg-core-primary-darken);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--bg-core-primary-darken);
|
||||||
|
color: var(--bg-core-primary-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
cursor: default;
|
||||||
|
pointer-events: none;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .tab-icon-text {
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-inline-end: 8px;
|
||||||
|
margin-inline-start: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-slider {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--bg-core-primary-darken);
|
||||||
|
|
||||||
|
&.tab-slider-horizontal {
|
||||||
|
height: 2px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transition: left .3s cubic-bezier(.64,.09,.08,1);
|
||||||
|
will-change: left;
|
||||||
|
|
||||||
|
&.tab-slider-horizontal-reverse {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tab-slider-vertical {
|
||||||
|
width: 2px;
|
||||||
|
right: 0;
|
||||||
|
transition: top .3s cubic-bezier(.64,.09,.08,1);
|
||||||
|
will-change: top;
|
||||||
|
|
||||||
|
&.tab-slider-vertical-reverse {
|
||||||
|
left: 0;
|
||||||
|
right: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-badge{
|
||||||
|
margin-left:8px;
|
||||||
|
margin-inline-start: 8px;
|
||||||
|
margin-inline-end: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $val in $theme-colors {
|
||||||
|
.tabs-toolbar-#{$key} {
|
||||||
|
background-color: $val;
|
||||||
|
color: set-color($val);
|
||||||
|
|
||||||
|
.tab-slider {
|
||||||
|
background: lighten($val, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
&.tab-active {
|
||||||
|
color: darken($val, 10);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($val, 20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tab-transition {
|
||||||
|
&-enter {
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave, &-leave-active {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave-to {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-reverse-transition {
|
||||||
|
&-enter {
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-leave, &-leave-to {
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(100%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dynamic-tabs {
|
||||||
|
.tabs-toolbar {
|
||||||
|
.tab {
|
||||||
|
padding: 6px 14px;
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
padding: 4px;
|
||||||
|
margin-right: -4px;
|
||||||
|
margin-inline-end: -4px;
|
||||||
|
margin-inline-start: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-panel-header-before {
|
||||||
|
padding-right: 8px;
|
||||||
|
padding-inline-end: 8px;
|
||||||
|
padding-inline-start: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-panel-header-after {
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-inline-start: 8px;
|
||||||
|
padding-inline-end: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-header {
|
||||||
|
&.tabs-header-before {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-header-after {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-panel-header {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
|
||||||
|
&.tabs-panel-header-before {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tabs-panel-header-after {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
501
src/Connected.Components/Styles/components/_tooltip.scss
Normal file
501
src/Connected.Components/Styles/components/_tooltip.scss
Normal file
@ -0,0 +1,501 @@
|
|||||||
|
@use "../globals/" as *;
|
||||||
|
@use "../util/" as *;
|
||||||
|
|
||||||
|
|
||||||
|
/*Define a data-tooltip attribute in your element.*/
|
||||||
|
/*<span data-tooltip="(description here)"></span>*/
|
||||||
|
|
||||||
|
/*Additionally, you can define a data-tooltip-conf attribute to either change position,type or use a feature.*/
|
||||||
|
/*<span data-tooltip="..." data-tooltip-conf="(right, bottom, left), (success, warning, danger, info) small delay no-fading shadow multiline no-arrow square"></span>
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
//Primary-color
|
||||||
|
$tooltip-base-text-color: var(--text-core);
|
||||||
|
$tooltip-base-bg-color:#fff;
|
||||||
|
$tooltip-base-border-color:#fff;
|
||||||
|
|
||||||
|
//Types
|
||||||
|
$tooltip-invert-bg-color: var(--bg-core-primary-lighten);
|
||||||
|
$tooltip-invert-text-color: var(--text-core);
|
||||||
|
$tooltip-success-bg-color: lighten($success, 17);
|
||||||
|
$tooltip-info-bg-color: lighten($info, 17);
|
||||||
|
$tooltip-warning-bg-color: lighten($warning, 17);
|
||||||
|
$tooltip-danger-bg-color: lighten($danger, 17);
|
||||||
|
|
||||||
|
$arrow-size: 8px;
|
||||||
|
$animation-type: cubic-bezier(.73, .01, 0, 1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
[data-tooltip] {
|
||||||
|
position: relative;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
backface-visibility: hidden
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
border-style: solid;
|
||||||
|
border-top-width: $arrow-size;
|
||||||
|
border-right-width: $arrow-size;
|
||||||
|
border-bottom-width: $arrow-size;
|
||||||
|
border-left-width: $arrow-size;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
content: '';
|
||||||
|
top: calc($arrow-size / -2);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
transform: translate(-50%, calc(-50% - $arrow-size * 1.5));
|
||||||
|
transition: opacity .1s $animation-type 0s, transform .6s $animation-type 0s, -webkit-transform .6s $animation-type 0s;
|
||||||
|
z-index: $tooltip-zindex;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
font-size: $base-font-size;
|
||||||
|
text-transform: initial;
|
||||||
|
border-radius: $base-border-radius;
|
||||||
|
color: $tooltip-base-text-color;
|
||||||
|
transition: opacity .3s $animation-type, transform .3s $animation-type, -webkit-transform .3s $animation-type;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: $tooltip-zindex;
|
||||||
|
white-space: nowrap;
|
||||||
|
bottom: 100%;
|
||||||
|
transform: translate(-50%, calc($arrow-size * 3));
|
||||||
|
max-width: 320px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
// box-shadow: $base-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip]:after {
|
||||||
|
background: $tooltip-base-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip]:before {
|
||||||
|
border-top-color: $tooltip-base-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-base-border-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-base-border-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-base-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip] {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
transition: opacity .1s $animation-type .1s, transform .6s $animation-type .1s, -webkit-transform .6s $animation-type .1s;
|
||||||
|
transform: translate(-50%, calc(-50% - $arrow-size / 2));
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
transform: translate(-50%, calc($arrow-size * -1.5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:before {
|
||||||
|
border-style: solid;
|
||||||
|
border-top-width: $arrow-size;
|
||||||
|
border-right-width: $arrow-size;
|
||||||
|
border-bottom-width: $arrow-size;
|
||||||
|
border-left-width: $arrow-size;
|
||||||
|
border-left-width: 0;
|
||||||
|
left: auto;
|
||||||
|
right: calc($arrow-size * -1.5);
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(calc(-50% + $arrow-size * 1.75), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:after {
|
||||||
|
top: 50%;
|
||||||
|
left: 100%;
|
||||||
|
bottom: auto;
|
||||||
|
-webkit-transform: translate(calc($arrow-size * -3), -50%);
|
||||||
|
transform: translate(calc($arrow-size * -3), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:focus:before,
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:hover:before {
|
||||||
|
-webkit-transform: translate(calc(-50% + $arrow-size * 0.75), -50%);
|
||||||
|
transform: translate(calc(-50% + $arrow-size * 0.75), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:focus:after,
|
||||||
|
[data-tooltip][data-tooltip-conf*=right]:hover:after {
|
||||||
|
-webkit-transform: translate(calc($arrow-size * 1.75), -50%);
|
||||||
|
transform: translate(calc($arrow-size * 1.75), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-style: solid;
|
||||||
|
border-top-width: $arrow-size;
|
||||||
|
border-right-width: $arrow-size;
|
||||||
|
border-bottom-width: $arrow-size;
|
||||||
|
border-left-width: $arrow-size;
|
||||||
|
border-top-width: 0;
|
||||||
|
top: auto;
|
||||||
|
bottom: calc($arrow-size * -1.5);
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate(-50%, calc(-50% + $arrow-size * 1.5));
|
||||||
|
transform: translate(-50%, calc(-50% + $arrow-size * 1.5))
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
bottom: auto;
|
||||||
|
-webkit-transform: translate(-50%, calc($arrow-size * -3));
|
||||||
|
transform: translate(-50%, calc($arrow-size * -3))
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:focus:before,
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:hover:before {
|
||||||
|
-webkit-transform: translate(-50%, calc(-50% + $arrow-size / 2));
|
||||||
|
transform: translate(-50%, calc(-50% + $arrow-size / 2))
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:focus:after,
|
||||||
|
[data-tooltip][data-tooltip-conf*=bottom]:hover:after {
|
||||||
|
-webkit-transform: translate(-50%, calc($arrow-size * 1.5));
|
||||||
|
transform: translate(-50%, calc($arrow-size * 1.5))
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:before {
|
||||||
|
border-style: solid;
|
||||||
|
border-top-width: $arrow-size;
|
||||||
|
border-right-width: $arrow-size;
|
||||||
|
border-bottom-width: $arrow-size;
|
||||||
|
border-left-width: $arrow-size;
|
||||||
|
border-right-width: 0;
|
||||||
|
left: calc($arrow-size / -2);
|
||||||
|
top: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
-webkit-transform: translate(calc(-50% - $arrow-size * 2), -50%);
|
||||||
|
transform: translate(calc(-50% - $arrow-size * 2), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:after {
|
||||||
|
top: 50%;
|
||||||
|
right: 100%;
|
||||||
|
bottom: auto;
|
||||||
|
left: auto;
|
||||||
|
-webkit-transform: translate(calc($arrow-size * 3), -50%);
|
||||||
|
transform: translate(calc($arrow-size * 3), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:focus:after,
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:hover:after {
|
||||||
|
-webkit-transform: translate(calc($arrow-size * -1.75), -50%);
|
||||||
|
transform: translate(calc($arrow-size * -1.75), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:focus:before,
|
||||||
|
[data-tooltip][data-tooltip-conf*=left]:hover:before {
|
||||||
|
-webkit-transform: translate(calc(-50% - $arrow-size * 0.75), -50%);
|
||||||
|
transform: translate(calc(-50% - $arrow-size * 0.75), -50%)
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=multiline]:after {
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: normal;
|
||||||
|
min-width: 180px;
|
||||||
|
text-overflow: clip
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=delay]:before {
|
||||||
|
-webkit-transition: opacity .2s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
|
||||||
|
transition: opacity .2s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
|
||||||
|
transition: opacity .2s $animation-type 0s, transform .3s $animation-type 0s;
|
||||||
|
transition: opacity .2s $animation-type 0s, transform .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=delay]:after {
|
||||||
|
-webkit-transition: opacity .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
|
||||||
|
transition: opacity .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
|
||||||
|
transition: opacity .3s $animation-type 0s, transform .3s $animation-type 0s;
|
||||||
|
transition: opacity .3s $animation-type 0s, transform .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=delay]:focus:before,
|
||||||
|
[data-tooltip][data-tooltip-conf*=delay]:hover:before {
|
||||||
|
-webkit-transition: opacity .2s $animation-type .5s, -webkit-transform .6s $animation-type .5s;
|
||||||
|
transition: opacity .2s $animation-type .5s, -webkit-transform .6s $animation-type .5s;
|
||||||
|
transition: opacity .2s $animation-type .5s, transform .6s $animation-type .5s;
|
||||||
|
transition: opacity .2s $animation-type .5s, transform .6s $animation-type .5s, -webkit-transform .6s $animation-type .5s
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=delay]:focus:after,
|
||||||
|
[data-tooltip][data-tooltip-conf*=delay]:hover:after {
|
||||||
|
-webkit-transition: opacity .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s;
|
||||||
|
transition: opacity .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s;
|
||||||
|
transition: opacity .3s $animation-type .4s, transform .3s $animation-type .4s;
|
||||||
|
transition: opacity .3s $animation-type .4s, transform .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=small]:after {
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
padding: .5rem .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=shadow]:after {
|
||||||
|
//box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1)
|
||||||
|
box-shadow: $base-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=no-fading]:after,
|
||||||
|
[data-tooltip][data-tooltip-conf*=no-fading]:before {
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=no-arrow]:before {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=square]:after {
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=invert]:after {
|
||||||
|
color: $tooltip-invert-text-color;
|
||||||
|
background: $tooltip-invert-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=invert]:before {
|
||||||
|
border-top-color: $tooltip-invert-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-invert-bg-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-invert-bg-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-invert-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=success]:after {
|
||||||
|
background: $tooltip-success-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=success]:before {
|
||||||
|
border-top-color: $tooltip-success-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-success-bg-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-success-bg-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-success-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=info]:after {
|
||||||
|
background: $tooltip-info-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=info]:before {
|
||||||
|
border-top-color: $tooltip-info-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-info-bg-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-info-bg-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-info-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=warning]:after {
|
||||||
|
background: $tooltip-warning-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=warning]:before {
|
||||||
|
border-top-color: $tooltip-warning-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-warning-bg-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-warning-bg-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-warning-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=danger]:after {
|
||||||
|
background: $tooltip-danger-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=danger]:before {
|
||||||
|
border-top-color: $tooltip-danger-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-danger-bg-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-danger-bg-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-danger-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*INHERIT*/
|
||||||
|
|
||||||
|
$tooltip-inherit-bg-color: inherit;
|
||||||
|
$tooltip-border-bg-color: $tooltip-inherit-bg-color;
|
||||||
|
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=inherit]:after {
|
||||||
|
background: $tooltip-inherit-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=inherit]:before {
|
||||||
|
border-top-color: $tooltip-inherit-bg-color;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=right]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: $tooltip-border-bg-color;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=bottom]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $tooltip-inherit-bg-color;
|
||||||
|
border-left-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=left]:before {
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: $tooltip-inherit-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
[data-tooltip][data-tooltip=''] {
|
||||||
|
&:after,
|
||||||
|
&:before {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -20,7 +20,8 @@ $element-fg-core: rgba(255, 255, 255, 0.25); // elements-foreground
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
:root {
|
:root,
|
||||||
|
:root:has(.light:checked) {
|
||||||
$blue-50: #f2f4fd;
|
$blue-50: #f2f4fd;
|
||||||
$blue-100: #e5eafa;
|
$blue-100: #e5eafa;
|
||||||
$blue-200: #cbd6f5;
|
$blue-200: #cbd6f5;
|
||||||
@ -58,7 +59,8 @@ $blue-900: #191e2e;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.pink {
|
.pink,
|
||||||
|
:root:has(.pink:checked) {
|
||||||
$violet-50: #f0eef6;
|
$violet-50: #f0eef6;
|
||||||
$violet-100: #e1dced;
|
$violet-100: #e1dced;
|
||||||
$violet-200: #c2b9db;
|
$violet-200: #c2b9db;
|
||||||
@ -92,9 +94,43 @@ $violet-900: #212529;
|
|||||||
--accent-color-hover: #fbc5c3;
|
--accent-color-hover: #fbc5c3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.green,
|
||||||
|
:root:has(.green:checked) {
|
||||||
|
$green-50: #f8fef4;
|
||||||
|
$green-100: #f0f3e8;
|
||||||
|
$green-200: #ebefe2;
|
||||||
|
$green-300: #e5eadc;
|
||||||
|
$green-400: #e3e9da;
|
||||||
|
$green-500: #dfe6d5;
|
||||||
|
$green-600: #bdcbb0;
|
||||||
|
$green-700: #a1b095;
|
||||||
|
$green-800: #4a613c;
|
||||||
|
$green-900: #25311e;
|
||||||
|
|
||||||
|
--bg-core-primary: #{$green-600}; // body-background;
|
||||||
|
--bg-core-primary-light: #{$green-100}; // light
|
||||||
|
--bg-core-primary-lighten: #{$green-500}; // lighten
|
||||||
|
--bg-core-primary-darken: #{$green-700}; // darken;
|
||||||
|
--bg-core-primary-dark: #{$green-800}; // dark;
|
||||||
|
--bg-core-start: #{$green-300}; // body-background
|
||||||
|
--bg-core-end: #{$bg-core-end}; // body-background
|
||||||
|
|
||||||
.dark {
|
--text-core-hc: #{$text-core-hc}; //title
|
||||||
|
--text-core: #{$green-900}; //text
|
||||||
|
--text-core-lc: #{$text-core-lc}; //metadata
|
||||||
|
--text-core-vc: #{$text-core-vc}; //ikona-text
|
||||||
|
|
||||||
|
--border-core-lighten:#{$green-300}; //border-lighten
|
||||||
|
--border-core: #{$green-400}; //border
|
||||||
|
--element-bg-core: #{$element-bg-core}; // elements-background
|
||||||
|
--element-fg-core: #{$element-fg-core}; // elements-foreground
|
||||||
|
|
||||||
|
--accent-color: #dbe971;
|
||||||
|
--accent-color-hover: #cbcc58;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark,
|
||||||
|
:root:has(.dark:checked) {
|
||||||
--bg-core-primary: hsl(0 0% 10% / 100%); // body-background;
|
--bg-core-primary: hsl(0 0% 10% / 100%); // body-background;
|
||||||
--bg-core-primary-light: hsl(0 0% 15% / 100%); // light
|
--bg-core-primary-light: hsl(0 0% 15% / 100%); // light
|
||||||
--bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten
|
--bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten
|
||||||
@ -209,6 +245,7 @@ $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
|
||||||
|
$tooltip-zindex:896;
|
||||||
$appbar-zindex: 897;
|
$appbar-zindex: 897;
|
||||||
$sidebar-zindex: 899;
|
$sidebar-zindex: 899;
|
||||||
$sidebar-right-zindex: 898;
|
$sidebar-right-zindex: 898;
|
||||||
|
|||||||
@ -1,53 +1,33 @@
|
|||||||
@use "../globals" as *;
|
@use "../globals" as *;
|
||||||
|
|
||||||
|
|
||||||
.color-picker-container {
|
.color-picker {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker > fieldset {
|
|
||||||
border: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
//flex-direction: column;
|
gap: 1rem;
|
||||||
gap: 1.5rem;
|
|
||||||
width: fit-content;
|
|
||||||
//background: #fff;
|
|
||||||
padding: 0.5rem 1.5rem;
|
|
||||||
//position: fixed;
|
|
||||||
//top: 1rem;
|
|
||||||
//right: 0;
|
|
||||||
border-radius: 0 0 1rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker input[type="radio"] {
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
width: 0.75rem;
|
|
||||||
height: 0.75rem;
|
|
||||||
outline: 2px solid var(--radio-color, currentColor);
|
|
||||||
outline-offset: 2px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker input[type="radio"]:checked {
|
.color-picker input[type="radio"]:checked {
|
||||||
background-color: var(--radio-color);
|
background-color: var(--radio-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker input[type="radio"] {
|
.color-picker input[type="radio"].light {
|
||||||
--radio-color: hsl(225, 68%, 85%);
|
--radio-color: hsl(225, 68%, 85%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker input[type="radio"] {
|
.color-picker input[type="radio"].pink {
|
||||||
--radio-color: rebeccapurple;
|
--radio-color: rebeccapurple;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-picker input[type="radio"] {
|
.color-picker input[type="radio"].dark {
|
||||||
--radio-color: #232323;
|
--radio-color: #232323;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.square > * {
|
.square > * {
|
||||||
width: 8.5rem;
|
width: 8.5rem;
|
||||||
height: 8.5rem;
|
height: 8.5rem;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user