Tracking de l'application VApp (IHM du jeu)

This commit is contained in:
2025-05-11 18:04:12 +02:00
commit 89e9db9b62
17763 changed files with 3718499 additions and 0 deletions

View File

@ -0,0 +1,6 @@
@use '../settings'
.blockquote
padding: settings.$spacer*4 0 settings.$spacer*4 settings.$spacer*6
font-size: settings.$blockquote-font-size
font-weight: settings.$blockquote-font-weight

View File

@ -0,0 +1,23 @@
@use '../settings'
html
font-family: settings.$body-font-family
line-height: settings.$line-height-root
font-size: settings.$font-size-root
overflow-x: hidden
text-rendering: optimizeLegibility
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
html.overflow-y-hidden
overflow-y: hidden !important
:root
--v-theme-overlay-multiplier: 1
--v-scrollbar-offset: 0px
// iOS Safari hack to allow click events on body
@supports (-webkit-touch-callout: none)
body
cursor: pointer

View File

@ -0,0 +1,2 @@
@use './blockquote'
@use './global'

View File

@ -0,0 +1,13 @@
@keyframes v-shake {
59% {
margin-left: 0;
}
60%, 80% {
margin-left: 2px;
}
70%, 90% {
margin-left: -2px;
}
}

View File

@ -0,0 +1,72 @@
@use 'sass:map';
@use '../settings';
@use '../settings/colors';
@use '../tools/functions' as *;
@mixin background-color($color_value) {
background-color: $color_value !important;
}
@mixin text-color($color_value) {
color: $color_value !important;
}
@mixin background-text-color($color_name, $color_type) {
$map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type);
color: $map_value !important;
}
@if (settings.$color-pack) {
@each $color_name, $color_value in colors.$shades {
.bg-#{$color_name} {
@include background-color($color_value);
@if (map.has-key(colors.$text-on-colors, 'shades')) {
@include background-text-color('shades', $color_name);
}
}
}
@each $color_name, $color_color in colors.$colors {
@each $color_type, $color_value in $color_color {
@if ($color_type == 'base') {
.bg-#{$color_name} {
@include background-color($color_value);
@if (map.has-key(colors.$text-on-colors, $color_name)) {
@include background-text-color($color_name, $color_type);
}
}
}
@else if ($color_type != 'shades') {
.bg-#{$color_name}-#{$color_type} {
@include background-color($color_value);
@if (map.has-key(colors.$text-on-colors, $color_name)) {
@include background-text-color($color_name, $color_type);
}
}
}
}
}
@each $color_name, $color_value in colors.$shades {
.text-#{$color_name} {
@include text-color($color_value);
}
}
@each $color_name, $color_color in colors.$colors {
@each $color_type, $color_value in $color_color {
@if ($color_type == 'base') {
.text-#{$color_name} {
@include text-color($color_value);
}
}
@else if ($color_type != 'shades') {
.text-#{$color_name}-#{$color_type} {
@include text-color($color_value);
}
}
}
}
}

View File

@ -0,0 +1,5 @@
@use './animations';
@use './colors';
@use './reset';
@use './transitions';
@use './rtl';

View File

@ -0,0 +1,291 @@
@use '../settings';
/*!
* ress.css • v2.0.4
* MIT License
* github.com/filipelinhares/ress
*/
@if (settings.$reset) {
/* # =================================================================
# Global selectors
# ================================================================= */
html {
box-sizing: border-box;
overflow-y: scroll; /* All browsers without overlaying scrollbars */
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
word-break: normal;
-moz-tab-size: 4;
tab-size: 4;
}
*,
::before,
::after {
background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
box-sizing: inherit;
}
::before,
::after {
text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
vertical-align: inherit;
}
* {
padding: 0; /* Reset `padding` and `margin` of all elements */
margin: 0;
}
/* # =================================================================
# General elements
# ================================================================= */
hr {
overflow: visible; /* Show the overflow in Edge and IE */
height: 0; /* Add the correct box sizing in Firefox */
}
details,
main {
display: block; /* Render the `main` element consistently in IE. */
}
summary {
display: list-item; /* Add the correct display in all browsers */
}
small {
font-size: 80%; /* Set font-size to 80% in `small` elements */
}
[hidden] {
display: none; /* Add the correct display in IE */
}
abbr[title] {
border-bottom: none; /* Remove the bottom border in Chrome 57 */
/* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
text-decoration: underline;
text-decoration: underline dotted;
}
a {
background-color: transparent; /* Remove the gray background on active links in IE 10 */
}
a:active,
a:hover {
outline-width: 0; /* Remove the outline when hovering in all browsers */
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* Specify the font family of code elements */
}
pre {
font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}
b,
strong {
font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}
/* https://gist.github.com/unruthless/413930 */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* # =================================================================
# Forms
# ================================================================= */
input {
border-radius: 0;
}
/* Replace pointer cursor in disabled elements */
[disabled] {
cursor: default;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}
[type="search"] {
-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
outline-offset: -2px; /* Correct the outline style in Safari */
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}
textarea {
overflow: auto; /* Internet Explorer 11+ */
resize: vertical; /* Specify textarea resizability */
}
button,
input,
optgroup,
select,
textarea {
font: inherit; /* Specify font inheritance of form elements */
}
optgroup {
font-weight: bold; /* Restore the font weight unset by the previous rule */
}
button {
overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}
button,
select {
text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}
/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
cursor: pointer;
color: inherit;
}
/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
outline: 1px dotted ButtonText;
}
button,
html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}
/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
background-color: transparent;
border-style: none;
}
/* Style select like a standard input */
select {
-moz-appearance: none; /* Firefox 36+ */
-webkit-appearance: none; /* Chrome 41+ */
}
select::-ms-expand {
display: none; /* Internet Explorer 11+ */
}
select::-ms-value {
color: currentColor; /* Internet Explorer 11+ */
}
legend {
border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
display: table; /* Correct the text wrapping in Edge and IE */
max-width: 100%; /* Correct the text wrapping in Edge and IE */
white-space: normal; /* Correct the text wrapping in Edge and IE */
max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
}
::-webkit-file-upload-button {
/* Correct the inability to style clickable types in iOS and Safari */
-webkit-appearance: button;
color: inherit;
font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}
// Remove default password icon in EdgeHTML (#537)
::-ms-clear,
::-ms-reveal {
display: none
}
/* # =================================================================
# Specify media element style
# ================================================================= */
img {
border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}
/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
vertical-align: baseline;
}
/* # =================================================================
# Accessibility
# ================================================================= */
/* Hide content from screens but not screenreaders */
@media screen {
[hidden~="screen"] {
display: inherit;
}
[hidden~="screen"]:not(:active):not(:focus):not(:target) {
position: absolute !important;
clip: rect(0 0 0 0) !important;
}
}
/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
cursor: progress;
}
/* Specify the pointer cursor of trigger elements */
[aria-controls] {
cursor: pointer;
}
/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled="true"] {
cursor: default;
}
}

View File

@ -0,0 +1,9 @@
.v-locale {
&--is-rtl {
direction: rtl;
}
&--is-ltr {
direction: ltr;
}
}

View File

