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
features/rewrite/toggleinput
Matija Koželj 2 years ago
parent 42d67dee07 9726016f21
commit 31be47fb6a
21 changed files with 1625 additions and 452 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,83 +1,123 @@
@page "/demo" @page "/demo"
<body> <body class="">
<div class="document-container d-flex"> <div class="document-container d-flex">
<aside> <aside>
<div class="sidebar @sidebarClosed"> <div class="sidebar @sidebarClosed bottombar">
<div class="profile-details"> <div class="profile-details">
<div class="avatar"> <div class="avatar">
<img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan"> <img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan">
</div> </div>
<div class="name-job"> <div class="profile-description">
<div class="profile-name">Janko Jordan</div> <div class="profile-name">Janko Jordan</div>
<div class="profile-job">Web Designer</div> <div class="profile-job">Web Designer</div>
</div> </div>
<i class='bx bx-log-out'></i> <i class='bx bx-log-out'></i>
</div> </div>
<ul class="nav-links"> <nav>
<li class="@NavClosed"> <ul class="navbar mt-sm-5 pt-sm-5">
<div @onclick="ToggleNav" class="iocn-link"> <li class="navbar-item fab">
<a href="#"> <a href="#">
<i class='bx bx-collection' @onclick="ToggleNav"></i> <i class='bx bx-pencil'></i>
<span class="link_name">Proizvodni nalogi</span> <span class="navbar-link">New document</span>
</a> </a>
<i class='bx bxs-chevron-down arrow'></i> <span class="navbar-tooltip">
</div> New document
<ul class="sub-menu"> </span>
<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>
<li>
<li class="navbar-item">
<a href="#"> <a href="#">
<i class='bx bx-grid-alt'></i> <i class='bx bx-home'></i>
<span class="link_name">Izvedba</span> <span class="navbar-link">Main navbar link 1</span>
<span class="navbar-link navbar-link-detail">
<div class="badge-label">
22
</div>
</span>
</a> </a>
<ul class="sub-menu blank"> <span class="navbar-tooltip">
<li><a class="link_name" href="#">Izvedba</a></li> Main navbar link 1
</ul> </span>
</li> </li>
</ul>
<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> </div>
</aside> </span>
</a>
<span class="navbar-tooltip">
Main navbar link 2
</span>
</li>
<section class="main @sidebarClosed"> <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>
<div class="color-picker-container"> </nav>
</div>
</aside>
<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> <main class="main @sidebarClosed @sidebarRightClosed">
<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=""> <div class="">
<div class="d-flex justify-space-between">
<div>
<i class='bx bx-menu' @onclick="ToggleSidebar"></i> <i class='bx bx-menu' @onclick="ToggleSidebar"></i>
@* <Glyph SVG="@Icons.Material.Rounded.Dangerous" /> *@
<span class="text">Open Sidebar</span> <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"> <section id="borders" class="mt-3 b-1 b-r-4 p-5">
<h2>Borders</h2> <h2>Borders</h2>
<p>Use border utilities to quickly style the border, border color and border-radius of an element. <p>Use border utilities to quickly style the border, border color and border-radius of an element.
@ -457,15 +497,15 @@
<h4 class="text-core mt-5">Sizes</h4> <h4 class="text-core mt-5">Sizes</h4>
<div class=""> <div class="">
<button type="button" href="#" class="btn btn-sm btn-core">small button</button> <button type="button" href="#" class="btn btn-sm btn-core">small button</button>
<button type="button" href="#" class="btn btn-sm btn-light">small button</button> <button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
</div> </div>
<div class="mt-4 "> <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-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>
<div class="mt-4 "> <div class="mt-4 ">
<button type="button" href="#" class="btn btn-block btn-core">full width button</button> <button type="button" href="#" class="btn btn-block btn-core">full width button</button>
<button type="button" href="#" class="mt-4 btn btn-block btn-light">full width <button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
button</button> button</button>
</div> </div>
</div> </div>
@ -496,8 +536,30 @@
</p> </p>
<div> <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"> <div class="checkbox-group">
<input id="checkbox-1" name="checkbox" type="checkbox" checked> <input id="checkbox-1" name="checkbox" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-label">Checked</label> <label for="checkbox-1" class="checkbox-label">Checked</label>
@ -509,11 +571,36 @@
</div> </div>
<div class="checkbox-group"> <div class="checkbox-group">
<input id="checkbox-1" name="checkbox" type="checkbox" disabled> <input id="checkbox-3" name="checkbox" type="checkbox" disabled>
<label for="checkbox-1" class="checkbox-label">Checked disabled</label> <label for="checkbox-3" class="checkbox-label">Checked disabled</label>
</div> </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"> <div class="radio-group">
<input id="radio-1" name="radio" type="radio" checked> <input id="radio-1" name="radio" type="radio" checked>
<label for="radio-1" class="radio-label">Checked</label> <label for="radio-1" class="radio-label">Checked</label>
@ -528,8 +615,31 @@
<input id="radio-3" name="radio" type="radio" disabled> <input id="radio-3" name="radio" type="radio" disabled>
<label for="radio-3" class="radio-label">Disabled</label> <label for="radio-3" class="radio-label">Disabled</label>
</div> </div>
</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> </div>
</section> </section>
@ -541,7 +651,7 @@
<form> <form>
<div class="d-flex flex-wrap gap-3"> <div class="grid grid-col-3 gap-3">
<div class="form-group error"> <div class="form-group error">
@ -646,6 +756,7 @@
<i class='bx bx-error-circle'></i> <i class='bx bx-error-circle'></i>
</span> </span>
</span> </span>
<div class="backdrop"></div>
<div class="drop-down"> <div class="drop-down">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-header">Header</div> <div class="dropdown-header">Header</div>
@ -678,11 +789,9 @@
</div> </div>
<div class="btn-box"> <div class="btn-box my-5">
<button type="button" href="#" class="btn btn-core " aria-pressed="true">active <button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
button</button> <button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
<button type="button" href="#" class="btn btn-outline-core " aria-pressed="true">active
button</button>
</div> </div>
</form> </form>
@ -707,8 +816,164 @@
<div>12</div> <div>12</div>
</div> </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> </div>
</body> </body>
@ -720,12 +985,20 @@
sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : ""; sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : "";
} }
private string sidebarRightClosed { get; set; } = "close-r";
private void ToggleSidebarRight()
{
sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : "";
}
private string NavClosed { get; set; } = "showMenu"; private string NavClosed { get; set; } = "";
private void ToggleNav() private void ToggleNav()
{ {
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "showMenu" : ""; NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
} }
} }

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

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connected.Components.Showcase.Runner</title> <title>Connected.Components.Showcase.Runner</title>
<base href="/" /> <base href="/" />
<link href="css/app.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" />

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

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

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

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

