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

Merge branch 'features/rewrite/styles' of https://git.tompit.com/Connected/Connected.Components into features/rewrite/styles

Browse Source
This commit is contained in:
Matija Koželj 2023-02-17 10:47:45 +01:00
commit 31be47fb6a
21 changed files with 1648 additions and 475 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,83 +1,123 @@
@page "/demo"
<body>
<body class="">
<div class="document-container d-flex">
<aside>
<div class="sidebar @sidebarClosed">
<div class="sidebar @sidebarClosed bottombar">
<div class="profile-details">
<div class="avatar">
<img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan">
</div>
<div class="name-job">
<div class="profile-description">
<div class="profile-name">Janko Jordan</div>
<div class="profile-job">Web Designer</div>
</div>
<i class='bx bx-log-out'></i>
</div>
<ul class="nav-links">
<li class="@NavClosed">
<div @onclick="ToggleNav" class="iocn-link">
<nav>
<ul class="navbar mt-sm-5 pt-sm-5">
<li class="navbar-item fab">
<a href="#">
<i class='bx bx-collection' @onclick="ToggleNav"></i>
<span class="link_name">Proizvodni nalogi</span>
<i class='bx bx-pencil'></i>
<span class="navbar-link">New document</span>
</a>
<i class='bx bxs-chevron-down arrow'></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Proizvodni nalogi</a></li>
<li><a href="#">Osnutek</a></li>
<li><a href="#">V obdelavi</a></li>
<li><a href="#">Aktiven</a></li>
<li><a href="#">Zaprt</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="link_name">Izvedba</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Izvedba</a></li>
</ul>
</li>
</ul>
<span class="navbar-tooltip">
New document
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-home'></i>
<span class="navbar-link">Main navbar link 1</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a>
<span class="navbar-tooltip">
Main navbar link 1
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-shape-square'></i>
<span class="navbar-link">Main navbar link 2</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a>
<span class="navbar-tooltip">
Main navbar link 2
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-message-square-dots'></i>
<span class="navbar-link">Main navbar link 3</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a>
<span class="navbar-tooltip">
Main navbar link 3
</span>
</li>
<li class="navbar-item">
<a href="#">
<i class='bx bx-customize'></i>
<span class="navbar-link">Main navbar link 4</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a>
<span class="navbar-tooltip">
Main navbar link 4
</span>
</li>
<div class="sidebar-divider"></div>
</ul>
</nav>
</div>
</aside>
<section class="main @sidebarClosed">
<main class="main @sidebarClosed @sidebarRightClosed">
<div class="color-picker-container">
<form class="color-picker" action="">
<fieldset>
<legend class="visually-hidden">Pick a color scheme</legend>
<label for="light" class="visually-hidden">Light</label>
<input type="radio" id="light" name="theme" checked>
<label for="pink" class="visually-hidden">Pink theme</label>
<input type="radio" id="pink" name="theme">
<label for="dark" class="visually-hidden">Dark theme</label>
<input type="radio" id="dark" name="theme">
</fieldset>
</form>
</div>
<div class="">
<i class='bx bx-menu' @onclick="ToggleSidebar"></i>
<span class="text">Open Sidebar</span>
<div class="d-flex justify-space-between">
<div>
<i class='bx bx-menu' @onclick="ToggleSidebar"></i>
@* <Glyph SVG="@Icons.Material.Rounded.Dangerous" /> *@
<span class="text">Open Sidebar</span>
</div>
<div>
<i class='bx bx-filter' @onclick="ToggleSidebarRight"></i>
<span class="text">Open Filters</span>
</div>
</div>
<section id="borders" class="mt-3 b-1 b-r-4 p-5">
<h2>Borders</h2>
<p>Use border utilities to quickly style the border, border color and border-radius of an element.
@ -152,19 +192,19 @@
<div class="mt-4 b-1 b-r-3 px-4 element-fg-core">
<pre>
<code id="htmlViewer" style="display:block;overflow-x:auto;">
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-core&quot;</span>&gt;</span>text-core<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-primary&quot;</span>&gt;</span>text-primary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-secondary&quot;</span>&gt;</span>text-secondary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-success&quot;</span>&gt;</span>text-success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-info&quot;</span>&gt;</span>text-info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-warning&quot;</span>&gt;</span>text-warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-danger&quot;</span>&gt;</span>text-danger<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-white&quot;</span>&gt;</span>text-white<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-light&quot;</span>&gt;</span>text-light<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-dark&quot;</span>&gt;</span>text-dark<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-black&quot;</span>&gt;</span>text-black<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
</code></pre>
<code id="htmlViewer" style="display:block;overflow-x:auto;">
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-core&quot;</span>&gt;</span>text-core<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-primary&quot;</span>&gt;</span>text-primary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-secondary&quot;</span>&gt;</span>text-secondary<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-success&quot;</span>&gt;</span>text-success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-info&quot;</span>&gt;</span>text-info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-warning&quot;</span>&gt;</span>text-warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-danger&quot;</span>&gt;</span>text-danger<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-white&quot;</span>&gt;</span>text-white<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-light&quot;</span>&gt;</span>text-light<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-dark&quot;</span>&gt;</span>text-dark<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">span</span> <span style="color:rgb(0, 128, 128); font-weight:400;">class</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;text-black&quot;</span>&gt;</span>text-black<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">span</span>&gt;</span>
</code></pre>
</div>
<hr class="mt-4 mb-4">
<h4 class="text-core mt-5">Background color</h4>
@ -457,15 +497,15 @@
<h4 class="text-core mt-5">Sizes</h4>
<div class="">
<button type="button" href="#" class="btn btn-sm btn-core">small button</button>
<button type="button" href="#" class="btn btn-sm btn-light">small button</button>
<button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
</div>
<div class="mt-4 ">
<button type="button" href="#" class="btn btn-lg btn-core">large button</button>
<button type="button" href="#" class="btn btn-lg btn-light">large button</button>
<button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
</div>
<div class="mt-4 ">
<button type="button" href="#" class="btn btn-block btn-core">full width button</button>
<button type="button" href="#" class="mt-4 btn btn-block btn-light">full width
<button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
button</button>
</div>
</div>
@ -496,40 +536,110 @@
</p>
<div>
<div class="container">
<div class="grid grid-col-3 gap-3">
<div>
<label class="toggle-group" for="toggle-1">
<input class="toggle-input" id="toggle-1" name="toggle" type="checkbox" checked>
<div class="toggle-fill"></div>
<label for="toggle-1" class="toggle-label">Checked</label>
</label>
<label class="toggle-group" for="toggle-2">
<input class="toggle-input" id="toggle-2" name="toggle" type="checkbox">
<div class="toggle-fill"></div>
<label for="toggle-2" class="toggle-label">Unchecked</label>
</label>
<label class="toggle-group" for="toggle-3">
<input class="toggle-input" id="toggle-3" name="toggle" type="checkbox" disabled>
<div class="toggle-fill"></div>
<label for="toggle-3" class="toggle-label">Disabled</label>
</label>
</div>
@* <div>
<div class="checkbox-group">
<input id="checkbox-1" name="checkbox" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-label">Checked</label>
<input id="checkbox-1" name="checkbox" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-label">Checked</label>
</div>
<div class="checkbox-group">
<input id="checkbox-2" name="checkbox" type="checkbox">
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
<input id="checkbox-2" name="checkbox" type="checkbox">
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
</div>
<div class="checkbox-group">
<input id="checkbox-1" name="checkbox" type="checkbox" disabled>
<label for="checkbox-1" class="checkbox-label">Checked disabled</label>
<input id="checkbox-3" name="checkbox" type="checkbox" disabled>
<label for="checkbox-3" class="checkbox-label">Checked disabled</label>
</div>
</div> *@
<div>
<label class="checkbox-group" for="checkbox-1">
<input class="checkbox-input" id="checkbox-1" name="checkbox" type="checkbox" checked>
<div class="checkbox-fill"></div>
<label for="checkbox-1" class="checkbox-label">Checked</label>
</label>
<label class="checkbox-group" for="checkbox-2">
<input class="checkbox-input" id="checkbox-2" name="checkbox" type="checkbox">
<div class="checkbox-fill"></div>
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
</label>
<label class="checkbox-group" for="checkbox-3">
<input class="checkbox-input" id="checkbox-3" name="checkbox" type="checkbox" disabled>
<div class="checkbox-fill"></div>
<label for="checkbox-3" class="checkbox-label">Disabled</label>
</label>
</div>
@* <div>
<div class="radio-group">
<input id="radio-1" name="radio" type="radio" checked>
<label for="radio-1" class="radio-label">Checked</label>
<input id="radio-1" name="radio" type="radio" checked>
<label for="radio-1" class="radio-label">Checked</label>
</div>
<div class="radio-group">
<input id="radio-2" name="radio" type="radio">
<label for="radio-2" class="radio-label">Unchecked</label>
<input id="radio-2" name="radio" type="radio">
<label for="radio-2" class="radio-label">Unchecked</label>
</div>
<div class="radio-group">
<input id="radio-3" name="radio" type="radio" disabled>
<label for="radio-3" class="radio-label">Disabled</label>
<input id="radio-3" name="radio" type="radio" disabled>
<label for="radio-3" class="radio-label">Disabled</label>
</div>
</div> *@
<div>
<label class="radio-group" for="radio-1">
<input class="radio-input" id="radio-1" name="radio" type="radio" checked>
<div class="radio-fill"></div>
<label for="radio-1" class="radio-label">Checked</label>
</label>
<label class="radio-group" for="radio-2">
<input class="radio-input" id="radio-2" name="radio" type="radio">
<div class="radio-fill"></div>
<label for="radio-2" class="radio-label">Unchecked</label>
</label>
<label class="radio-group" for="radio-3">
<input class="radio-input" id="radio-3" name="radio" type="radio" disabled>
<div class="radio-fill"></div>
<label for="radio-3" class="radio-label">Disabled</label>
</label>
</div>
</div>
</div>
</section>
@ -541,7 +651,7 @@
<form>
<div class="d-flex flex-wrap gap-3">
<div class="grid grid-col-3 gap-3">
<div class="form-group error">
@ -646,6 +756,7 @@
<i class='bx bx-error-circle'></i>
</span>
</span>
<div class="backdrop"></div>
<div class="drop-down">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-header">Header</div>
@ -678,11 +789,9 @@
</div>
<div class="btn-box">
<button type="button" href="#" class="btn btn-core " aria-pressed="true">active
button</button>
<button type="button" href="#" class="btn btn-outline-core " aria-pressed="true">active
button</button>
<div class="btn-box my-5">
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
</div>
</form>
@ -707,10 +816,166 @@
<div>12</div>
</div>
</div>
</section>
<ul class="simple-grid-wraper mt-5">
<li class="row bb-1 b-c-core pb-3 mb-3">
<div class="col-12 col-md-6">
<div class="text-hc">Product 1</div>
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
<div class="text-small">Product serial code</div>
</div>
<div class="col-12 col-md-6">
<div class="text-semibold text-md-right"><i class='bx bx-menu' @onclick="ToggleNav"></i>77,29</div>
</div>
<div class="col-12 col-md-6 collapse @NavClosed">
<div class="text-small">
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
</div>
</div>
</li>
<li class="row bb-1 b-c-core pb-3">
<div class="col-12 col-md-6">
<div class="text-hc">Product 2</div>
<a class="text-link text-semibold" href="#">0023 001445669 2</a>
<div class="text-small">You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected</div>
</div>
<div class="col-12 col-md-6">
<div class="text-semibold text-md-right">727,29</div>
</div>
</li>
</ul>
</main>
<aside>
<div class="sidebar @sidebarRightClosed right">
<div class="position-sticky" style="top:0;">
<div class="scrollable">
<div class="scroll-wrapper ">
<div class="scroll-container ">
<div class="scroll-content ">
<nav>
<ul class="navbar">
<li class="navbar-header">Pick a color scheme</li>
<div class="color-picker-container">
<form class="color-picker" action="">
<fieldset>
<label for="light" class="visually-hidden">Light</label>
<input type="radio" id="light" name="theme" checked>
<label for="pink" class="visually-hidden">Pink theme</label>
<input type="radio" id="pink" name="theme">
<label for="dark" class="visually-hidden">Dark theme</label>
<input type="radio" id="dark" name="theme">
</fieldset>
</form>
</div>
<div class="sidebar-divider"></div>
<li class="navbar-header">Header</li>
<li class="navbar-item">
<a href="#">
<span class="navbar-link">Main navbar link 1</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a>
</li>
<li class="navbar-item">
<a href="#">
<span class="navbar-link">Main navbar link 1</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a>
</li>
<div class="sidebar-divider"></div>
<li class="navbar-header">Header</li>
<form>
<div class="form-group ">
<input type="name" required="required" /><span class="highlight"></span><span class="bar"></span>
<label class="label-animated">Password</label>
<div class="input-helper-text">Some helping Text</div>
<div class="input-error-text">At least 6 characters required</div>
<span class="input-glyph-wraper">
<span class="input-glyph">
<span class="input-glyph button">
<svg class="icon-root svg-icon icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
@Icons.Material.Filled.Analytics
</svg>
</span>
<span class="input-glyph error">
<i class='bx bx-error-circle'></i>
</span>
</span>
</span>
</div>
</form>
<div>
<div class="sidebar-divider mt-5"></div>
<li class="navbar-header">Header</li>
<div>
<label class="toggle-group reversed" for="toggle-r1">
<input class="toggle-input" id="toggle-r1" name="toggle" type="checkbox" checked>
<div class="toggle-fill"></div>
<label for="toggle-r1" class="toggle-label">Checked</label>
</label>
</div>
<div>
<label class="toggle-group reversed" for="toggle-r2">
<input class="toggle-input" id="toggle-r2" name="toggle" type="checkbox">
<div class="toggle-fill"></div>
<label for="toggle-r2" class="toggle-label">Checked</label>
</label>
</div>
</div>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="">test</div>
</div>
</div>
</aside>
</div>
</body>
</body>
@code {
private string sidebarClosed { get; set; } = "close";
@ -720,12 +985,20 @@
sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : "";
}
private string sidebarRightClosed { get; set; } = "close-r";
private string NavClosed { get; set; } = "showMenu";
private void ToggleSidebarRight()
{
sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : "";
}
private string NavClosed { get; set; } = "";
private void ToggleNav()
{
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "showMenu" : "";
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
}
}
}