@ -0,0 +1,364 @@
@use '../settings';
@mixin transition-default() {
&-enter-active {
transition-duration: 0.3s !important;
transition-timing-function: settings.$standard-easing !important;
}
&-leave-active {
transition-duration: 0.3s !important;
transition-timing-function: settings.$standard-easing !important;
}
&-move {
transition-duration: 0.5s !important;
transition-property: transform !important;
transition-timing-function: settings.$standard-easing !important;
}
}
@mixin fade-out() {
&-leave-to {
opacity: 0;
}
&-leave-active {
transition-duration: 100ms !important;
}
}
// Component specific transitions
.dialog-transition,
.dialog-bottom-transition,
.dialog-top-transition {
&-enter-active {
transition-duration: 225ms !important;
transition-timing-function: settings.$decelerated-easing !important;
}
&-leave-active {
transition-duration: 125ms !important;
transition-timing-function: settings.$accelerated-easing !important;
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
pointer-events: none;
}
}
.dialog-transition {
&-enter-from, &-leave-to {
transform: scale(0.9);
opacity: 0;
}
&-enter-to, &-leave-from {
opacity: 1;
}
}
.dialog-bottom-transition {
&-enter-from, &-leave-to {
transform: translateY(calc(50vh + 50%));
}
}
.dialog-top-transition {
&-enter-from, &-leave-to {
transform: translateY(calc(-50vh - 50%));
}
}
.picker-transition,
.picker-reverse-transition {
@include transition-default();
&-enter-from,
&-leave-to {
opacity: 0;
}
&-leave-from,
&-leave-active,
&-leave-to {
position: absolute !important;
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.picker-transition {
@include transition-default();
&-enter-from {
transform: translate(0, 100%);
}
&-leave-to {
transform: translate(0, -100%);
}
}
.picker-reverse-transition {
@include transition-default();
&-enter-from {
transform: translate(0, -100%);
}
&-leave-to {
transform: translate(0, 100%);
}
}
// Generic transitions
.expand-transition {
@include transition-default();
&-enter-active,
&-leave-active {
transition-property: height !important;
}
}
.expand-x-transition {
@include transition-default();
&-enter-active,
&-leave-active {
transition-property: width !important;
}
}
.scale-transition {
@include transition-default();
@include fade-out();
&-enter-from {
opacity: 0;
transform: scale(0);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.scale-rotate-transition {
@include transition-default();
@include fade-out();
&-enter-from {
opacity: 0;
transform: scale(0) rotate(-45deg);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.scale-rotate-reverse-transition {
@include transition-default();
@include fade-out();
&-enter-from {
opacity: 0;
transform: scale(0) rotate(45deg);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.message-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
transform: translateY(-15px);
}
&-leave-from, &-leave-active {
position: absolute;
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.slide-y-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
transform: translateY(-15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.slide-y-reverse-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
transform: translateY(15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.scroll-y-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateY(-15px);
}
&-leave-to {
transform: translateY(15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.scroll-y-reverse-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateY(15px);
}
&-leave-to {
transform: translateY(-15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.scroll-x-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateX(-15px);
}
&-leave-to {
transform: translateX(15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.scroll-x-reverse-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
}
&-enter-from {
transform: translateX(15px);
}
&-leave-to {
transform: translateX(-15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.slide-x-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
transform: translateX(-15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.slide-x-reverse-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0;
transform: translateX(15px);
}
&-enter-active,
&-leave-active {
transition-property: transform, opacity !important;
}
}
.fade-transition {
@include transition-default();
&-enter-from, &-leave-to {
opacity: 0 !important;
}
&-enter-active,
&-leave-active {
transition-property: opacity !important;
}
}
.fab-transition {
@include transition-default();
&-enter-from, &-leave-to {
transform: scale(0) rotate(-45deg);
}
&-enter-active,
&-leave-active {
transition-property: transform !important;
}
}

16973
VApp/node_modules/vuetify/lib/styles/main.css generated vendored Normal file

File diff suppressed because it is too large Load Diff

6
VApp/node_modules/vuetify/lib/styles/main.sass generated vendored Normal file
View File

@ -0,0 +1,6 @@
// Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
@forward './settings'
@use './generic'
@use './elements'
@use './utilities'

View File

@ -0,0 +1,849 @@
@use '../tools/functions' as *;
$shades: () !default;
$shades: map-deep-merge(
(
'black': #000000,
'white': #FFFFFF,
'transparent': transparent
),
$shades
);
$text-on-shades: () !default;
$text-on-shades: map-deep-merge(
(
'black': map-get($shades, 'white'),
'white': map-get($shades, 'black'),
'transparent': currentColor
),
$text-on-shades
);
$red: () !default;
$red: map-deep-merge(
(
'base': #F44336,
'lighten-5': #FFEBEE,
'lighten-4': #FFCDD2,
'lighten-3': #EF9A9A,
'lighten-2': #E57373,
'lighten-1': #EF5350,
'darken-1': #E53935,
'darken-2': #D32F2F,
'darken-3': #C62828,
'darken-4': #B71C1C,
'accent-1': #FF8A80,
'accent-2': #FF5252,
'accent-3': #FF1744,
'accent-4': #D50000
),
$red
);
$text-on-red: () !default;
$text-on-red: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-red
);
$pink: () !default;
$pink: map-deep-merge(
(
'base': #e91e63,
'lighten-5': #fce4ec,
'lighten-4': #f8bbd0,
'lighten-3': #f48fb1,
'lighten-2': #f06292,
'lighten-1': #ec407a,
'darken-1': #d81b60,
'darken-2': #c2185b,
'darken-3': #ad1457,
'darken-4': #880e4f,
'accent-1': #ff80ab,
'accent-2': #ff4081,
'accent-3': #f50057,
'accent-4': #c51162
),
$pink
);
$text-on-pink: () !default;
$text-on-pink: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-pink
);
$purple: () !default;
$purple: map-deep-merge(
(
'base': #9c27b0,
'lighten-5': #f3e5f5,
'lighten-4': #e1bee7,
'lighten-3': #ce93d8,
'lighten-2': #ba68c8,
'lighten-1': #ab47bc,
'darken-1': #8e24aa,
'darken-2': #7b1fa2,
'darken-3': #6a1b9a,
'darken-4': #4a148c,
'accent-1': #ea80fc,
'accent-2': #e040fb,
'accent-3': #d500f9,
'accent-4': #aa00ff
),
$purple
);
$text-on-purple: () !default;
$text-on-purple: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'white'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-purple
);
$deep-purple: () !default;
$deep-purple: map-deep-merge(
(
'base': #673ab7,
'lighten-5': #ede7f6,
'lighten-4': #d1c4e9,
'lighten-3': #b39ddb,
'lighten-2': #9575cd,
'lighten-1': #7e57c2,
'darken-1': #5e35b1,
'darken-2': #512da8,
'darken-3': #4527a0,
'darken-4': #311b92,
'accent-1': #b388ff,
'accent-2': #7c4dff,
'accent-3': #651fff,
'accent-4': #6200ea
),
$deep-purple
);
$text-on-deep-purple: () !default;
$text-on-deep-purple: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'white'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-deep-purple
);
$indigo: () !default;
$indigo: map-deep-merge(
(
'base': #3f51b5,
'lighten-5': #e8eaf6,
'lighten-4': #c5cae9,
'lighten-3': #9fa8da,
'lighten-2': #7986cb,
'lighten-1': #5c6bc0,
'darken-1': #3949ab,
'darken-2': #303f9f,
'darken-3': #283593,
'darken-4': #1a237e,
'accent-1': #8c9eff,
'accent-2': #536dfe,
'accent-3': #3d5afe,
'accent-4': #304ffe
),
$indigo
);
$text-on-indigo: () !default;
$text-on-indigo: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'white'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'white'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-indigo
);
$blue: () !default;
$blue: map-deep-merge(
(
'base': #2196F3,
'lighten-5': #E3F2FD,
'lighten-4': #BBDEFB,
'lighten-3': #90CAF9,
'lighten-2': #64B5F6,
'lighten-1': #42A5F5,
'darken-1': #1E88E5,
'darken-2': #1976D2,
'darken-3': #1565C0,
'darken-4': #0D47A1,
'accent-1': #82B1FF,
'accent-2': #448AFF,
'accent-3': #2979FF,
'accent-4': #2962FF,
),
$blue
);
$text-on-blue: () !default;
$text-on-blue: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-blue
);
$light-blue: () !default;
$light-blue: map-deep-merge(
(
'base': #03a9f4,
'lighten-5': #e1f5fe,
'lighten-4': #b3e5fc,
'lighten-3': #81d4fa,
'lighten-2': #4fc3f7,
'lighten-1': #29b6f6,
'darken-1': #039be5,
'darken-2': #0288d1,
'darken-3': #0277bd,
'darken-4': #01579b,
'accent-1': #80d8ff,
'accent-2': #40c4ff,
'accent-3': #00b0ff,
'accent-4': #0091ea
),
$light-blue
);
$text-on-light-blue: () !default;
$text-on-light-blue: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-light-blue
);
$cyan: () !default;
$cyan: map-deep-merge(
(
'base': #00bcd4,
'lighten-5': #e0f7fa,
'lighten-4': #b2ebf2,
'lighten-3': #80deea,
'lighten-2': #4dd0e1,
'lighten-1': #26c6da,
'darken-1': #00acc1,
'darken-2': #0097a7,
'darken-3': #00838f,
'darken-4': #006064,
'accent-1': #84ffff,
'accent-2': #18ffff,
'accent-3': #00e5ff,
'accent-4': #00b8d4
),
$cyan
);
$text-on-cyan: () !default;
$text-on-cyan: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'white')
),
$text-on-cyan
);
$teal: () !default;
$teal: map-deep-merge(
(
'base': #009688,
'lighten-5': #e0f2f1,
'lighten-4': #b2dfdb,
'lighten-3': #80cbc4,
'lighten-2': #4db6ac,
'lighten-1': #26a69a,
'darken-1': #00897b,
'darken-2': #00796b,
'darken-3': #00695c,
'darken-4': #004d40,
'accent-1': #a7ffeb,
'accent-2': #64ffda,
'accent-3': #1de9b6,
'accent-4': #00bfa5
),
$teal
);
$text-on-teal: () !default;
$text-on-teal: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'white')
),
$text-on-teal
);
$green: () !default;
$green: map-deep-merge(
(
'base': #4CAF50,
'lighten-5': #E8F5E9,
'lighten-4': #C8E6C9,
'lighten-3': #A5D6A7,
'lighten-2': #81C784,
'lighten-1': #66BB6A,
'darken-1': #43A047,
'darken-2': #388E3C,
'darken-3': #2E7D32,
'darken-4': #1B5E20,
'accent-1': #B9F6CA,
'accent-2': #69F0AE,
'accent-3': #00E676,
'accent-4': #00C853
),
$green
);
$text-on-green: () !default;
$text-on-green: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-green
);
$light-green: () !default;
$light-green: map-deep-merge(
(
'base': #8bc34a,
'lighten-5': #f1f8e9,
'lighten-4': #dcedc8,
'lighten-3': #c5e1a5,
'lighten-2': #aed581,
'lighten-1': #9ccc65,
'darken-1': #7cb342,
'darken-2': #689f38,
'darken-3': #558b2f,
'darken-4': #33691e,
'accent-1': #ccff90,
'accent-2': #b2ff59,
'accent-3': #76ff03,
'accent-4': #64dd17
),
$light-green
);
$text-on-light-green: () !default;
$text-on-light-green: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-light-green
);
$lime: () !default;
$lime: map-deep-merge(
(
'base': #cddc39,
'lighten-5': #f9fbe7,
'lighten-4': #f0f4c3,
'lighten-3': #e6ee9c,
'lighten-2': #dce775,
'lighten-1': #d4e157,
'darken-1': #c0ca33,
'darken-2': #afb42b,
'darken-3': #9e9d24,
'darken-4': #827717,
'accent-1': #f4ff81,
'accent-2': #eeff41,
'accent-3': #c6ff00,
'accent-4': #aeea00
),
$lime
);
$text-on-lime: () !default;
$text-on-lime: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'black'),
'darken-2': map-get($shades, 'black'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-lime
);
$yellow: () !default;
$yellow: map-deep-merge(
(
'base': #ffeb3b,
'lighten-5': #fffde7,
'lighten-4': #fff9c4,
'lighten-3': #fff59d,
'lighten-2': #fff176,
'lighten-1': #ffee58,
'darken-1': #fdd835,
'darken-2': #fbc02d,
'darken-3': #f9a825,
'darken-4': #f57f17,
'accent-1': #ffff8d,
'accent-2': #ffff00,
'accent-3': #ffea00,
'accent-4': #ffd600
),
$yellow
);
$text-on-yellow: () !default;
$text-on-yellow: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'black'),
'darken-2': map-get($shades, 'black'),
'darken-3': map-get($shades, 'black'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-yellow
);
$amber: () !default;
$amber: map-deep-merge(
(
'base': #ffc107,
'lighten-5': #fff8e1,
'lighten-4': #ffecb3,
'lighten-3': #ffe082,
'lighten-2': #ffd54f,
'lighten-1': #ffca28,
'darken-1': #ffb300,
'darken-2': #ffa000,
'darken-3': #ff8f00,
'darken-4': #ff6f00,
'accent-1': #ffe57f,
'accent-2': #ffd740,
'accent-3': #ffc400,
'accent-4': #ffab00
),
$amber
);
$text-on-amber: () !default;
$text-on-amber: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'black'),
'darken-2': map-get($shades, 'black'),
'darken-3': map-get($shades, 'black'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'black')
),
$text-on-amber
);
$orange: () !default;
$orange: map-deep-merge(
(
'base': #ff9800,
'lighten-5': #fff3e0,
'lighten-4': #ffe0b2,
'lighten-3': #ffcc80,
'lighten-2': #ffb74d,
'lighten-1': #ffa726,
'darken-1': #fb8c00,
'darken-2': #f57c00,
'darken-3': #ef6c00,
'darken-4': #e65100,
'accent-1': #ffd180,
'accent-2': #ffab40,
'accent-3': #ff9100,
'accent-4': #ff6d00
),
$orange
);
$text-on-orange: () !default;
$text-on-orange: map-deep-merge(
(
'base': map-get($shades, 'black'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'black'),
'accent-3': map-get($shades, 'black'),
'accent-4': map-get($shades, 'white')
),
$text-on-orange
);
$deep-orange: () !default;
$deep-orange: map-deep-merge(
(
'base': #ff5722,
'lighten-5': #fbe9e7,
'lighten-4': #ffccbc,
'lighten-3': #ffab91,
'lighten-2': #ff8a65,
'lighten-1': #ff7043,
'darken-1': #f4511e,
'darken-2': #e64a19,
'darken-3': #d84315,
'darken-4': #bf360c,
'accent-1': #ff9e80,
'accent-2': #ff6e40,
'accent-3': #ff3d00,
'accent-4': #dd2c00
),
$deep-orange
);
$text-on-deep-orange: () !default;
$text-on-deep-orange: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white'),
'accent-1': map-get($shades, 'black'),
'accent-2': map-get($shades, 'white'),
'accent-3': map-get($shades, 'white'),
'accent-4': map-get($shades, 'white')
),
$text-on-deep-orange
);
$brown: () !default;
$brown: map-deep-merge(
(
'base': #795548,
'lighten-5': #efebe9,
'lighten-4': #d7ccc8,
'lighten-3': #bcaaa4,
'lighten-2': #a1887f,
'lighten-1': #8d6e63,
'darken-1': #6d4c41,
'darken-2': #5d4037,
'darken-3': #4e342e,
'darken-4': #3e2723
),
$brown
);
$text-on-brown: () !default;
$text-on-brown: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white')
),
$text-on-brown
);
$blue-grey: () !default;
$blue-grey: map-deep-merge(
(
'base': #607d8b,
'lighten-5': #eceff1,
'lighten-4': #cfd8dc,
'lighten-3': #b0bec5,
'lighten-2': #90a4ae,
'lighten-1': #78909c,
'darken-1': #546e7a,
'darken-2': #455a64,
'darken-3': #37474f,
'darken-4': #263238
),
$blue-grey
);
$text-on-blue-grey: () !default;
$text-on-blue-grey: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'white'),
'lighten-1': map-get($shades, 'white'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white')
),
$text-on-blue-grey
);
$grey: () !default;
$grey: map-deep-merge(
(
'base': #9e9e9e,
'lighten-5': #fafafa,
'lighten-4': #f5f5f5,
'lighten-3': #eeeeee,
'lighten-2': #e0e0e0,
'lighten-1': #bdbdbd,
'darken-1': #757575,
'darken-2': #616161,
'darken-3': #424242,
'darken-4': #212121
),
$grey
);
$text-on-grey: () !default;
$text-on-grey: map-deep-merge(
(
'base': map-get($shades, 'white'),
'lighten-5': map-get($shades, 'black'),
'lighten-4': map-get($shades, 'black'),
'lighten-3': map-get($shades, 'black'),
'lighten-2': map-get($shades, 'black'),
'lighten-1': map-get($shades, 'black'),
'darken-1': map-get($shades, 'white'),
'darken-2': map-get($shades, 'white'),
'darken-3': map-get($shades, 'white'),
'darken-4': map-get($shades, 'white')
),
$text-on-grey
);
$colors: () !default;
$colors: map-deep-merge(
(
'red': $red,
'pink': $pink,
'purple': $purple,
'deep-purple': $deep-purple,
'indigo': $indigo,
'blue': $blue,
'light-blue': $light-blue,
'cyan': $cyan,
'teal': $teal,
'green': $green,
'light-green': $light-green,
'lime': $lime,
'yellow': $yellow,
'amber': $amber,
'orange': $orange,
'deep-orange': $deep-orange,
'brown': $brown,
'blue-grey': $blue-grey,
'grey': $grey,
'shades': $shades
),
$colors
);
$text-on-colors: () !default;
$text-on-colors: map-deep-merge(
(
'red': $text-on-red,
'pink': $text-on-pink,
'purple': $text-on-purple,
'deep-purple': $text-on-deep-purple,
'indigo': $text-on-indigo,
'blue': $text-on-blue,
'light-blue': $text-on-light-blue,
'cyan': $text-on-cyan,
'teal': $text-on-teal,
'green': $text-on-green,
'light-green': $text-on-light-green,
'lime': $text-on-lime,
'yellow': $text-on-yellow,
'amber': $text-on-amber,
'orange': $text-on-orange,
'deep-orange': $text-on-deep-orange,
'brown': $text-on-brown,
'blue-grey': $text-on-blue-grey,
'grey': $text-on-grey,
'shades': $text-on-shades
),
$text-on-colors
);

