Merge branch 'features/rewrite/styles' into features/rewrite/main
This commit is contained in:
Matija Koželj
commit
909cfd0d81
@ -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" : "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
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;
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
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
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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);
|
||||
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;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
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-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
|
||||
|
||||
.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-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…
x
Reference in New Issue
Block a user