3
src/Connected.Components.Showcase.Runner/wwwroot/index.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connected.Components.Showcase.Runner</title>
<base href="/" />
<link href="css/app.css" rel="stylesheet" />
@ -27,4 +28,4 @@
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
</html>

8
src/Connected.Components/Styles/Connected.Components.scss
View File

@ -1,4 +1,4 @@
@import 'globals/_index';
@import 'layout/_index';
@import 'components/_index';
@import 'util/_index';
@forward 'globals';
@forward 'layout';
@forward 'components';
@forward 'util';

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

@ -12,12 +12,12 @@
user-select: none;
background-color: $bg-color;
border: 1px solid transparent;
padding: 0.375rem 1rem;
padding: 0.3rem 1.35rem;
font-size: $base-font-size;
text-transform: uppercase;
line-height: $base-font-size * 1.5;
text-decoration: none;
border-radius: $base-border-radius * 20;
border-radius: $border-radius-pill;
transition: $transition;
}
@ -46,12 +46,12 @@
}
.btn-outline-#{$key} {
// @include btn();
color: $val;
color: darken($val, 10);
background-color: transparent;
border: 1px solid $val;
border: 1px solid darken($val, 10);
&:hover {
color: darken($val, 10);
border: 1px solid darken($val, 10);
color: darken($val, 30);
border: 1px solid darken($val, 30);
}
&:focus-visible,
&.focus {
@ -67,24 +67,24 @@
}
.btn.btn-sm {
font-size: $font-size-sm;
line-height: $font-size-sm * 1.5;
padding: 0.25rem 0.75rem;
border-radius: $base-border-radius;
font-size: .75rem;
line-height: $font-size-sm * 1.25;
padding: 0.4rem 1rem;
//border-radius: $base-border-radius;
}
.btn.btn-lg {
font-size: $font-size-md;
line-height: $font-size-md * 1.5;
padding: 0.5rem 1.25rem;
border-radius: $base-border-radius * 2.5;
padding: 0.5rem 1.65rem;
//border-radius: $base-border-radius * 2.5;
}
.btn.btn-block {
font-size: $font-size-md;
line-height: $font-size-md * 1.5;
padding: 0.5rem 1.25rem;
border-radius: $base-border-radius * 2.5;
padding: 0.5rem 1.5rem;
//border-radius: $base-border-radius * 2.5;
display: block;
width: 100%;
}
@ -114,12 +114,12 @@
}
.btn-outline-core {
color: var(--bg-core-primary) !important;
color: var(--bg-core-primary-darken) !important;
background-color: transparent !important;
border: 1px solid var(--bg-core-primary) !important;
border: 1px solid var(--bg-core-primary-darken) !important;
&:hover {
color: var(--bg-core-primary-darken) !important;
border: 1px solid var(--bg-core-primary-darken) !important;
color: var(--bg-core-primary-dark) !important;
border: 1px solid var(--bg-core-primary-dark) !important;
}
&:focus-visible,
&.focus {

266
src/Connected.Components/Styles/components/_checkbox.scss
View File

@ -1,102 +1,188 @@
$color3: #f4f4f4;
$color4: var(--bg-core-primary-darken);
$checkbox-primary-color: var(--bg-core-primary-darken);
$checkbox-secondary-color: #f4f4f4;
$checkbox-disabled-color: darken($checkbox-secondary-color, 25%);
.checkbox-group {
margin: 0.5rem;
position:relative;
input[type="checkbox"] {
position: absolute;
opacity: 0;
+ .checkbox-label {
&:before {
content: "";
background: transparent;
border-radius: 0%;
border: 2px solid $color4;
display: inline-block;
width: 1.25em;
height: 1.25em;
position: relative;
top: .15rem;
margin-right: .75em;
vertical-align: top;
cursor: pointer;
text-align: center;
z-index: 1;
transition: all 250ms ease;
}
}
&:checked {
+ .checkbox-label {
&:before {
background-color: $color4;
box-shadow: inset 0 0 0 2px $color3;
--width: 1.25rem;
--height: var(--width);
--inset: calc(var(--width) / 10);
margin: 0.75rem 0;
width: max-content;
cursor: pointer;
position:relative;
display: flex;
align-items: center;
gap:.75rem;
z-index: 1;
&.reversed{
justify-content: space-between;
width: 100%;
& :nth-child(1) {order:2;}
& :nth-child(2) {order:1;}
}
&.column{
flex-direction: column;
gap:.25rem;
width: 100%;
}
}
// &:checked {
// + .checkbox-label {
// &:after {
// background: $color3;
// z-index: 1;
// opacity: 1;
// scale: 0.25;
// clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
}
// }
// }
// }
&:focus {
+ .checkbox-label {
&:before {
outline: none;
border-color: $color4;
}
}
}
&:disabled {
+ .checkbox-label {
color: darken($color3, 25%);
pointer-events: none;
&:before {
box-shadow: inset 0 0 0 2px $color3;
border-color: darken($color3, 25%);
background: darken($color3, 25%);
}
}
}
+ .checkbox-label {
&:empty {
&:before {
margin-right: 0;
}
}
}
}
}
.checkbox-label:after {
content: "";
.checkbox-fill {
position: relative;
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: transparent;
position: absolute;
left: -8px;
top: -6px;
scale: .75;
transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
width: var(--width);
height: var(--height);
background: transperent;
border: 2px solid $checkbox-primary-color;
transition: background 0.2s ease-in-out;
}
.checkbox-input:checked ~ .checkbox-fill {
background: var(--bg-core-primary-darken);
box-shadow: inset 0 0 0 var(--inset) $checkbox-secondary-color;
}
.checkbox-input:focus-within ~ .checkbox-fill {
outline: 1px solid $checkbox-primary-color;
}
.checkbox-input:disabled ~ .checkbox-fill {
box-shadow: inset 0 0 0 var(--inset) $checkbox-secondary-color;
border-color: $checkbox-disabled-color;
background: $checkbox-disabled-color;
pointer-events: none;
}
.checkbox-input:disabled ~ .checkbox-label {
color: $checkbox-disabled-color;
}
.checkbox-label:hover:after {
background: var(--bg-core-primary-lighten);
scale: 1;
opacity: .5;
}
.checkbox-fill::before {
content: "";
display: inline-block;
width: calc(var(--width) * 1.8);
height: calc(var(--width) * 1.8);
border-radius: 50%;
background-color: transparent;
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
scale: .75;
transform-origin: left top;
transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s;
}
.checkbox-fill:hover::before {
background: var(--bg-core-primary-lighten);
scale: 1;
opacity: .5;
}
// $checkbox-primary-color: var(--bg-core-primary-darken);
// $checkbox-secondary-color: #f4f4f4;
// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%);
// .checkbox-group {
// margin: 0.5rem;
// position:relative;
// input[type="checkbox"] {
// position: absolute;
// opacity: 0;
// + .checkbox-label {
// &:before {
// content: "";
// background: transparent;
// border: 2px solid $checkbox-primary-color;
// display: inline-block;
// width: 1.25em;
// height: 1.25em;
// position: relative;
// top: .15rem;
// margin-right: .75em;
// vertical-align: top;
// cursor: pointer;
// text-align: center;
// z-index: 1;
// transition: all 250ms ease;
// }
// }
// &:checked {
// + .checkbox-label {
// &:before {
// background-color: $checkbox-primary-color;
// box-shadow: inset 0 0 0 2px $checkbox-secondary-color;
// }
// }
// }
// &:focus {
// + .checkbox-label {
// &:before {
// outline: 1px solid $checkbox-primary-color;
// border-color: $checkbox-primary-color;
// }
// }
// }
// &:disabled {
// + .checkbox-label {
// color: darken($checkbox-secondary-color, 25%);
// pointer-events: none;
// &:before {
// box-shadow: inset 0 0 0 2px $checkbox-secondary-color;
// border-color: $checkbox-disabled-color;
// background: $checkbox-disabled-color;
// }
// }
// }
// + .checkbox-label {
// &:empty {
// &:before {
// margin-right: 0;
// }
// }
// }
// }
// }
// .checkbox-label:after {
// content: "";
// display: inline-block;
// width: 35px;
// height: 35px;
// border-radius: 50%;
// background-color: transparent;
// position: absolute;
// left: -8px;
// top: -6px;
// scale: .75;
// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
// }
// .checkbox-label:hover:after {
// background: var(--bg-core-primary-lighten);
// scale: 1;
// opacity: .5;
// }

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

@ -1,3 +1,5 @@
@use "sass:math";
@use "../util" as *;
@use "../globals" as *;
@ -102,3 +104,59 @@ $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
}
}
}
/*grid-css*/
$columns: 12;
@mixin create-selectors($breakpoint: null) {
$infix: if($breakpoint == null, '', '-#{$breakpoint}');
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
grid-column-end: span $i;
padding: $base-padding;
}
.col-offset#{$infix}-#{$i} {
grid-column-start: $i + 1;
}
.row#{$infix}-#{$i} {
grid-row-end: span $i;
}
.row-offset#{$infix}-#{$i} {
grid-row-start: $i + 1;
}
}
}
.row {
display: grid;
grid-template-columns: repeat($columns, 1fr);
}
@include create-selectors;
@each $breakpoint, $width in $breakpoints-up {
@media (min-width: $width) {
@include create-selectors($breakpoint);
}
}
.collapse{
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
//opacity: 0;
transition: all 0.5s ease-out;
}
.collapse.show{
max-height: 25vh;
overflow: auto;
padding-top: initial;
padding-bottom: initial;
//opacity: 1;
transition: all 0.5s ease-in;
}

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

