398 lines
8.2 KiB
SCSS
398 lines
8.2 KiB
SCSS
@use "sass:math";
|
|
|
|
@use "../util" as *;
|
|
@use "../globals" as *;
|
|
|
|
@mixin grid {
|
|
display: grid;
|
|
}
|
|
|
|
.grid {
|
|
@include grid();
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
}
|
|
|
|
// .grid.grid-col-1{
|
|
// $cols: 1;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-2{
|
|
// $cols: 2;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-3{
|
|
// $cols: 3;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-4{
|
|
// $cols: 4;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-5{
|
|
// $cols: 5;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-6{
|
|
// $cols: 6;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-7{
|
|
// $cols: 7;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-8{
|
|
// $cols: 8;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-9{
|
|
// $cols: 9;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-10{
|
|
// $cols: 10;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-11{
|
|
// $cols: 11;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
// .grid.grid-col-12{
|
|
// $cols: 12;
|
|
// @include grid();
|
|
// grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
|
|
// }
|
|
|
|
$gridcol: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
|
|
|
|
@each $colCount in $gridcol {
|
|
.grid-col-#{$colCount} {
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(max(250px, 100% / (#{$colCount} + 1) + 1px), 1fr)
|
|
);
|
|
}
|
|
}
|
|
|
|
$colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
|
|
|
|
@include breakpoint(xl) {
|
|
@each $spanCount in $colspan {
|
|
.col-span-#{$spanCount} {
|
|
grid-column: auto / span #{$spanCount};
|
|
}
|
|
}
|
|
}
|
|
|
|
/*DATA GRID*/
|
|
$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);
|
|
position: relative;
|
|
}
|
|
|
|
@include create-selectors;
|
|
|
|
@each $breakpoint, $width in $breakpoints-up {
|
|
@media (min-width: $width) {
|
|
@include create-selectors($breakpoint);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.data-grid-row-content{
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr auto;
|
|
}
|
|
|
|
.data-grid:not(.data-grid.dense) .data-grid-row-content {
|
|
background-color: var(--element-bg-core);
|
|
border: 1px solid var(--border-core);
|
|
border-radius: $border-radius-lg;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/*ACTIVE*/
|
|
.data-grid:not(.data-grid.dense) .data-grid-row-content:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
inset:0;
|
|
background: var(--bg-core-primary-lighten);
|
|
transition: width 300ms ease-in-out;
|
|
}
|
|
|
|
.data-grid:not(.data-grid.dense) .data-grid-row-content.active:before {
|
|
width: calc(100% + 1.25rem * 2);
|
|
}
|
|
/*END ACTIVE*/
|
|
|
|
.data-grid.dense {
|
|
background-color: var(--element-bg-core);
|
|
border: 1px solid var(--border-core);
|
|
border-radius: $border-radius-lg;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/*DENSE*/
|
|
.data-grid.dense .data-grid-row-content {
|
|
border-bottom: 1px solid var(--border-core);
|
|
padding-bottom: .5rem;
|
|
margin-bottom: .5rem;
|
|
position: relative;
|
|
&:last-child{
|
|
border-bottom: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0
|
|
}
|
|
}
|
|
/*END DENSE*/
|
|
|
|
/*DENSE ACTIVE*/
|
|
.data-grid.dense .data-grid-row-content:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
inset: -.55rem -1.25rem -1px;
|
|
background: var(--bg-core-primary-lighten);
|
|
transition: width 300ms ease-in-out;
|
|
}
|
|
|
|
.data-grid.dense .data-grid-row-content.active:before {
|
|
width: calc(100% + 1.25rem * 2);
|
|
}
|
|
|
|
.data-grid.dense .data-grid-row-content:first-child:before {
|
|
top: -1rem;
|
|
bottom: -1px;
|
|
}
|
|
|
|
.data-grid.dense .data-grid-row-content:last-child:before {
|
|
top: -10px;
|
|
bottom: -1rem;
|
|
}
|
|
|
|
.data-grid.dense .data-grid-row-content:only-child:before {
|
|
inset: -1rem -1.25rem ;
|
|
}
|
|
/*END DENSE ACTIVE*/
|
|
|
|
/*IMG*/
|
|
.data-grid.image .data-grid-img {
|
|
--height:60px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.6rem;
|
|
background-color: var(--bg-core-primary-light);
|
|
height: var(--height);
|
|
aspect-ratio: 1/1;
|
|
overflow: hidden;
|
|
margin-top: .5rem;
|
|
margin-right: .75rem;
|
|
}
|
|
|
|
.data-grid.image .data-grid-img img {
|
|
object-fit: cover;
|
|
height: var(--height);
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
|
|
/*SELECT*/
|
|
.data-grid.select .data-grid-select {
|
|
display: block;
|
|
margin-top: .5rem;
|
|
margin-right: .75rem;
|
|
}
|
|
|
|
.data-grid .data-grid-img,
|
|
.data-grid .data-grid-select,
|
|
.data-grid .data-grid-collapse-cta{
|
|
display: none;
|
|
}
|
|
|
|
.data-grid label {
|
|
font-size: $font-size-sm;
|
|
color: $text-core-lc;
|
|
}
|
|
|
|
/*COLLAPSE*/
|
|
.data-grid.collapse .data-grid-collapse-cta {
|
|
display: block;
|
|
margin-top: .25rem;
|
|
margin-left: .5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.collapsed{
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
padding-top: 0!important;
|
|
padding-bottom: 0!important;
|
|
border-top: 0px solid transparent;
|
|
//opacity: 0;
|
|
transition: all 0.5s ease-out;
|
|
}
|
|
|
|
.collapsed.show {
|
|
max-height: 25vh;
|
|
overflow: auto;
|
|
padding-top: initial;
|
|
padding-bottom: initial;
|
|
border-top: 1px solid var(--bg-core-primary-light);
|
|
//opacity: 1;
|
|
transition: all 0.5s ease-in;
|
|
}
|
|
|
|
.data-grid .data-grid-collapse-cta i,
|
|
.data-grid .data-grid-collapse-cta svg {
|
|
display: block;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
transform: rotate(0);
|
|
transition: all 0.5s ease-in;
|
|
}
|
|
|
|
.data-grid.show .data-grid-collapse-cta i,
|
|
.data-grid.show .data-grid-collapse-cta svg {
|
|
transform: rotate(180deg);
|
|
transition: all 0.5s ease-in;
|
|
}
|
|
|
|
.data-grid-collapse-cta:hover i,
|
|
.data-grid-collapse-cta:hover svg{
|
|
background-color: var(--bg-core-primary-lighten);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*form-wizard*/
|
|
|
|
.form-wizard {
|
|
background-color: var(--element-bg-core);
|
|
border: 1px solid var(--border-core);
|
|
border-radius: 0.6rem;
|
|
padding: 1rem 1.25rem;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.form-outer {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-step {
|
|
width: 100%;
|
|
flex: 1 0 auto;
|
|
transition: all 0.5s ease-out;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.form-step.next {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.form-step.previous{
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
|
|
.dots {
|
|
--width: .75rem;
|
|
--height: var(--width);
|
|
|
|
position: absolute;
|
|
bottom: calc(var(--width) / -2);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
|
|
.dot {
|
|
width: var(--width);
|
|
height: var(--height);
|
|
border-radius: 50%;
|
|
background-color: var(--bg-core-primary-lighten);
|
|
display: inline-block;
|
|
outline: 1px solid #fff;
|
|
transition: all 300ms ease-in-out;
|
|
}
|
|
|
|
.dot.active,
|
|
.dot.next {
|
|
background-color: var(--bg-core-primary);
|
|
outline: 2px solid var(--bg-core-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.dot.completed {
|
|
background-color: $success;
|
|
}
|
|
}
|
|
|
|
/*end form-wizard*/ |