View File

@ -0,0 +1,101 @@
@use '../tools/functions' as *;
$shadow-key-umbra-opacity: var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)) !default;
$shadow-key-penumbra-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)) !default;
$shadow-key-ambient-opacity: var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !default;
$shadow-key-umbra: () !default;
$shadow-key-umbra: map-deep-merge(
(
0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
1: (0px 2px 1px -1px $shadow-key-umbra-opacity),
2: (0px 3px 1px -2px $shadow-key-umbra-opacity),
3: (0px 3px 3px -2px $shadow-key-umbra-opacity),
4: (0px 2px 4px -1px $shadow-key-umbra-opacity),
5: (0px 3px 5px -1px $shadow-key-umbra-opacity),
6: (0px 3px 5px -1px $shadow-key-umbra-opacity),
7: (0px 4px 5px -2px $shadow-key-umbra-opacity),
8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
9: (0px 5px 6px -3px $shadow-key-umbra-opacity),
10: (0px 6px 6px -3px $shadow-key-umbra-opacity),
11: (0px 6px 7px -4px $shadow-key-umbra-opacity),
12: (0px 7px 8px -4px $shadow-key-umbra-opacity),
13: (0px 7px 8px -4px $shadow-key-umbra-opacity),
14: (0px 7px 9px -4px $shadow-key-umbra-opacity),
15: (0px 8px 9px -5px $shadow-key-umbra-opacity),
16: (0px 8px 10px -5px $shadow-key-umbra-opacity),
17: (0px 8px 11px -5px $shadow-key-umbra-opacity),
18: (0px 9px 11px -5px $shadow-key-umbra-opacity),
19: (0px 9px 12px -6px $shadow-key-umbra-opacity),
20: (0px 10px 13px -6px $shadow-key-umbra-opacity),
21: (0px 10px 13px -6px $shadow-key-umbra-opacity),
22: (0px 10px 14px -6px $shadow-key-umbra-opacity),
23: (0px 11px 14px -7px $shadow-key-umbra-opacity),
24: (0px 11px 15px -7px $shadow-key-umbra-opacity)
),
$shadow-key-umbra
);
$shadow-key-penumbra: () !default;
$shadow-key-penumbra: map-deep-merge(
(
0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
1: (0px 1px 1px 0px $shadow-key-penumbra-opacity),
2: (0px 2px 2px 0px $shadow-key-penumbra-opacity),
3: (0px 3px 4px 0px $shadow-key-penumbra-opacity),
4: (0px 4px 5px 0px $shadow-key-penumbra-opacity),
5: (0px 5px 8px 0px $shadow-key-penumbra-opacity),
6: (0px 6px 10px 0px $shadow-key-penumbra-opacity),
7: (0px 7px 10px 1px $shadow-key-penumbra-opacity),
8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
9: (0px 9px 12px 1px $shadow-key-penumbra-opacity),
10: (0px 10px 14px 1px $shadow-key-penumbra-opacity),
11: (0px 11px 15px 1px $shadow-key-penumbra-opacity),
12: (0px 12px 17px 2px $shadow-key-penumbra-opacity),
13: (0px 13px 19px 2px $shadow-key-penumbra-opacity),
14: (0px 14px 21px 2px $shadow-key-penumbra-opacity),
15: (0px 15px 22px 2px $shadow-key-penumbra-opacity),
16: (0px 16px 24px 2px $shadow-key-penumbra-opacity),
17: (0px 17px 26px 2px $shadow-key-penumbra-opacity),
18: (0px 18px 28px 2px $shadow-key-penumbra-opacity),
19: (0px 19px 29px 2px $shadow-key-penumbra-opacity),
20: (0px 20px 31px 3px $shadow-key-penumbra-opacity),
21: (0px 21px 33px 3px $shadow-key-penumbra-opacity),
22: (0px 22px 35px 3px $shadow-key-penumbra-opacity),
23: (0px 23px 36px 3px $shadow-key-penumbra-opacity),
24: (0px 24px 38px 3px $shadow-key-penumbra-opacity)
),
$shadow-key-penumbra
);
$shadow-key-ambient: () !default;
$shadow-key-ambient: map-deep-merge(
(
0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
1: (0px 1px 3px 0px $shadow-key-ambient-opacity),
2: (0px 1px 5px 0px $shadow-key-ambient-opacity),
3: (0px 1px 8px 0px $shadow-key-ambient-opacity),
4: (0px 1px 10px 0px $shadow-key-ambient-opacity),
5: (0px 1px 14px 0px $shadow-key-ambient-opacity),
6: (0px 1px 18px 0px $shadow-key-ambient-opacity),
7: (0px 2px 16px 1px $shadow-key-ambient-opacity),
8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
9: (0px 3px 16px 2px $shadow-key-ambient-opacity),
10: (0px 4px 18px 3px $shadow-key-ambient-opacity),
11: (0px 4px 20px 3px $shadow-key-ambient-opacity),
12: (0px 5px 22px 4px $shadow-key-ambient-opacity),
13: (0px 5px 24px 4px $shadow-key-ambient-opacity),
14: (0px 5px 26px 4px $shadow-key-ambient-opacity),
15: (0px 6px 28px 5px $shadow-key-ambient-opacity),
16: (0px 6px 30px 5px $shadow-key-ambient-opacity),
17: (0px 6px 32px 5px $shadow-key-ambient-opacity),
18: (0px 7px 34px 6px $shadow-key-ambient-opacity),
19: (0px 7px 36px 6px $shadow-key-ambient-opacity),
20: (0px 8px 38px 7px $shadow-key-ambient-opacity),
21: (0px 8px 40px 7px $shadow-key-ambient-opacity),
22: (0px 8px 42px 7px $shadow-key-ambient-opacity),
23: (0px 9px 44px 8px $shadow-key-ambient-opacity),
24: (0px 9px 46px 8px $shadow-key-ambient-opacity)
),
$shadow-key-ambient
);