228
src/Connected.Components/Styles/components/_checkbox.scss
Unescape View File

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

@ -1,3 +1,5 @@
@use "sass:math";
@use "../util" as *; @use "../util" as *;
@use "../globals" 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;
}

1
src/Connected.Components/Styles/components/_index.scss
Unescape View File

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

71
src/Connected.Components/Styles/components/_inputs.scss
Unescape View File

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

304
src/Connected.Components/Styles/components/_radio.scss
Unescape View File

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

422
src/Connected.Components/Styles/components/_sidebar.scss
Unescape View File

@ -2,28 +2,35 @@
@use '../util/' as *; @use '../util/' as *;
$sidebar-width-open:300px;
$sidebar-width-closed:75px;
$sidebar-right-width-open:300px;
$sidebar-right-width-closed:0px;
.sidebar{ .sidebar{
position: fixed; position: fixed;
padding-inline: 0.75rem;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
color: $text-core; color: $text-core;
background: var(--bg-core-primary); background: var(--bg-core-primary-light);
//margin: -2rem 2rem -2rem -2rem; border-right: 1px solid rgba(0,0,0,.025);
border-radius: $border-radius-lg 0 0 $border-radius-lg;
z-index: 100; z-index: 100;
transition: all 0.3s ease; transition: all 0.3s ease;
@include breakpoint(sm) { @include breakpoint(sm) {
height: calc(100% + 4rem); height: 100%;
position: relative; position: relative;
width: 300px; width: $sidebar-width-open;
} }
} }
.sidebar.close{ .sidebar.close{
width: 0; width: 0;
transform: translateX(-75px); transform: translateX($sidebar-width-closed);
@include breakpoint(sm) { @include breakpoint(sm) {
width: 75px; width: $sidebar-width-closed;
transform: translateX(0); transform: translateX(0);
} }
} }
@ -31,59 +38,80 @@
.main { .main {
width: calc(100% - 1.5rem) ; width: calc(100% - 1.5rem) ;
margin-inline:auto; margin-inline:auto;
transition: all 0.3s ease;
@include breakpoint (sm) { @include breakpoint (sm) {
width: calc(100% - 300px);; width: calc(100% - $sidebar-width-open - $sidebar-right-width-open);
padding: 2rem; padding: 2rem;
} }
} }
.main.close{ .main.close{
@include breakpoint (sm) { @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 //profile
.sidebar .profile-details{ .sidebar .profile-details{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #fff; padding-top: 0;
background-color: rgba(0,0,0,.6); //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{ .sidebar .profile-details .avatar{
min-width: calc(70px - 1rem); min-width: 50px;
text-align: center; text-align: center;
margin: 1rem 0 1rem 1rem; margin-right: 12px;
} }
.sidebar .profile-details img{ .sidebar .profile-details img{
height: 40px; height: 50px;
width: 40px; width: 50px;
object-fit: cover; object-fit: cover;
border-radius: 50%; border-radius: 50%;
//transition: all 0.5s ease; padding: 5px;
} }
.sidebar .profile-details .name-job{ .sidebar .profile-details .profile-description {
margin-right: auto; margin-right: auto;
} }
.sidebar .profile-details .profile-name{ .sidebar .profile-details .profile-name{
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
color:var(--text-core-hc)
} }
.sidebar .profile-details .profile-job{ .sidebar .profile-details .profile-job{
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color:var(--text-core-lc)
} }
.sidebar .profile-details i{ .sidebar .profile-details i{
height: 50px; height: 50px;
min-width: 70px; min-width: 50px;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
font-size: 20px; font-size: 20px;
@ -96,135 +124,357 @@
display: none; display: none;
} }
//links /*NAV*/
.sidebar .nav-links{ .sidebar nav{
height: 100%; position: sticky;
top: 0;
}
.sidebar .navbar{
height: auto;
//padding: 12px;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
display: flex;
flex-direction: column;
} }
.sidebar.close .nav-links{
.sidebar.close .navbar{
overflow: visible; overflow: visible;
} }
.sidebar .nav-links::-webkit-scrollbar{
.sidebar .navbar::-webkit-scrollbar{
display: none; 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; position: relative;
list-style: none; list-style: none;
transition: all 0.4s ease; 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); background: var(--bg-core-primary-lighten);
} }
.sidebar .nav-links li .iocn-link{
display: flex; .sidebar.close .navbar .navbar-item{
align-items: center; border-radius: 50%;
justify-content: space-between; }
.sidebar .navbar .navbar-item.fab{
background-color:#ffdad9;
border-radius: $border-radius-lg;
margin-bottom: 36px;
transition: all 0.3s ease;
} }
.sidebar.close .nav-links li .iocn-link{
display: block .sidebar .navbar .navbar-item.fab:hover,
.sidebar .navbar .navbar-item.fab:active,
.sidebar .navbar .navbar-item.fab.active{
background-color: #fbc5c3;
} }
.sidebar .nav-links li i{
.sidebar .navbar .navbar-item i{
height: 50px; height: 50px;
min-width: 70px; min-width: 50px;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
color: var(--text-core-vc); color: var(--text-core-lc);
font-size: 20px; font-size: 22px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.sidebar .nav-links li.showMenu i.arrow{
transform: rotate(-180deg); .sidebar .navbar .navbar-item a{
}
.sidebar.close .nav-links i.arrow{
display: none;
}
.sidebar .nav-links li a{
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
} }
.sidebar .nav-links li a .link_name{
.sidebar .navbar .navbar-item a .navbar-link{
flex: 1 0 auto; flex: 1 0 auto;
font-weight: 400; font-weight: $font-weight-400;
color: var(--text-core); color: var(--text-core);
//transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name{
opacity: 0;
pointer-events: none;
} }
.sidebar .navbar .navbar-item a .navbar-link:first-child {
padding-left: 1.5rem;
}
.sidebar.close .navbar .navbar-item a .navbar-link{
opacity: 0;
.sidebar .nav-links li .sub-menu{ pointer-events: none;
padding: 6px 6px 14px 70px;
margin-top: -10px;
background:var(--bg-core-primary-lighten);
display: none; display: none;
} }
.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 .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 .sub-menu a:hover{
color: var(--bg-core-primary-darken);
} /*TOOLTIP*/
.sidebar.close .nav-links li .sub-menu{ .sidebar.close .navbar .navbar-item .navbar-tooltip{
position: absolute; position: absolute;
left: 100%; background: #fff;
top: -10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
width: max-content;
left: calc(100% + 12px);
top: 0;
margin-top: 0; margin-top: 0;
padding: 10px 20px; padding: 10px 20px;
border-radius: 0 6px 6px 0; border-radius: $border-radius-lg;
opacity: 0; opacity: 0;
display: block; display: block;
pointer-events: none; pointer-events: none;
transition: 0s; transition: 0s;
} }
.sidebar.close .nav-links li:hover .sub-menu{
top: 0; .sidebar.close .navbar .navbar-item:hover .navbar-tooltip{
left: calc(100% + 24px);
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.sidebar .nav-links li .sub-menu .link_name{
display: none; .sidebar.close .navbar .navbar-tooltip {
}
.sidebar.close .nav-links li .sub-menu .link_name{
font-weight: 600;
opacity: 1; opacity: 1;
display: block; display: block;
} }
.sidebar .nav-links li .sub-menu.blank{
opacity: 1; .sidebar .navbar .navbar-tooltip {
display: none;
}
.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; pointer-events: auto;
padding: 3px 20px 6px 16px; 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; opacity: 0;
pointer-events: none; pointer-events: none;
} }
.sidebar .nav-links li:hover .sub-menu.blank{
top: 50%;
transform: translateY(-50%);
} }
.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
Unescape 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));
}

39
src/Connected.Components/Styles/globals/_core.scss
Unescape View File

@ -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
Unescape View File

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

21
src/Connected.Components/Styles/globals/_typography.scss
Unescape View File

@ -157,6 +157,27 @@ p,
text-overflow: ellipsis; 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: ( // $fs: (
// "font-size": ( // "font-size": (
// "prefix": "fs", // "prefix": "fs",

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

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

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

@ -1,16 +1,21 @@
@use "../globals" as *; @use "../globals" as *;
.color-picker-container {
margin-bottom: 1rem;
}
.color-picker > fieldset { .color-picker > fieldset {
border: 0; border: 0;
display: flex; display: flex;
flex-direction: column; //flex-direction: column;
gap: 2rem; gap: 1.5rem;
width: fit-content; width: fit-content;
//background: #fff; //background: #fff;
padding: 1rem 3rem; padding: 0.5rem 1.5rem;
position: fixed; //position: fixed;
top: 1rem; //top: 1rem;
right: 0; //right: 0;
border-radius: 0 0 1rem 1rem; border-radius: 0 0 1rem 1rem;
} }
@ -31,14 +36,15 @@
background-color: var(--radio-color); background-color: var(--radio-color);
} }
.color-picker input[type="radio"]light { .color-picker input[type="radio"] {
--radio-color: hsl(225, 68%, 85%); --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; --radio-color: #232323;
} }
@ -58,8 +64,16 @@
background: var(--element-fg-core); background: var(--element-fg-core);
border: 1px solid; border: 1px solid;
border-color: var(--border-core); border-color: var(--border-core);
color: inherit; //color: inherit;
border-radius: $border-radius-lg; 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
Unescape View File

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

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

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

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

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

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

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

29
src/Connected.Components/Styles/util/_utilities.scss
Unescape 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 //Display classes
$displayProps: ( $displayProps: (
"block", "block",

Write Preview
Loading…
Cancel
Save