Change styles in(dropdown, grid, inputs, modal, radio, sidebar) Add new components(alerts, master search, pagination, tooltip)

features/rewrite/fix_14032023
Janko Jordan 2 years ago
parent 98ff5d5dd8
commit e4b246a8bc

@ -40,20 +40,17 @@
<nav>
<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="#">
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.Create" class="icon-root svg-icon icon icon icon-size-md" />
</div>
<span class="navbar-link">New document</span>
</a>
<span class="navbar-tooltip">
New document
</span>
</li>
<li class="navbar-item">
<li class="navbar-item" data-tooltip="Tasks" data-tooltip-conf="right shadow">
<a href="#">
<div class="navbar-leading-icon">
<div class="badge-group">
@ -70,15 +67,12 @@
</div>
</span>
</a>
<span class="navbar-tooltip">
Tasks
</span>
</li>
<li class="navbar-item">
<li class="navbar-item" data-tooltip="Notification" data-tooltip-conf="right shadow">
<a href="#">
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon icon-size-md" />
@ -90,12 +84,9 @@
</div>
</span>
</a>
<span class="navbar-tooltip">
Notification
</span>
</li>
<li class="navbar-item">
<li class="navbar-item" data-tooltip="Calendar" data-tooltip-conf="right shadow">
<a href="#">
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Outlined.DateRange" class="icon-root svg-icon icon icon-size-md" />
@ -107,12 +98,9 @@
</div>
</span>
</a>
<span class="navbar-tooltip">
Calendar
</span>
</li>
<li class="navbar-item">
<li class="navbar-item" data-tooltip="Main navigation" data-tooltip-conf="right shadow">
<a href="#">
<div class="navbar-leading-icon">
<Glyph SVG="@Icons.Material.Filled.Apps" class="icon-root svg-icon icon icon-size-md" />
@ -124,9 +112,6 @@
</div>
</span>
</a>
<span class="navbar-tooltip">
Main navigation
</span>
</li>
<div class="sidebar-divider"></div>
</ul>
@ -142,36 +127,123 @@
<div class="appbar">
<div class="d-none d-sm-inline-block" @onclick="ToggleSidebar">
@* <button class="btn btn-icon-alt">
<Glyph SVG="@Icons.Material.Outlined.Menu" class="icon-root svg-icon" />
<div class="">
<button class="btn btn-icon-alt d-inline-block d-sm-none">
<Glyph SVG="@Icons.Material.Outlined.ArrowBack" class="icon-root svg-icon icon-size-md" />
</button>
<span class="text"> Sidebar</span> *@
</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="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">
<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"> *@
<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>
</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 class="badge-group">
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon-size-md" />
<div class="badge-group mt-0">
<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 badge-top right bg-core badge-overlap">3</span>
<span class="badge badge-top right bg-warning badge-overlap">3</span>
</span>
</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">
<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">
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
</span>
</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">
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
</span>
</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" />
</button>
@ -608,7 +680,7 @@
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>
<label class="label-animated">Message</label>
<div class="input-helper-text">Some helping Text</div>
@ -728,7 +800,7 @@
</div>
<div class="data-grid dense image select collapse mt-5">
<div class="data-grid dense select collapse mt-5">
<!--dense select collapse-->
<div class="data-grid-row-content @NavClosed">
<!--active-->
@ -743,12 +815,15 @@
</label>
</div>
<div class="data-grid-img">
<div class="data-grid-container show-image-vertical"> <!--class for show-image or show-image-vertical moved here-->
<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-wrapper"> <!--becourse we move img div in data-grid-container-->
<div class="row">
<div class="col-12 col-md-4">
<div class="text-hc">Product 1</div>
@ -777,11 +852,63 @@
</div>
</div>
</div>
</div>
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
</div>
</div>
</div>
<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>
@ -939,17 +1066,73 @@
<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">
<!-- 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-->
<!-- Button trigger modal -->
<div class="btn-content">
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
Launch backdrop modal
</button>
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
Launch image modal
</button>
</div>
<!-- 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-content">
<div class="modal-header">
@ -967,6 +1150,39 @@
</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>
</section>
</main>
@ -1000,18 +1216,25 @@
<div class="color-picker-container">
<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>
<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>
<input type="radio" id="pink" name="theme">
<label class="radio-group" >
<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>
</div>
@ -1168,11 +1391,11 @@
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
}
private string ModalShown { get; set; } = "";
private string ModalClosed { get; set; } = "";
private void ToggleModal()
{
ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
ModalClosed = string.IsNullOrWhiteSpace(ModalClosed) ? "show" : "";
}