@ -3,4 +3,5 @@
@forward "sidebar";
@forward "radio";
@forward "inputs";
@forward "checkbox";
@forward "checkbox";
@forward "toggle";

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

@ -10,7 +10,7 @@ $width: 100%;
form{
display: block;
margin-top: 1rem;
//padding-top: 1rem;
}
.form-group{
@ -36,12 +36,13 @@ form{
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid $border-core;
border-bottom: 1px solid var(--border-core);
&:focus {
outline: none;
}
&:focus ~ label.label-animated,
&:valid ~ label.label-animated {
&:valid ~ label.label-animated,
&:disabled ~ label.label-animated {
top: -12px;
font-size: $font-size-sm;
color: var(--bg-core-primary-darken);
@ -204,29 +205,69 @@ select {
height: auto;
max-height: max-content;
opacity: 1;
transition: all $trans-time ease-in-out;
pointer-events: initial;
}
&:focus-within ~ .backdrop {
opacity: 1;
display: block;
}
}
.drop-down{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 80%;
width: 80%;
height: 0;
max-height: 0;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
z-index: 1500;
list-style: none;
background-color: #fff;
box-shadow: $base-box-shadow;
border-radius: $border-radius-lg;
transition: all $trans-time ease-in-out;
}
.backdrop{
display: none;
opacity: 0;
z-index: 1499;
position: fixed;
top: 0;
right:0;
bottom:0;
left:0;
overflow: hidden;
background-color: rgba(0,0,0,.5);
transition: all $trans-time ease-in-out;
}
@include breakpoint(sm) {
.drop-down{
position: absolute;
top: 46px;
left: 0;
opacity: 0;
min-width: 100%;
width: 100%;
transform: none;
border-radius: 0 0 $border-radius-lg $border-radius-lg;
}
}
.drop-down{
position: absolute;
opacity: 0;
display: flex;
flex-direction: column;
top: 46px;
left: 0;
min-width: 100%;
height: 0;
max-height: 0;
//padding: $base-padding;
z-index: 1500;
list-style: none;
background-color: #fff;
box-shadow: $base-box-shadow;
border-radius: 0 0 $border-radius-lg $border-radius-lg;
}
.dropdown-header {
@ -253,12 +294,12 @@ select {
.dropdown-item:focus, .dropdown-item:hover {
color: var(--text-core-hc);
text-decoration: none;
background-color: var(--bg-core-primary-lighten);
background-color: var(--bg-core-primary-light);
}
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid $border-core;
border-top: 1px solid var(--bg-core-primary-light);
}

342
src/Connected.Components/Styles/components/_radio.scss
View File

@ -1,86 +1,276 @@
$color1: #f4f4f4;
$color2: var(--bg-core-primary-darken);
$radio-primary-color: var(--bg-core-primary-darken);
$radio-secondary-color: #f4f4f4;
$radio-disabled-color: darken($radio-secondary-color, 25%);
.radio-group {
margin: 0.5rem;
position:relative;
input[type="radio"] {
position: absolute;
opacity: 0;
+ .radio-label {
&:before {
content: "";
background: $color1;
border-radius: 100%;
border: 2px solid $color2;
display: inline-block;
width: 1.25em;
height: 1.25em;
position: relative;
top: .15rem;
margin-right: .75em;
vertical-align: top;
cursor: pointer;
text-align: center;
z-index: 1;
transition: all 250ms ease;
}
}
&:checked {
+ .radio-label {
&:before {
background-color: $color2;
box-shadow: inset 0 0 0 2px $color1;
--width: 1.25rem;
--height: var(--width);
--inset: calc(var(--width) / 10);
margin: 0.75rem 0;
width: max-content;
cursor: pointer;
position:relative;
display: flex;
align-items: center;
gap:.75rem;
z-index: 1;
&.reversed{
justify-content: space-between;
width: 100%;
& :nth-child(1) {order:2;}
& :nth-child(2) {order:1;}
}
&.column{
flex-direction: column;
gap:.25rem;
width: 100%;
}
}
&:focus {
+ .radio-label {
&:before {
outline: none;
border-color: $color2;
input[type="radio"] {
position: absolute;
opacity: 0;
}
}
}
&:disabled {
+ .radio-label {
color: darken($color1, 25%);
pointer-events: none;
&:before {
box-shadow: inset 0 0 0 2px $color1;
border-color: darken($color1, 25%);
background: darken($color1, 25%);
}
}
}
+ .radio-label {
&:empty {
&:before {
margin-right: 0;
}
}
}
}
}
.radio-label:after {
content: "";
.radio-fill {
position: relative;
display: inline-block;
width: 35px;
height: 35px;
width: var(--width);
height: var(--height);
border-radius: 50%;
background-color: transparent;
position: absolute;
left: -8px;
top: -6px;
scale: .75;
transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
background: transperent;
border: 2px solid $radio-primary-color;
transition: background 0.2s ease-in-out;
}
.radio-input:checked ~ .radio-fill {
background: var(--bg-core-primary-darken);
box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color;
}
.radio-label:hover:after {
background: var(--bg-core-primary-lighten);
scale: 1;
opacity: .5;
}
.radio-input:focus-within ~ .radio-fill {
outline: 1px solid $radio-primary-color;
}
.radio-input:disabled ~ .radio-fill {
box-shadow: inset 0 0 0 var(--inset) $radio-secondary-color;
border-color: $radio-disabled-color;
background: $radio-disabled-color;
pointer-events: none;
}
.radio-input:disabled ~ .radio-label {
color: $radio-disabled-color;
}
.radio-fill::before {
content: "";
display: inline-block;
width: calc(var(--width) * 1.8);
height: calc(var(--width) * 1.8);
border-radius: 50%;
background-color: transparent;
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
scale: .75;
transform-origin: left top;
transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s;
}
.radio-fill:hover::before {
background: var(--bg-core-primary-lighten);
scale: 1;
opacity: .5;
}
// $checkbox-primary-color: var(--bg-core-primary-darken);
// $checkbox-secondary-color: #f4f4f4;
// $checkbox-disabled-color: darken($checkbox-secondary-color, 25%);
// .checkbox-group {
// margin: 0.5rem;
// position:relative;
// input[type="checkbox"] {
// position: absolute;
// opacity: 0;
// + .checkbox-label {
// &:before {
// content: "";
// background: transparent;
// border: 2px solid $checkbox-primary-color;
// display: inline-block;
// width: 1.25em;
// height: 1.25em;
// position: relative;
// top: .15rem;
// margin-right: .75em;
// vertical-align: top;
// cursor: pointer;
// text-align: center;
// z-index: 1;
// transition: all 250ms ease;
// }
// }
// &:checked {
// + .checkbox-label {
// &:before {
// background-color: $checkbox-primary-color;
// box-shadow: inset 0 0 0 2px $checkbox-secondary-color;
// }
// }
// }
// &:focus {
// + .checkbox-label {
// &:before {
// outline: 1px solid $checkbox-primary-color;
// border-color: $checkbox-primary-color;
// }
// }
// }
// &:disabled {
// + .checkbox-label {
// color: darken($checkbox-secondary-color, 25%);
// pointer-events: none;
// &:before {
// box-shadow: inset 0 0 0 2px $checkbox-secondary-color;
// border-color: $checkbox-disabled-color;
// background: $checkbox-disabled-color;
// }
// }
// }
// + .checkbox-label {
// &:empty {
// &:before {
// margin-right: 0;
// }
// }
// }
// }
// }
// .checkbox-label:after {
// content: "";
// display: inline-block;
// width: 35px;
// height: 35px;
// border-radius: 50%;
// background-color: transparent;
// position: absolute;
// left: -8px;
// top: -6px;
// scale: .75;
// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
// }
// .checkbox-label:hover:after {
// background: var(--bg-core-primary-lighten);
// scale: 1;
// opacity: .5;
// }
// $radio-primary-color: var(--bg-core-primary-darken);
// $radio-secondary-color: #f4f4f4;
// $radio-disabled-color: darken($radio-secondary-color, 25%);
// .radio-group {
// margin: 0.5rem;
// position:relative;
// input[type="radio"] {
// position: absolute;
// opacity: 0;
// + .radio-label {
// &:before {
// content: "";
// background: transparent;
// border-radius: 50%;
// border: 2px solid $radio-primary-color;
// display: inline-block;
// width: 1.25em;
// height: 1.25em;
// position: relative;
// top: .15rem;
// margin-right: .75em;
// vertical-align: top;
// cursor: pointer;
// text-align: center;
// z-index: 1;
// transition: all 250ms ease;
// }
// }
// &:checked {
// + .radio-label {
// &:before {
// background-color: $radio-primary-color;
// box-shadow: inset 0 0 0 2px $radio-secondary-color;
// }
// }
// }
// &:focus {
// + .radio-label {
// &:before {
// outline: 1px solid $radio-primary-color;
// border-color: $radio-primary-color;
// }
// }
// }
// &:disabled {
// + .radio-label {
// color: darken($radio-secondary-color, 25%);
// pointer-events: none;
// &:before {
// box-shadow: inset 0 0 0 2px $radio-secondary-color;
// border-color: $radio-disabled-color;
// background: $radio-disabled-color;
// }
// }
// }
// + .radio-label {
// &:empty {
// &:before {
// margin-right: 0;
// }
// }
// }
// }
// }
// .radio-label:after {
// content: "";
// display: inline-block;
// width: 35px;
// height: 35px;
// border-radius: 50%;
// background-color: transparent;
// position: absolute;
// left: -8px;
// top: -6px;
// scale: .75;
// transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
// }
// .radio-label:hover:after {
// background: var(--bg-core-primary-lighten);
// scale: 1;
// opacity: .5;
// }

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

@ -2,28 +2,35 @@
@use '../util/' as *;
$sidebar-width-open:300px;
$sidebar-width-closed:75px;
$sidebar-right-width-open:300px;
$sidebar-right-width-closed:0px;
.sidebar{
position: fixed;
padding-inline: 0.75rem;
height: 100vh;
width: 100%;
color: $text-core;
background: var(--bg-core-primary);
//margin: -2rem 2rem -2rem -2rem;
background: var(--bg-core-primary-light);
border-right: 1px solid rgba(0,0,0,.025);
border-radius: $border-radius-lg 0 0 $border-radius-lg;
z-index: 100;
transition: all 0.3s ease;
@include breakpoint(sm) {
height: calc(100% + 4rem);
height: 100%;
position: relative;
width: 300px;
width: $sidebar-width-open;
}
}
.sidebar.close{
width: 0;
transform: translateX(-75px);
transform: translateX($sidebar-width-closed);
@include breakpoint(sm) {
width: 75px;
width: $sidebar-width-closed;
transform: translateX(0);
}
}
@ -31,59 +38,80 @@
.main {
width: calc(100% - 1.5rem) ;
margin-inline:auto;
transition: all 0.3s ease;
@include breakpoint (sm) {
width: calc(100% - 300px);;
width: calc(100% - $sidebar-width-open - $sidebar-right-width-open);
padding: 2rem;
}
}
.main.close{
@include breakpoint (sm) {
width: calc(100% - 75px);
width: calc(100% - $sidebar-width-closed - $sidebar-width-open);
}
}
.main.close-r{
@include breakpoint (sm) {
width: calc(100% - $sidebar-right-width-open);
}
}
.main.close.close-r{
@include breakpoint (sm) {
width: calc(100% - $sidebar-right-width-closed - $sidebar-width-closed);
}
}
//profile
.sidebar .profile-details{
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
background-color: rgba(0,0,0,.6);
}
padding-top: 0;
//color: #fff;
//background-color: var(--bg-core-primary);
border-radius: $border-radius-lg 0 0 0;
transition: all 0.3s ease;
@include breakpoint (sm) {
padding-top: 12px;
}
}
.sidebar .profile-details .avatar{
min-width: calc(70px - 1rem);
min-width: 50px;
text-align: center;
margin: 1rem 0 1rem 1rem;
}
margin-right: 12px;
}
.sidebar .profile-details img{
height: 40px;
width: 40px;
height: 50px;
width: 50px;
object-fit: cover;
border-radius: 50%;
//transition: all 0.5s ease;
}
padding: 5px;
}
.sidebar .profile-details .name-job{
margin-right: auto;
.sidebar .profile-details .profile-description {
margin-right: auto;
}
.sidebar .profile-details .profile-name{
font-weight: 600;
white-space: nowrap;
color:var(--text-core-hc)
}
.sidebar .profile-details .profile-job{
font-size: 12px;
font-weight: 500;
color:var(--text-core-lc)
}
.sidebar .profile-details i{
height: 50px;
min-width: 70px;
min-width: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
@ -94,137 +122,359 @@
.sidebar.close .profile-details .profile-name,
.sidebar.close .profile-details .profile-job{
display: none;
}
}
//links
.sidebar .nav-links{
height: 100%;
/*NAV*/
.sidebar nav{
position: sticky;
top: 0;
}
.sidebar .navbar{
height: auto;
//padding: 12px;
padding: 0;
overflow: auto;
display: flex;
flex-direction: column;
}
.sidebar.close .nav-links{
.sidebar.close .navbar{
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
.sidebar .navbar::-webkit-scrollbar{
display: none;
}
.sidebar .nav-links li{
.sidebar .navbar .navbar-header{
display: block;
padding: 0.5rem 0;
margin-bottom: 0;
font-size: $font-size-sm;
color: var(--text-core-lc);
white-space: nowrap;
}
.sidebar .navbar .navbar-item{
position: relative;
list-style: none;
transition: all 0.4s ease;
margin-bottom: 12px;
line-height: 50px;
border-radius: $border-radius-pill;
}
.sidebar .nav-links li:hover{
.sidebar .navbar .navbar-item:hover,
.sidebar .navbar .navbar-item:active,
.sidebar .navbar .navbar-item.active{
background: var(--bg-core-primary-lighten);
}
.sidebar .nav-links li .iocn-link{
display: flex;
align-items: center;
justify-content: space-between;
.sidebar.close .navbar .navbar-item{
border-radius: 50%;
}
.sidebar.close .nav-links li .iocn-link{
display: block
.sidebar .navbar .navbar-item.fab{
background-color:#ffdad9;
border-radius: $border-radius-lg;
margin-bottom: 36px;
transition: all 0.3s ease;
}
.sidebar .nav-links li i{
.sidebar .navbar .navbar-item.fab:hover,
.sidebar .navbar .navbar-item.fab:active,
.sidebar .navbar .navbar-item.fab.active{
background-color: #fbc5c3;
}
.sidebar .navbar .navbar-item i{
height: 50px;
min-width: 70px;
min-width: 50px;
text-align: center;
line-height: 50px;
color: var(--text-core-vc);
font-size: 20px;
color: var(--text-core-lc);
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
.sidebar .navbar .navbar-item a{
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name{
.sidebar .navbar .navbar-item a .navbar-link{
flex: 1 0 auto;
font-weight: 400;
font-weight: $font-weight-400;
color: var(--text-core);
//transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
.sidebar .navbar .navbar-item a .navbar-link:first-child {
padding-left: 1.5rem;
}
.sidebar.close .navbar .navbar-item a .navbar-link{
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
padding: 6px 6px 14px 70px;
margin-top: -10px;
background:var(--bg-core-primary-lighten);
display: none;
}
.sidebar .navbar .navbar-item a .navbar-link.navbar-link-detail{
flex: 0 0 auto;
font-weight: $font-weight-600;
color: var(--text-core-hc);
text-align: right;
padding-right: 1rem;
}
.sidebar .nav-links li.showMenu .sub-menu{
display: block;
}
.sidebar .nav-links li .sub-menu a{
color: var(--text-core);
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
color: var(--bg-core-primary-darken);
}
.sidebar.close .nav-links li .sub-menu{
/*TOOLTIP*/
.sidebar.close .navbar .navbar-item .navbar-tooltip{
position: absolute;
left: 100%;
top: -10px;
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: 0 6px 6px 0;
border-radius: $border-radius-lg;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu{
top: 0;
.sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
left: calc(100% + 24px);
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name{
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-weight: 600;
.sidebar.close .navbar .navbar-tooltip {
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank{
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
.sidebar .navbar .navbar-tooltip {
display: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
}
.sidebar-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid var(--border-core-lighten);
}
.badge-label {
border-radius: $base-border-radius;
font-size: $font-size-sm;
color: var(--text-core-hc);
display: flex;
justify-content: center;
align-items: center;
min-width: 20px;
height: 20px;
letter-spacing: 0;
padding: 12px;
pointer-events: auto;
text-indent: 0;
white-space: nowrap;
background-color: transparent;
transition: .3s cubic-bezier(.25,.8,.5,1);
}
/*BOOTOMBAR*/
@include breakpoint-down(sm) {
.main {
margin-bottom: rem(75);
}
.sidebar.bottombar,
.sidebar.close.bottombar {
position: fixed;
bottom: 0;
transform: translateX(0);
display: flex;
align-items: center;
height: rem(75);
width: 100%;
color: $text-core;
background: var(--bg-core-primary-light);
border-radius: 0;
z-index: 100;
}
.sidebar.bottombar .profile-description,
.sidebar.close.bottombar .profile-description,
.sidebar.bottombar .profile-details i,
.sidebar.close.bottombar .profile-deteils i {
display: none;
}
.sidebar.bottombar nav,
.sidebar.close.bottombar nav {
position: relative;
width: 100%;
}
.sidebar.bottombar .navbar,
.sidebar.close.bottombar .navbar {
padding: 0;
flex-direction: row;
justify-content: space-around;
}
.sidebar.bottombar .navbar .navbar-item,
.sidebar.close.bottombar .navbar .navbar-item {
margin-bottom: 0;
}
.sidebar.bottombar .navbar-link,
.sidebar.close.bottombar .navbar-link {
display: none;
}
.sidebar.bottombar .navbar .navbar-item .navbar-tooltip,
.sidebar.close.bottombar .navbar .navbar-item .navbar-tooltip {
display: none;
}
.sidebar.bottombar .navbar-item.fab,
.sidebar.close.bottombar .navbar-item.fab {
position: absolute;
right: 1rem;
top: -4rem;
}
.sidebar.bottombar .sidebar-divider,
.sidebar.close.bottombar .sidebar-divider {
display: none;
}
}
/*RIGHT SIDEBAR*/
.sidebar.right{
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 100%;
color: $text-core;
background: var(--bg-core-primary-lighten);
border-right: 1px solid rgba(0,0,0,.025);
border-radius: 0 $border-radius-lg $border-radius-lg 0;
z-index: 99;
transition: all 0.3s ease;
@include breakpoint(sm) {
height: 100%;
position: relative;
width: $sidebar-right-width-open;
}
}
.sidebar.right.close-r{
width: 0;
transform: translateX($sidebar-right-width-closed);
padding: 0;
@include breakpoint(sm) {
width: $sidebar-right-width-closed;
transform: translateX(0);
z-index: -1;
opacity: 0;
pointer-events: none;
}
}
.sidebar.right .navbar .navbar-item:hover,
.sidebar.right .navbar .navbar-item:active,
.sidebar.right .navbar .navbar-item.active{
background: var(--bg-core-primary);
}
// .scrollable {
// display: block;
// height: 100%;
// max-height: 100vh;
// min-height: 0;
// }
// .scroll-wrapper {
// position: relative;
// width: 100%;
// height: 100%;
// background-color: turquoise;
// }
// .scroll-container {
// position: relative;
// width: 100%;
// height: 100%;
// touch-action: pan-y;
// overflow-x: hidden;
// overflow-y: auto;
// }
// .scroll-content {
// height: auto;
// transform: none;
// position: relative;
// min-height: 100%;
// }
.scrollable {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
max-height: calc(100vh - 50px);
}
.scroll-wrapper {
position: relative;
width: auto;
height: 100%;
pointer-events: none;
}
.scroll-container {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-height: 100%;
overflow: hidden;
pointer-events: auto;
background-clip: padding-box;
}
.scroll-content {
position: relative;
overflow-y: auto;
flex: 1 1 auto;
}

107
src/Connected.Components/Styles/components/_toggle.scss Normal file
View File

@ -0,0 +1,107 @@
@use "../globals/" as *;
@use "../util/" as *;
$toggle-primary-color: var(--bg-core-primary-darken);
$toggle-secondary-color: #ddd;
$toggle-disabled-color: darken($toggle-secondary-color, 25%);
.toggle-group {
--width: 42px;
--height: calc(var(--width) / 2);
--border-radius: calc(var(--height) / 2);
margin: 0.75rem 0;
width: max-content;
cursor: pointer;
position:relative;
display: flex;
align-items: center;
gap:.75rem;
&.reversed{
justify-content: space-between;
width: 100%;
& :nth-child(1) {order:2;}
& :nth-child(2) {order:1;}
}
&.column{
flex-direction: column;
gap:.25rem;
width: 100%;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
}
.toggle-fill {
position: relative;
width: var(--width);
height: var(--height);
border-radius: var(--border-radius);
background: $toggle-secondary-color;
//margin-right: .75rem;
transition: background 0.2s ease-in-out;
}
.toggle-input:checked ~ .toggle-fill {
background: var(--bg-core-primary-darken);
}
.toggle-input:focus-within ~ .toggle-fill {
outline: 1px solid $toggle-primary-color;
}
.toggle-input:disabled ~ .toggle-fill {
background: $toggle-disabled-color;
pointer-events: none;
}
.toggle-input:disabled ~ .toggle-label {
color: $toggle-disabled-color;
}
.toggle-fill::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
height: calc(var(--height) - 4px);
width: calc(var(--height) - 4px);
background: #ffffff;
border-radius: var(--border-radius);
transition: transform 0.2s;
}
.toggle-input:checked ~ .toggle-fill::after {
transform: translateX(var(--height));
}
.toggle-fill::before {
content: "";
display: inline-block;
width: calc(var(--height) * 1.8);
height: calc(var(--height) * 1.8);
border-radius: 50%;
background-color: transparent;
position: absolute;
left: calc(30% - var(--height));
top: calc(60% - var(--height));
scale: .75;
transform-origin: center;
transition: scale 0.35s cubic-bezier(0.6,-1.25,0.6,2.25), transform 0.2s;
}
.toggle-fill:hover::before {
background: var(--bg-core-primary-lighten);
scale: 1;
opacity: .5;
}
.toggle-input:checked ~ .toggle-fill::before {
transform: translateX(var(--height));
}

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

@ -8,15 +8,15 @@ body{
background: linear-gradient(to left, var(--bg-core-primary-lighten), var(--bg-core-end));
font-family: 'Open Sans', sans-serif;
font-size: $base-font-size;
//font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9+0.1vw, $base-font-size);
//font-size: clamp($base-font-size * 0.9, $base-font-size * 0.9 + 0.1vw, $base-font-size);
color: var(--text-core);
@include breakpoint(sm){
background: linear-gradient(to left, var(--bg-core-primary), var(--bg-core-end));
}
}
//hr classes
hr {
border-top: 1px solid var(--border-core);
@ -25,11 +25,11 @@ hr {
background-color:var(--border-core);
color: var(--border-core);
}
//section
section,
.section{
margin-bottom: 1rem;
.section{
margin-bottom: 1rem;
}
@ -39,4 +39,43 @@ margin-bottom: 1rem;
}
/*ICONS*/
.icon-default {
color: var(--bg-core-primary);
}
.disabled {
.icon-root, .svg-icon, .icon-default {
color: var(--bg-core-primary-light);
}
}
.icon-root {
width: 1em;
height: 1em;
display: inline-block;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
flex-shrink: 0;
user-select: none;
&:focus {
outline: none;
}
&.svg-icon {
fill: currentColor;
}
}
.icon-size-small {
font-size: 1.25rem;
}
.icon-size-medium {
font-size: 1.5rem;
}
.icon-size-large {
font-size: 2.25rem;
}

12
src/Connected.Components/Styles/globals/_reset.scss
View File

@ -1,7 +1,5 @@
/* Box sizing rules */
*,
*::before,
*::after {
*, *::before, *::after {
box-sizing: border-box;
}
@ -48,7 +46,13 @@ a:not([class]) {
text-decoration-skip-ink: auto;
}
a, a:hover {
a {
text-decoration: none;
transition: color 0.15s ease-in-out;
}
a:hover {
text-decoration: none;
transition: color 0.15s ease-in-out;
}

23
src/Connected.Components/Styles/globals/_typography.scss
View File

@ -113,7 +113,7 @@ p,
@each $property, $map in $fw {
$prefix: map-get($map, "prefix");
$values: map-get($map, "values");
$values: map-get($map, "values");
@each $k, $v in $values {
@if $breakName != "" {
@ -157,6 +157,27 @@ p,
text-overflow: ellipsis;
}
.text-hc {
color: var(--text-core-hc);
}
.text-lc {
color: var(--text-core-lc);
}
a.text-link{
color: var(--bg-core-primary-dark);
border-bottom:1px dotted;
transition: all 0.15s ease-in-out;
}
a.text-link:hover{
color: var(--bg-core-primary-darken);
border-bottom:none;
}
// $fs: (
// "font-size": (
// "prefix": "fs",

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

@ -1,8 +1,8 @@
@use "sass:math";
//theme colors
$bg-core-primary: hsl(225, 68%, 85%); // body-background;
$bg-core-start: $bg-core-primary;
//$bg-core-primary: hsl(225, 68%, 85%); // body-background;
//$bg-core-start: $bg-core-primary;
$bg-core-end: #fafafa;
$text-core-hc: #212121; //title
@ -10,67 +10,112 @@ $text-core: #525252; //text
$text-core-lc: #7d7d80; //metadata
$text-core-vc: #969699; //ikona-text
$border-core: lighten($bg-core-primary, 7%); //border
//$border-core: lighten($bg-core-primary, 7%); //border
$element-bg-core: rgba(255, 255, 255, 0.5); // elements-background
$element-fg-core: rgba(255, 255, 255, 0.25); // elements-foreground
:root {
--bg-core-primary: #{$bg-core-primary}; // body-background;
--bg-core-primary-lighten: hsl(225, 68%, 90%); // lighten
--bg-core-primary-darken: hsl(225, 68%, 75%); // darken;
--bg-core-start: #{$bg-core-primary};
--bg-core-end: #{$bg-core-end};
$blue-50: #f2f4fd;
$blue-100: #e5eafa;
$blue-200: #cbd6f5;
$blue-300: #b2c1f1;
$blue-400: #98adec;
$blue-500: #7e98e7;
$blue-600: #657ab9;
$blue-700: #4c5b8b;
$blue-800: #323d5c;
$blue-900: #191e2e;
--bg-core-primary: #{$blue-300}; // body-background;
--bg-core-primary-light: #{$blue-50}; // light
--bg-core-primary-lighten: #{$blue-200}; // lighten
--bg-core-primary-darken: #{$blue-400}; // darken;
--bg-core-primary-dark: #{$blue-600}; // dark;
--bg-core-start: #{$blue-300}; // body-background
--bg-core-end: #{$bg-core-end}; // body-background
--text-core-hc: #{$text-core-hc}; //title
--text-core: #{$text-core}; //text
--text-core: #{$blue-800}; //text
--text-core-lc: #{$text-core-lc}; //metadata
--text-core-vc: #{$text-core-vc}; //ikona-text
--bg-core-primary-lighter: hsl(225, 68%, 90%); //hover
--border-core: #{$border-core}; //border
--border-core-lighten:#{$blue-100}; //border-lighten
--border-core: #{$blue-200}; //border
--element-bg-core: #{$element-bg-core}; // elements-background
--element-fg-core: #{$element-fg-core}; // elements-foreground
}
.pink,
:root:has(pink:checked) {
--bg-core-primary: hsl(310 50% 90%);
--bg-core-primary-lighten: hsl(310 50% 95%); //lighten
--bg-core-primary-darken: hsl(310 50% 85%); //darken
--element-bg-core: hsl(310 50% 100% / 50%);
--text-core: hsl(310 50% 15%);
--border-core: hsl(310 50% 90%);
.pink {
$violet-50: #f0eef6;
$violet-100: #e1dced;
$violet-200: #c2b9db;
$violet-300: #a496c8;
$violet-400: #8573b6;
$violet-500: #6750a4;
$violet-600: #524083;
$violet-700: #3e3062;
$violet-800: #151021;
$violet-900: #212529;
--bg-core-primary: #{$violet-300}; // body-background;
--bg-core-primary-light: #{$violet-50}; // light
--bg-core-primary-lighten: #{$violet-200}; // lighten
--bg-core-primary-darken: #{$violet-400}; // darken;
--bg-core-primary-dark: #{$violet-600}; // dark;
--bg-core-start: #{$violet-200}; // body-background
--bg-core-end: #{$bg-core-end}; // body-background
--text-core-hc: #{$text-core-hc}; //title
--text-core: #{$violet-800}; //text
--text-core-lc: #{$text-core-lc}; //metadata
--text-core-vc: #{$text-core-vc}; //ikona-text
--border-core-lighten:#{$violet-100}; //border-lighten
--border-core: #{$violet-200}; //border
--element-bg-core: #{$element-bg-core}; // elements-background
--element-fg-core: #{$element-fg-core}; // elements-foreground
}
.dark,
:root:has(dark:checked) {
.dark {
--bg-core-primary: hsl(0 0% 10% / 100%); // body-background;
--bg-core-primary-lighten: hsl(0 0% 15% / 100%); // lighten
--bg-core-primary-darken: hsl(0 0% 5% / 100%); // darken;
--bg-core-start: var(--bg-core-primary);
--bg-core-end: hsl(0 0% 15% / 100%);
--bg-core-primary-light: hsl(0 0% 15% / 100%); // light
--bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten
--bg-core-primary-darken: hsl(0 0% 7% / 100%); // darken;
--bg-core-primary-dark: hsl(0 0% 5% / 100%); // dark;
--bg-core-start: hsl(0 0% 10% / 100%); // body-background
--bg-core-end: hsl(0 0% 15% / 100%); // body-background
--text-core-hc: hsl(0 0% 97% / 100%); //title
--text-core: hsl(0 0% 73% / 100%); //text
--text-core-lc: hsl(0 0% 53% / 100%); //metadata
--text-core-vc: hsl(0 0% 60% / 100%); //ikona-text
--border-core: hsl(0 0% 27% / 100%); //border
--border-core-lighten:hsl(0 0% 17% / 100%); //border-lighten
--border-core: hsl(0 0% 20% / 100%); //border
--element-bg-core: hsl(0 0% 13% / 100%); // elements-background
--element-fg-core: hsl(0 0% 20% / 100%); // elements-foreground
--element-fg-core: hsl(0 0% 15% / 100%); // elements-foreground
}
// colors
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #00c851; //#198754;
$teal: #20c997;
$cyan: #0dcaf0;
// $blue: #0d6efd;
// $indigo: #6610f2;
// $purple: #6f42c1;
// $pink: #d63384;
// $red: #dc3545;
// $orange: #fd7e14;
// $yellow: #ffc107;
// $green: #00c851; //#198754;
// $teal: #20c997;
// $cyan: #0dcaf0;
$white: #fff;
$gray-100: #f8f9fa;
@ -84,13 +129,20 @@ $gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #0dbcf0c4;
$red: #ff7f78;
$yellow: #ffb480;
$green: #8fcaa3;
$cyan: #729fe9;
$primary: $blue;
$secondary: $gray-600;
$secondary: $gray-400;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-400;
$light: $gray-300;
$dark: $gray-900;
//color palette
@ -138,6 +190,7 @@ $font-weight-800: 800; // extra bold
$base-border-radius: 0.3rem;
$border-radius-sm: math.div($base-border-radius, 2);
$border-radius-lg: $base-border-radius * 2;
$border-radius-pill: 100vw;
// box-shadow
$base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default;

36
src/Connected.Components/Styles/layout/_css_documentation.scss
View File

@ -1,16 +1,21 @@
@use "../globals" as *;
.color-picker-container {
margin-bottom: 1rem;
}
.color-picker > fieldset {
border: 0;
display: flex;
flex-direction: column;
gap: 2rem;
//flex-direction: column;
gap: 1.5rem;
width: fit-content;
//background: #fff;
padding: 1rem 3rem;
position: fixed;
top: 1rem;
right: 0;
padding: 0.5rem 1.5rem;
//position: fixed;
//top: 1rem;
//right: 0;
border-radius: 0 0 1rem 1rem;
}
@ -31,14 +36,15 @@
background-color: var(--radio-color);
}
.color-picker input[type="radio"]light {
.color-picker input[type="radio"] {
--radio-color: hsl(225, 68%, 85%);
}
.color-picker input[type="radio"]pink {
--radio-color: pink;
.color-picker input[type="radio"] {
--radio-color: rebeccapurple;
}
.color-picker input[type="radio"]dark {
.color-picker input[type="radio"] {
--radio-color: #232323;
}
@ -58,8 +64,16 @@
background: var(--element-fg-core);
border: 1px solid;
border-color: var(--border-core);
color: inherit;
//color: inherit;
border-radius: $border-radius-lg;
}
.simple-grid-wraper{
background-color: var(--element-bg-core);
border: 1px solid var(--border-core);
border-radius: $border-radius-lg;
padding: calc($base-padding * 4);
line-height: 1.4;
}

7
src/Connected.Components/Styles/layout/_document.scss
View File

@ -20,6 +20,10 @@
//test-sidebar
.document-container {
background-color: var(--element-bg-core);
}
.document-container {
//padding: rem(32);
@ -33,7 +37,8 @@
border-radius: $border-radius-lg;
// padding: rem(32);
box-shadow: $base-box-shadow;
overflow: hidden;
//overflow: hidden;
overflow-x: clip;
}
}

6
src/Connected.Components/Styles/util/_breakpoints.scss
View File

@ -2,7 +2,8 @@
$breakpoints-up: (
"": "",
"": "1",
//'xs': rem(1),
'sm': rem(576),
'md': rem(768),
'lg': rem(992),
@ -11,7 +12,8 @@ $breakpoints-up: (
// 639px, 1149px, 1399px
$breakpoints-down: (
"": "",
"": "0",
//'xs': rem(0),
'sm': rem(575),
'md': rem(767),
'lg': rem(991),

3
src/Connected.Components/Styles/util/_colors.scss
View File

@ -58,8 +58,7 @@
}
//change --bg-core-primary for dark
.dark,
:root:has(dark:checked) {
.dark {
$val: hsl(216 100% 70%);
.text-core {

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

@ -8,7 +8,7 @@
// change text color based on background color - set-color(color-value)
@function set-color($color) {
@if (lightness($color) > 55) {
@if (lightness($color) > 74) {
@return #333;
}
@else {

29
src/Connected.Components/Styles/util/_utilities.scss
View File

@ -160,6 +160,35 @@
}
}
//Position classes
$positionProps: (
"absolute",
"fixed",
"inherit",
"initial",
"relative",
"revert",
"static",
"sticky",
"unset",
);
@each $pos in $positionProps {
@if $breakName != "" {
@media (min-width: $breakValue) {
.position-#{$breakName}-#{$pos} {
position: #{$pos} !important;
}
}
} @else {
.position-#{$pos} {
position: #{$pos} !important;
}
}
}
//Display classes
$displayProps: (
"block",