View File

@ -0,0 +1,4 @@
@forward './variables'
@forward './colors'
@forward './elevations'
@forward './utilities'

View File

@ -0,0 +1,588 @@
@use 'sass:map';
@use './variables';
@use '../tools/functions' as *;
$utilities: () !default;
@if ($utilities != false) {
$utilities: map-deep-merge(
(
// Display utilities
"overflow": (
property: overflow,
values: auto hidden visible,
),
"overflow-x": (
property: overflow-x,
values: auto hidden
),
"overflow-y": (
property: overflow-y,
values: auto hidden
),
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: none inline inline-block block table table-row table-cell flex inline-flex
),
"float": (
responsive: true,
print: true,
property: float,
class: float,
values: none left right
),
"float:rtl": (
responsive: true,
print: true,
property: float,
class: float,
values: (
end: left,
start: right,
)
),
"float:ltr": (
responsive: true,
print: true,
property: float,
class: float,
values: (
end: right,
start: left,
)
),
// Flex utilities
"flex": (
responsive: true,
property: flex,
values: (
fill: 1 1 auto,
'1-1': 1 1 auto,
'1-0': 1 0 auto,
'0-1': 0 1 auto,
'0-0': 0 0 auto,
'1-1-100': 1 1 100%,
'1-0-100': 1 0 100%,
'0-1-100': 0 1 100%,
'0-0-100': 0 0 100%
)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"justify-content": (
responsive: true,
property: justify-content,
class: justify,
values: (
start: flex-start,
end: flex-end,
center: center,
space-between: space-between,
space-around: space-around,
space-evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
class: align,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
space-between: space-between,
space-around: space-around,
space-evenly: space-evenly,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9,
10: 10,
11: 11,
12: 12,
last: 13,
),
),
// gap utilities
"gap": (
responsive: true,
property: gap,
class: ga,
values: map.merge(variables.$spacers, (auto: auto))
),
"gap-row": (
responsive: true,
property: row-gap,
class: gr,
values: map.merge(variables.$spacers, (auto: auto))
),
"gap-column": (
responsive: true,
property: column-gap,
class: gc,
values: map.merge(variables.$spacers, (auto: auto))
),
// Margin utilities
"margin": (
responsive: true,
property: margin,
class: ma,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-right": (
responsive: true,
property: margin-right,
class: mr,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-left": (
responsive: true,
property: margin-left,
class: ml,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-inline-start,
class: ms,
values: map.merge(variables.$spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-inline-end,
class: me,
values: map.merge(variables.$spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: ma,
values: variables.$negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: variables.$negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: variables.$negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: variables.$negative-spacers
),
"negative-margin-right": (
responsive: true,
property: margin-right,
class: mr,
values: variables.$negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: variables.$negative-spacers
),
"negative-margin-left": (
responsive: true,
property: margin-left,
class: ml,
values: variables.$negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-inline-start,
class: ms,
values: variables.$negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-inline-end,
class: me,
values: variables.$negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: pa,
values: variables.$spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: variables.$spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: variables.$spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: variables.$spacers
),
"padding-right": (
responsive: true,
property: padding-right,
class: pr,
values: variables.$spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: variables.$spacers
),
"padding-left": (
responsive: true,
property: padding-left,
class: pl,
values: variables.$spacers
),
"padding-start": (
responsive: true,
property: padding-inline-start,
class: ps,
values: variables.$spacers
),
"padding-end": (
responsive: true,
property: padding-inline-end,
class: pe,
values: variables.$spacers
),
// Border radius
"rounded": (
property: border-radius,
class: rounded,
values: variables.$rounded
),
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
class: rounded-t,
values: variables.$rounded
),
"rounded-end": (
property: (ltr: border-top-right-radius border-bottom-right-radius, rtl: border-top-left-radius border-bottom-left-radius),
class: rounded-e,
values: variables.$rounded
),
"rounded-bottom": (
property: border-bottom-left-radius border-bottom-right-radius,
class: rounded-b,
values: variables.$rounded
),
"rounded-start": (
property: (ltr: border-top-left-radius border-bottom-left-radius, rtl: border-top-right-radius border-bottom-right-radius),
class: rounded-s,
values: variables.$rounded
),
"rounded-top-start": (
property: (ltr: border-top-left-radius, rtl: border-top-right-radius),
class: rounded-ts,
values: variables.$rounded
),
"rounded-top-end": (
property: (ltr: border-top-right-radius, rtl: border-top-left-radius),
class: rounded-te,
values: variables.$rounded
),
"rounded-bottom-end": (
property: (ltr: border-bottom-right-radius, rtl: border-bottom-left-radius),
class: rounded-be,
values: variables.$rounded
),
"rounded-bottom-start": (
property: (ltr: border-bottom-left-radius, rtl: border-bottom-right-radius),
class: rounded-bs,
values: variables.$rounded
),
// Border
"border": (
property: border-width border-style border-color,
class: border,
values: variables.$borders
),
"border-opacity": (
property: --v-border-opacity,
class: border-opacity,
values: variables.$border-opacities
),
"border-top": (
property: border-block-start-width border-block-start-style border-block-start-color,
class: border-t,
values: variables.$borders
),
"border-end": (
property: border-inline-end-width border-inline-end-style border-inline-end-color,
class: border-e,
values: variables.$borders
),
"border-bottom": (
property: border-block-end-width border-block-end-style border-block-end-color,
class: border-b,
values: variables.$borders
),
"border-start": (
property: border-inline-start-width border-inline-start-style border-inline-start-color,
class: border-s,
values: variables.$borders
),
"border-style": (
property: border-style,
class: border,
values: solid dashed dotted double none
),
// Text
"text-align": (
responsive: true,
property: text-align,
class: text,
values: left right center justify start end
),
"text-decoration": (
property: text-decoration,
class: text-decoration,
values: line-through none overline underline
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
no-wrap: nowrap,
pre: pre,
pre-line: pre-line,
pre-wrap: pre-wrap,
)
),
"overflow-wrap": (
property: overflow-wrap word-break, // word-break for IE & < Edge 18
class: text,
values: (break: break-word)
),
"text-opacity": (
property: color,
class: text,
values: (
high-emphasis: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)),
medium-emphasis: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)),
disabled: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)),
)
),
"text-overflow": (
property: white-space overflow text-overflow,
class: text,
values: (truncate: nowrap hidden ellipsis)
),
"typography": (
responsive: true,
property: (
font-size,
font-weight,
line-height,
letter-spacing,
font-family,
text-transform
),
class: text,
unimportant: (
font-family,
font-weight,
line-height
),
values: variables.$flat-typography
),
"text-transform": (
property: text-transform,
class: text,
values: none capitalize lowercase uppercase
),
"font-weight": (
property: font-weight,
class: font-weight,
values: variables.$font-weights
),
"font-italic": (
property: font-style,
class: font,
values: italic
),
"text-mono": (
property: font-family,
class: text,
values: (
mono: monospace
)
),
// Position
"position": (
property: position,
class: position,
values: static relative fixed absolute sticky
),
// Cursor
"cursor": (
property: cursor,
class: cursor,
values: auto default pointer wait text move help not-allowed progress grab grabbing none
),
// Sizing
"fill-height": (
property: height,
class: fill,
values: (
height: 100%
)
),
"height": (
property: height,
class: h,
values: (
auto: auto,
screen: 100vh,
0: 0,
25: 25%,
50: 50%,
75: 75%,
100: 100%
)
),
"height-screen": (
property: height,
class: h,
values: (
screen: 100dvh
)
),
"width": (
property: width,
class: w,
values: (
auto: auto,
0: 0,
25: 25%,
33: 33%,
50: 50%,
66: 66%,
75: 75%,
100: 100%
)
)
),
$utilities
);
} @else {
$utilities: ();
}

