initial
This commit is contained in:
Nadar
26
layers/ui/styles/index.scss
Normal file
26
layers/ui/styles/index.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@use "normalize";
|
||||
@use "utility";
|
||||
@use "typography";
|
||||
@use "transitions";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
@include txt-i('body');
|
||||
|
||||
font-family: var(--body-font-family, "Onest", sans-serif);
|
||||
color: $clr-black;
|
||||
background-color: $clr-grey-100;
|
||||
}
|
||||
|
||||
html body .os-small-theme {
|
||||
--os-size: 6px;
|
||||
--os-handle-bg: #{$clr-cyan-500};
|
||||
--os-handle-bg-hover: #{$clr-cyan-400};
|
||||
--os-handle-bg-active: #{$clr-cyan-600};
|
||||
--os-handle-border-radius: 2px;
|
||||
--os-padding-axis: 12px 4px;
|
||||
--os-padding-perpendicular: 12px 0;
|
||||
}
|
||||
7
layers/ui/styles/mixins/border.scss
Normal file
7
layers/ui/styles/mixins/border.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@mixin border($namespace) {
|
||||
--border-color: var(--input-border-color);
|
||||
--border-width: 1px;
|
||||
|
||||
outline: var(--border-width) solid var(--border-color);
|
||||
outline-offset: calc(var(--border-width) * -1);
|
||||
}
|
||||
48
layers/ui/styles/mixins/element-variant.scss
Normal file
48
layers/ui/styles/mixins/element-variant.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
@use "sass:meta";
|
||||
@use "sass:list";
|
||||
@use "sass:string";
|
||||
|
||||
@mixin element-variant(
|
||||
$namespace,
|
||||
$variant: '',
|
||||
$map: ()
|
||||
) {
|
||||
@if meta.type-of($map) == 'map' {
|
||||
$withDarkVariant: false;
|
||||
$variantPrefix: if(string.length($variant) > 0, '-' + $variant, '');
|
||||
|
||||
@at-root {
|
||||
:root, .light-theme {
|
||||
@each $property, $value in $map {
|
||||
@if meta.type-of($value) == 'list' {
|
||||
@if $withDarkVariant == false and list.length($value) > 1 {
|
||||
$withDarkVariant: true;
|
||||
}
|
||||
|
||||
$value: list.nth($value, 1);
|
||||
}
|
||||
|
||||
--#{$namespace}#{$variantPrefix}-#{$property}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@if $withDarkVariant {
|
||||
.dark-theme {
|
||||
@each $property, $value in $map {
|
||||
@if meta.type-of($value) == 'list' and list.length($value) > 1 {
|
||||
--#{$namespace}#{$variantPrefix}-#{$property}: #{list.nth($value, 2)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if (string.length($variant) > 0) {
|
||||
&-#{$variantPrefix} {
|
||||
@each $property, $value in $map {
|
||||
--#{$namespace}-#{$property}: var(--#{$namespace}#{$variantPrefix}-#{$property});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
layers/ui/styles/mixins/index.scss
Normal file
3
layers/ui/styles/mixins/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@forward "typography";
|
||||
@forward "input";
|
||||
@forward "element-variant";
|
||||
200
layers/ui/styles/mixins/input.scss
Normal file
200
layers/ui/styles/mixins/input.scss
Normal file
@@ -0,0 +1,200 @@
|
||||
//@use '../variables' as *;
|
||||
//@use 'typography' as *;
|
||||
//@use 'element-variant' as *;
|
||||
//
|
||||
////noinspection ALL
|
||||
//@mixin input(
|
||||
// $namespace,
|
||||
// $flexWrapper: true,
|
||||
// $placeholderSelector: '__control::placeholder',
|
||||
// $withValidationIcons: true,
|
||||
// $clearAppearance: true,
|
||||
// $focusedSelector: '&:focus-within, &.is-filled'
|
||||
//) {
|
||||
// $self: &;
|
||||
//
|
||||
// position: relative;
|
||||
// width: var(--#{$namespace}-width, 100%);
|
||||
// text-align: left;
|
||||
//
|
||||
// &__label {
|
||||
// @include txt-s-m(#{$namespace}-label);
|
||||
//
|
||||
// display: block;
|
||||
// background: var(--#{$namespace}-label-background);
|
||||
// color: var(--#{$namespace}-label-color);
|
||||
// margin: var(--#{$namespace}-label-margin, 0 0 8px);
|
||||
// transition: 0.2s ease-out;
|
||||
// transition-property: opacity, color;
|
||||
// }
|
||||
//
|
||||
// &__wrapper {
|
||||
// @if $flexWrapper {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// width: var(--#{$namespace}-control-width, 100%);
|
||||
// height: var(--#{$namespace}-control-height, 40px);
|
||||
// }
|
||||
//
|
||||
// position: relative;
|
||||
// background: var(--#{$namespace}-background);
|
||||
// border-radius: var(--#{$namespace}-border-radius, 16px);
|
||||
// border: var(--#{$namespace}-border, 1px solid var(--#{$namespace}-border-color));
|
||||
// padding: var(--#{$namespace}-wrapper-padding, 0 15px 0 19px);
|
||||
// color: var(--#{$namespace}-color);
|
||||
// transition: 0.2s ease-out;
|
||||
// transition-property: border-color, border-radius, background-color, color;
|
||||
//
|
||||
// > *:not(:first-child) {
|
||||
// margin-left: var(--#{$namespace}-icons-gap, 8px);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &__control {
|
||||
// @if $flexWrapper {
|
||||
// flex: 1;
|
||||
// height: 100%;
|
||||
// }
|
||||
//
|
||||
// @include txt-i-m(#{$namespace}-control);
|
||||
//
|
||||
// width: 100%;
|
||||
// color: var(--#{$namespace}-control-color);
|
||||
// border: none;
|
||||
// background: transparent;
|
||||
// padding: var(--#{$namespace}-control-padding, 9px 0);
|
||||
// caret-color: var(--#{$namespace}-caret-color);
|
||||
//
|
||||
// @if $clearAppearance {
|
||||
// appearance: none;
|
||||
// }
|
||||
//
|
||||
// &:focus {
|
||||
// outline: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &#{$placeholderSelector} {
|
||||
// @include txt-i-m(#{$namespace}-placeholder);
|
||||
//
|
||||
// color: var(--#{$namespace}-placeholder-color, var(--#{$namespace}-control-color));
|
||||
// }
|
||||
//
|
||||
// &__loader {
|
||||
// --spinner-color: var(--#{$namespace}-color);
|
||||
// }
|
||||
//
|
||||
// @if $withValidationIcons {
|
||||
// &__valid-icon,
|
||||
// &__invalid-icon {
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &__bottom {
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
// margin: var(--#{$namespace}-bottom-margin, 8px 0 0);
|
||||
// }
|
||||
//
|
||||
// &__validation-message {
|
||||
// //color: var(--#{$namespace}-validation-message-color, $clr-red-500);
|
||||
// flex: 1;
|
||||
// }
|
||||
//
|
||||
// &__extra {
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
//
|
||||
// &.is-loading {
|
||||
// #{$self}__wrapper,
|
||||
// #{$self}__control {
|
||||
// cursor: wait;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &.is-filled {
|
||||
// --#{$namespace}-label-color: var(--#{$namespace}-filled-label-color);
|
||||
// }
|
||||
//
|
||||
// &.is-invalid {
|
||||
// --#{$namespace}-border-color: var(--#{$namespace}-invalid-border-color);
|
||||
// }
|
||||
//
|
||||
// &:focus-within:not(.is-readonly):not(.is-disabled):not(.is-loading) {
|
||||
// --#{$namespace}-border-color: var(--#{$namespace}-focus-border-color);
|
||||
// --#{$namespace}-label-color: var(--#{$namespace}-focus-label-color);
|
||||
// }
|
||||
//
|
||||
// &.is-disabled {
|
||||
// opacity: var(--#{$namespace}--disabled-opacity, 0.56);
|
||||
//
|
||||
// #{$self}__wrapper,
|
||||
// #{$self}__label,
|
||||
// #{$self}__control {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &.is-readonly {
|
||||
// #{$self}__wrapper,
|
||||
// #{$self}__control {
|
||||
// cursor: default;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @content;
|
||||
//
|
||||
// &--secondary,
|
||||
// &--tertiary {
|
||||
//
|
||||
// #{$self}__label {
|
||||
// opacity: 0;
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// }
|
||||
//
|
||||
// #{$focusedSelector} {
|
||||
// #{$self}__label {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// #{$self}__wrapper:hover:not(.is-readonly):not(.is-disabled):not(.is-loading) {
|
||||
// --#{$namespace}-border-color: var(--#{$namespace}-hover-border-color);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &--tertiary {
|
||||
// --#{$namespace}-wrapper-padding: 0 15px;
|
||||
// --#{$namespace}-control-height: 48px;
|
||||
//
|
||||
// #{$focusedSelector} {
|
||||
// --#{$namespace}-control-padding: 19px 0 7px;
|
||||
// }
|
||||
//
|
||||
// #{$self}__label {
|
||||
// left: 16px;
|
||||
// top: 8px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &--large {
|
||||
// --#{$namespace}-control-height: 48px;
|
||||
// --#{$namespace}-control-padding: 13px 0;
|
||||
// }
|
||||
//
|
||||
// @include element-variant($namespace, '', (
|
||||
// 'background': ($clr-white-100, $clr-black-300),
|
||||
// 'border-color': ($clr-white-700, $clr-black-200),
|
||||
// 'label-color': ($clr-black-150, $clr-black-100),
|
||||
// 'color': ($clr-black-500, $clr-white-100),
|
||||
// 'placeholder-color': ($clr-black-100, $clr-black-150),
|
||||
// 'hover-border-color': ($clr-purple-500, $clr-purple-400),
|
||||
// 'focus-border-color': ($clr-purple-500, $clr-purple-400),
|
||||
// 'focus-label-color': ($clr-black-150, $clr-black-100),
|
||||
// 'filled-label-color': ($clr-black-150, $clr-black-100),
|
||||
// 'invalid-border-color': $clr-red-500,
|
||||
// 'caret-color': $clr-purple-500,
|
||||
// ));
|
||||
//}
|
||||
141
layers/ui/styles/mixins/typography.scss
Normal file
141
layers/ui/styles/mixins/typography.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
|
||||
@if ($namespace) {
|
||||
@if ($onlyVars) {
|
||||
--#{$namespace}-font-size: #{$size};
|
||||
--#{$namespace}-font-weight: #{$weight};
|
||||
--#{$namespace}-line-height: #{$lineHeight};
|
||||
} @else {
|
||||
font-size: var(--#{$namespace}-font-size, $size);
|
||||
font-weight: var(--#{$namespace}-font-weight, $weight);
|
||||
line-height: var(--#{$namespace}-line-height, $lineHeight);
|
||||
}
|
||||
} @else {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headline */
|
||||
@mixin h1($namespace: null, $onlyVars: false) {
|
||||
@include font(32px, 700, 41px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin h2($namespace: null, $onlyVars: false) {
|
||||
@include font(24px, 700, 31px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin h3($namespace: null, $onlyVars: false) {
|
||||
@include font(18px, 600, 23px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin h4($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, 500, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin h5($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, 500, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
/**
|
||||
Text
|
||||
|
||||
Format:
|
||||
txt-{size}-{weight}
|
||||
|
||||
Sizes:
|
||||
l - Large
|
||||
m - Medium
|
||||
i - Interim
|
||||
r - Regular
|
||||
s - Small
|
||||
t - Tiny
|
||||
|
||||
Weights:
|
||||
r - Regular (or leaved empty)
|
||||
m - Medium
|
||||
sb - Semibold
|
||||
b - Bold
|
||||
*/
|
||||
@mixin txt-l($namespace: null, $onlyVars: false) {
|
||||
@include font(18px, 400, 23px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-l-m($namespace: null, $onlyVars: false) {
|
||||
@include font(18px, 500, 23px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-l-sb($namespace: null, $onlyVars: false) {
|
||||
@include font(18px, 600, 23px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-l-b($namespace: null, $onlyVars: false) {
|
||||
@include font(18px, 700, 23px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
@mixin txt-m($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, 400, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-m($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, 500, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-sb($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, 600, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-b($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, 700, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
@mixin txt-i($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, 400, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-i-m($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, 500, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-i-sb($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, 600, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-i-b($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, 700, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
@mixin txt-r($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, 400, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-m($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, 500, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-sb($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, 600, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-b($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, 700, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
@mixin txt-s($namespace: null, $onlyVars: false) {
|
||||
@include font(11px, 400, 14px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-m($namespace: null, $onlyVars: false) {
|
||||
@include font(11px, 500, 14px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-sb($namespace: null, $onlyVars: false) {
|
||||
@include font(11px, 600, 14px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-b($namespace: null, $onlyVars: false) {
|
||||
@include font(11px, 700, 14px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
@mixin txt-t($namespace: null, $onlyVars: false) {
|
||||
@include font(10px, 400, 13px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-t-m($namespace: null, $onlyVars: false) {
|
||||
@include font(10px, 500, 13px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-t-sb($namespace: null, $onlyVars: false) {
|
||||
@include font(10px, 600, 13px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-t-b($namespace: null, $onlyVars: false) {
|
||||
@include font(10px, 700, 13px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
@mixin text-gradient {
|
||||
@content;
|
||||
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
355
layers/ui/styles/normalize.scss
vendored
Normal file
355
layers/ui/styles/normalize.scss
vendored
Normal file
@@ -0,0 +1,355 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
vertical-align: middle;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
82
layers/ui/styles/transitions.scss
Normal file
82
layers/ui/styles/transitions.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
// Fade
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-to,
|
||||
.fade-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Shift
|
||||
.shift-enter-active,
|
||||
.shift-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.shift-enter-to,
|
||||
.shift-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.shift-enter-from,
|
||||
.shift-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shift-enter-from {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
.shift-leave-to {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
.ui-notification-enter-from {
|
||||
&.left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-notification-enter-to,
|
||||
.ui-notification-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui-notification-enter-from,
|
||||
.ui-notification-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ui-notification-leave-to {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: opacity .2s ease-in-out;
|
||||
|
||||
[role="listbox"] {
|
||||
pointer-events: none;
|
||||
transition: transform .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-enter-from,
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
|
||||
[role="listbox"] {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
29
layers/ui/styles/typography.scss
Normal file
29
layers/ui/styles/typography.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@use "./mixins" as *;
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include h1('h1');
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include h2('h2');
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include h3('h3');
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include h4('h4');
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include h5('h5');
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
285
layers/ui/styles/utility.scss
Normal file
285
layers/ui/styles/utility.scss
Normal file
@@ -0,0 +1,285 @@
|
||||
@use "sass:meta";
|
||||
@use './variables' as *;
|
||||
@use './mixins' as *;
|
||||
@use './variables/clr' as clr;
|
||||
|
||||
$indents: 0 4 6 8 10 12 16 18 20 21 22 24 25 26 27 28 32 40 47 50 56;
|
||||
|
||||
@each $i in $indents {
|
||||
.m-#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.mx-#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.my-#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.mt-#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.mb-#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.ml-#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
|
||||
.mr-#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.p-#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.px-#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.py-#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.pt-#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.pb-#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.pl-#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
|
||||
.pr-#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
}
|
||||
|
||||
.ml-a {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mr-a {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mx-a {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@each $align in ('left', 'right', 'center') {
|
||||
.text-align-#{$align} {
|
||||
text-align: #{$align};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in meta.module-variables('clr') {
|
||||
.text-#{$name} {
|
||||
color: #{$value};
|
||||
}
|
||||
|
||||
.bg-#{$name} {
|
||||
background-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
.w-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.w-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.d-table {
|
||||
display: table !important;
|
||||
}
|
||||
|
||||
.d-table-row {
|
||||
display: table-row !important;
|
||||
}
|
||||
|
||||
.d-table-cell {
|
||||
display: table-cell !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.d-inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.flex-row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
|
||||
.flex-column-reverse {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.flex-wrap-reverse {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
}
|
||||
|
||||
.justify-content-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.justify-content-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.justify-items-start {
|
||||
justify-items: flex-start !important;
|
||||
}
|
||||
|
||||
.justify-items-end {
|
||||
justify-items: flex-end !important;
|
||||
}
|
||||
|
||||
.justify-items-center {
|
||||
justify-items: center !important;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align-items-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.align-items-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
.align-items-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
align-content: flex-start !important;
|
||||
}
|
||||
|
||||
.align-content-end {
|
||||
align-content: flex-end !important;
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
align-content: center !important;
|
||||
}
|
||||
|
||||
.align-content-between {
|
||||
align-content: space-between !important;
|
||||
}
|
||||
|
||||
.align-content-around {
|
||||
align-content: space-around !important;
|
||||
}
|
||||
|
||||
.align-content-stretch {
|
||||
align-content: stretch !important;
|
||||
}
|
||||
|
||||
.align-self-auto {
|
||||
align-self: auto !important;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.align-self-baseline {
|
||||
align-self: baseline !important;
|
||||
}
|
||||
|
||||
.align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
32
layers/ui/styles/variables/clr.scss
Normal file
32
layers/ui/styles/variables/clr.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
$clr-cyan-200: #EBF7FF;
|
||||
$clr-cyan-300: #93BEFF;
|
||||
$clr-cyan-400: #317AFF;
|
||||
$clr-cyan-500: #005BFF;
|
||||
$clr-cyan-600: #1464D3;
|
||||
$clr-cyan-700: #083D7E;
|
||||
|
||||
$clr-white: #FFFFFF;
|
||||
|
||||
$clr-grey-100: #F4F6FF;
|
||||
$clr-grey-200: #EEF1FF;
|
||||
$clr-grey-300: #DFE5FF;
|
||||
$clr-grey-400: #A7B9D5;
|
||||
$clr-grey-500: #6C86AD;
|
||||
$clr-grey-600: #5B708F;
|
||||
|
||||
$clr-black: #262A41;
|
||||
|
||||
$clr-red-100: #F5ECF1;
|
||||
$clr-red-200: #F3C4DE;
|
||||
$clr-red-500: #EE3275;
|
||||
|
||||
$clr-warn-100: #FFFAE8;
|
||||
$clr-warn-200: #FDEEE8;
|
||||
$clr-warn-500: #FFA800;
|
||||
|
||||
$clr-green-100: #E3FCEC;
|
||||
$clr-green-200: #B7F1CC;
|
||||
$clr-green-500: #10C44C;
|
||||
|
||||
$clr-market-100: #F2F1FD;
|
||||
$clr-market-500: #5B51DE;
|
||||
1
layers/ui/styles/variables/index.scss
Normal file
1
layers/ui/styles/variables/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@forward "clr";
|
||||
Reference in New Issue
Block a user