@ -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;
transition: all 0.3s ease;
// 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;
background: linear-gradient(
to left,

@ -130,11 +130,11 @@ $border-radius-btn: 100vw;
.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: rgba(255,255,255,.85) !important;
&:hover {
background-color: var(--bg-core-primary-darken) !important;
background-color: var(--bg-core-primary) !important;
}
&:focus-visible,
&.focus {

@ -104,6 +104,13 @@
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 {
height: 0;
margin: 0.5rem 0;

@ -74,7 +74,7 @@ $columns: 12;
.data-grid-row-content{
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 {
@ -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*/
.data-grid:not(.data-grid.dense) .data-grid-row-content:before {
content: "";
@ -160,28 +234,6 @@ $columns: 12;
}
/*END DENSE ACTIVE*/
/*IMG*/
.data-grid.image .data-grid-img {
--height:60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.6rem;
background-color: var(--bg-core-primary-light);
height: var(--height);
aspect-ratio: 1/1;
overflow: hidden;
margin-top: .5rem;
margin-right: .75rem;
}
.data-grid.image .data-grid-img img {
object-fit: cover;
height: var(--height);
aspect-ratio: 1/1;
}
/*SELECT*/
.data-grid.select .data-grid-select {
@ -190,7 +242,6 @@ $columns: 12;
margin-right: .75rem;
}
.data-grid .data-grid-img,
.data-grid .data-grid-select,
.data-grid .data-grid-collapse-cta{
display: none;

@ -17,3 +17,8 @@
@forward "dropdown";
@forward "card";
@forward "date-picker";
@forward "tabs";
@forward "pagination";
@forward "alerts";
@forward "master-search";
@forward "tooltip";

@ -13,7 +13,7 @@ form{
position: relative;
margin-top: 1rem;
margin-bottom: 1.5rem;
flex: 1 0 300px;//TEMP
//flex: 1 0 300px;//TEMP
}
textarea {
@ -194,95 +194,3 @@ form{
.input-glyph.button.reset {
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);
}

@ -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
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
}
@ -227,3 +224,105 @@
// 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;
}
}
}

@ -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);
height: var(--height);
border-radius: 50%;
background: transperent;
background-color: transperent;
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 {

@ -239,7 +239,7 @@ $sidebar-right-width-closed:0px;
list-style: none;
transition: all 0.4s ease;
margin-bottom: 12px;
line-height: 50px;
// line-height: 50px;
border-radius: $border-radius-pill;
}
@ -266,16 +266,16 @@ $sidebar-right-width-closed:0px;
background-color: var(--accent-color-hover);
}
.sidebar .navbar .navbar-item i {
height: 50px;
min-width: 50px;
text-align: center;
line-height: 50px;
color: var(--text-core-lc);
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
}
// .sidebar .navbar .navbar-item i {
// height: 50px;
// min-width: 50px;
// text-align: center;
// //line-height: 50px;
// color: var(--text-core-lc);
// font-size: 22px;
// cursor: pointer;
// transition: all 0.3s ease;
// }
// .sidebar .navbar .navbar-item svg {
// height: 26px;
@ -339,37 +339,37 @@ $sidebar-right-width-closed:0px;
/*TOOLTIP*/
.sidebar.close .navbar .navbar-item .navbar-tooltip{
position: absolute;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
width: max-content;
left: calc(100% + 12px);
top: 0;
margin-top: 0;
padding: 10px 20px;
border-radius: $border-radius-lg;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
// .sidebar.close .navbar .navbar-item .navbar-tooltip{
// position: absolute;
// background: #fff;
// box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
// width: max-content;
// left: calc(100% + 12px);
// top: 0;
// margin-top: 0;
// padding: 10px 20px;
// border-radius: $border-radius-lg;
// opacity: 0;
// display: block;
// pointer-events: none;
// transition: 0s;
// }
.sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
left: calc(100% + 24px);
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
// .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
// left: calc(100% + 24px);
// opacity: 1;
// pointer-events: auto;
// transition: all 0.4s ease;
// }
.sidebar.close .navbar .navbar-tooltip {
opacity: 1;
display: block;
}
// .sidebar.close .navbar .navbar-tooltip {
// opacity: 1;
// display: block;
// }
.sidebar .navbar .navbar-tooltip {
display: none;
}
// .sidebar .navbar .navbar-tooltip {
// display: none;
// }

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

@ -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-100: #e5eafa;
$blue-200: #cbd6f5;
@ -58,7 +59,8 @@ $blue-900: #191e2e;
}
.pink {
.pink,
:root:has(.pink:checked) {
$violet-50: #f0eef6;
$violet-100: #e1dced;
$violet-200: #c2b9db;
@ -92,9 +94,43 @@ $violet-900: #212529;
--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
--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 {
.dark,
:root:has(.dark:checked) {
--bg-core-primary: hsl(0 0% 10% / 100%); // body-background;
--bg-core-primary-light: hsl(0 0% 15% / 100%); // light
--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;
//z-index
$tooltip-zindex:896;
$appbar-zindex: 897;
$sidebar-zindex: 899;
$sidebar-right-zindex: 898;

@ -1,53 +1,33 @@
@use "../globals" as *;
.color-picker-container {
.color-picker {
margin-bottom: 1rem;
}
.color-picker > fieldset {
border: 0;
display: flex;
//flex-direction: column;
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;
gap: 1rem;
}
.color-picker input[type="radio"]:checked {
background-color: var(--radio-color);
}
.color-picker input[type="radio"] {
.color-picker input[type="radio"].light {
--radio-color: hsl(225, 68%, 85%);
}
.color-picker input[type="radio"] {
.color-picker input[type="radio"].pink {
--radio-color: rebeccapurple;
}
.color-picker input[type="radio"] {
.color-picker input[type="radio"].dark {
--radio-color: #232323;
}
.square > * {
width: 8.5rem;
height: 8.5rem;

Loading…
Cancel
Save