View File

@ -0,0 +1,327 @@
@use 'sass:math';
@use 'sass:map';
@use 'sass:meta';
@use '../tools/functions' as *;
$color-pack: true !default;
$reset: true !default;
$body-font-family: 'Roboto', sans-serif !default;
$font-size-root: 1rem !default;
$line-height-root: 1.5 !default;
$border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
$border-radius-root: 4px !default;
$border-style-root: solid !default;
$borders: () !default;
$borders: map-deep-merge(
(
0: 0,
null: thin,
sm: 1px,
md: 2px,
lg: 4px,
xl: 8px
),
$borders
);
@each $key, $border in $borders {
$borders: map-deep-merge(
$borders,
( $key: $border $border-style-root $border-color-root )
)
}
$border-opacities: () !default;
$border-opacities: map-deep-merge(
(
0: 0,
null: .12,
25: .25,
50: .50,
75: .75,
100: 1
),
$border-opacities
);
$states: () !default;
$states: map-deep-merge(
(
'hover': var(--v-hover-opacity),
'focus': var(--v-focus-opacity),
'selected': var(--v-selected-opacity),
'activated': var(--v-activated-opacity),
'pressed': var(--v-pressed-opacity),
'dragged': var(--v-dragged-opacity)
),
$states
);
$rounded: () !default;
$rounded: map-deep-merge(
(
0: 0,
'sm': $border-radius-root * .5,
null: $border-radius-root,
'lg': $border-radius-root * 2,
'xl': $border-radius-root * 6,
'pill': 9999px,
'circle': 50%,
'shaped': $border-radius-root * 6 0
),
$rounded
);
$spacer: 4px !default;
$spacers-steps: 16 !default;
$spacers: () !default;
@if (meta.type-of($spacers) == list) {
@for $i from 0 through $spacers-steps {
$spacers: map.merge($spacers, ($i: $spacer * $i))
}
}
$negative-spacers: () !default;
@if (meta.type-of($negative-spacers) == list) {
@for $i from 1 through $spacers-steps {
$negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
}
}
$grid-breakpoints: () !default;
$grid-breakpoints: map-deep-merge(
(
'xs': 0,
'sm': 600px,
'md': 960px,
'lg': 1280px,
'xl': 1920px,
'xxl': 2560px,
),
$grid-breakpoints
);
$grid-gutter: $spacer * 6 !default;
$form-grid-gutter: $spacer * 2 !default;
$grid-columns: 12 !default;
$container-padding-x: $spacer * 4 !default;
$grid-gutters: () !default;
$grid-gutters: map-deep-merge(
(
'xs': math.div($grid-gutter, 12),
'sm': math.div($grid-gutter, 6),
'md': math.div($grid-gutter, 3),
'lg': math.div($grid-gutter * 2, 3),
'xl': $grid-gutter,
),
$grid-gutters
);
$container-max-widths: () !default;
$container-max-widths: map-deep-merge(
(
'xs': null,
'sm': null,
'md': map.get($grid-breakpoints, 'md') * 0.9375,
'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
),
$container-max-widths
);
// Avoid using *-and-down where possible
$display-breakpoints: () !default;
$display-breakpoints: map-deep-merge(
(
'print-only': 'only print',
'screen-only': 'only screen',
'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})',
'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})',
'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})',
'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})',
'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})',
'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})',
'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
),
$display-breakpoints
);
$font-weights: () !default;
$font-weights: map-deep-merge(
(
'thin': 100,
'light': 300,
'regular': 400,
'medium': 500,
'bold': 700,
'black': 900
),
$font-weights
);
$heading-font-family: $body-font-family !default;
$typography: () !default;
$typography: map-deep-merge(
(
'h1': (
'size': 6rem,
'weight': 300,
'line-height': 6rem,
'letter-spacing': -.015625em,
'font-family': $heading-font-family,
'text-transform': none
),
'h2': (
'size': 3.75rem,
'weight': 300,
'line-height': 3.75rem,
'letter-spacing': -.0083333333em,
'font-family': $heading-font-family,
'text-transform': none
),
'h3': (
'size': 3rem,
'weight': 400,
'line-height': 3.125rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h4': (
'size': 2.125rem,
'weight': 400,
'line-height': 2.5rem,
'letter-spacing': .0073529412em,
'font-family': $heading-font-family,
'text-transform': none
),
'h5': (
'size': 1.5rem,
'weight': 400,
'line-height': 2rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h6': (
'size': 1.25rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .0125em,
'font-family': $heading-font-family,
'text-transform': none
),
'subtitle-1': (
'size': 1rem,
'weight': normal,
'line-height': 1.75rem,
'letter-spacing': .009375em,
'font-family': $body-font-family,
'text-transform': none
),
'subtitle-2': (
'size': .875rem,
'weight': 500,
'line-height': 1.375rem,
'letter-spacing': .0071428571em,
'font-family': $body-font-family,
'text-transform': none
),
'body-1': (
'size': 1rem,
'weight': 400,
'line-height': 1.5rem,
'letter-spacing': .03125em,
'font-family': $body-font-family,
'text-transform': none
),
'body-2': (
'size': .875rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0178571429em,
'font-family': $body-font-family,
'text-transform': none
),
'button': (
'size': .875rem,
'weight': 500,
'line-height': 2.25rem,
'letter-spacing': .0892857143em,
'font-family': $body-font-family,
'text-transform': uppercase
),
'caption': (
'size': .75rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0333333333em,
'font-family': $body-font-family,
'text-transform': none
),
'overline': (
'size': .75rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .1666666667em,
'font-family': $body-font-family,
'text-transform': uppercase
)
),
$typography
);
$flat-typography: () !default;
@each $type, $values in $typography {
$flat-typography: map-deep-merge(
$flat-typography,
(#{$type}: map.values($values))
);
}
// Mapping from transition to easings:
// fast-out-slow-in -> standard
// linear-out-slow-in -> decelerated
// fast-out-linear-in -> accelerated
// ease-in-out -> standard or accelerated depending on usage
// fast-in-fast-out -> accelerated
// swing -> standard
$standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
$decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering
$accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving
// Elements
$bootable-transition: 0.2s $decelerated-easing !default;
$blockquote-font-size: 18px !default;
$blockquote-font-weight: 300 !default;
$sizes: (
'x-small',
'small',
'default',
'large',
'x-large'
) !default;
$size-scale: $spacer * 2 !default;
$size-scales: (
'x-small': -2,
'small': -1,
'default': 0,
'large': 1,
'x-large': 2
) !default;

View File

@ -0,0 +1,8 @@
@mixin absolute($pseudo: false)
@if ($pseudo)
content: ''
position: absolute
top: 0
left: 0
width: 100%
height: 100%

View File

@ -0,0 +1,3 @@
@mixin bootable()
&:not([data-booted="true"])
transition: none !important

View File

@ -0,0 +1,9 @@
@mixin border($color: null, $style: null, $width: null, $thin-width: false, $important: false)
border-color: $color if($important, !important, null)
border-style: $style if($important, !important, null)
border-width: $width if($important, !important, null)
@if $thin-width
&--border
border-width: $thin-width
box-shadow: none

View File

@ -0,0 +1,6 @@
@use '../settings'
@mixin density($name, $densities)
@each $density, $multiplier in $densities
.#{$name}--density-#{$density}
@content($multiplier * settings.$spacer)

View File

@ -0,0 +1,19 @@
@use './functions' as *
@use '../settings' as *
@mixin visually-hidden
position: absolute !important
height: 1px
width: 1px
overflow: hidden
clip: rect(1px, 1px, 1px, 1px)
white-space: nowrap
display: initial
=media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
$min: breakpoint-min($name, $breakpoints)
@if $min
@media (min-width: $min)
@content
@else
@content

View File

@ -0,0 +1,8 @@
@use 'sass:map'
@use '../settings'
@mixin elevation($z, $important: false)
box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) if($important, !important, null)
@mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1))
transition: box-shadow $duration $easing

View File

@ -0,0 +1,82 @@
@use 'sass:list'
@use 'sass:map'
@use 'sass:math'
@use 'sass:meta'
@function map-deep-set($map, $keys, $value)
$maps: ($map,)
$result: null
// If the last key is a map already
// Warn the user we will be overriding it with $value
@if meta.type-of(list.nth($keys, -1)) == "map"
@warn "The last key you specified is a map; it will be overrided with `#{$value}`."
// If $keys is a single key
// Just merge and return
@if list.length($keys) == 1
@return map.merge($map, ( $keys: $value ))
// Loop from the first to the second to last key from $keys
// Store the associated map to this key in the $maps list
// If the key doesn't exist, throw an error
@for $i from 1 through list.length($keys) - 1
$current-key: list.nth($keys, $i)
$current-map: list.nth($maps, -1)
$current-get: map.get($current-map, $current-key)
@if $current-get == null
@error "Key `#{$current-key}` doesn't exist at current level in map."
$maps: list.append($maps, $current-get)
// Loop from the last map to the first one
// Merge it with the previous one
@for $i from list.length($maps) through 1
$current-map: list.nth($maps, $i)
$current-key: list.nth($keys, $i)
$current-val: if($i == list.length($maps), $value, $result)
$result: map.merge($current-map, ($current-key: $current-val))
// Return result
@return $result
@function map-deep-get($map, $keys...)
@each $key in $keys
$map: map.get($map, $key)
@return $map
@function breakpoint-min($name, $breakpoints)
$min: map.get($breakpoints, $name)
@return if($min != 0, $min, null)
@function breakpoint-infix($name, $breakpoints)
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}")
// Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss
@function map-deep-merge($parent-map, $child-map)
$result: $parent-map
@each $key, $child in $child-map
$parent-has-key: map.has-key($result, $key)
$parent-value: map.get($result, $key)
$parent-type: meta.type-of($parent-value)
$child-type: meta.type-of($child)
$parent-is-map: $parent-type == map
$child-is-map: $child-type == map
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map))
$result: map.merge($result, ( $key: $child ))
@else
$result: map.merge($result, ( $key: map-deep-merge($parent-value, $child) ))
@return $result
@function theme-color($color, $opacity: 1)
$color: rgba(var(--v-theme-#{$color}), $opacity)
@return $color
@function roundEven($val)
@return 2 * math.round($val * .5)

17
VApp/node_modules/vuetify/lib/styles/tools/_index.sass generated vendored Normal file
View File

@ -0,0 +1,17 @@
@forward '_absolute'
@forward '_functions'
@forward '_bootable'
@forward '_border'
@forward '_density'
@forward '_elevation'
@forward '_position'
@forward '_radius'
@forward '_rounded'
@forward '_rtl'
@forward '_sheet'
@forward '_states'
@forward '_theme'
@forward '_typography'
@forward '_utilities'
@forward '_variant'
@forward '_display'

View File

@ -0,0 +1,4 @@
@mixin position($positions, $important: false)
@each $position in $positions
&--#{$position}
position: #{$position} if($important, !important, null)

View File

@ -0,0 +1,9 @@
@use 'sass:map'
@use '../settings'
@mixin radius($r, $important: false)
// Key exists within the $rounded variable
@if (map.has-key(settings.$rounded, $r))
border-radius: map.get(settings.$rounded, $r) if($important, !important, null)
@else
border-radius: $r if($important, !important, null)

View File

@ -0,0 +1,2 @@
@mixin rounded($radius: null, $important: false)
border-radius: $radius if($important, !important, null)

11
VApp/node_modules/vuetify/lib/styles/tools/_rtl.sass generated vendored Normal file
View File

@ -0,0 +1,11 @@
@use 'sass:selector'
@mixin rtl()
@at-root #{selector.append('.v-locale--is-rtl', &)},
.v-locale--is-rtl &
@content
@mixin ltr()
@at-root #{selector.append('.v-locale--is-ltr', &)},
.v-locale--is-ltr &
@content

14
VApp/node_modules/vuetify/lib/styles/tools/_sheet.sass generated vendored Normal file
View File

@ -0,0 +1,14 @@
@mixin paper ($elevation, $radius, $shaped-radius)
@include tools.radius($radius)
&:not(.v-sheet--outlined)
@include tools.elevation($elevation)
@if ($shaped-radius)
&.v-sheet--shaped
@include tools.radius($shaped-radius)
@mixin sheet ($component, $elevation, $radius, $shaped-radius)
.v-sheet.#{$component}
@include paper($elevation, $radius, $shaped-radius)

View File

@ -0,0 +1,42 @@
@use 'sass:map'
@use 'sass:string'
@use '../settings'
@mixin states ($selector: '&::before', $active: true)
@if string.slice(string.unquote($selector), 1, 1) != '&'
$selector: #{'>'} #{$selector}
&:hover
#{$selector}
opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
&:focus-visible
#{$selector}
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
@supports not selector(:focus-visible)
&:focus
#{$selector}
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
@if ($active)
&--active,
&[aria-haspopup="menu"][aria-expanded="true"]
@include active-states($selector)
@mixin active-states ($selector, $base: map.get(settings.$states, 'activated'))
#{$selector}
opacity: calc(#{$base} * var(--v-theme-overlay-multiplier))
&:hover
#{$selector}
opacity: calc((#{$base} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
&:focus-visible
#{$selector}
opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
@supports not selector(:focus-visible)
&:focus
#{$selector}
opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))

View File

@ -0,0 +1,3 @@
@mixin theme ($background, $color)
background: $background
color: $color

View File

@ -0,0 +1,6 @@
@mixin typography ($font-size, $font-weight, $letter-spacing, $line-height, $text-transform)
font-size: $font-size
font-weight: $font-weight
letter-spacing: $letter-spacing
line-height: $line-height
text-transform: $text-transform

View File

@ -0,0 +1,64 @@
@use 'sass:list'
@use 'sass:map'
@use 'sass:meta'
=generate-utility($utility, $infix, $forceDir)
$values: map.get($utility, values)
// If the values are a list or string, convert it into a map
@if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list"
$values: list.zip($values, $values)
@each $value in $values
$properties: map.get($utility, property)
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
@if meta.type-of($properties) == 'string'
$properties: list.append((), $properties)
// Property can be a map, where the key is a mixin to include
@if meta.type-of($properties) == 'map'
@each $dir in $properties
$mixin: list.nth($dir, 1)
// SASS doesn't support dynamic mixin invocation
// https://github.com/sass/sass/issues/626
@if $mixin == 'ltr'
.v-locale--is-ltr
+generate-utility-body($utility, list.nth($dir, 2), $value, $infix)
@else if $mixin == 'rtl'
.v-locale--is-rtl
+generate-utility-body($utility, list.nth($dir, 2), $value, $infix)
@else
@error 'Only RTL and LTR are supported'
@else
@if $forceDir == 'ltr'
.v-locale--is-ltr
+generate-utility-body($utility, $properties, $value, $infix)
@else if $forceDir == 'rtl'
.v-locale--is-rtl
+generate-utility-body($utility, $properties, $value, $infix)
@else
+generate-utility-body($utility, $properties, $value, $infix)
=generate-utility-body($utility, $properties, $value, $infix)
// Use custom class if present
$property-class: map.get($utility, class)
$property-class: if($property-class, $property-class, list.nth($properties, 1))
// Don't prefix if value key is null (eg. with shadow class)
$property-class-modifier: if(list.nth($value, 1), "-" + list.nth($value, 1), "")
$value: list.nth($value, 2)
.#{$property-class + $infix + $property-class-modifier}
@for $i from 1 through list.length($properties)
$property: list.nth($properties, $i)
$val: $value
@if meta.type-of($value) == 'list' and list.length($properties) == list.length($value)
$val: list.nth($value, $i)
@if $val != false
// Check if unimportant property exists.
// This allows you to conditional skip
// defining a property as important.
$unimportant: map.get($utility, unimportant)
#{$property}: #{meta.inspect($val) if(list.index($unimportant, $property), null, !important)}

View File

@ -0,0 +1,52 @@
@use "./absolute" as *
@use "./elevation" as *
@mixin variant($contained-background, $contained-color, $contained-elevation, $plain-opacity, $name)
&--variant-plain,
&--variant-outlined,
&--variant-text,
&--variant-tonal
background: transparent
color: inherit
&--variant-plain
opacity: $plain-opacity
&:focus,
&:hover
opacity: 1
&--variant-plain
.#{$name}__overlay
display: none
&--variant-elevated,
&--variant-flat
background: $contained-background
color: $contained-color
@if ($contained-elevation > 0)
&--variant-elevated
@include elevation($contained-elevation)
&--variant-flat
@include elevation(0)
&--variant-outlined
border: thin solid currentColor
&--variant-text
.#{$name}__overlay
background: currentColor
&--variant-tonal
.#{$name}__underlay
background: currentColor
opacity: var(--v-activated-opacity)
border-radius: inherit
position: absolute
top: 0
right: 0
bottom: 0
left: 0
pointer-events: none

View File

@ -0,0 +1,8 @@
@use '../settings'
@if (settings.$utilities != false and length(settings.$utilities) > 0)
@each $size, $media_query in settings.$display-breakpoints
.hidden
&-#{$size}
@media #{$media_query}
display: none !important

View File

@ -0,0 +1,13 @@
@use '../tools';
@use '../settings';
@if (settings.$utilities != false and length(settings.$utilities) > 0) {
$z: 24;
@while $z >= 0 {
.elevation-#{$z} {
@include tools.elevation($z, $important: true);
}
$z: $z - 1;
}
}

View File

@ -0,0 +1,44 @@
@use 'sass:string'
@use 'sass:map'
@use 'sass:meta'
@use '../settings'
@use '../tools'
@use './display'
@use './elevation'
@use './screenreaders'
// Utilities
@each $breakpoint in map.keys(settings.$grid-breakpoints)
// Generate media query if needed
+tools.media-breakpoint-up($breakpoint)
$infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints)
// Loop over each utility property
@each $key, $utility in settings.$utilities
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if string.slice($key, -4) == ':ltr'
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+tools.generate-utility($utility, $infix, 'ltr')
@else if string.slice($key, -4) == ':rtl'
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+tools.generate-utility($utility, $infix, 'rtl')
@else
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+tools.generate-utility($utility, $infix, 'bidi')
// Print utilities
@media print
@each $key, $utility in settings.$utilities
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if string.slice($key, -4) == ':ltr'
@if meta.type-of($utility) == "map" and map.get($utility, print) == true
+tools.generate-utility($utility, "-print", 'ltr')
@else if string.slice($key, -4) == ':rtl'
@if meta.type-of($utility) == "map" and map.get($utility, print) == true
+tools.generate-utility($utility, "-print", 'rtl')
@else
@if meta.type-of($utility) == "map" and map.get($utility, print) == true
+tools.generate-utility($utility, "-print", 'bidi')

View File

@ -0,0 +1,15 @@
// Source: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
@use '../settings'
@if (settings.$utilities != false and length(settings.$utilities) > 0)
.d-sr-only,
.d-sr-only-focusable:not(:focus)
border: 0 !important
clip: rect(0, 0, 0, 0) !important
height: 1px !important
margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 1px !important