mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
10
sass/_index.scss
Normal file
10
sass/_index.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@forward "utilities";
|
||||
@forward "themes";
|
||||
@forward "base";
|
||||
@forward "elements";
|
||||
@forward "form";
|
||||
@forward "components";
|
||||
@forward "grid";
|
||||
@forward "layout";
|
||||
@forward "base/skeleton";
|
||||
@forward "helpers";
|
||||
@@ -1,6 +0,0 @@
|
||||
/* Bulma Base */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "minireset"
|
||||
@import "generic"
|
||||
@import "animations"
|
||||
6
sass/base/_index.scss
Normal file
6
sass/base/_index.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Bulma Base */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "minireset";
|
||||
@forward "generic";
|
||||
@forward "animations";
|
||||
@@ -1,5 +0,0 @@
|
||||
@keyframes spinAround
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
||||
15
sass/base/animations.scss
Normal file
15
sass/base/animations.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$body-background-color: $scheme-main !default
|
||||
$body-size: 16px !default
|
||||
$body-min-width: 300px !default
|
||||
$body-rendering: optimizeLegibility !default
|
||||
$body-family: $family-primary !default
|
||||
$body-overflow-x: hidden !default
|
||||
$body-overflow-y: scroll !default
|
||||
|
||||
$body-color: $text !default
|
||||
$body-font-size: 1em !default
|
||||
$body-weight: $weight-normal !default
|
||||
$body-line-height: 1.5 !default
|
||||
|
||||
$code-family: $family-code !default
|
||||
$code-padding: 0.25em 0.5em 0.25em !default
|
||||
$code-weight: normal !default
|
||||
$code-size: 0.875em !default
|
||||
|
||||
$small-font-size: 0.875em !default
|
||||
|
||||
$hr-background-color: $background !default
|
||||
$hr-height: 2px !default
|
||||
$hr-margin: 1.5rem 0 !default
|
||||
|
||||
$strong-color: $text-strong !default
|
||||
$strong-weight: $weight-bold !default
|
||||
|
||||
$pre-font-size: 0.875em !default
|
||||
$pre-padding: 1.25rem 1.5rem !default
|
||||
$pre-code-font-size: 1em !default
|
||||
|
||||
html
|
||||
background-color: $body-background-color
|
||||
font-size: $body-size
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: $body-min-width
|
||||
overflow-x: $body-overflow-x
|
||||
overflow-y: $body-overflow-y
|
||||
text-rendering: $body-rendering
|
||||
text-size-adjust: 100%
|
||||
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
section
|
||||
display: block
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family: $body-family
|
||||
|
||||
code,
|
||||
pre
|
||||
-moz-osx-font-smoothing: auto
|
||||
-webkit-font-smoothing: auto
|
||||
font-family: $code-family
|
||||
|
||||
body
|
||||
color: $body-color
|
||||
font-size: $body-font-size
|
||||
font-weight: $body-weight
|
||||
line-height: $body-line-height
|
||||
|
||||
// Inline
|
||||
|
||||
a
|
||||
color: $link
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
strong
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link-hover
|
||||
|
||||
code
|
||||
background-color: $code-background
|
||||
color: $code
|
||||
font-size: $code-size
|
||||
font-weight: $code-weight
|
||||
padding: $code-padding
|
||||
|
||||
hr
|
||||
background-color: $hr-background-color
|
||||
border: none
|
||||
display: block
|
||||
height: $hr-height
|
||||
margin: $hr-margin
|
||||
|
||||
img
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: $small-font-size
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
font-weight: inherit
|
||||
|
||||
strong
|
||||
color: $strong-color
|
||||
font-weight: $strong-weight
|
||||
|
||||
// Block
|
||||
|
||||
fieldset
|
||||
border: none
|
||||
|
||||
pre
|
||||
+overflow-touch
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
font-size: $pre-font-size
|
||||
overflow-x: auto
|
||||
padding: $pre-padding
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background-color: transparent
|
||||
color: currentColor
|
||||
font-size: $pre-code-font-size
|
||||
padding: 0
|
||||
|
||||
table
|
||||
td,
|
||||
th
|
||||
vertical-align: top
|
||||
&:not([align])
|
||||
text-align: inherit
|
||||
th
|
||||
color: $text-strong
|
||||
239
sass/base/generic.scss
Normal file
239
sass/base/generic.scss
Normal file
@@ -0,0 +1,239 @@
|
||||
@use "../utilities/css-variables.scss" as cv;
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$body-background-color: cv.getVar("scheme-main") !default;
|
||||
$body-size: 1em !default;
|
||||
$body-min-width: 300px !default;
|
||||
$body-rendering: optimizeLegibility !default;
|
||||
$body-family: cv.getVar("family-primary") !default;
|
||||
$body-overflow-x: hidden !default;
|
||||
$body-overflow-y: scroll !default;
|
||||
|
||||
$body-color: cv.getVar("text") !default;
|
||||
$body-font-size: 1em !default;
|
||||
$body-weight: cv.getVar("weight-normal") !default;
|
||||
$body-line-height: 1.5 !default;
|
||||
|
||||
$code-family: cv.getVar("family-code") !default;
|
||||
$code-padding: 0.25em 0.5em 0.25em !default;
|
||||
$code-weight: normal !default;
|
||||
$code-size: 0.875em !default;
|
||||
|
||||
$small-font-size: 0.875em !default;
|
||||
|
||||
$hr-background-color: cv.getVar("background") !default;
|
||||
$hr-height: 2px !default;
|
||||
$hr-margin: 1.5rem 0 !default;
|
||||
|
||||
$strong-color: cv.getVar("text-strong") !default;
|
||||
$strong-weight: cv.getVar("weight-semibold") !default;
|
||||
|
||||
$pre-font-size: 0.875em !default;
|
||||
$pre-padding: 1.25rem 1.5rem !default;
|
||||
$pre-code-font-size: 1em !default;
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"body-background-color": #{$body-background-color},
|
||||
"body-size": #{$body-size},
|
||||
"body-min-width": #{$body-min-width},
|
||||
"body-rendering": #{$body-rendering},
|
||||
"body-family": #{$body-family},
|
||||
"body-overflow-x": #{$body-overflow-x},
|
||||
"body-overflow-y": #{$body-overflow-y},
|
||||
"body-color": #{$body-color},
|
||||
"body-font-size": #{$body-font-size},
|
||||
"body-weight": #{$body-weight},
|
||||
"body-line-height": #{$body-line-height},
|
||||
"code-family": #{$code-family},
|
||||
"code-padding": #{$code-padding},
|
||||
"code-weight": #{$code-weight},
|
||||
"code-size": #{$code-size},
|
||||
"small-font-size": #{$small-font-size},
|
||||
"hr-background-color": #{$hr-background-color},
|
||||
"hr-height": #{$hr-height},
|
||||
"hr-margin": #{$hr-margin},
|
||||
"strong-color": #{$strong-color},
|
||||
"strong-weight": #{$strong-weight},
|
||||
"pre-font-size": #{$pre-font-size},
|
||||
"pre-padding": #{$pre-padding},
|
||||
"pre-code-font-size": #{$pre-code-font-size},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: cv.getVar("body-background-color");
|
||||
font-size: cv.getVar("body-size");
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-width: cv.getVar("body-min-width");
|
||||
overflow-x: cv.getVar("body-overflow-x");
|
||||
overflow-y: cv.getVar("body-overflow-y");
|
||||
text-rendering: cv.getVar("body-rendering");
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: cv.getVar("body-family");
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: auto;
|
||||
font-family: cv.getVar("code-family");
|
||||
}
|
||||
|
||||
body {
|
||||
color: cv.getVar("body-color");
|
||||
font-size: cv.getVar("body-font-size");
|
||||
font-weight: cv.getVar("body-weight");
|
||||
line-height: cv.getVar("body-line-height");
|
||||
}
|
||||
|
||||
// Inline
|
||||
|
||||
a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
outline-color: hsl(
|
||||
cv.getVar("focus-h"),
|
||||
cv.getVar("focus-s"),
|
||||
cv.getVar("focus-l")
|
||||
);
|
||||
outline-offset: cv.getVar("focus-offset");
|
||||
outline-style: cv.getVar("focus-style");
|
||||
outline-width: cv.getVar("focus-width");
|
||||
|
||||
&:active {
|
||||
outline-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: cv.getVar("link-text");
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, color;
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include mx.reset;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, color;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: cv.getVar("code-background");
|
||||
border-radius: 0.5em;
|
||||
color: cv.getVar("code");
|
||||
font-size: cv.getVar("code-size");
|
||||
font-weight: cv.getVar("code-weight");
|
||||
padding: cv.getVar("code-padding");
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: cv.getVar("hr-background-color");
|
||||
border: none;
|
||||
display: block;
|
||||
height: cv.getVar("hr-height");
|
||||
margin: cv.getVar("hr-margin");
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: cv.getVar("small-font-size");
|
||||
}
|
||||
|
||||
span {
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: cv.getVar("strong-color");
|
||||
font-weight: cv.getVar("strong-weight");
|
||||
}
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Block
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
@include mx.overflow-touch;
|
||||
|
||||
background-color: cv.getVar("pre-background");
|
||||
color: cv.getVar("pre");
|
||||
font-size: cv.getVar("pre-font-size");
|
||||
overflow-x: auto;
|
||||
padding: cv.getVar("pre-padding");
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
color: currentColor;
|
||||
font-size: cv.getVar("pre-code-font-size");
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
|
||||
&:not([align]) {
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: cv.getVar("text-strong");
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
|
||||
@@ -1,79 +0,0 @@
|
||||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
||||
// Blocks
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-size: 100%
|
||||
font-weight: normal
|
||||
|
||||
// List
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
// Form
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
margin: 0
|
||||
|
||||
// Box sizing
|
||||
html
|
||||
box-sizing: border-box
|
||||
|
||||
*
|
||||
&,
|
||||
&::before,
|
||||
&::after
|
||||
box-sizing: inherit
|
||||
|
||||
// Media
|
||||
img,
|
||||
video
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
// Iframe
|
||||
iframe
|
||||
border: 0
|
||||
|
||||
// Table
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
td,
|
||||
th
|
||||
padding: 0
|
||||
&:not([align])
|
||||
text-align: inherit
|
||||
92
sass/base/minireset.scss
Normal file
92
sass/base/minireset.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
||||
// Blocks
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// List
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Form
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Box sizing
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Media
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Iframe
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Table
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
|
||||
&:not([align]) {
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
126
sass/base/skeleton.scss
vendored
Normal file
126
sass/base/skeleton.scss
vendored
Normal file
@@ -0,0 +1,126 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/mixins" as mx;
|
||||
@use "../utilities/extends";
|
||||
|
||||
$skeleton-background: cv.getVar("border") !default;
|
||||
$skeleton-radius: cv.getVar("radius-small") !default;
|
||||
$skeleton-block-min-height: 4.5em !default;
|
||||
$skeleton-lines-gap: 0.75em !default;
|
||||
$skeleton-line-height: 0.75em !default;
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"skeleton-background": #{$skeleton-background},
|
||||
"skeleton-radius": #{$skeleton-radius},
|
||||
"skeleton-block-min-height": #{$skeleton-block-min-height},
|
||||
"skeleton-lines-gap": #{$skeleton-lines-gap},
|
||||
"skeleton-line-height": #{$skeleton-line-height},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
%skeleton-pulsation {
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: pulsate;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
background-color: cv.getVar("skeleton-background");
|
||||
border-radius: cv.getVar("skeleton-radius");
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}is-skeleton {
|
||||
@extend %skeleton-pulsation;
|
||||
color: transparent !important;
|
||||
|
||||
em,
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}checkbox {
|
||||
input {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}delete {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.#{iv.$class-prefix}is-skeleton,
|
||||
textarea.#{iv.$class-prefix}is-skeleton {
|
||||
resize: none;
|
||||
|
||||
@include mx.placeholder {
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}has-skeleton {
|
||||
color: transparent !important;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend %skeleton-pulsation;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
min-width: 10%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}skeleton-block {
|
||||
@extend %block;
|
||||
@extend %skeleton-pulsation;
|
||||
color: transparent !important;
|
||||
min-height: cv.getVar("skeleton-block-min-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}skeleton-lines {
|
||||
color: transparent !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: cv.getVar("skeleton-lines-gap");
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
@extend %skeleton-pulsation;
|
||||
height: cv.getVar("skeleton-line-height");
|
||||
|
||||
&:last-child {
|
||||
min-width: 4em;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}skeleton {
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
#f60 50%,
|
||||
#f60 100%
|
||||
);
|
||||
background-position: top left;
|
||||
background-size: 1.5em;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
/* Bulma Components */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "breadcrumb"
|
||||
@import "card"
|
||||
@import "dropdown"
|
||||
@import "level"
|
||||
@import "media"
|
||||
@import "menu"
|
||||
@import "message"
|
||||
@import "modal"
|
||||
@import "navbar"
|
||||
@import "pagination"
|
||||
@import "panel"
|
||||
@import "tabs"
|
||||
13
sass/components/_index.scss
Normal file
13
sass/components/_index.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
/* Bulma Components */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "breadcrumb";
|
||||
@forward "card";
|
||||
@forward "dropdown";
|
||||
@forward "menu";
|
||||
@forward "message";
|
||||
@forward "modal";
|
||||
@forward "navbar";
|
||||
@forward "pagination";
|
||||
@forward "panel";
|
||||
@forward "tabs";
|
||||
@@ -1,77 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$breadcrumb-item-color: $link !default
|
||||
$breadcrumb-item-hover-color: $link-hover !default
|
||||
$breadcrumb-item-active-color: $text-strong !default
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default
|
||||
$breadcrumb-item-padding-horizontal: 0.75em !default
|
||||
|
||||
$breadcrumb-item-separator-color: $border-hover !default
|
||||
|
||||
.breadcrumb
|
||||
@extend %block
|
||||
@extend %unselectable
|
||||
font-size: $size-normal
|
||||
white-space: nowrap
|
||||
a
|
||||
align-items: center
|
||||
color: $breadcrumb-item-color
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
|
||||
&:hover
|
||||
color: $breadcrumb-item-hover-color
|
||||
li
|
||||
align-items: center
|
||||
display: flex
|
||||
&:first-child a
|
||||
+ltr-property("padding", 0, false)
|
||||
&.is-active
|
||||
a
|
||||
color: $breadcrumb-item-active-color
|
||||
cursor: default
|
||||
pointer-events: none
|
||||
& + li::before
|
||||
color: $breadcrumb-item-separator-color
|
||||
content: "\0002f"
|
||||
ul,
|
||||
ol
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.icon
|
||||
&:first-child
|
||||
+ltr-property("margin", 0.5em)
|
||||
&:last-child
|
||||
+ltr-property("margin", 0.5em, false)
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ol,
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ol,
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Styles
|
||||
&.has-arrow-separator
|
||||
li + li::before
|
||||
content: "\02192"
|
||||
&.has-bullet-separator
|
||||
li + li::before
|
||||
content: "\02022"
|
||||
&.has-dot-separator
|
||||
li + li::before
|
||||
content: "\000b7"
|
||||
&.has-succeeds-separator
|
||||
li + li::before
|
||||
content: "\0227B"
|
||||
139
sass/components/breadcrumb.scss
Normal file
139
sass/components/breadcrumb.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins";
|
||||
|
||||
$breadcrumb-item-color: cv.getVar("link-text") !default;
|
||||
$breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default;
|
||||
$breadcrumb-item-active-color: cv.getVar("link-text-active") !default;
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default;
|
||||
$breadcrumb-item-padding-horizontal: 0.75em !default;
|
||||
|
||||
$breadcrumb-item-separator-color: cv.getVar("border") !default;
|
||||
|
||||
.#{iv.$class-prefix}breadcrumb {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"breadcrumb-item-color": #{$breadcrumb-item-color},
|
||||
"breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color},
|
||||
"breadcrumb-item-active-color": #{$breadcrumb-item-active-color},
|
||||
"breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical},
|
||||
"breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal},
|
||||
"breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}breadcrumb {
|
||||
@extend %block;
|
||||
@extend %unselectable;
|
||||
font-size: cv.getVar("size-normal");
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: cv.getVar("breadcrumb-item-color");
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: cv.getVar("breadcrumb-item-padding-vertical")
|
||||
cv.getVar("breadcrumb-item-padding-horizontal");
|
||||
|
||||
&:hover {
|
||||
color: cv.getVar("breadcrumb-item-hover-color");
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
&:first-child a {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
color: cv.getVar("breadcrumb-item-active-color");
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + li::before {
|
||||
color: cv.getVar("breadcrumb-item-separator-color");
|
||||
content: "/";
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:first-child {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
ol,
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
ol,
|
||||
ul {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
|
||||
// Styles
|
||||
&.#{iv.$class-prefix}has-arrow-separator {
|
||||
li + li::before {
|
||||
content: "→";
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-bullet-separator {
|
||||
li + li::before {
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-dot-separator {
|
||||
li + li::before {
|
||||
content: "·";
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-succeeds-separator {
|
||||
li + li::before {
|
||||
content: "≻";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$card-color: $text !default
|
||||
$card-background-color: $scheme-main !default
|
||||
$card-shadow: $shadow !default
|
||||
$card-radius: 0.25rem !default
|
||||
|
||||
$card-header-background-color: transparent !default
|
||||
$card-header-color: $text-strong !default
|
||||
$card-header-padding: 0.75rem 1rem !default
|
||||
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
|
||||
$card-header-weight: $weight-bold !default
|
||||
|
||||
$card-content-background-color: transparent !default
|
||||
$card-content-padding: 1.5rem !default
|
||||
|
||||
$card-footer-background-color: transparent !default
|
||||
$card-footer-border-top: 1px solid $border-light !default
|
||||
$card-footer-padding: 0.75rem !default
|
||||
|
||||
$card-media-margin: $block-spacing !default
|
||||
|
||||
.card
|
||||
background-color: $card-background-color
|
||||
border-radius: $card-radius
|
||||
box-shadow: $card-shadow
|
||||
color: $card-color
|
||||
max-width: 100%
|
||||
position: relative
|
||||
|
||||
%card-item
|
||||
&:first-child
|
||||
border-top-left-radius: $card-radius
|
||||
border-top-right-radius: $card-radius
|
||||
&:last-child
|
||||
border-bottom-left-radius: $card-radius
|
||||
border-bottom-right-radius: $card-radius
|
||||
|
||||
.card-header
|
||||
@extend %card-item
|
||||
background-color: $card-header-background-color
|
||||
align-items: stretch
|
||||
box-shadow: $card-header-shadow
|
||||
display: flex
|
||||
|
||||
.card-header-title
|
||||
align-items: center
|
||||
color: $card-header-color
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
font-weight: $card-header-weight
|
||||
padding: $card-header-padding
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
|
||||
.card-header-icon
|
||||
+reset
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: $card-header-padding
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
position: relative
|
||||
&:first-child
|
||||
img
|
||||
border-top-left-radius: $card-radius
|
||||
border-top-right-radius: $card-radius
|
||||
&:last-child
|
||||
img
|
||||
border-bottom-left-radius: $card-radius
|
||||
border-bottom-right-radius: $card-radius
|
||||
|
||||
.card-content
|
||||
@extend %card-item
|
||||
background-color: $card-content-background-color
|
||||
padding: $card-content-padding
|
||||
|
||||
.card-footer
|
||||
@extend %card-item
|
||||
background-color: $card-footer-background-color
|
||||
border-top: $card-footer-border-top
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.card-footer-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
padding: $card-footer-padding
|
||||
&:not(:last-child)
|
||||
+ltr-property("border", $card-footer-border-top)
|
||||
|
||||
// Combinations
|
||||
|
||||
.card
|
||||
.media:not(:last-child)
|
||||
margin-bottom: $card-media-margin
|
||||
162
sass/components/card.scss
Normal file
162
sass/components/card.scss
Normal file
@@ -0,0 +1,162 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$card-color: cv.getVar("text") !default;
|
||||
$card-background-color: cv.getVar("scheme-main") !default;
|
||||
$card-shadow: cv.getVar("shadow") !default;
|
||||
$card-radius: 0.75rem !default;
|
||||
|
||||
$card-header-background-color: transparent !default;
|
||||
$card-header-color: cv.getVar("text-strong") !default;
|
||||
$card-header-padding: 0.75rem 1rem !default;
|
||||
$card-header-shadow: 0 0.125em 0.25em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
) !default;
|
||||
$card-header-weight: cv.getVar("weight-bold") !default;
|
||||
|
||||
$card-content-background-color: transparent !default;
|
||||
$card-content-padding: 1.5rem !default;
|
||||
|
||||
$card-footer-background-color: transparent !default;
|
||||
$card-footer-border-top: 1px solid cv.getVar("border-weak") !default;
|
||||
$card-footer-padding: 0.75rem !default;
|
||||
|
||||
$card-media-margin: cv.getVar("block-spacing") !default;
|
||||
|
||||
.#{iv.$class-prefix}card {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"card-color": #{$card-color},
|
||||
"card-background-color": #{$card-background-color},
|
||||
"card-shadow": #{$card-shadow},
|
||||
"card-radius": #{$card-radius},
|
||||
"card-header-background-color": #{$card-header-background-color},
|
||||
"card-header-color": #{$card-header-color},
|
||||
"card-header-padding": #{$card-header-padding},
|
||||
"card-header-shadow": #{$card-header-shadow},
|
||||
"card-header-weight": #{$card-header-weight},
|
||||
"card-content-background-color": #{$card-content-background-color},
|
||||
"card-content-padding": #{$card-content-padding},
|
||||
"card-footer-background-color": #{$card-footer-background-color},
|
||||
"card-footer-border-top": #{$card-footer-border-top},
|
||||
"card-footer-padding": #{$card-footer-padding},
|
||||
"card-media-margin": #{$card-media-margin},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card {
|
||||
@extend %block;
|
||||
background-color: cv.getVar("card-background-color");
|
||||
border-radius: cv.getVar("card-radius");
|
||||
box-shadow: cv.getVar("card-shadow");
|
||||
color: cv.getVar("card-color");
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
%card-item {
|
||||
&:first-child {
|
||||
border-start-start-radius: cv.getVar("card-radius");
|
||||
border-start-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-end-start-radius: cv.getVar("card-radius");
|
||||
border-end-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-header {
|
||||
@extend %card-item;
|
||||
background-color: cv.getVar("card-header-background-color");
|
||||
align-items: stretch;
|
||||
box-shadow: cv.getVar("card-header-shadow");
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-header-title {
|
||||
align-items: center;
|
||||
color: cv.getVar("card-header-color");
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
font-weight: cv.getVar("card-header-weight");
|
||||
padding: cv.getVar("card-header-padding");
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-header-icon {
|
||||
@include mx.reset;
|
||||
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: cv.getVar("card-header-padding");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
img {
|
||||
border-start-start-radius: cv.getVar("card-radius");
|
||||
border-start-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
img {
|
||||
border-end-start-radius: cv.getVar("card-radius");
|
||||
border-end-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-content {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: cv.getVar("card-content-background-color");
|
||||
padding: cv.getVar("card-content-padding");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-footer {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: cv.getVar("card-footer-background-color");
|
||||
border-top: cv.getVar("card-footer-border-top");
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-footer-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
padding: cv.getVar("card-footer-padding");
|
||||
|
||||
&:not(:last-child) {
|
||||
border-inline-end: cv.getVar("card-footer-border-top");
|
||||
}
|
||||
}
|
||||
|
||||
// Combinations
|
||||
|
||||
.#{iv.$class-prefix}card {
|
||||
.#{iv.$class-prefix}media:not(:last-child) {
|
||||
margin-bottom: cv.getVar("card-media-margin");
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$dropdown-menu-min-width: 12rem !default
|
||||
|
||||
$dropdown-content-background-color: $scheme-main !default
|
||||
$dropdown-content-arrow: $link !default
|
||||
$dropdown-content-offset: 4px !default
|
||||
$dropdown-content-padding-bottom: 0.5rem !default
|
||||
$dropdown-content-padding-top: 0.5rem !default
|
||||
$dropdown-content-radius: $radius !default
|
||||
$dropdown-content-shadow: $shadow !default
|
||||
$dropdown-content-z: 20 !default
|
||||
|
||||
$dropdown-item-color: $text !default
|
||||
$dropdown-item-hover-color: $scheme-invert !default
|
||||
$dropdown-item-hover-background-color: $background !default
|
||||
$dropdown-item-active-color: $link-invert !default
|
||||
$dropdown-item-active-background-color: $link !default
|
||||
|
||||
$dropdown-divider-background-color: $border-light !default
|
||||
|
||||
.dropdown
|
||||
display: inline-flex
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&.is-active,
|
||||
&.is-hoverable:hover
|
||||
.dropdown-menu
|
||||
display: block
|
||||
&.is-right
|
||||
.dropdown-menu
|
||||
left: auto
|
||||
right: 0
|
||||
&.is-up
|
||||
.dropdown-menu
|
||||
bottom: 100%
|
||||
padding-bottom: $dropdown-content-offset
|
||||
padding-top: initial
|
||||
top: auto
|
||||
|
||||
.dropdown-menu
|
||||
display: none
|
||||
+ltr-position(0, false)
|
||||
min-width: $dropdown-menu-min-width
|
||||
padding-top: $dropdown-content-offset
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $dropdown-content-z
|
||||
|
||||
.dropdown-content
|
||||
background-color: $dropdown-content-background-color
|
||||
border-radius: $dropdown-content-radius
|
||||
box-shadow: $dropdown-content-shadow
|
||||
padding-bottom: $dropdown-content-padding-bottom
|
||||
padding-top: $dropdown-content-padding-top
|
||||
|
||||
.dropdown-item
|
||||
color: $dropdown-item-color
|
||||
display: block
|
||||
font-size: 0.875rem
|
||||
line-height: 1.5
|
||||
padding: 0.375rem 1rem
|
||||
position: relative
|
||||
|
||||
a.dropdown-item,
|
||||
button.dropdown-item
|
||||
+ltr-property("padding", 3rem)
|
||||
text-align: inherit
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
&:hover
|
||||
background-color: $dropdown-item-hover-background-color
|
||||
color: $dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $dropdown-item-active-background-color
|
||||
color: $dropdown-item-active-color
|
||||
|
||||
.dropdown-divider
|
||||
background-color: $dropdown-divider-background-color
|
||||
border: none
|
||||
display: block
|
||||
height: 1px
|
||||
margin: 0.5rem 0
|
||||
188
sass/components/dropdown.scss
Normal file
188
sass/components/dropdown.scss
Normal file
@@ -0,0 +1,188 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$dropdown-menu-min-width: 12rem !default;
|
||||
|
||||
$dropdown-content-background-color: cv.getVar("scheme-main") !default;
|
||||
$dropdown-content-offset: 0.25rem !default;
|
||||
$dropdown-content-padding-bottom: 0.5rem !default;
|
||||
$dropdown-content-padding-top: 0.5rem !default;
|
||||
$dropdown-content-radius: cv.getVar("radius") !default;
|
||||
$dropdown-content-shadow: cv.getVar("shadow") !default;
|
||||
$dropdown-content-z: 20 !default;
|
||||
|
||||
$dropdown-item-h: cv.getVar("scheme-h");
|
||||
$dropdown-item-s: cv.getVar("scheme-s");
|
||||
$dropdown-item-l: cv.getVar("scheme-main-l");
|
||||
$dropdown-item-background-l: cv.getVar("scheme-main-l");
|
||||
$dropdown-item-background-l-delta: 0%;
|
||||
$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$dropdown-item-active-background-l-delta: cv.getVar(
|
||||
"active-background-l-delta"
|
||||
);
|
||||
$dropdown-item-color-l: cv.getVar("text-strong-l");
|
||||
$dropdown-item-selected-h: cv.getVar("link-h");
|
||||
$dropdown-item-selected-s: cv.getVar("link-s");
|
||||
$dropdown-item-selected-l: cv.getVar("link-l");
|
||||
$dropdown-item-selected-background-l: cv.getVar("link-l");
|
||||
$dropdown-item-selected-color-l: cv.getVar("link-invert-l");
|
||||
|
||||
$dropdown-divider-background-color: cv.getVar("border-weak") !default;
|
||||
|
||||
.#{iv.$class-prefix}dropdown {
|
||||
// prettier-ignore-start
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-menu-min-width": #{$dropdown-menu-min-width},
|
||||
"dropdown-content-background-color": #{$dropdown-content-background-color},
|
||||
"dropdown-content-offset": #{$dropdown-content-offset},
|
||||
"dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom},
|
||||
"dropdown-content-padding-top": #{$dropdown-content-padding-top},
|
||||
"dropdown-content-radius": #{$dropdown-content-radius},
|
||||
"dropdown-content-shadow": #{$dropdown-content-shadow},
|
||||
"dropdown-content-z": #{$dropdown-content-z},
|
||||
"dropdown-item-h": #{$dropdown-item-h},
|
||||
"dropdown-item-s": #{$dropdown-item-s},
|
||||
"dropdown-item-l": #{$dropdown-item-l},
|
||||
"dropdown-item-background-l": #{$dropdown-item-background-l},
|
||||
"dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
|
||||
"dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
|
||||
"dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
|
||||
"dropdown-item-color-l": #{$dropdown-item-color-l},
|
||||
"dropdown-item-selected-h": #{$dropdown-item-selected-h},
|
||||
"dropdown-item-selected-s": #{$dropdown-item-selected-s},
|
||||
"dropdown-item-selected-l": #{$dropdown-item-selected-l},
|
||||
"dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
|
||||
"dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
|
||||
"dropdown-divider-background-color": #{$dropdown-divider-background-color},
|
||||
)
|
||||
);
|
||||
// prettier-ignore-end
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}dropdown {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-hoverable:hover {
|
||||
.#{iv.$class-prefix}dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
.#{iv.$class-prefix}dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-up {
|
||||
.#{iv.$class-prefix}dropdown-menu {
|
||||
bottom: 100%;
|
||||
padding-bottom: cv.getVar("dropdown-content-offset");
|
||||
padding-top: initial;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}dropdown-menu {
|
||||
display: none;
|
||||
@include mx.ltr-position(0, false);
|
||||
min-width: cv.getVar("dropdown-menu-min-width");
|
||||
padding-top: cv.getVar("dropdown-content-offset");
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: cv.getVar("dropdown-content-z");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}dropdown-content {
|
||||
background-color: cv.getVar("dropdown-content-background-color");
|
||||
border-radius: cv.getVar("dropdown-content-radius");
|
||||
box-shadow: cv.getVar("dropdown-content-shadow");
|
||||
padding-bottom: cv.getVar("dropdown-content-padding-bottom");
|
||||
padding-top: cv.getVar("dropdown-content-padding-top");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}dropdown-item {
|
||||
color: hsl(
|
||||
#{cv.getVar("dropdown-item-h")},
|
||||
#{cv.getVar("dropdown-item-s")},
|
||||
#{cv.getVar("dropdown-item-color-l")}
|
||||
);
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
padding: 0.375rem 1rem;
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}dropdown-item,
|
||||
button.#{iv.$class-prefix}dropdown-item {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("dropdown-item-h")},
|
||||
#{cv.getVar("dropdown-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
|
||||
"dropdown-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
padding-inline-end: 3rem;
|
||||
text-align: inherit;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-background-l-delta": #{cv.getVar(
|
||||
"dropdown-item-hover-background-l-delta"
|
||||
)},
|
||||
"dropdown-item-border-l-delta": #{cv.getVar(
|
||||
"dropdown-item-hover-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-background-l-delta": #{cv.getVar(
|
||||
"dropdown-item-active-background-l-delta"
|
||||
)},
|
||||
"dropdown-item-border-l-delta": #{cv.getVar(
|
||||
"dropdown-item-active-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
|
||||
"dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
|
||||
"dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
|
||||
"dropdown-item-background-l": #{cv.getVar(
|
||||
"dropdown-item-selected-background-l"
|
||||
)},
|
||||
"dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}dropdown-divider {
|
||||
background-color: cv.getVar("dropdown-divider-background-color");
|
||||
border: none;
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$level-item-spacing: ($block-spacing * 0.5) !default
|
||||
|
||||
.level
|
||||
@extend %block
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
code
|
||||
border-radius: $radius
|
||||
img
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
// Modifiers
|
||||
&.is-mobile
|
||||
display: flex
|
||||
.level-left,
|
||||
.level-right
|
||||
display: flex
|
||||
.level-left + .level-right
|
||||
margin-top: 0
|
||||
.level-item
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
+ltr-property("margin", $level-item-spacing)
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: flex
|
||||
& > .level-item
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
|
||||
.level-item
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
.title,
|
||||
.subtitle
|
||||
margin-bottom: 0
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: $level-item-spacing
|
||||
|
||||
.level-left,
|
||||
.level-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
.level-item
|
||||
// Modifiers
|
||||
&.is-flexible
|
||||
flex-grow: 1
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", $level-item-spacing)
|
||||
|
||||
.level-left
|
||||
align-items: center
|
||||
justify-content: flex-start
|
||||
// Responsiveness
|
||||
+mobile
|
||||
& + .level-right
|
||||
margin-top: 1.5rem
|
||||
+tablet
|
||||
display: flex
|
||||
|
||||
.level-right
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: flex
|
||||
@@ -1,59 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$media-border-color: bulmaRgba($border, 0.5) !default
|
||||
$media-border-size: 1px !default
|
||||
$media-spacing: 1rem !default
|
||||
$media-spacing-large: 1.5rem !default
|
||||
$media-content-spacing: 0.75rem !default
|
||||
$media-level-1-spacing: 0.75rem !default
|
||||
$media-level-1-content-spacing: 0.5rem !default
|
||||
$media-level-2-spacing: 0.5rem !default
|
||||
|
||||
.media
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
text-align: inherit
|
||||
.content:not(:last-child)
|
||||
margin-bottom: $media-content-spacing
|
||||
.media
|
||||
border-top: $media-border-size solid $media-border-color
|
||||
display: flex
|
||||
padding-top: $media-level-1-spacing
|
||||
.content:not(:last-child),
|
||||
.control:not(:last-child)
|
||||
margin-bottom: $media-level-1-content-spacing
|
||||
.media
|
||||
padding-top: $media-level-2-spacing
|
||||
& + .media
|
||||
margin-top: $media-level-2-spacing
|
||||
& + .media
|
||||
border-top: $media-border-size solid $media-border-color
|
||||
margin-top: $media-spacing
|
||||
padding-top: $media-spacing
|
||||
// Sizes
|
||||
&.is-large
|
||||
& + .media
|
||||
margin-top: $media-spacing-large
|
||||
padding-top: $media-spacing-large
|
||||
|
||||
.media-left,
|
||||
.media-right
|
||||
flex-basis: auto
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
||||
.media-left
|
||||
+ltr-property("margin", $media-spacing)
|
||||
|
||||
.media-right
|
||||
+ltr-property("margin", $media-spacing, false)
|
||||
|
||||
.media-content
|
||||
flex-basis: auto
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
text-align: inherit
|
||||
|
||||
+mobile
|
||||
.media-content
|
||||
overflow-x: auto
|
||||
@@ -1,59 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$menu-item-color: $text !default
|
||||
$menu-item-radius: $radius-small !default
|
||||
$menu-item-hover-color: $text-strong !default
|
||||
$menu-item-hover-background-color: $background !default
|
||||
$menu-item-active-color: $link-invert !default
|
||||
$menu-item-active-background-color: $link !default
|
||||
|
||||
$menu-list-border-left: 1px solid $border !default
|
||||
$menu-list-line-height: 1.25 !default
|
||||
$menu-list-link-padding: 0.5em 0.75em !default
|
||||
$menu-nested-list-margin: 0.75em !default
|
||||
$menu-nested-list-padding-left: 0.75em !default
|
||||
|
||||
$menu-label-color: $text-light !default
|
||||
$menu-label-font-size: 0.75em !default
|
||||
$menu-label-letter-spacing: 0.1em !default
|
||||
$menu-label-spacing: 1em !default
|
||||
|
||||
.menu
|
||||
font-size: $size-normal
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
|
||||
.menu-list
|
||||
line-height: $menu-list-line-height
|
||||
a
|
||||
border-radius: $menu-item-radius
|
||||
color: $menu-item-color
|
||||
display: block
|
||||
padding: $menu-list-link-padding
|
||||
&:hover
|
||||
background-color: $menu-item-hover-background-color
|
||||
color: $menu-item-hover-color
|
||||
// Modifiers
|
||||
&.is-active
|
||||
background-color: $menu-item-active-background-color
|
||||
color: $menu-item-active-color
|
||||
li
|
||||
ul
|
||||
+ltr-property("border", $menu-list-border-left, false)
|
||||
margin: $menu-nested-list-margin
|
||||
+ltr-property("padding", $menu-nested-list-padding-left, false)
|
||||
|
||||
.menu-label
|
||||
color: $menu-label-color
|
||||
font-size: $menu-label-font-size
|
||||
letter-spacing: $menu-label-letter-spacing
|
||||
text-transform: uppercase
|
||||
&:not(:first-child)
|
||||
margin-top: $menu-label-spacing
|
||||
&:not(:last-child)
|
||||
margin-bottom: $menu-label-spacing
|
||||
165
sass/components/menu.scss
Normal file
165
sass/components/menu.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$menu-item-h: cv.getVar("scheme-h");
|
||||
$menu-item-s: cv.getVar("scheme-s");
|
||||
$menu-item-l: cv.getVar("scheme-main-l");
|
||||
$menu-item-background-l: cv.getVar("scheme-main-l");
|
||||
$menu-item-background-l-delta: 0%;
|
||||
$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
|
||||
$menu-item-color-l: cv.getVar("text-l");
|
||||
$menu-item-radius: cv.getVar("radius-small") !default;
|
||||
$menu-item-selected-h: cv.getVar("link-h");
|
||||
$menu-item-selected-s: cv.getVar("link-s");
|
||||
$menu-item-selected-l: cv.getVar("link-l");
|
||||
$menu-item-selected-background-l: cv.getVar("link-l");
|
||||
$menu-item-selected-color-l: cv.getVar("link-invert-l");
|
||||
|
||||
$menu-list-border-left: 1px solid cv.getVar("border") !default;
|
||||
$menu-list-line-height: 1.25 !default;
|
||||
$menu-list-link-padding: 0.5em 0.75em !default;
|
||||
$menu-nested-list-margin: 0.75em !default;
|
||||
$menu-nested-list-padding-left: 0.75em !default;
|
||||
|
||||
$menu-label-color: cv.getVar("text-weak") !default;
|
||||
$menu-label-font-size: 0.75em !default;
|
||||
$menu-label-letter-spacing: 0.1em !default;
|
||||
$menu-label-spacing: 1em !default;
|
||||
|
||||
.#{iv.$class-prefix}menu {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-h": #{$menu-item-h},
|
||||
"menu-item-s": #{$menu-item-s},
|
||||
"menu-item-l": #{$menu-item-l},
|
||||
"menu-item-background-l": #{$menu-item-background-l},
|
||||
"menu-item-background-l-delta": #{$menu-item-background-l-delta},
|
||||
"menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
|
||||
"menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
|
||||
"menu-item-color-l": #{$menu-item-color-l},
|
||||
"menu-item-radius": #{$menu-item-radius},
|
||||
"menu-item-selected-h": #{$menu-item-selected-h},
|
||||
"menu-item-selected-s": #{$menu-item-selected-s},
|
||||
"menu-item-selected-l": #{$menu-item-selected-l},
|
||||
"menu-item-selected-background-l": #{$menu-item-selected-background-l},
|
||||
"menu-item-selected-color-l": #{$menu-item-selected-color-l},
|
||||
"menu-list-border-left": #{$menu-list-border-left},
|
||||
"menu-list-line-height": #{$menu-list-line-height},
|
||||
"menu-list-link-padding": #{$menu-list-link-padding},
|
||||
"menu-nested-list-margin": #{$menu-nested-list-margin},
|
||||
"menu-nested-list-padding-left": #{$menu-nested-list-padding-left},
|
||||
"menu-label-color": #{$menu-label-color},
|
||||
"menu-label-font-size": #{$menu-label-font-size},
|
||||
"menu-label-letter-spacing": #{$menu-label-letter-spacing},
|
||||
"menu-label-spacing": #{$menu-label-spacing},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}menu {
|
||||
font-size: cv.getVar("size-normal");
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}menu-list {
|
||||
line-height: cv.getVar("menu-list-line-height");
|
||||
|
||||
a,
|
||||
button,
|
||||
.#{iv.$class-prefix}menu-item {
|
||||
@extend %reset;
|
||||
background-color: hsl(
|
||||
#{cv.getVar("menu-item-h")},
|
||||
#{cv.getVar("menu-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("menu-item-background-l")} + #{cv.getVar(
|
||||
"menu-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-radius: cv.getVar("menu-item-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("menu-item-h")},
|
||||
#{cv.getVar("menu-item-s")},
|
||||
#{cv.getVar("menu-item-color-l")}
|
||||
);
|
||||
display: block;
|
||||
padding: cv.getVar("menu-list-link-padding");
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-background-l-delta": #{cv.getVar(
|
||||
"menu-item-hover-background-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-background-l-delta": #{cv.getVar(
|
||||
"menu-item-active-background-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-h": #{cv.getVar("menu-item-selected-h")},
|
||||
"menu-item-s": #{cv.getVar("menu-item-selected-s")},
|
||||
"menu-item-l": #{cv.getVar("menu-item-selected-l")},
|
||||
"menu-item-background-l": #{cv.getVar(
|
||||
"menu-item-selected-background-l"
|
||||
)},
|
||||
"menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
ul {
|
||||
border-inline-start: cv.getVar("menu-list-border-left");
|
||||
margin: cv.getVar("menu-nested-list-margin");
|
||||
padding-inline-start: cv.getVar("menu-nested-list-padding-left");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}menu-label {
|
||||
color: cv.getVar("menu-label-color");
|
||||
font-size: cv.getVar("menu-label-font-size");
|
||||
letter-spacing: cv.getVar("menu-label-letter-spacing");
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: cv.getVar("menu-label-spacing");
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: cv.getVar("menu-label-spacing");
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$message-background-color: $background !default
|
||||
$message-radius: $radius !default
|
||||
|
||||
$message-header-background-color: $text !default
|
||||
$message-header-color: $text-invert !default
|
||||
$message-header-weight: $weight-bold !default
|
||||
$message-header-padding: 0.75em 1em !default
|
||||
$message-header-radius: $radius !default
|
||||
|
||||
$message-body-border-color: $border !default
|
||||
$message-body-border-width: 0 0 0 4px !default
|
||||
$message-body-color: $text !default
|
||||
$message-body-padding: 1.25em 1.5em !default
|
||||
$message-body-radius: $radius !default
|
||||
|
||||
$message-body-pre-background-color: $scheme-main !default
|
||||
$message-body-pre-code-background-color: transparent !default
|
||||
|
||||
$message-header-body-border-width: 0 !default
|
||||
$message-colors: $colors !default
|
||||
|
||||
.message
|
||||
@extend %block
|
||||
background-color: $message-background-color
|
||||
border-radius: $message-radius
|
||||
font-size: $size-normal
|
||||
strong
|
||||
color: currentColor
|
||||
a:not(.button):not(.tag):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Colors
|
||||
@each $name, $components in $message-colors
|
||||
$color: nth($components, 1)
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
|
||||
@if length($components) >= 3
|
||||
$color-light: nth($components, 3)
|
||||
@if length($components) >= 4
|
||||
$color-dark: nth($components, 4)
|
||||
@else
|
||||
$color-luminance: colorLuminance($color)
|
||||
$darken-percentage: $color-luminance * 70%
|
||||
$desaturate-percentage: $color-luminance * 30%
|
||||
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
||||
@else
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
$color-light: lighten($color, $color-lightning)
|
||||
|
||||
&.is-#{$name}
|
||||
background-color: $color-light
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: $color-dark
|
||||
|
||||
.message-header
|
||||
align-items: center
|
||||
background-color: $message-header-background-color
|
||||
border-radius: $message-header-radius $message-header-radius 0 0
|
||||
color: $message-header-color
|
||||
display: flex
|
||||
font-weight: $message-header-weight
|
||||
justify-content: space-between
|
||||
line-height: 1.25
|
||||
padding: $message-header-padding
|
||||
position: relative
|
||||
.delete
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
+ltr-property("margin", 0.75em, false)
|
||||
& + .message-body
|
||||
border-width: $message-header-body-border-width
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.message-body
|
||||
border-color: $message-body-border-color
|
||||
border-radius: $message-body-radius
|
||||
border-style: solid
|
||||
border-width: $message-body-border-width
|
||||
color: $message-body-color
|
||||
padding: $message-body-padding
|
||||
code,
|
||||
pre
|
||||
background-color: $message-body-pre-background-color
|
||||
pre code
|
||||
background-color: $message-body-pre-code-background-color
|
||||
183
sass/components/message.scss
Normal file
183
sass/components/message.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$message-h: cv.getVar("scheme-h");
|
||||
$message-s: cv.getVar("scheme-s");
|
||||
$message-background-l: cv.getVar("background-l");
|
||||
$message-border-l: cv.getVar("border-l");
|
||||
$message-border-l-delta: -20% !default;
|
||||
$message-border-style: solid;
|
||||
$message-border-width: 0.25em;
|
||||
$message-color-l: cv.getVar("text-l");
|
||||
$message-header-background-l: cv.getVar("dark-l");
|
||||
$message-header-color-l: cv.getVar("text-dark-invert-l");
|
||||
$message-radius: cv.getVar("radius") !default;
|
||||
|
||||
$message-header-weight: cv.getVar("weight-semibold") !default;
|
||||
$message-header-padding: 1em 1.25em !default;
|
||||
$message-header-radius: cv.getVar("radius") !default;
|
||||
|
||||
$message-body-border-width: 0 0 0 4px !default;
|
||||
$message-body-color: cv.getVar("text") !default;
|
||||
$message-body-padding: 1.25em 1.5em !default;
|
||||
$message-body-radius: cv.getVar("radius-small") !default;
|
||||
|
||||
$message-body-pre-code-background-color: transparent !default;
|
||||
|
||||
$message-header-body-border-width: 0 !default;
|
||||
$message-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}message {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"message-border-l-delta": #{$message-border-l-delta},
|
||||
"message-radius": #{$message-radius},
|
||||
"message-header-weight": #{$message-header-weight},
|
||||
"message-header-padding": #{$message-header-padding},
|
||||
"message-header-radius": #{$message-header-radius},
|
||||
"message-body-border-width": #{$message-body-border-width},
|
||||
"message-body-color": #{$message-body-color},
|
||||
"message-body-padding": #{$message-body-padding},
|
||||
"message-body-radius": #{$message-body-radius},
|
||||
"message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
|
||||
"message-header-body-border-width": #{$message-header-body-border-width},
|
||||
"message-h": #{$message-h},
|
||||
"message-s": #{$message-s},
|
||||
"message-background-l": #{$message-background-l},
|
||||
"message-border-l": #{$message-border-l},
|
||||
"message-border-style": #{$message-border-style},
|
||||
"message-border-width": #{$message-border-width},
|
||||
"message-color-l": #{$message-color-l},
|
||||
"message-header-background-l": #{$message-header-background-l},
|
||||
"message-header-color-l": #{$message-header-color-l},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}message {
|
||||
@extend %block;
|
||||
border-radius: cv.getVar("message-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-color-l")}
|
||||
);
|
||||
font-size: cv.getVar("size-normal");
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not(
|
||||
.#{iv.$class-prefix}dropdown-item
|
||||
) {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $components in $message-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"message-h": #{cv.getVar($name, "", "-h")},
|
||||
"message-s": #{cv.getVar($name, "", "-s")},
|
||||
"message-border-l":
|
||||
calc(
|
||||
#{cv.getVar($name, "", "-l")} + #{cv.getVar(
|
||||
"message-border-l-delta"
|
||||
)}
|
||||
),
|
||||
"message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
|
||||
"message-header-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}message-header {
|
||||
align-items: center;
|
||||
background-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-background-l")}
|
||||
);
|
||||
border-start-start-radius: cv.getVar("message-header-radius");
|
||||
border-start-end-radius: cv.getVar("message-header-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-color-l")}
|
||||
);
|
||||
display: flex;
|
||||
font-weight: cv.getVar("message-header-weight");
|
||||
justify-content: space-between;
|
||||
line-height: 1.25;
|
||||
padding: cv.getVar("message-header-padding");
|
||||
position: relative;
|
||||
|
||||
.#{iv.$class-prefix}delete {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: 0.75em;
|
||||
}
|
||||
|
||||
& + .#{iv.$class-prefix}message-body {
|
||||
border-width: cv.getVar("message-header-body-border-width");
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}message-body {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-background-l")}
|
||||
);
|
||||
border-inline-start-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-border-l")}
|
||||
);
|
||||
border-inline-start-style: #{cv.getVar("message-border-style")};
|
||||
border-inline-start-width: #{cv.getVar("message-border-width")};
|
||||
border-radius: cv.getVar("message-body-radius");
|
||||
padding: cv.getVar("message-body-padding");
|
||||
|
||||
code,
|
||||
pre {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-color-l")}
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-background-l")}
|
||||
);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: cv.getVar("message-body-pre-code-background-color");
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$modal-z: 40 !default
|
||||
|
||||
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
|
||||
|
||||
$modal-content-width: 640px !default
|
||||
$modal-content-margin-mobile: 20px !default
|
||||
$modal-content-spacing-mobile: 160px !default
|
||||
$modal-content-spacing-tablet: 40px !default
|
||||
|
||||
$modal-close-dimensions: 40px !default
|
||||
$modal-close-right: 20px !default
|
||||
$modal-close-top: 20px !default
|
||||
|
||||
$modal-card-spacing: 40px !default
|
||||
|
||||
$modal-card-head-background-color: $background !default
|
||||
$modal-card-head-border-bottom: 1px solid $border !default
|
||||
$modal-card-head-padding: 20px !default
|
||||
$modal-card-head-radius: $radius-large !default
|
||||
|
||||
$modal-card-title-color: $text-strong !default
|
||||
$modal-card-title-line-height: 1 !default
|
||||
$modal-card-title-size: $size-4 !default
|
||||
|
||||
$modal-card-foot-radius: $radius-large !default
|
||||
$modal-card-foot-border-top: 1px solid $border !default
|
||||
|
||||
$modal-card-body-background-color: $scheme-main !default
|
||||
$modal-card-body-padding: 20px !default
|
||||
|
||||
$modal-breakpoint: $tablet !default
|
||||
|
||||
.modal
|
||||
@extend %overlay
|
||||
align-items: center
|
||||
display: none
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
position: fixed
|
||||
z-index: $modal-z
|
||||
// Modifiers
|
||||
&.is-active
|
||||
display: flex
|
||||
|
||||
.modal-background
|
||||
@extend %overlay
|
||||
background-color: $modal-background-background-color
|
||||
|
||||
.modal-content,
|
||||
.modal-card
|
||||
margin: 0 $modal-content-margin-mobile
|
||||
max-height: calc(100vh - #{$modal-content-spacing-mobile})
|
||||
overflow: auto
|
||||
position: relative
|
||||
width: 100%
|
||||
// Responsiveness
|
||||
+from($modal-breakpoint)
|
||||
margin: 0 auto
|
||||
max-height: calc(100vh - #{$modal-content-spacing-tablet})
|
||||
width: $modal-content-width
|
||||
|
||||
.modal-close
|
||||
@extend %delete
|
||||
background: none
|
||||
height: $modal-close-dimensions
|
||||
position: fixed
|
||||
+ltr-position($modal-close-right)
|
||||
top: $modal-close-top
|
||||
width: $modal-close-dimensions
|
||||
|
||||
.modal-card
|
||||
display: flex
|
||||
flex-direction: column
|
||||
max-height: calc(100vh - #{$modal-card-spacing})
|
||||
overflow: hidden
|
||||
-ms-overflow-y: visible
|
||||
|
||||
.modal-card-head,
|
||||
.modal-card-foot
|
||||
align-items: center
|
||||
background-color: $modal-card-head-background-color
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
padding: $modal-card-head-padding
|
||||
position: relative
|
||||
|
||||
.modal-card-head
|
||||
border-bottom: $modal-card-head-border-bottom
|
||||
border-top-left-radius: $modal-card-head-radius
|
||||
border-top-right-radius: $modal-card-head-radius
|
||||
|
||||
.modal-card-title
|
||||
color: $modal-card-title-color
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
font-size: $modal-card-title-size
|
||||
line-height: $modal-card-title-line-height
|
||||
|
||||
.modal-card-foot
|
||||
border-bottom-left-radius: $modal-card-foot-radius
|
||||
border-bottom-right-radius: $modal-card-foot-radius
|
||||
border-top: $modal-card-foot-border-top
|
||||
.button
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", 0.5em)
|
||||
|
||||
.modal-card-body
|
||||
+overflow-touch
|
||||
background-color: $modal-card-body-background-color
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
overflow: auto
|
||||
padding: $modal-card-body-padding
|
||||
164
sass/components/modal.scss
Normal file
164
sass/components/modal.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$modal-z: 40 !default;
|
||||
|
||||
$modal-background-background-color: hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.86
|
||||
) !default;
|
||||
|
||||
$modal-content-width: 40rem !default;
|
||||
$modal-content-margin-mobile: 1.25rem !default;
|
||||
$modal-content-spacing-mobile: 10rem !default;
|
||||
$modal-content-spacing-tablet: 2.5rem !default;
|
||||
|
||||
$modal-close-dimensions: 2.5rem !default;
|
||||
$modal-close-right: 1.25rem !default;
|
||||
$modal-close-top: 1.25rem !default;
|
||||
|
||||
$modal-card-spacing: 2.5rem !default;
|
||||
|
||||
$modal-card-head-background-color: cv.getVar("scheme-main") !default;
|
||||
$modal-card-head-padding: 2rem !default;
|
||||
$modal-card-head-radius: cv.getVar("radius-large") !default;
|
||||
|
||||
$modal-card-title-color: cv.getVar("text-strong") !default;
|
||||
$modal-card-title-line-height: 1 !default;
|
||||
$modal-card-title-size: cv.getVar("size-4") !default;
|
||||
|
||||
$modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default;
|
||||
$modal-card-foot-radius: cv.getVar("radius-large") !default;
|
||||
|
||||
$modal-card-body-background-color: cv.getVar("scheme-main") !default;
|
||||
$modal-card-body-padding: 2rem !default;
|
||||
|
||||
$modal-breakpoint: iv.$tablet !default;
|
||||
|
||||
.#{iv.$class-prefix}modal {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"modal-z": #{$modal-z},
|
||||
"modal-background-background-color": #{$modal-background-background-color},
|
||||
"modal-content-width": #{$modal-content-width},
|
||||
"modal-content-margin-mobile": #{$modal-content-margin-mobile},
|
||||
"modal-content-spacing-mobile": #{$modal-content-spacing-mobile},
|
||||
"modal-content-spacing-tablet": #{$modal-content-spacing-tablet},
|
||||
"modal-close-dimensions": #{$modal-close-dimensions},
|
||||
"modal-close-right": #{$modal-close-right},
|
||||
"modal-close-top": #{$modal-close-top},
|
||||
"modal-card-spacing": #{$modal-card-spacing},
|
||||
"modal-card-head-background-color": #{$modal-card-head-background-color},
|
||||
"modal-card-head-padding": #{$modal-card-head-padding},
|
||||
"modal-card-head-radius": #{$modal-card-head-radius},
|
||||
"modal-card-title-color": #{$modal-card-title-color},
|
||||
"modal-card-title-line-height": #{$modal-card-title-line-height},
|
||||
"modal-card-title-size": #{$modal-card-title-size},
|
||||
"modal-card-foot-background-color": #{$modal-card-foot-background-color},
|
||||
"modal-card-foot-radius": #{$modal-card-foot-radius},
|
||||
"modal-card-body-background-color": #{$modal-card-body-background-color},
|
||||
"modal-card-body-padding": #{$modal-card-body-padding},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal {
|
||||
@extend %overlay;
|
||||
|
||||
align-items: center;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: cv.getVar("modal-z");
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-background {
|
||||
@extend %overlay;
|
||||
background-color: cv.getVar("modal-background-background-color");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-content,
|
||||
.#{iv.$class-prefix}modal-card {
|
||||
margin: 0 cv.getVar("modal-content-margin-mobile");
|
||||
max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")});
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
// Responsiveness
|
||||
@include mx.from($modal-breakpoint) {
|
||||
margin: 0 auto;
|
||||
max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")});
|
||||
width: cv.getVar("modal-content-width");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-close {
|
||||
@extend %delete;
|
||||
background: none;
|
||||
height: cv.getVar("modal-close-dimensions");
|
||||
inset-inline-end: cv.getVar("modal-close-right");
|
||||
position: fixed;
|
||||
top: cv.getVar("modal-close-top");
|
||||
width: cv.getVar("modal-close-dimensions");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - #{cv.getVar("modal-card-spacing")});
|
||||
overflow: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-head,
|
||||
.#{iv.$class-prefix}modal-card-foot {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
padding: cv.getVar("modal-card-head-padding");
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-head {
|
||||
background-color: cv.getVar("modal-card-head-background-color");
|
||||
border-start-start-radius: cv.getVar("modal-card-head-radius");
|
||||
border-start-end-radius: cv.getVar("modal-card-head-radius");
|
||||
box-shadow: cv.getVar("shadow");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-title {
|
||||
color: cv.getVar("modal-card-title-color");
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
font-size: cv.getVar("modal-card-title-size");
|
||||
line-height: cv.getVar("modal-card-title-line-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-foot {
|
||||
background-color: cv.getVar("modal-card-foot-background-color");
|
||||
border-end-start-radius: cv.getVar("modal-card-foot-radius");
|
||||
border-end-end-radius: cv.getVar("modal-card-foot-radius");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-body {
|
||||
@include mx.overflow-touch;
|
||||
background-color: cv.getVar("modal-card-body-background-color");
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: auto;
|
||||
padding: cv.getVar("modal-card-body-padding");
|
||||
}
|
||||
@@ -1,446 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$navbar-background-color: $scheme-main !default
|
||||
$navbar-box-shadow-size: 0 2px 0 0 !default
|
||||
$navbar-box-shadow-color: $background !default
|
||||
$navbar-height: 3.25rem !default
|
||||
$navbar-padding-vertical: 1rem !default
|
||||
$navbar-padding-horizontal: 2rem !default
|
||||
$navbar-z: 30 !default
|
||||
$navbar-fixed-z: 30 !default
|
||||
|
||||
$navbar-item-color: $text !default
|
||||
$navbar-item-hover-color: $link !default
|
||||
$navbar-item-hover-background-color: $scheme-main-bis !default
|
||||
$navbar-item-active-color: $scheme-invert !default
|
||||
$navbar-item-active-background-color: transparent !default
|
||||
$navbar-item-img-max-height: 1.75rem !default
|
||||
|
||||
$navbar-burger-color: $navbar-item-color !default
|
||||
|
||||
$navbar-tab-hover-background-color: transparent !default
|
||||
$navbar-tab-hover-border-bottom-color: $link !default
|
||||
$navbar-tab-active-color: $link !default
|
||||
$navbar-tab-active-background-color: transparent !default
|
||||
$navbar-tab-active-border-bottom-color: $link !default
|
||||
$navbar-tab-active-border-bottom-style: solid !default
|
||||
$navbar-tab-active-border-bottom-width: 3px !default
|
||||
|
||||
$navbar-dropdown-background-color: $scheme-main !default
|
||||
$navbar-dropdown-border-top: 2px solid $border !default
|
||||
$navbar-dropdown-offset: -4px !default
|
||||
$navbar-dropdown-arrow: $link !default
|
||||
$navbar-dropdown-radius: $radius-large !default
|
||||
$navbar-dropdown-z: 20 !default
|
||||
|
||||
$navbar-dropdown-boxed-radius: $radius-large !default
|
||||
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
|
||||
|
||||
$navbar-dropdown-item-hover-color: $scheme-invert !default
|
||||
$navbar-dropdown-item-hover-background-color: $background !default
|
||||
$navbar-dropdown-item-active-color: $link !default
|
||||
$navbar-dropdown-item-active-background-color: $background !default
|
||||
|
||||
$navbar-divider-background-color: $background !default
|
||||
$navbar-divider-height: 2px !default
|
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
|
||||
|
||||
$navbar-breakpoint: $desktop !default
|
||||
|
||||
$navbar-colors: $colors !default
|
||||
|
||||
=navbar-fixed
|
||||
left: 0
|
||||
position: fixed
|
||||
right: 0
|
||||
z-index: $navbar-fixed-z
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background-color
|
||||
min-height: $navbar-height
|
||||
position: relative
|
||||
z-index: $navbar-z
|
||||
@each $name, $pair in $navbar-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.navbar-brand
|
||||
& > .navbar-item,
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
.navbar-link
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-burger
|
||||
color: $color-invert
|
||||
+from($navbar-breakpoint)
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
& > .navbar-item,
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
.navbar-link
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-item.has-dropdown:focus .navbar-link,
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&.is-active
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
& > .container
|
||||
align-items: stretch
|
||||
display: flex
|
||||
min-height: $navbar-height
|
||||
width: 100%
|
||||
&.has-shadow
|
||||
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
|
||||
&.is-fixed-bottom,
|
||||
&.is-fixed-top
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
|
||||
&.is-fixed-top
|
||||
top: 0
|
||||
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top
|
||||
padding-top: $navbar-height
|
||||
&.has-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-tabs
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-shrink: 0
|
||||
min-height: $navbar-height
|
||||
|
||||
.navbar-brand
|
||||
a.navbar-item
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: transparent
|
||||
|
||||
.navbar-tabs
|
||||
+overflow-touch
|
||||
max-width: 100vw
|
||||
overflow-x: auto
|
||||
overflow-y: hidden
|
||||
|
||||
.navbar-burger
|
||||
@extend %reset
|
||||
color: $navbar-burger-color
|
||||
+hamburger($navbar-height)
|
||||
+ltr-property("margin", auto, false)
|
||||
|
||||
.navbar-menu
|
||||
display: none
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
color: $navbar-item-color
|
||||
display: block
|
||||
line-height: 1.5
|
||||
padding: 0.5rem 0.75rem
|
||||
position: relative
|
||||
.icon
|
||||
&:only-child
|
||||
margin-left: -0.25rem
|
||||
margin-right: -0.25rem
|
||||
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
cursor: pointer
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: $navbar-item-hover-background-color
|
||||
color: $navbar-item-hover-color
|
||||
|
||||
.navbar-item
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
img
|
||||
max-height: $navbar-item-img-max-height
|
||||
&.has-dropdown
|
||||
padding: 0
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-tab
|
||||
border-bottom: 1px solid transparent
|
||||
min-height: $navbar-height
|
||||
padding-bottom: calc(0.5rem - 1px)
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $navbar-tab-hover-background-color
|
||||
border-bottom-color: $navbar-tab-hover-border-bottom-color
|
||||
&.is-active
|
||||
background-color: $navbar-tab-active-background-color
|
||||
border-bottom-color: $navbar-tab-active-border-bottom-color
|
||||
border-bottom-style: $navbar-tab-active-border-bottom-style
|
||||
border-bottom-width: $navbar-tab-active-border-bottom-width
|
||||
color: $navbar-tab-active-color
|
||||
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
|
||||
|
||||
.navbar-content
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
.navbar-link:not(.is-arrowless)
|
||||
+ltr-property("padding", 2.5em)
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $navbar-dropdown-arrow
|
||||
margin-top: -0.375em
|
||||
+ltr-position(1.125em)
|
||||
|
||||
.navbar-dropdown
|
||||
font-size: 0.875rem
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem
|
||||
.navbar-item
|
||||
padding-left: 1.5rem
|
||||
padding-right: 1.5rem
|
||||
|
||||
.navbar-divider
|
||||
background-color: $navbar-divider-background-color
|
||||
border: none
|
||||
display: none
|
||||
height: $navbar-divider-height
|
||||
margin: 0.5rem 0
|
||||
|
||||
+until($navbar-breakpoint)
|
||||
.navbar > .container
|
||||
display: block
|
||||
.navbar-brand,
|
||||
.navbar-tabs
|
||||
.navbar-item
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar-link
|
||||
&::after
|
||||
display: none
|
||||
.navbar-menu
|
||||
background-color: $navbar-background-color
|
||||
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
|
||||
padding: 0.5rem 0
|
||||
&.is-active
|
||||
display: block
|
||||
// Fixed navbar
|
||||
.navbar
|
||||
&.is-fixed-bottom-touch,
|
||||
&.is-fixed-top-touch
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom-touch
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
|
||||
&.is-fixed-top-touch
|
||||
top: 0
|
||||
&.is-fixed-top,
|
||||
&.is-fixed-top-touch
|
||||
.navbar-menu
|
||||
+overflow-touch
|
||||
max-height: calc(100vh - #{$navbar-height})
|
||||
overflow: auto
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top-touch
|
||||
padding-top: $navbar-height
|
||||
&.has-navbar-fixed-bottom-touch
|
||||
padding-bottom: $navbar-height
|
||||
|
||||
+from($navbar-breakpoint)
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: stretch
|
||||
display: flex
|
||||
.navbar
|
||||
min-height: $navbar-height
|
||||
&.is-spaced
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: center
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
border-radius: $radius
|
||||
&.is-transparent
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: transparent !important
|
||||
.navbar-item.has-dropdown
|
||||
&.is-active,
|
||||
&.is-hoverable:focus,
|
||||
&.is-hoverable:focus-within,
|
||||
&.is-hoverable:hover
|
||||
.navbar-link
|
||||
background-color: transparent !important
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color
|
||||
color: $navbar-dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color
|
||||
color: $navbar-dropdown-item-active-color
|
||||
.navbar-burger
|
||||
display: none
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar-item
|
||||
&.has-dropdown
|
||||
align-items: stretch
|
||||
&.has-dropdown-up
|
||||
.navbar-link::after
|
||||
transform: rotate(135deg) translate(0.25em, -0.25em)
|
||||
.navbar-dropdown
|
||||
border-bottom: $navbar-dropdown-border-top
|
||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
||||
border-top: none
|
||||
bottom: 100%
|
||||
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
|
||||
top: auto
|
||||
&.is-active,
|
||||
&.is-hoverable:focus,
|
||||
&.is-hoverable:focus-within,
|
||||
&.is-hoverable:hover
|
||||
.navbar-dropdown
|
||||
display: block
|
||||
.navbar.is-spaced &,
|
||||
&.is-boxed
|
||||
opacity: 1
|
||||
pointer-events: auto
|
||||
transform: translateY(0)
|
||||
.navbar-menu
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
.navbar-start
|
||||
justify-content: flex-start
|
||||
+ltr-property("margin", auto)
|
||||
.navbar-end
|
||||
justify-content: flex-end
|
||||
+ltr-property("margin", auto, false)
|
||||
.navbar-dropdown
|
||||
background-color: $navbar-dropdown-background-color
|
||||
border-bottom-left-radius: $navbar-dropdown-radius
|
||||
border-bottom-right-radius: $navbar-dropdown-radius
|
||||
border-top: $navbar-dropdown-border-top
|
||||
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
|
||||
display: none
|
||||
font-size: 0.875rem
|
||||
+ltr-position(0, false)
|
||||
min-width: 100%
|
||||
position: absolute
|
||||
top: 100%
|
||||
z-index: $navbar-dropdown-z
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
white-space: nowrap
|
||||
a.navbar-item
|
||||
+ltr-property("padding", 3rem)
|
||||
&:focus,
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color
|
||||
color: $navbar-dropdown-item-hover-color
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color
|
||||
color: $navbar-dropdown-item-active-color
|
||||
.navbar.is-spaced &,
|
||||
&.is-boxed
|
||||
border-radius: $navbar-dropdown-boxed-radius
|
||||
border-top: none
|
||||
box-shadow: $navbar-dropdown-boxed-shadow
|
||||
display: block
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
top: calc(100% + (#{$navbar-dropdown-offset}))
|
||||
transform: translateY(-5px)
|
||||
transition-duration: $speed
|
||||
transition-property: opacity, transform
|
||||
&.is-right
|
||||
left: auto
|
||||
right: 0
|
||||
.navbar-divider
|
||||
display: block
|
||||
.navbar > .container,
|
||||
.container > .navbar
|
||||
.navbar-brand
|
||||
+ltr-property("margin", -.75rem, false)
|
||||
.navbar-menu
|
||||
+ltr-property("margin", -.75rem)
|
||||
// Fixed navbar
|
||||
.navbar
|
||||
&.is-fixed-bottom-desktop,
|
||||
&.is-fixed-top-desktop
|
||||
+navbar-fixed
|
||||
&.is-fixed-bottom-desktop
|
||||
bottom: 0
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
|
||||
&.is-fixed-top-desktop
|
||||
top: 0
|
||||
html,
|
||||
body
|
||||
&.has-navbar-fixed-top-desktop
|
||||
padding-top: $navbar-height
|
||||
&.has-navbar-fixed-bottom-desktop
|
||||
padding-bottom: $navbar-height
|
||||
&.has-spaced-navbar-fixed-top
|
||||
padding-top: $navbar-height + ($navbar-padding-vertical * 2)
|
||||
&.has-spaced-navbar-fixed-bottom
|
||||
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
|
||||
// Hover/Active states
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&.is-active
|
||||
color: $navbar-item-active-color
|
||||
&.is-active:not(:focus):not(:hover)
|
||||
background-color: $navbar-item-active-background-color
|
||||
.navbar-item.has-dropdown
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active
|
||||
.navbar-link
|
||||
background-color: $navbar-item-hover-background-color
|
||||
|
||||
// Combination
|
||||
|
||||
.hero
|
||||
&.is-fullheight-with-navbar
|
||||
min-height: calc(100vh - #{$navbar-height})
|
||||
788
sass/components/navbar.scss
Normal file
788
sass/components/navbar.scss
Normal file
@@ -0,0 +1,788 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$navbar-h: cv.getVar("scheme-h");
|
||||
$navbar-s: cv.getVar("scheme-s");
|
||||
$navbar-l: cv.getVar("scheme-main-l");
|
||||
$navbar-background-color: cv.getVar("scheme-main") !default;
|
||||
$navbar-box-shadow-size: 0 0.125em 0 0 !default;
|
||||
$navbar-box-shadow-color: cv.getVar("background") !default;
|
||||
$navbar-height: 3.25rem !default;
|
||||
$navbar-padding-vertical: 1rem !default;
|
||||
$navbar-padding-horizontal: 2rem !default;
|
||||
$navbar-z: 30 !default;
|
||||
$navbar-fixed-z: 30 !default;
|
||||
|
||||
$navbar-item-background-a: 0;
|
||||
$navbar-item-background-l: cv.getVar("scheme-main-l");
|
||||
$navbar-item-background-l-delta: 0%;
|
||||
$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
|
||||
$navbar-item-color-l: cv.getVar("text-l");
|
||||
$navbar-item-selected-h: cv.getVar("link-h");
|
||||
$navbar-item-selected-s: cv.getVar("link-s");
|
||||
$navbar-item-selected-l: cv.getVar("link-l");
|
||||
$navbar-item-selected-background-l: cv.getVar("link-l");
|
||||
$navbar-item-selected-color-l: cv.getVar("link-invert-l");
|
||||
$navbar-item-img-max-height: 1.75rem !default;
|
||||
|
||||
$navbar-dropdown-item-h: cv.getVar("scheme-h");
|
||||
$navbar-dropdown-item-s: cv.getVar("scheme-s");
|
||||
$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
|
||||
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
|
||||
$navbar-dropdown-item-color-l: cv.getVar("text-l");
|
||||
|
||||
$navbar-burger-color: cv.getVar("navbar-item-color") !default;
|
||||
|
||||
$navbar-tab-hover-background-color: transparent !default;
|
||||
$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
|
||||
$navbar-tab-active-color: cv.getVar("link") !default;
|
||||
$navbar-tab-active-background-color: transparent !default;
|
||||
$navbar-tab-active-border-bottom-color: cv.getVar("link") !default;
|
||||
$navbar-tab-active-border-bottom-style: solid !default;
|
||||
$navbar-tab-active-border-bottom-width: 0.1875em !default;
|
||||
|
||||
$navbar-dropdown-background-color: cv.getVar("scheme-main") !default;
|
||||
$navbar-dropdown-border-l: cv.getVar("border-l") !default;
|
||||
$navbar-dropdown-border-color: hsl(
|
||||
cv.getVar("navbar-h"),
|
||||
cv.getVar("navbar-s"),
|
||||
cv.getVar("navbar-dropdown-border-l")
|
||||
) !default;
|
||||
$navbar-dropdown-border-style: solid !default;
|
||||
$navbar-dropdown-border-width: 0.125em !default;
|
||||
$navbar-dropdown-offset: -0.25em !default;
|
||||
$navbar-dropdown-arrow: cv.getVar("link") !default;
|
||||
$navbar-dropdown-radius: cv.getVar("radius-large") !default;
|
||||
$navbar-dropdown-z: 20 !default;
|
||||
|
||||
$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
|
||||
$navbar-dropdown-boxed-shadow:
|
||||
0 0.5em 0.5em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
),
|
||||
0 0 0 1px
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
) !default;
|
||||
|
||||
$navbar-divider-background-l: cv.getVar("background-l") !default;
|
||||
$navbar-divider-height: 0.125em !default;
|
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;
|
||||
|
||||
$navbar-breakpoint: iv.$desktop !default;
|
||||
|
||||
$navbar-colors: dv.$colors !default;
|
||||
|
||||
@mixin navbar-fixed {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: cv.getVar("navbar-fixed-z");
|
||||
}
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-height": #{$navbar-height},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{$navbar-h},
|
||||
"navbar-s": #{$navbar-s},
|
||||
"navbar-l": #{$navbar-l},
|
||||
"navbar-background-color": #{$navbar-background-color},
|
||||
"navbar-box-shadow-size": #{$navbar-box-shadow-size},
|
||||
"navbar-box-shadow-color": #{$navbar-box-shadow-color},
|
||||
"navbar-padding-vertical": #{$navbar-padding-vertical},
|
||||
"navbar-padding-horizontal": #{$navbar-padding-horizontal},
|
||||
"navbar-z": #{$navbar-z},
|
||||
"navbar-fixed-z": #{$navbar-fixed-z},
|
||||
"navbar-item-background-a": #{$navbar-item-background-a},
|
||||
"navbar-item-background-l": #{$navbar-item-background-l},
|
||||
"navbar-item-background-l-delta": #{$navbar-item-background-l-delta},
|
||||
"navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
|
||||
"navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
|
||||
"navbar-item-color-l": #{$navbar-item-color-l},
|
||||
"navbar-item-selected-h": #{$navbar-item-selected-h},
|
||||
"navbar-item-selected-s": #{$navbar-item-selected-s},
|
||||
"navbar-item-selected-l": #{$navbar-item-selected-l},
|
||||
"navbar-item-selected-background-l": #{$navbar-item-selected-background-l},
|
||||
"navbar-item-selected-color-l": #{$navbar-item-selected-color-l},
|
||||
"navbar-item-img-max-height": #{$navbar-item-img-max-height},
|
||||
"navbar-burger-color": #{$navbar-burger-color},
|
||||
"navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
|
||||
"navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color},
|
||||
"navbar-tab-active-color": #{$navbar-tab-active-color},
|
||||
"navbar-tab-active-background-color": #{$navbar-tab-active-background-color},
|
||||
"navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color},
|
||||
"navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style},
|
||||
"navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width},
|
||||
"navbar-dropdown-background-color": #{$navbar-dropdown-background-color},
|
||||
"navbar-dropdown-border-l": #{$navbar-dropdown-border-l},
|
||||
"navbar-dropdown-border-color": #{$navbar-dropdown-border-color},
|
||||
"navbar-dropdown-border-style": #{$navbar-dropdown-border-style},
|
||||
"navbar-dropdown-border-width": #{$navbar-dropdown-border-width},
|
||||
"navbar-dropdown-offset": #{$navbar-dropdown-offset},
|
||||
"navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
|
||||
"navbar-dropdown-radius": #{$navbar-dropdown-radius},
|
||||
"navbar-dropdown-z": #{$navbar-dropdown-z},
|
||||
"navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
|
||||
"navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
|
||||
"navbar-dropdown-item-h": #{$navbar-dropdown-item-h},
|
||||
"navbar-dropdown-item-s": #{$navbar-dropdown-item-s},
|
||||
"navbar-dropdown-item-l": #{$navbar-dropdown-item-l},
|
||||
"navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
|
||||
"navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l},
|
||||
"navbar-divider-background-l": #{$navbar-divider-background-l},
|
||||
"navbar-divider-height": #{$navbar-divider-height},
|
||||
"navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar {
|
||||
background-color: cv.getVar("navbar-background-color");
|
||||
min-height: cv.getVar("navbar-height");
|
||||
position: relative;
|
||||
z-index: cv.getVar("navbar-z");
|
||||
|
||||
@each $name, $pair in $navbar-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{cv.getVar($name, "", "-h")},
|
||||
"navbar-s": #{cv.getVar($name, "", "-s")},
|
||||
"navbar-l": #{cv.getVar($name, "", "-l")},
|
||||
"burger-h": #{cv.getVar($name, "", "-h")},
|
||||
"burger-s": #{cv.getVar($name, "", "-s")},
|
||||
"burger-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-background-color": #{cv.getVar($name)},
|
||||
"navbar-item-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-item-selected-h": #{cv.getVar($name, "", "-h")},
|
||||
"navbar-item-selected-s": #{cv.getVar($name, "", "-s")},
|
||||
"navbar-item-selected-l": #{cv.getVar($name, "", "-l")},
|
||||
"navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-dropdown-background-color":
|
||||
hsl(
|
||||
#{cv.getVar($name, "", "-h")},
|
||||
#{cv.getVar($name, "", "-s")},
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")}
|
||||
),
|
||||
"navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")},
|
||||
"navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
& > .#{iv.$class-prefix}container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: cv.getVar("navbar-height");
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: cv.getVar("navbar-box-shadow-size")
|
||||
cv.getVar("navbar-box-shadow-color");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom,
|
||||
&.#{iv.$class-prefix}is-fixed-top {
|
||||
@include navbar-fixed;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom {
|
||||
bottom: 0;
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: cv.getVar("navbar-bottom-box-shadow-size")
|
||||
cv.getVar("navbar-box-shadow-color");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-top {
|
||||
padding-top: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-bottom {
|
||||
padding-bottom: cv.getVar("navbar-height");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-brand,
|
||||
.#{iv.$class-prefix}navbar-tabs {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
min-height: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-tabs {
|
||||
@include mx.overflow-touch;
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-burger {
|
||||
@extend %reset;
|
||||
@include mx.burger(2.5rem);
|
||||
align-self: center;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 0.375rem;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
#{cv.getVar("navbar-item-color-l")}
|
||||
);
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
padding: 0.5rem 0.75rem;
|
||||
position: relative;
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:only-child {
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
background-color: hsla(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
),
|
||||
#{cv.getVar("navbar-item-background-a")}
|
||||
);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-l-delta": #{cv.getVar(
|
||||
"navbar-item-hover-background-l-delta"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-l-delta": #{cv.getVar(
|
||||
"navbar-item-active-background-l-delta"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{cv.getVar("navbar-item-selected-h")},
|
||||
"navbar-s": #{cv.getVar("navbar-item-selected-s")},
|
||||
"navbar-l": #{cv.getVar("navbar-item-selected-l")},
|
||||
"navbar-item-background-l": #{cv.getVar(
|
||||
"navbar-item-selected-background-l"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
"navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-height: cv.getVar("navbar-item-img-max-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-dropdown {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-expanded {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
min-height: cv.getVar("navbar-height");
|
||||
padding-bottom: calc(0.5rem - 1px);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: cv.getVar("navbar-tab-hover-background-color");
|
||||
border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
background-color: cv.getVar("navbar-tab-active-background-color");
|
||||
border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width");
|
||||
color: cv.getVar("navbar-tab-active-color");
|
||||
padding-bottom: calc(
|
||||
0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) {
|
||||
padding-inline-end: 2.5em;
|
||||
|
||||
&::after {
|
||||
@extend %arrow;
|
||||
border-color: cv.getVar("navbar-dropdown-arrow");
|
||||
margin-top: -0.375em;
|
||||
inset-inline-end: 1.125em;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
font-size: 0.875rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
||||
&:not(.is-active, .is-selected) {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
#{cv.getVar("navbar-dropdown-item-color-l")}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-divider {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
#{cv.getVar("navbar-divider-background-l")}
|
||||
);
|
||||
border: none;
|
||||
display: none;
|
||||
height: cv.getVar("navbar-divider-height");
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
@include mx.until($navbar-breakpoint) {
|
||||
.#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-brand,
|
||||
.#{iv.$class-prefix}navbar-tabs {
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
background-color: cv.getVar("navbar-background-color");
|
||||
box-shadow: 0 0.5em 1em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
);
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.#{iv.$class-prefix}navbar {
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-touch,
|
||||
&.#{iv.$class-prefix}is-fixed-top-touch {
|
||||
@include navbar-fixed;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-touch {
|
||||
bottom: 0;
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
|
||||
"scheme-s"
|
||||
)}, #{cv.getVar("scheme-invert-l")}, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top-touch {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top,
|
||||
&.#{iv.$class-prefix}is-fixed-top-touch {
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
@include mx.overflow-touch;
|
||||
max-height: calc(100vh - #{cv.getVar("navbar-height")});
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-top-touch {
|
||||
padding-top: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-bottom-touch {
|
||||
padding-bottom: cv.getVar("navbar-height");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from($navbar-breakpoint) {
|
||||
.#{iv.$class-prefix}navbar,
|
||||
.#{iv.$class-prefix}navbar-menu,
|
||||
.#{iv.$class-prefix}navbar-start,
|
||||
.#{iv.$class-prefix}navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar {
|
||||
min-height: cv.getVar("navbar-height");
|
||||
|
||||
&.#{iv.$class-prefix}is-spaced {
|
||||
padding: cv.getVar("navbar-padding-vertical")
|
||||
cv.getVar("navbar-padding-horizontal");
|
||||
|
||||
.#{iv.$class-prefix}navbar-start,
|
||||
.#{iv.$class-prefix}navbar-end {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
border-radius: cv.getVar("radius");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-transparent {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-a": 0,
|
||||
)
|
||||
);
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
a.#{iv.$class-prefix}navbar-item {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{cv.getVar("navbar-item-selected-h")},
|
||||
"navbar-s": #{cv.getVar("navbar-item-selected-s")},
|
||||
"navbar-l": #{cv.getVar("navbar-item-selected-l")},
|
||||
"navbar-item-background-l": #{cv.getVar(
|
||||
"navbar-item-selected-background-l"
|
||||
)},
|
||||
"navbar-item-color-l": #{cv.getVar(
|
||||
"navbar-item-selected-color-l"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
&.#{iv.$class-prefix}has-dropdown {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-dropdown-up {
|
||||
.#{iv.$class-prefix}navbar-link::after {
|
||||
transform: rotate(135deg) translate(0.25em, -0.25em);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
border-bottom-color: cv.getVar("navbar-dropdown-border-color");
|
||||
border-bottom-style: cv.getVar("navbar-dropdown-border-style");
|
||||
border-bottom-width: cv.getVar("navbar-dropdown-border-width");
|
||||
border-radius: cv.getVar("navbar-dropdown-radius")
|
||||
cv.getVar("navbar-dropdown-radius") 0 0;
|
||||
border-top: none;
|
||||
bottom: 100%;
|
||||
box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
|
||||
"scheme-s"
|
||||
)}, #{cv.getVar("scheme-invert-l")}, 0.1);
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-hoverable:focus,
|
||||
&.#{iv.$class-prefix}is-hoverable:focus-within,
|
||||
&.#{iv.$class-prefix}is-hoverable:hover {
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
display: block;
|
||||
|
||||
.#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-start {
|
||||
justify-content: flex-start;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
background-color: cv.getVar("navbar-dropdown-background-color");
|
||||
border-bottom-left-radius: cv.getVar("navbar-dropdown-radius");
|
||||
border-bottom-right-radius: cv.getVar("navbar-dropdown-radius");
|
||||
border-top-color: cv.getVar("navbar-dropdown-border-color");
|
||||
border-top-style: cv.getVar("navbar-dropdown-border-style");
|
||||
border-top-width: cv.getVar("navbar-dropdown-border-width");
|
||||
box-shadow: 0 0.5em 0.5em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
);
|
||||
display: none;
|
||||
font-size: 0.875rem;
|
||||
inset-inline-start: 0;
|
||||
min-width: 100%;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: cv.getVar("navbar-dropdown-z");
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}navbar-item {
|
||||
padding-inline-end: 3rem;
|
||||
|
||||
&:not(.is-active, .is-selected) {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
#{cv.getVar("navbar-dropdown-item-color-l")}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
border-radius: cv.getVar("navbar-dropdown-boxed-radius");
|
||||
border-top: none;
|
||||
box-shadow: cv.getVar("navbar-dropdown-boxed-shadow");
|
||||
display: block;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")}));
|
||||
transform: translateY(-5px);
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-divider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container,
|
||||
.#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar {
|
||||
.#{iv.$class-prefix}navbar-brand {
|
||||
margin-inline-start: -0.75rem;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
margin-inline-end: -0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.#{iv.$class-prefix}navbar {
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-desktop,
|
||||
&.#{iv.$class-prefix}is-fixed-top-desktop {
|
||||
@include navbar-fixed;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-desktop {
|
||||
bottom: 0;
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
|
||||
"scheme-s"
|
||||
)}, #{cv.getVar("scheme-invert-l")}, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top-desktop {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-top-desktop {
|
||||
padding-top: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop {
|
||||
padding-bottom: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-spaced-navbar-fixed-top {
|
||||
padding-top: calc(
|
||||
#{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
|
||||
2
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom {
|
||||
padding-bottom: calc(
|
||||
#{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
|
||||
2
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Combination
|
||||
|
||||
.#{iv.$class-prefix}hero {
|
||||
&.#{iv.$class-prefix}is-fullheight-with-navbar {
|
||||
min-height: calc(100vh - #{cv.getVar("navbar-height")});
|
||||
}
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
@import "../utilities/controls"
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$pagination-color: $text-strong !default
|
||||
$pagination-border-color: $border !default
|
||||
$pagination-margin: -0.25rem !default
|
||||
$pagination-min-width: $control-height !default
|
||||
|
||||
$pagination-item-font-size: 1em !default
|
||||
$pagination-item-margin: 0.25rem !default
|
||||
$pagination-item-padding-left: 0.5em !default
|
||||
$pagination-item-padding-right: 0.5em !default
|
||||
|
||||
$pagination-nav-padding-left: 0.75em !default
|
||||
$pagination-nav-padding-right: 0.75em !default
|
||||
|
||||
$pagination-hover-color: $link-hover !default
|
||||
$pagination-hover-border-color: $link-hover-border !default
|
||||
|
||||
$pagination-focus-color: $link-focus !default
|
||||
$pagination-focus-border-color: $link-focus-border !default
|
||||
|
||||
$pagination-active-color: $link-active !default
|
||||
$pagination-active-border-color: $link-active-border !default
|
||||
|
||||
$pagination-disabled-color: $text-light !default
|
||||
$pagination-disabled-background-color: $border !default
|
||||
$pagination-disabled-border-color: $border !default
|
||||
|
||||
$pagination-current-color: $link-invert !default
|
||||
$pagination-current-background-color: $link !default
|
||||
$pagination-current-border-color: $link !default
|
||||
|
||||
$pagination-ellipsis-color: $grey-light !default
|
||||
|
||||
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
|
||||
|
||||
.pagination
|
||||
@extend %block
|
||||
font-size: $size-normal
|
||||
margin: $pagination-margin
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
&.is-rounded
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
border-radius: $radius-rounded
|
||||
.pagination-link
|
||||
border-radius: $radius-rounded
|
||||
|
||||
.pagination,
|
||||
.pagination-list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
font-size: $pagination-item-font-size
|
||||
justify-content: center
|
||||
margin: $pagination-item-margin
|
||||
padding-left: $pagination-item-padding-left
|
||||
padding-right: $pagination-item-padding-right
|
||||
text-align: center
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link
|
||||
border-color: $pagination-border-color
|
||||
color: $pagination-color
|
||||
min-width: $pagination-min-width
|
||||
&:hover
|
||||
border-color: $pagination-hover-border-color
|
||||
color: $pagination-hover-color
|
||||
&:focus
|
||||
border-color: $pagination-focus-border-color
|
||||
&:active
|
||||
box-shadow: $pagination-shadow-inset
|
||||
&[disabled],
|
||||
&.is-disabled
|
||||
background-color: $pagination-disabled-background-color
|
||||
border-color: $pagination-disabled-border-color
|
||||
box-shadow: none
|
||||
color: $pagination-disabled-color
|
||||
opacity: 0.5
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
padding-left: $pagination-nav-padding-left
|
||||
padding-right: $pagination-nav-padding-right
|
||||
white-space: nowrap
|
||||
|
||||
.pagination-link
|
||||
&.is-current
|
||||
background-color: $pagination-current-background-color
|
||||
border-color: $pagination-current-border-color
|
||||
color: $pagination-current-color
|
||||
|
||||
.pagination-ellipsis
|
||||
color: $pagination-ellipsis-color
|
||||
pointer-events: none
|
||||
|
||||
.pagination-list
|
||||
flex-wrap: wrap
|
||||
li
|
||||
list-style: none
|
||||
|
||||
+mobile
|
||||
.pagination
|
||||
flex-wrap: wrap
|
||||
.pagination-previous,
|
||||
.pagination-next
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.pagination-list
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
+tablet
|
||||
.pagination-list
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
justify-content: flex-start
|
||||
order: 1
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis
|
||||
margin-bottom: 0
|
||||
margin-top: 0
|
||||
.pagination-previous
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
.pagination
|
||||
justify-content: space-between
|
||||
margin-bottom: 0
|
||||
margin-top: 0
|
||||
&.is-centered
|
||||
.pagination-previous
|
||||
order: 1
|
||||
.pagination-list
|
||||
justify-content: center
|
||||
order: 2
|
||||
.pagination-next
|
||||
order: 3
|
||||
&.is-right
|
||||
.pagination-previous
|
||||
order: 1
|
||||
.pagination-next
|
||||
order: 2
|
||||
.pagination-list
|
||||
justify-content: flex-end
|
||||
order: 3
|
||||
379
sass/components/pagination.scss
Normal file
379
sass/components/pagination.scss
Normal file
@@ -0,0 +1,379 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$pagination-margin: -0.25rem !default;
|
||||
$pagination-min-width: cv.getVar("control-height") !default;
|
||||
|
||||
$pagination-item-h: cv.getVar("scheme-h");
|
||||
$pagination-item-s: cv.getVar("scheme-s");
|
||||
$pagination-item-l: cv.getVar("scheme-main-l");
|
||||
$pagination-item-background-l-delta: 0%;
|
||||
$pagination-item-hover-background-l-delta: cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
);
|
||||
$pagination-item-active-background-l-delta: cv.getVar(
|
||||
"active-background-l-delta"
|
||||
);
|
||||
$pagination-item-border-l: cv.getVar("border-l");
|
||||
$pagination-item-border-l-delta: 0%;
|
||||
$pagination-item-border-style: solid !default;
|
||||
$pagination-item-border-width: cv.getVar("control-border-width") !default;
|
||||
$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta");
|
||||
$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta");
|
||||
$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta");
|
||||
$pagination-item-color-l: cv.getVar("text-strong-l");
|
||||
$pagination-item-font-size: 1em !default;
|
||||
$pagination-item-margin: 0.25rem !default;
|
||||
$pagination-item-padding-left: 0.5em !default;
|
||||
$pagination-item-padding-right: 0.5em !default;
|
||||
$pagination-item-outer-shadow-h: 0;
|
||||
$pagination-item-outer-shadow-s: 0%;
|
||||
$pagination-item-outer-shadow-l: 20%;
|
||||
$pagination-item-outer-shadow-a: 0.05;
|
||||
|
||||
$pagination-selected-item-h: cv.getVar("link-h");
|
||||
$pagination-selected-item-s: cv.getVar("link-s");
|
||||
$pagination-selected-item-l: cv.getVar("link-l");
|
||||
$pagination-selected-item-background-l: cv.getVar("link-l");
|
||||
$pagination-selected-item-border-l: cv.getVar("link-l");
|
||||
$pagination-selected-item-color-l: cv.getVar("link-invert-l");
|
||||
|
||||
$pagination-nav-padding-left: 0.75em !default;
|
||||
$pagination-nav-padding-right: 0.75em !default;
|
||||
|
||||
$pagination-disabled-color: cv.getVar("text-weak") !default;
|
||||
$pagination-disabled-background-color: cv.getVar("border") !default;
|
||||
$pagination-disabled-border-color: cv.getVar("border") !default;
|
||||
|
||||
$pagination-current-color: cv.getVar("link-invert") !default;
|
||||
$pagination-current-background-color: cv.getVar("link") !default;
|
||||
$pagination-current-border-color: cv.getVar("link") !default;
|
||||
|
||||
$pagination-ellipsis-color: cv.getVar("text-weak") !default;
|
||||
|
||||
$pagination-shadow-inset: inset 0 0.0625em 0.125em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.2
|
||||
) !default;
|
||||
|
||||
.#{iv.$class-prefix}pagination {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-margin": #{$pagination-margin},
|
||||
"pagination-min-width": #{$pagination-min-width},
|
||||
"pagination-item-h": #{$pagination-item-h},
|
||||
"pagination-item-s": #{$pagination-item-s},
|
||||
"pagination-item-l": #{$pagination-item-l},
|
||||
"pagination-item-background-l-delta": #{$pagination-item-background-l-delta},
|
||||
"pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta},
|
||||
"pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta},
|
||||
"pagination-item-border-style": #{$pagination-item-border-style},
|
||||
"pagination-item-border-width": #{$pagination-item-border-width},
|
||||
"pagination-item-border-l": #{$pagination-item-border-l},
|
||||
"pagination-item-border-l-delta": #{$pagination-item-border-l-delta},
|
||||
"pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta},
|
||||
"pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta},
|
||||
"pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta},
|
||||
"pagination-item-color-l": #{$pagination-item-color-l},
|
||||
"pagination-item-font-size": #{$pagination-item-font-size},
|
||||
"pagination-item-margin": #{$pagination-item-margin},
|
||||
"pagination-item-padding-left": #{$pagination-item-padding-left},
|
||||
"pagination-item-padding-right": #{$pagination-item-padding-right},
|
||||
"pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h},
|
||||
"pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s},
|
||||
"pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l},
|
||||
"pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a},
|
||||
"pagination-nav-padding-left": #{$pagination-nav-padding-left},
|
||||
"pagination-nav-padding-right": #{$pagination-nav-padding-right},
|
||||
"pagination-disabled-color": #{$pagination-disabled-color},
|
||||
"pagination-disabled-background-color": #{$pagination-disabled-background-color},
|
||||
"pagination-disabled-border-color": #{$pagination-disabled-border-color},
|
||||
"pagination-current-color": #{$pagination-current-color},
|
||||
"pagination-current-background-color": #{$pagination-current-background-color},
|
||||
"pagination-current-border-color": #{$pagination-current-border-color},
|
||||
"pagination-ellipsis-color": #{$pagination-ellipsis-color},
|
||||
"pagination-shadow-inset": #{$pagination-shadow-inset},
|
||||
"pagination-selected-item-h": #{$pagination-selected-item-h},
|
||||
"pagination-selected-item-s": #{$pagination-selected-item-s},
|
||||
"pagination-selected-item-l": #{$pagination-selected-item-l},
|
||||
"pagination-selected-item-background-l": #{$pagination-selected-item-background-l},
|
||||
"pagination-selected-item-border-l": #{$pagination-selected-item-border-l},
|
||||
"pagination-selected-item-color-l": #{$pagination-selected-item-color-l},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination {
|
||||
@extend %block;
|
||||
|
||||
font-size: cv.getVar("size-normal");
|
||||
margin: cv.getVar("pagination-margin");
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-link {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination,
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next,
|
||||
.#{iv.$class-prefix}pagination-link,
|
||||
.#{iv.$class-prefix}pagination-ellipsis {
|
||||
@extend %control;
|
||||
@extend %unselectable;
|
||||
color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
#{cv.getVar("pagination-item-color-l")}
|
||||
);
|
||||
font-size: cv.getVar("pagination-item-font-size");
|
||||
justify-content: center;
|
||||
margin: cv.getVar("pagination-item-margin");
|
||||
padding-left: cv.getVar("pagination-item-padding-left");
|
||||
padding-right: cv.getVar("pagination-item-padding-right");
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next,
|
||||
.#{iv.$class-prefix}pagination-link {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("pagination-item-background-l")} + #{cv.getVar(
|
||||
"pagination-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("pagination-item-border-l")} + #{cv.getVar(
|
||||
"pagination-item-border-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-style: cv.getVar("pagination-item-border-style");
|
||||
border-width: cv.getVar("pagination-item-border-width");
|
||||
box-shadow:
|
||||
0px 0.0625em 0.125em
|
||||
hsla(
|
||||
cv.getVar("pagination-item-outer-shadow-h"),
|
||||
cv.getVar("pagination-item-outer-shadow-s"),
|
||||
cv.getVar("pagination-item-outer-shadow-l"),
|
||||
cv.getVar("pagination-item-outer-shadow-a")
|
||||
),
|
||||
0px 0.125em 0.25em
|
||||
hsla(
|
||||
cv.getVar("pagination-item-outer-shadow-h"),
|
||||
cv.getVar("pagination-item-outer-shadow-s"),
|
||||
cv.getVar("pagination-item-outer-shadow-l"),
|
||||
cv.getVar("pagination-item-outer-shadow-a")
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
#{cv.getVar("pagination-item-color-l")}
|
||||
);
|
||||
min-width: cv.getVar("pagination-min-width");
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, box-shadow, color;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-item-background-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-background-l-delta"
|
||||
)},
|
||||
"pagination-item-border-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-item-background-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-background-l-delta"
|
||||
)},
|
||||
"pagination-item-border-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: cv.getVar("pagination-shadow-inset");
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&.#{iv.$class-prefix}is-disabled {
|
||||
background-color: cv.getVar("pagination-disabled-background-color");
|
||||
border-color: cv.getVar("pagination-disabled-border-color");
|
||||
box-shadow: none;
|
||||
color: cv.getVar("pagination-disabled-color");
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
padding-left: cv.getVar("pagination-nav-padding-left");
|
||||
padding-right: cv.getVar("pagination-nav-padding-right");
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-link {
|
||||
&.#{iv.$class-prefix}is-current,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-item-h": #{cv.getVar("pagination-selected-item-h")},
|
||||
"pagination-item-s": #{cv.getVar("pagination-selected-item-s")},
|
||||
"pagination-item-l": #{cv.getVar("pagination-selected-item-l")},
|
||||
"pagination-item-background-l": #{cv.getVar(
|
||||
"pagination-selected-item-background-l"
|
||||
)},
|
||||
"pagination-item-border-l": #{cv.getVar(
|
||||
"pagination-selected-item-border-l"
|
||||
)},
|
||||
"pagination-item-color-l": #{cv.getVar(
|
||||
"pagination-selected-item-color-l"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-ellipsis {
|
||||
color: cv.getVar("pagination-ellipsis-color");
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
.#{iv.$class-prefix}pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
li {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
justify-content: flex-start;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next,
|
||||
.#{iv.$class-prefix}pagination-link,
|
||||
.#{iv.$class-prefix}pagination-ellipsis {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
.#{iv.$class-prefix}pagination-previous {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
justify-content: center;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
.#{iv.$class-prefix}pagination-previous {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
justify-content: flex-end;
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$panel-margin: $block-spacing !default
|
||||
$panel-item-border: 1px solid $border-light !default
|
||||
$panel-radius: $radius-large !default
|
||||
$panel-shadow: $shadow !default
|
||||
|
||||
$panel-heading-background-color: $border-light !default
|
||||
$panel-heading-color: $text-strong !default
|
||||
$panel-heading-line-height: 1.25 !default
|
||||
$panel-heading-padding: 0.75em 1em !default
|
||||
$panel-heading-radius: $radius !default
|
||||
$panel-heading-size: 1.25em !default
|
||||
$panel-heading-weight: $weight-bold !default
|
||||
|
||||
$panel-tabs-font-size: 0.875em !default
|
||||
$panel-tab-border-bottom: 1px solid $border !default
|
||||
$panel-tab-active-border-bottom-color: $link-active-border !default
|
||||
$panel-tab-active-color: $link-active !default
|
||||
|
||||
$panel-list-item-color: $text !default
|
||||
$panel-list-item-hover-color: $link !default
|
||||
|
||||
$panel-block-color: $text-strong !default
|
||||
$panel-block-hover-background-color: $background !default
|
||||
$panel-block-active-border-left-color: $link !default
|
||||
$panel-block-active-color: $link-active !default
|
||||
$panel-block-active-icon-color: $link !default
|
||||
|
||||
$panel-icon-color: $text-light !default
|
||||
$panel-colors: $colors !default
|
||||
|
||||
.panel
|
||||
border-radius: $panel-radius
|
||||
box-shadow: $panel-shadow
|
||||
font-size: $size-normal
|
||||
&:not(:last-child)
|
||||
margin-bottom: $panel-margin
|
||||
// Colors
|
||||
@each $name, $components in $panel-colors
|
||||
$color: nth($components, 1)
|
||||
$color-invert: nth($components, 2)
|
||||
&.is-#{$name}
|
||||
.panel-heading
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.panel-tabs a.is-active
|
||||
border-bottom-color: $color
|
||||
.panel-block.is-active .panel-icon
|
||||
color: $color
|
||||
|
||||
.panel-tabs,
|
||||
.panel-block
|
||||
&:not(:last-child)
|
||||
border-bottom: $panel-item-border
|
||||
|
||||
.panel-heading
|
||||
background-color: $panel-heading-background-color
|
||||
border-radius: $panel-radius $panel-radius 0 0
|
||||
color: $panel-heading-color
|
||||
font-size: $panel-heading-size
|
||||
font-weight: $panel-heading-weight
|
||||
line-height: $panel-heading-line-height
|
||||
padding: $panel-heading-padding
|
||||
|
||||
.panel-tabs
|
||||
align-items: flex-end
|
||||
display: flex
|
||||
font-size: $panel-tabs-font-size
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: $panel-tab-border-bottom
|
||||
margin-bottom: -1px
|
||||
padding: 0.5em
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $panel-tab-active-border-bottom-color
|
||||
color: $panel-tab-active-color
|
||||
|
||||
.panel-list
|
||||
a
|
||||
color: $panel-list-item-color
|
||||
&:hover
|
||||
color: $panel-list-item-hover-color
|
||||
|
||||
.panel-block
|
||||
align-items: center
|
||||
color: $panel-block-color
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
padding: 0.5em 0.75em
|
||||
input[type="checkbox"]
|
||||
+ltr-property("margin", 0.75em)
|
||||
& > .control
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
width: 100%
|
||||
&.is-wrapped
|
||||
flex-wrap: wrap
|
||||
&.is-active
|
||||
border-left-color: $panel-block-active-border-left-color
|
||||
color: $panel-block-active-color
|
||||
.panel-icon
|
||||
color: $panel-block-active-icon-color
|
||||
&:last-child
|
||||
border-bottom-left-radius: $panel-radius
|
||||
border-bottom-right-radius: $panel-radius
|
||||
|
||||
a.panel-block,
|
||||
label.panel-block
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: $panel-block-hover-background-color
|
||||
|
||||
.panel-icon
|
||||
+fa(14px, 1em)
|
||||
color: $panel-icon-color
|
||||
+ltr-property("margin", 0.75em)
|
||||
.fa
|
||||
font-size: inherit
|
||||
line-height: inherit
|
||||
218
sass/components/panel.scss
Normal file
218
sass/components/panel.scss
Normal file
@@ -0,0 +1,218 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$panel-margin: cv.getVar("block-spacing") !default;
|
||||
$panel-item-border: 1px solid cv.getVar("border-weak") !default;
|
||||
$panel-radius: cv.getVar("radius-large") !default;
|
||||
$panel-shadow: cv.getVar("shadow") !default;
|
||||
|
||||
$panel-heading-line-height: 1.25 !default;
|
||||
$panel-heading-padding: 1em 1.25em !default;
|
||||
$panel-heading-radius: cv.getVar("radius") !default;
|
||||
$panel-heading-size: 1.25em !default;
|
||||
$panel-heading-weight: cv.getVar("weight-bold") !default;
|
||||
|
||||
$panel-tabs-font-size: 1em !default;
|
||||
$panel-tab-border-bottom-color: cv.getVar("border") !default;
|
||||
$panel-tab-border-bottom-style: solid !default;
|
||||
$panel-tab-border-bottom-width: 1px !default;
|
||||
$panel-tab-active-color: cv.getVar("link-active") !default;
|
||||
|
||||
$panel-list-item-color: cv.getVar("text") !default;
|
||||
$panel-list-item-hover-color: cv.getVar("link") !default;
|
||||
|
||||
$panel-block-color: cv.getVar("text-strong") !default;
|
||||
$panel-block-hover-background-color: cv.getVar("background") !default;
|
||||
$panel-block-active-border-left-color: cv.getVar("link") !default;
|
||||
$panel-block-active-color: cv.getVar("link-active") !default;
|
||||
$panel-block-active-icon-color: cv.getVar("link") !default;
|
||||
|
||||
$panel-icon-color: cv.getVar("text-weak") !default;
|
||||
$panel-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}panel {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"panel-margin": #{$panel-margin},
|
||||
"panel-item-border": #{$panel-item-border},
|
||||
"panel-radius": #{$panel-radius},
|
||||
"panel-shadow": #{$panel-shadow},
|
||||
"panel-heading-line-height": #{$panel-heading-line-height},
|
||||
"panel-heading-padding": #{$panel-heading-padding},
|
||||
"panel-heading-radius": #{$panel-heading-radius},
|
||||
"panel-heading-size": #{$panel-heading-size},
|
||||
"panel-heading-weight": #{$panel-heading-weight},
|
||||
"panel-tabs-font-size": #{$panel-tabs-font-size},
|
||||
"panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color},
|
||||
"panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style},
|
||||
"panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width},
|
||||
"panel-tab-active-color": #{$panel-tab-active-color},
|
||||
"panel-list-item-color": #{$panel-list-item-color},
|
||||
"panel-list-item-hover-color": #{$panel-list-item-hover-color},
|
||||
"panel-block-color": #{$panel-block-color},
|
||||
"panel-block-hover-background-color": #{$panel-block-hover-background-color},
|
||||
"panel-block-active-border-left-color": #{$panel-block-active-border-left-color},
|
||||
"panel-block-active-color": #{$panel-block-active-color},
|
||||
"panel-block-active-icon-color": #{$panel-block-active-icon-color},
|
||||
"panel-icon-color": #{$panel-icon-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"panel-h": #{cv.getVar("scheme-h")},
|
||||
"panel-s": #{cv.getVar("scheme-s")},
|
||||
"panel-color-l": #{cv.getVar("text-l")},
|
||||
"panel-heading-background-l": #{cv.getVar("text-l")},
|
||||
"panel-heading-color-l": #{cv.getVar("text-invert-l")},
|
||||
)
|
||||
);
|
||||
|
||||
border-radius: cv.getVar("panel-radius");
|
||||
box-shadow: cv.getVar("panel-shadow");
|
||||
font-size: cv.getVar("size-normal");
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: cv.getVar("panel-margin");
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $components in $panel-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"panel-h": #{cv.getVar($name, "", "-h")},
|
||||
"panel-s": #{cv.getVar($name, "", "-s")},
|
||||
"panel-color-l": #{cv.getVar($name, "", "-l")},
|
||||
"panel-heading-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel-tabs,
|
||||
.#{iv.$class-prefix}panel-block {
|
||||
&:not(:last-child) {
|
||||
border-bottom: cv.getVar("panel-item-border");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel-heading {
|
||||
background-color: hsl(
|
||||
cv.getVar("panel-h"),
|
||||
cv.getVar("panel-s"),
|
||||
cv.getVar("panel-heading-background-l")
|
||||
);
|
||||
border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0;
|
||||
color: hsl(
|
||||
cv.getVar("panel-h"),
|
||||
cv.getVar("panel-s"),
|
||||
cv.getVar("panel-heading-color-l")
|
||||
);
|
||||
font-size: cv.getVar("panel-heading-size");
|
||||
font-weight: cv.getVar("panel-heading-weight");
|
||||
line-height: cv.getVar("panel-heading-line-height");
|
||||
padding: cv.getVar("panel-heading-padding");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel-tabs {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
font-size: cv.getVar("panel-tabs-font-size");
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
border-bottom-color: cv.getVar("panel-tab-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("panel-tab-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("panel-tab-border-bottom-width");
|
||||
margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width});
|
||||
padding: 0.75em;
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
border-bottom-color: hsl(
|
||||
cv.getVar("panel-h"),
|
||||
cv.getVar("panel-s"),
|
||||
cv.getVar("panel-color-l")
|
||||
);
|
||||
color: cv.getVar("panel-tab-active-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel-list {
|
||||
a {
|
||||
color: cv.getVar("panel-list-item-color");
|
||||
|
||||
&:hover {
|
||||
color: cv.getVar("panel-list-item-hover-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel-block {
|
||||
align-items: center;
|
||||
color: cv.getVar("panel-block-color");
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0.75em 1em;
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
& > .#{iv.$class-prefix}control {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-wrapped {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
border-left-color: cv.getVar("panel-block-active-border-left-color");
|
||||
color: cv.getVar("panel-block-active-color");
|
||||
|
||||
.#{iv.$class-prefix}panel-icon {
|
||||
color: hsl(
|
||||
cv.getVar("panel-h"),
|
||||
cv.getVar("panel-s"),
|
||||
cv.getVar("panel-color-l")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: cv.getVar("panel-radius");
|
||||
border-bottom-right-radius: cv.getVar("panel-radius");
|
||||
}
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}panel-block,
|
||||
label.#{iv.$class-prefix}panel-block {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar("panel-block-hover-background-color");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}panel-icon {
|
||||
@include mx.fa(1em, 1em);
|
||||
color: cv.getVar("panel-icon-color");
|
||||
margin-inline-end: 0.75em;
|
||||
|
||||
.#{iv.$class-prefix}fa {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
@@ -1,176 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$tabs-border-bottom-color: $border !default
|
||||
$tabs-border-bottom-style: solid !default
|
||||
$tabs-border-bottom-width: 1px !default
|
||||
$tabs-link-color: $text !default
|
||||
$tabs-link-hover-border-bottom-color: $text-strong !default
|
||||
$tabs-link-hover-color: $text-strong !default
|
||||
$tabs-link-active-border-bottom-color: $link !default
|
||||
$tabs-link-active-color: $link !default
|
||||
$tabs-link-padding: 0.5em 1em !default
|
||||
|
||||
$tabs-boxed-link-radius: $radius !default
|
||||
$tabs-boxed-link-hover-background-color: $background !default
|
||||
$tabs-boxed-link-hover-border-bottom-color: $border !default
|
||||
|
||||
$tabs-boxed-link-active-background-color: $scheme-main !default
|
||||
$tabs-boxed-link-active-border-color: $border !default
|
||||
$tabs-boxed-link-active-border-bottom-color: transparent !default
|
||||
|
||||
$tabs-toggle-link-border-color: $border !default
|
||||
$tabs-toggle-link-border-style: solid !default
|
||||
$tabs-toggle-link-border-width: 1px !default
|
||||
$tabs-toggle-link-hover-background-color: $background !default
|
||||
$tabs-toggle-link-hover-border-color: $border-hover !default
|
||||
$tabs-toggle-link-radius: $radius !default
|
||||
$tabs-toggle-link-active-background-color: $link !default
|
||||
$tabs-toggle-link-active-border-color: $link !default
|
||||
$tabs-toggle-link-active-color: $link-invert !default
|
||||
|
||||
.tabs
|
||||
@extend %block
|
||||
+overflow-touch
|
||||
@extend %unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
font-size: $size-normal
|
||||
justify-content: space-between
|
||||
overflow: hidden
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
a
|
||||
align-items: center
|
||||
border-bottom-color: $tabs-border-bottom-color
|
||||
border-bottom-style: $tabs-border-bottom-style
|
||||
border-bottom-width: $tabs-border-bottom-width
|
||||
color: $tabs-link-color
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: -#{$tabs-border-bottom-width}
|
||||
padding: $tabs-link-padding
|
||||
vertical-align: top
|
||||
&:hover
|
||||
border-bottom-color: $tabs-link-hover-border-bottom-color
|
||||
color: $tabs-link-hover-color
|
||||
li
|
||||
display: block
|
||||
&.is-active
|
||||
a
|
||||
border-bottom-color: $tabs-link-active-border-bottom-color
|
||||
color: $tabs-link-active-color
|
||||
ul
|
||||
align-items: center
|
||||
border-bottom-color: $tabs-border-bottom-color
|
||||
border-bottom-style: $tabs-border-bottom-style
|
||||
border-bottom-width: $tabs-border-bottom-width
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: flex-start
|
||||
&.is-left
|
||||
padding-right: 0.75em
|
||||
&.is-center
|
||||
flex: none
|
||||
justify-content: center
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
padding-left: 0.75em
|
||||
.icon
|
||||
&:first-child
|
||||
+ltr-property("margin", 0.5em)
|
||||
&:last-child
|
||||
+ltr-property("margin", 0.5em, false)
|
||||
// Alignment
|
||||
&.is-centered
|
||||
ul
|
||||
justify-content: center
|
||||
&.is-right
|
||||
ul
|
||||
justify-content: flex-end
|
||||
// Styles
|
||||
&.is-boxed
|
||||
a
|
||||
border: 1px solid transparent
|
||||
+ltr
|
||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
|
||||
+rtl
|
||||
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
|
||||
&:hover
|
||||
background-color: $tabs-boxed-link-hover-background-color
|
||||
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
background-color: $tabs-boxed-link-active-background-color
|
||||
border-color: $tabs-boxed-link-active-border-color
|
||||
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
|
||||
&.is-fullwidth
|
||||
li
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
&.is-toggle
|
||||
a
|
||||
border-color: $tabs-toggle-link-border-color
|
||||
border-style: $tabs-toggle-link-border-style
|
||||
border-width: $tabs-toggle-link-border-width
|
||||
margin-bottom: 0
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $tabs-toggle-link-hover-background-color
|
||||
border-color: $tabs-toggle-link-hover-border-color
|
||||
z-index: 2
|
||||
li
|
||||
& + li
|
||||
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
|
||||
&:first-child a
|
||||
+ltr
|
||||
border-top-left-radius: $tabs-toggle-link-radius
|
||||
border-bottom-left-radius: $tabs-toggle-link-radius
|
||||
+rtl
|
||||
border-top-right-radius: $tabs-toggle-link-radius
|
||||
border-bottom-right-radius: $tabs-toggle-link-radius
|
||||
&:last-child a
|
||||
+ltr
|
||||
border-top-right-radius: $tabs-toggle-link-radius
|
||||
border-bottom-right-radius: $tabs-toggle-link-radius
|
||||
+rtl
|
||||
border-top-left-radius: $tabs-toggle-link-radius
|
||||
border-bottom-left-radius: $tabs-toggle-link-radius
|
||||
&.is-active
|
||||
a
|
||||
background-color: $tabs-toggle-link-active-background-color
|
||||
border-color: $tabs-toggle-link-active-border-color
|
||||
color: $tabs-toggle-link-active-color
|
||||
z-index: 1
|
||||
ul
|
||||
border-bottom: none
|
||||
&.is-toggle-rounded
|
||||
li
|
||||
&:first-child a
|
||||
+ltr
|
||||
border-bottom-left-radius: $radius-rounded
|
||||
border-top-left-radius: $radius-rounded
|
||||
padding-left: 1.25em
|
||||
+rtl
|
||||
border-bottom-right-radius: $radius-rounded
|
||||
border-top-right-radius: $radius-rounded
|
||||
padding-right: 1.25em
|
||||
&:last-child a
|
||||
+ltr
|
||||
border-bottom-right-radius: $radius-rounded
|
||||
border-top-right-radius: $radius-rounded
|
||||
padding-right: 1.25em
|
||||
+rtl
|
||||
border-bottom-left-radius: $radius-rounded
|
||||
border-top-left-radius: $radius-rounded
|
||||
padding-left: 1.25em
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
273
sass/components/tabs.scss
Normal file
273
sass/components/tabs.scss
Normal file
@@ -0,0 +1,273 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$tabs-border-bottom-color: cv.getVar("border") !default;
|
||||
$tabs-border-bottom-style: solid !default;
|
||||
$tabs-border-bottom-width: 1px !default;
|
||||
$tabs-link-color: cv.getVar("text") !default;
|
||||
$tabs-link-hover-border-bottom-color: cv.getVar("text-strong") !default;
|
||||
$tabs-link-hover-color: cv.getVar("text-strong") !default;
|
||||
$tabs-link-active-border-bottom-color: cv.getVar("link-text") !default;
|
||||
$tabs-link-active-color: cv.getVar("link-text") !default;
|
||||
$tabs-link-padding: 0.5em 1em !default;
|
||||
|
||||
$tabs-boxed-link-radius: cv.getVar("radius") !default;
|
||||
$tabs-boxed-link-hover-background-color: cv.getVar("background") !default;
|
||||
$tabs-boxed-link-hover-border-bottom-color: cv.getVar("border") !default;
|
||||
|
||||
$tabs-boxed-link-active-background-color: cv.getVar("scheme-main") !default;
|
||||
$tabs-boxed-link-active-border-color: cv.getVar("border") !default;
|
||||
$tabs-boxed-link-active-border-bottom-color: transparent !default;
|
||||
|
||||
$tabs-toggle-link-border-color: cv.getVar("border") !default;
|
||||
$tabs-toggle-link-border-style: solid !default;
|
||||
$tabs-toggle-link-border-width: 1px !default;
|
||||
$tabs-toggle-link-hover-background-color: cv.getVar("background") !default;
|
||||
$tabs-toggle-link-hover-border-color: cv.getVar("border-hover") !default;
|
||||
$tabs-toggle-link-radius: cv.getVar("radius") !default;
|
||||
$tabs-toggle-link-active-background-color: cv.getVar("link") !default;
|
||||
$tabs-toggle-link-active-border-color: cv.getVar("link") !default;
|
||||
$tabs-toggle-link-active-color: cv.getVar("link-invert") !default;
|
||||
|
||||
.#{iv.$class-prefix}tabs {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tabs-border-bottom-color": #{$tabs-border-bottom-color},
|
||||
"tabs-border-bottom-style": #{$tabs-border-bottom-style},
|
||||
"tabs-border-bottom-width": #{$tabs-border-bottom-width},
|
||||
"tabs-link-color": #{$tabs-link-color},
|
||||
"tabs-link-hover-border-bottom-color": #{$tabs-link-hover-border-bottom-color},
|
||||
"tabs-link-hover-color": #{$tabs-link-hover-color},
|
||||
"tabs-link-active-border-bottom-color": #{$tabs-link-active-border-bottom-color},
|
||||
"tabs-link-active-color": #{$tabs-link-active-color},
|
||||
"tabs-link-padding": #{$tabs-link-padding},
|
||||
"tabs-boxed-link-radius": #{$tabs-boxed-link-radius},
|
||||
"tabs-boxed-link-hover-background-color": #{$tabs-boxed-link-hover-background-color},
|
||||
"tabs-boxed-link-hover-border-bottom-color": #{$tabs-boxed-link-hover-border-bottom-color},
|
||||
"tabs-boxed-link-active-background-color": #{$tabs-boxed-link-active-background-color},
|
||||
"tabs-boxed-link-active-border-color": #{$tabs-boxed-link-active-border-color},
|
||||
"tabs-boxed-link-active-border-bottom-color": #{$tabs-boxed-link-active-border-bottom-color},
|
||||
"tabs-toggle-link-border-color": #{$tabs-toggle-link-border-color},
|
||||
"tabs-toggle-link-border-style": #{$tabs-toggle-link-border-style},
|
||||
"tabs-toggle-link-border-width": #{$tabs-toggle-link-border-width},
|
||||
"tabs-toggle-link-hover-background-color": #{$tabs-toggle-link-hover-background-color},
|
||||
"tabs-toggle-link-hover-border-color": #{$tabs-toggle-link-hover-border-color},
|
||||
"tabs-toggle-link-radius": #{$tabs-toggle-link-radius},
|
||||
"tabs-toggle-link-active-background-color": #{$tabs-toggle-link-active-background-color},
|
||||
"tabs-toggle-link-active-border-color": #{$tabs-toggle-link-active-border-color},
|
||||
"tabs-toggle-link-active-color": #{$tabs-toggle-link-active-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}tabs {
|
||||
@extend %block;
|
||||
@extend %unselectable;
|
||||
@include mx.overflow-touch;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
font-size: cv.getVar("size-normal");
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
border-bottom-color: cv.getVar("tabs-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("tabs-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("tabs-border-bottom-width");
|
||||
color: cv.getVar("tabs-link-color");
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: calc(-1 * #{cv.getVar("tabs-border-bottom-width")});
|
||||
padding: cv.getVar("tabs-link-padding");
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, color;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: cv.getVar("tabs-link-hover-border-bottom-color");
|
||||
color: cv.getVar("tabs-link-hover-color");
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
border-bottom-color: cv.getVar("tabs-link-active-border-bottom-color");
|
||||
color: cv.getVar("tabs-link-active-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
align-items: center;
|
||||
border-bottom-color: cv.getVar("tabs-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("tabs-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("tabs-border-bottom-width");
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.#{iv.$class-prefix}is-left {
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-center {
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
justify-content: flex-end;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:first-child {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
ul {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
a {
|
||||
border: 1px solid transparent;
|
||||
border-start-start-radius: cv.getVar("tabs-boxed-link-radius");
|
||||
border-start-end-radius: cv.getVar("tabs-boxed-link-radius");
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar("tabs-boxed-link-hover-background-color");
|
||||
border-bottom-color: cv.getVar(
|
||||
"tabs-boxed-link-hover-border-bottom-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
background-color: cv.getVar(
|
||||
"tabs-boxed-link-active-background-color"
|
||||
);
|
||||
border-color: cv.getVar("tabs-boxed-link-active-border-color");
|
||||
border-bottom-color: cv.getVar(
|
||||
"tabs-boxed-link-active-border-bottom-color"
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
li {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-toggle {
|
||||
a {
|
||||
border-color: cv.getVar("tabs-toggle-link-border-color");
|
||||
border-style: cv.getVar("tabs-toggle-link-border-style");
|
||||
border-width: cv.getVar("tabs-toggle-link-border-width");
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar("tabs-toggle-link-hover-background-color");
|
||||
border-color: cv.getVar("tabs-toggle-link-hover-border-color");
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
& + li {
|
||||
margin-inline-start: calc(
|
||||
-1 * #{cv.getVar("tabs-toggle-link-border-width")}
|
||||
);
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
border-start-start-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
border-end-start-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
border-start-end-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
border-end-end-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
background-color: cv.getVar(
|
||||
"tabs-toggle-link-active-background-color"
|
||||
);
|
||||
border-color: cv.getVar("tabs-toggle-link-active-border-color");
|
||||
color: cv.getVar("tabs-toggle-link-active-color");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-toggle-rounded {
|
||||
li {
|
||||
&:first-child a {
|
||||
border-start-start-radius: cv.getVar("radius-rounded");
|
||||
border-end-start-radius: cv.getVar("radius-rounded");
|
||||
padding-inline-start: 1.25em;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
border-start-end-radius: cv.getVar("radius-rounded");
|
||||
border-end-end-radius: cv.getVar("radius-rounded");
|
||||
padding-inline-end: 1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Bulma Elements */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "box"
|
||||
@import "button"
|
||||
@import "container"
|
||||
@import "content"
|
||||
@import "icon"
|
||||
@import "image"
|
||||
@import "notification"
|
||||
@import "progress"
|
||||
@import "table"
|
||||
@import "tag"
|
||||
@import "title"
|
||||
|
||||
@import "other"
|
||||
16
sass/elements/_index.scss
Normal file
16
sass/elements/_index.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
/* Bulma Elements */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "block";
|
||||
@forward "box";
|
||||
@forward "button";
|
||||
@forward "content";
|
||||
@forward "delete";
|
||||
@forward "icon";
|
||||
@forward "image";
|
||||
@forward "loader";
|
||||
@forward "notification";
|
||||
@forward "progress";
|
||||
@forward "table";
|
||||
@forward "tag";
|
||||
@forward "title";
|
||||
6
sass/elements/block.scss
Normal file
6
sass/elements/block.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
|
||||
.#{iv.$class-prefix}block {
|
||||
@extend %block;
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$box-color: $text !default
|
||||
$box-background-color: $scheme-main !default
|
||||
$box-radius: $radius-large !default
|
||||
$box-shadow: $shadow !default
|
||||
$box-padding: 1.25rem !default
|
||||
|
||||
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
|
||||
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
|
||||
|
||||
.box
|
||||
@extend %block
|
||||
background-color: $box-background-color
|
||||
border-radius: $box-radius
|
||||
box-shadow: $box-shadow
|
||||
color: $box-color
|
||||
display: block
|
||||
padding: $box-padding
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: $box-link-hover-shadow
|
||||
&:active
|
||||
box-shadow: $box-link-active-shadow
|
||||
59
sass/elements/box.scss
Normal file
59
sass/elements/box.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
|
||||
$box-background-color: cv.getVar("scheme-main") !default;
|
||||
$box-color: cv.getVar("text") !default;
|
||||
$box-radius: cv.getVar("radius-large") !default;
|
||||
$box-shadow: cv.getVar("shadow") !default;
|
||||
$box-padding: 1.25rem !default;
|
||||
|
||||
$box-link-hover-shadow:
|
||||
0 0.5em 1em -0.125em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-s")}, #{cv.getVar(
|
||||
"scheme-invert-l"
|
||||
)}, 0.1),
|
||||
0 0 0 1px cv.getVar("link") !default;
|
||||
$box-link-active-shadow:
|
||||
inset 0 1px 2px
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.2
|
||||
),
|
||||
0 0 0 1px cv.getVar("link") !default;
|
||||
|
||||
.#{iv.$class-prefix}box {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"box-background-color": #{$box-background-color},
|
||||
"box-color": #{$box-color},
|
||||
"box-radius": #{$box-radius},
|
||||
"box-shadow": #{$box-shadow},
|
||||
"box-padding": #{$box-padding},
|
||||
"box-link-hover-shadow": #{$box-link-hover-shadow},
|
||||
"box-link-active-shadow": #{$box-link-active-shadow},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}box {
|
||||
@extend %block;
|
||||
background-color: cv.getVar("box-background-color");
|
||||
border-radius: cv.getVar("box-radius");
|
||||
box-shadow: cv.getVar("box-shadow");
|
||||
color: cv.getVar("box-color");
|
||||
display: block;
|
||||
padding: cv.getVar("box-padding");
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}box {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: cv.getVar("box-link-hover-shadow");
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: cv.getVar("box-link-active-shadow");
|
||||
}
|
||||
}
|
||||
@@ -1,357 +0,0 @@
|
||||
@import "../utilities/controls"
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$button-color: $text-strong !default
|
||||
$button-background-color: $scheme-main !default
|
||||
$button-family: false !default
|
||||
|
||||
$button-border-color: $border !default
|
||||
$button-border-width: $control-border-width !default
|
||||
|
||||
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
|
||||
$button-padding-horizontal: 1em !default
|
||||
|
||||
$button-hover-color: $link-hover !default
|
||||
$button-hover-border-color: $link-hover-border !default
|
||||
|
||||
$button-focus-color: $link-focus !default
|
||||
$button-focus-border-color: $link-focus-border !default
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
||||
|
||||
$button-active-color: $link-active !default
|
||||
$button-active-border-color: $link-active-border !default
|
||||
|
||||
$button-text-color: $text !default
|
||||
$button-text-decoration: underline !default
|
||||
$button-text-hover-background-color: $background !default
|
||||
$button-text-hover-color: $text-strong !default
|
||||
|
||||
$button-ghost-background: none !default
|
||||
$button-ghost-border-color: transparent !default
|
||||
$button-ghost-color: $link !default
|
||||
$button-ghost-decoration: none !default
|
||||
$button-ghost-hover-color: $link !default
|
||||
$button-ghost-hover-decoration: underline !default
|
||||
|
||||
$button-disabled-background-color: $scheme-main !default
|
||||
$button-disabled-border-color: $border !default
|
||||
$button-disabled-shadow: none !default
|
||||
$button-disabled-opacity: 0.5 !default
|
||||
|
||||
$button-static-color: $text-light !default
|
||||
$button-static-background-color: $scheme-main-ter !default
|
||||
$button-static-border-color: $border !default
|
||||
|
||||
$button-colors: $colors !default
|
||||
$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
=button-small
|
||||
&:not(.is-rounded)
|
||||
border-radius: $radius-small
|
||||
font-size: $size-small
|
||||
=button-normal
|
||||
font-size: $size-normal
|
||||
=button-medium
|
||||
font-size: $size-medium
|
||||
=button-large
|
||||
font-size: $size-large
|
||||
|
||||
.button
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
background-color: $button-background-color
|
||||
border-color: $button-border-color
|
||||
border-width: $button-border-width
|
||||
color: $button-color
|
||||
cursor: pointer
|
||||
@if $button-family
|
||||
font-family: $button-family
|
||||
justify-content: center
|
||||
padding-bottom: $button-padding-vertical
|
||||
padding-left: $button-padding-horizontal
|
||||
padding-right: $button-padding-horizontal
|
||||
padding-top: $button-padding-vertical
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
strong
|
||||
color: inherit
|
||||
.icon
|
||||
&,
|
||||
&.is-small,
|
||||
&.is-medium,
|
||||
&.is-large
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
&:first-child:not(:last-child)
|
||||
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
|
||||
+ltr-property("margin", $button-padding-horizontal * 0.25)
|
||||
&:last-child:not(:first-child)
|
||||
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
|
||||
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
|
||||
&:first-child:last-child
|
||||
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
||||
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
||||
// States
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $button-hover-border-color
|
||||
color: $button-hover-color
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: $button-focus-border-color
|
||||
color: $button-focus-color
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $button-active-border-color
|
||||
color: $button-active-color
|
||||
// Colors
|
||||
&.is-text
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $button-text-color
|
||||
text-decoration: $button-text-decoration
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $button-text-hover-background-color
|
||||
color: $button-text-hover-color
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($button-text-hover-background-color, 5%)
|
||||
color: $button-text-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
&.is-ghost
|
||||
background: $button-ghost-background
|
||||
border-color: $button-ghost-border-color
|
||||
color: $button-ghost-color
|
||||
text-decoration: $button-ghost-decoration
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
color: $button-ghost-hover-color
|
||||
text-decoration: $button-ghost-hover-decoration
|
||||
@each $name, $pair in $button-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: bulmaDarken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
box-shadow: none
|
||||
&.is-inverted
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: bulmaDarken($color-invert, 5%)
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $color-invert
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
color: $color
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
color: $color
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !important
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
&::after
|
||||
border-color: transparent transparent $color-invert $color-invert !important
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color
|
||||
box-shadow: none
|
||||
color: $color
|
||||
&.is-inverted.is-outlined
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&.is-loading
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !important
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
box-shadow: none
|
||||
color: $color-invert
|
||||
// If light and dark colors are provided
|
||||
@if length($pair) >= 4
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: bulmaDarken($color-light, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-dark
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: bulmaDarken($color-light, 5%)
|
||||
border-color: transparent
|
||||
color: $color-dark
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-normal
|
||||
+button-normal
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $button-disabled-background-color
|
||||
border-color: $button-disabled-border-color
|
||||
box-shadow: $button-disabled-shadow
|
||||
opacity: $button-disabled-opacity
|
||||
&.is-fullwidth
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent !important
|
||||
pointer-events: none
|
||||
&::after
|
||||
@extend %loader
|
||||
+center(1em)
|
||||
position: absolute !important
|
||||
&.is-static
|
||||
background-color: $button-static-background-color
|
||||
border-color: $button-static-border-color
|
||||
color: $button-static-color
|
||||
box-shadow: none
|
||||
pointer-events: none
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
|
||||
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
|
||||
|
||||
.buttons
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.button
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child):not(.is-fullwidth)
|
||||
+ltr-property("margin", 0.5rem)
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
// Sizes
|
||||
&.are-small
|
||||
.button:not(.is-normal):not(.is-medium):not(.is-large)
|
||||
+button-small
|
||||
&.are-medium
|
||||
.button:not(.is-small):not(.is-normal):not(.is-large)
|
||||
+button-medium
|
||||
&.are-large
|
||||
.button:not(.is-small):not(.is-normal):not(.is-medium)
|
||||
+button-large
|
||||
&.has-addons
|
||||
.button
|
||||
&:not(:first-child)
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:not(:last-child)
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
+ltr-property("margin", -1px)
|
||||
&:last-child
|
||||
+ltr-property("margin", 0)
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active,
|
||||
&.is-selected
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&:not(.has-addons)
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
&:not(.has-addons)
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
|
||||
@each $bp-name, $bp-sizes in $button-responsive-sizes
|
||||
+breakpoint($bp-name)
|
||||
@each $size, $value in $bp-sizes
|
||||
@if $size != "normal"
|
||||
.button.is-responsive.is-#{$size}
|
||||
font-size: $value
|
||||
@else
|
||||
.button.is-responsive,
|
||||
.button.is-responsive.is-normal
|
||||
font-size: $value
|
||||
640
sass/elements/button.scss
Normal file
640
sass/elements/button.scss
Normal file
@@ -0,0 +1,640 @@
|
||||
@use "sass:list";
|
||||
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$button-h: #{cv.getVar("scheme-h")};
|
||||
$button-s: #{cv.getVar("scheme-s")};
|
||||
$button-l: #{cv.getVar("scheme-main-l")};
|
||||
$button-background-l: #{cv.getVar("scheme-main-l")};
|
||||
$button-background-l-delta: 0%;
|
||||
$button-hover-background-l-delta: #{cv.getVar("hover-background-l-delta")};
|
||||
$button-active-background-l-delta: #{cv.getVar("active-background-l-delta")};
|
||||
$button-color-l: #{cv.getVar("text-strong-l")};
|
||||
$button-border-l: #{cv.getVar("border-l")};
|
||||
$button-border-l-delta: 0%;
|
||||
$button-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")};
|
||||
$button-active-border-l-delta: #{cv.getVar("active-border-l-delta")};
|
||||
$button-focus-border-l-delta: #{cv.getVar("focus-border-l-delta")};
|
||||
$button-outer-shadow-h: 0;
|
||||
$button-outer-shadow-s: 0%;
|
||||
$button-outer-shadow-l: 20%;
|
||||
$button-outer-shadow-a: 0.05;
|
||||
|
||||
$button-weight: cv.getVar("weight-medium") !default;
|
||||
$button-family: false !default;
|
||||
|
||||
$button-border-color: cv.getVar("border") !default;
|
||||
$button-border-style: solid !default;
|
||||
$button-border-width: cv.getVar("control-border-width") !default;
|
||||
|
||||
$button-padding-vertical: 0.5em !default;
|
||||
$button-padding-horizontal: 1em !default;
|
||||
|
||||
$button-focus-border-color: cv.getVar("link-focus-border") !default;
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
|
||||
$button-focus-box-shadow-color: hsla(
|
||||
#{cv.getVar("link-h")},
|
||||
#{cv.getVar("link-s")},
|
||||
#{cv.getVar("link-on-scheme-l")},
|
||||
0.25
|
||||
) !default;
|
||||
|
||||
$button-active-color: cv.getVar("link-active") !default;
|
||||
$button-active-border-color: cv.getVar("link-active-border") !default;
|
||||
|
||||
$button-text-color: cv.getVar("text") !default;
|
||||
$button-text-decoration: underline !default;
|
||||
$button-text-hover-background-color: cv.getVar("background") !default;
|
||||
$button-text-hover-color: cv.getVar("text-strong") !default;
|
||||
|
||||
$button-ghost-background: none !default;
|
||||
$button-ghost-border-color: transparent !default;
|
||||
$button-ghost-color: cv.getVar("link-text") !default;
|
||||
$button-ghost-decoration: none !default;
|
||||
$button-ghost-hover-color: cv.getVar("link") !default;
|
||||
$button-ghost-hover-decoration: underline !default;
|
||||
|
||||
$button-disabled-background-color: cv.getVar("scheme-main") !default;
|
||||
$button-disabled-border-color: cv.getVar("border") !default;
|
||||
$button-disabled-shadow: none !default;
|
||||
$button-disabled-opacity: 0.5 !default;
|
||||
|
||||
$button-static-color: cv.getVar("text-weak") !default;
|
||||
$button-static-background-color: cv.getVar("scheme-main-ter") !default;
|
||||
$button-static-border-color: cv.getVar("border") !default;
|
||||
|
||||
$button-colors: dv.$colors !default;
|
||||
$button-responsive-sizes: (
|
||||
"mobile": (
|
||||
"small": calc(#{cv.getVar("size-small")} * 0.75),
|
||||
"normal": calc(#{cv.getVar("size-small")} * 0.875),
|
||||
"medium": cv.getVar("size-small"),
|
||||
"large": cv.getVar("size-normal"),
|
||||
),
|
||||
"tablet-only": (
|
||||
"small": calc(#{cv.getVar("size-small")} * 0.875),
|
||||
"normal": cv.getVar("size-small"),
|
||||
"medium": cv.getVar("size-normal"),
|
||||
"large": cv.getVar("size-medium"),
|
||||
),
|
||||
) !default;
|
||||
|
||||
$no-palette: ("white", "black", "light", "dark");
|
||||
|
||||
.#{iv.$class-prefix}button {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-family": #{$button-family},
|
||||
"button-weight": #{$button-weight},
|
||||
"button-border-color": #{$button-border-color},
|
||||
"button-border-style": #{$button-border-style},
|
||||
"button-border-width": #{$button-border-width},
|
||||
"button-padding-vertical": #{$button-padding-vertical},
|
||||
"button-padding-horizontal": #{$button-padding-horizontal},
|
||||
"button-focus-border-color": #{$button-focus-border-color},
|
||||
"button-focus-box-shadow-size": #{$button-focus-box-shadow-size},
|
||||
"button-focus-box-shadow-color": #{$button-focus-box-shadow-color},
|
||||
"button-active-color": #{$button-active-color},
|
||||
"button-active-border-color": #{$button-active-border-color},
|
||||
"button-text-color": #{$button-text-color},
|
||||
"button-text-decoration": #{$button-text-decoration},
|
||||
"button-text-hover-background-color": #{$button-text-hover-background-color},
|
||||
"button-text-hover-color": #{$button-text-hover-color},
|
||||
"button-ghost-background": #{$button-ghost-background},
|
||||
"button-ghost-border-color": #{$button-ghost-border-color},
|
||||
"button-ghost-color": #{$button-ghost-color},
|
||||
"button-ghost-decoration": #{$button-ghost-decoration},
|
||||
"button-ghost-hover-color": #{$button-ghost-hover-color},
|
||||
"button-ghost-hover-decoration": #{$button-ghost-hover-decoration},
|
||||
"button-disabled-background-color": #{$button-disabled-background-color},
|
||||
"button-disabled-border-color": #{$button-disabled-border-color},
|
||||
"button-disabled-shadow": #{$button-disabled-shadow},
|
||||
"button-disabled-opacity": #{$button-disabled-opacity},
|
||||
"button-static-color": #{$button-static-color},
|
||||
"button-static-background-color": #{$button-static-background-color},
|
||||
"button-static-border-color": #{$button-static-border-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}button {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-h": #{$button-h},
|
||||
"button-s": #{$button-s},
|
||||
"button-l": #{$button-l},
|
||||
"button-background-l": #{$button-background-l},
|
||||
"button-background-l-delta": #{$button-background-l-delta},
|
||||
"button-hover-background-l-delta": #{$button-hover-background-l-delta},
|
||||
"button-active-background-l-delta": #{$button-active-background-l-delta},
|
||||
"button-color-l": #{$button-color-l},
|
||||
"button-border-l": #{$button-border-l},
|
||||
"button-border-l-delta": #{$button-border-l-delta},
|
||||
"button-hover-border-l-delta": #{$button-hover-border-l-delta},
|
||||
"button-active-border-l-delta": #{$button-active-border-l-delta},
|
||||
"button-focus-border-l-delta": #{$button-focus-border-l-delta},
|
||||
"button-outer-shadow-h": #{$button-outer-shadow-h},
|
||||
"button-outer-shadow-s": #{$button-outer-shadow-s},
|
||||
"button-outer-shadow-l": #{$button-outer-shadow-l},
|
||||
"button-outer-shadow-a": #{$button-outer-shadow-a},
|
||||
"loading-color":
|
||||
hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
#{cv.getVar("button-color-l")}
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
@extend %control;
|
||||
@extend %unselectable;
|
||||
|
||||
background-color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
calc(
|
||||
#{cv.getVar("button-background-l")} + #{cv.getVar(
|
||||
"button-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
calc(
|
||||
#{cv.getVar("button-border-l")} + #{cv.getVar("button-border-l-delta")}
|
||||
)
|
||||
);
|
||||
border-style: cv.getVar("button-border-style");
|
||||
border-width: cv.getVar("button-border-width");
|
||||
box-shadow:
|
||||
0px 0.0625em 0.125em
|
||||
hsla(
|
||||
cv.getVar("button-outer-shadow-h"),
|
||||
cv.getVar("button-outer-shadow-s"),
|
||||
cv.getVar("button-outer-shadow-l"),
|
||||
cv.getVar("button-outer-shadow-a")
|
||||
),
|
||||
0px 0.125em 0.25em
|
||||
hsla(
|
||||
cv.getVar("button-outer-shadow-h"),
|
||||
cv.getVar("button-outer-shadow-s"),
|
||||
cv.getVar("button-outer-shadow-l"),
|
||||
cv.getVar("button-outer-shadow-a")
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
#{cv.getVar("button-color-l")}
|
||||
);
|
||||
cursor: pointer;
|
||||
font-weight: cv.getVar("button-weight");
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
padding-bottom: calc(
|
||||
#{cv.getVar("button-padding-vertical")} - #{cv.getVar(
|
||||
"button-border-width"
|
||||
)}
|
||||
);
|
||||
padding-left: calc(
|
||||
#{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
|
||||
"button-border-width"
|
||||
)}
|
||||
);
|
||||
padding-right: calc(
|
||||
#{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
|
||||
"button-border-width"
|
||||
)}
|
||||
);
|
||||
padding-top: calc(
|
||||
#{cv.getVar("button-padding-vertical")} - #{cv.getVar(
|
||||
"button-border-width"
|
||||
)}
|
||||
);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
@if $button-family {
|
||||
font-family: cv.getVar("button-family");
|
||||
}
|
||||
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&,
|
||||
&.#{iv.$class-prefix}is-small,
|
||||
&.#{iv.$class-prefix}is-medium,
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
margin-inline-start: calc(
|
||||
-0.5 * #{cv.getVar("button-padding-horizontal")}
|
||||
);
|
||||
margin-inline-end: calc(#{cv.getVar("button-padding-horizontal")} * 0.25);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
margin-inline-start: calc(
|
||||
#{cv.getVar("button-padding-horizontal")} * 0.25
|
||||
);
|
||||
margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
margin-inline-start: calc(
|
||||
-0.5 * #{cv.getVar("button-padding-horizontal")}
|
||||
);
|
||||
margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
&:hover,
|
||||
&.#{iv.$class-prefix}is-hovered {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-background-l-delta": #{cv.getVar(
|
||||
"button-hover-background-l-delta"
|
||||
)},
|
||||
"button-border-l-delta": #{cv.getVar("button-hover-border-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&.#{iv.$class-prefix}is-focused {
|
||||
@include cv.register-var("button-border-width", 1px);
|
||||
|
||||
border-color: hsl(
|
||||
#{cv.getVar("focus-h")},
|
||||
#{cv.getVar("focus-s")},
|
||||
#{cv.getVar("focus-l")}
|
||||
);
|
||||
box-shadow: cv.getVar("focus-shadow-size")
|
||||
hsla(
|
||||
cv.getVar("focus-h"),
|
||||
cv.getVar("focus-s"),
|
||||
cv.getVar("focus-l"),
|
||||
cv.getVar("focus-shadow-alpha")
|
||||
);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-background-l-delta": #{cv.getVar(
|
||||
"button-active-background-l-delta"
|
||||
)},
|
||||
"button-border-l-delta": #{cv.getVar("button-active-border-l-delta")},
|
||||
"button-outer-shadow-a": 0,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: cv.getVar("button-disabled-background-color");
|
||||
border-color: cv.getVar("button-disabled-border-color");
|
||||
box-shadow: cv.getVar("button-disabled-shadow");
|
||||
opacity: cv.getVar("button-disabled-opacity");
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $button-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-h": #{cv.getVar($name, "", "-h")},
|
||||
"button-s": #{cv.getVar($name, "", "-s")},
|
||||
"button-l": #{cv.getVar($name, "", "-l")},
|
||||
"button-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"button-border-l": #{cv.getVar($name, "", "-l")},
|
||||
"button-border-width": 0px,
|
||||
"button-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"button-outer-shadow-a": 0,
|
||||
)
|
||||
);
|
||||
|
||||
&:focus-visible,
|
||||
&.#{iv.$class-prefix}is-focused {
|
||||
@include cv.register-var("button-border-width", 1px);
|
||||
}
|
||||
|
||||
@if not list.index($no-palette, $name) {
|
||||
&.#{iv.$class-prefix}is-light {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-background-l": #{cv.getVar("light-l")},
|
||||
"button-color-l": #{cv.getVar($name, "", "-light-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-dark {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-background-l": #{cv.getVar("dark-l")},
|
||||
"button-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-soft {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-background-l": #{cv.getVar("soft-l")},
|
||||
"button-color-l": #{cv.getVar("soft-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-bold {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-background-l": #{cv.getVar("bold-l")},
|
||||
"button-color-l": #{cv.getVar("bold-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: cv.getVar($name);
|
||||
border-color: cv.getVar($name);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
&.#{iv.$class-prefix}is-outlined {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-border-width": max(1px, 0.0625em),
|
||||
)
|
||||
);
|
||||
|
||||
background-color: transparent;
|
||||
border-color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
#{cv.getVar("button-l")}
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
#{cv.getVar("button-l")}
|
||||
);
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-border-width": max(2px, 0.125em),
|
||||
"button-outer-shadow-alpha": 1,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(());
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-inverted {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
calc(
|
||||
#{cv.getVar("button-color-l")} + #{cv.getVar(
|
||||
"button-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("button-h")},
|
||||
#{cv.getVar("button-s")},
|
||||
#{cv.getVar("button-background-l")}
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-text {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: cv.getVar("button-text-color");
|
||||
text-decoration: cv.getVar("button-text-decoration");
|
||||
|
||||
&:hover,
|
||||
&.#{iv.$class-prefix}is-hovered {
|
||||
background-color: cv.getVar("button-text-hover-background-color");
|
||||
color: cv.getVar("button-text-hover-color");
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
// background-color: bulmaDarken($button-text-hover-background-color, 5%);
|
||||
color: cv.getVar("button-text-hover-color");
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-ghost {
|
||||
background: cv.getVar("button-ghost-background");
|
||||
border-color: cv.getVar("button-ghost-border-color");
|
||||
box-shadow: none;
|
||||
color: cv.getVar("button-ghost-color");
|
||||
text-decoration: cv.getVar("button-ghost-decoration");
|
||||
|
||||
&:hover,
|
||||
&.#{iv.$class-prefix}is-hovered {
|
||||
color: cv.getVar("button-ghost-hover-color");
|
||||
text-decoration: cv.getVar("button-ghost-hover-decoration");
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-small")},
|
||||
"control-radius": #{cv.getVar("radius-small")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-normal {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-normal")},
|
||||
"control-radius": #{cv.getVar("radius")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-medium")},
|
||||
"control-radius": #{cv.getVar("radius-medium")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-large")},
|
||||
"control-radius": #{cv.getVar("radius-medium")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-loading {
|
||||
box-shadow: none;
|
||||
color: transparent !important;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
@extend %loader;
|
||||
@include mx.center(1em);
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-static {
|
||||
background-color: cv.getVar("button-static-background-color");
|
||||
border-color: cv.getVar("button-static-border-color");
|
||||
color: cv.getVar("button-static-color");
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
|
||||
padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}buttons {
|
||||
@extend %block;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}are-small {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-small")},
|
||||
"control-radius": #{cv.getVar("radius-small")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}are-medium {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-medium")},
|
||||
"control-radius": #{cv.getVar("radius-medium")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}are-large {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-size": #{cv.getVar("size-large")},
|
||||
"control-radius": #{cv.getVar("radius-large")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-addons {
|
||||
gap: 0;
|
||||
|
||||
.#{iv.$class-prefix}button {
|
||||
&:not(:first-child) {
|
||||
border-end-start-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-end-end-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
margin-inline-end: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.#{iv.$class-prefix}is-hovered {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.#{iv.$class-prefix}is-focused,
|
||||
&:active,
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-expanded {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@each $bp-name, $bp-sizes in $button-responsive-sizes {
|
||||
@include mx.breakpoint($bp-name) {
|
||||
@each $size, $value in $bp-sizes {
|
||||
@if $size != "normal" {
|
||||
.#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-#{$size} {
|
||||
font-size: $value;
|
||||
}
|
||||
} @else {
|
||||
.#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive,
|
||||
.#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-normal {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$container-offset: (2 * $gap) !default
|
||||
$container-max-width: $fullhd !default
|
||||
|
||||
.container
|
||||
flex-grow: 1
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
width: auto
|
||||
&.is-fluid
|
||||
max-width: none !important
|
||||
padding-left: $gap
|
||||
padding-right: $gap
|
||||
width: 100%
|
||||
+desktop
|
||||
max-width: $desktop - $container-offset
|
||||
+until-widescreen
|
||||
&.is-widescreen:not(.is-max-desktop)
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||
+until-fullhd
|
||||
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||
+widescreen
|
||||
&:not(.is-max-desktop)
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||
+fullhd
|
||||
&:not(.is-max-desktop):not(.is-max-widescreen)
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||
@@ -1,162 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$content-heading-color: $text-strong !default
|
||||
$content-heading-weight: $weight-semibold !default
|
||||
$content-heading-line-height: 1.125 !default
|
||||
|
||||
$content-block-margin-bottom: 1em !default
|
||||
|
||||
$content-blockquote-background-color: $background !default
|
||||
$content-blockquote-border-left: 5px solid $border !default
|
||||
$content-blockquote-padding: 1.25em 1.5em !default
|
||||
|
||||
$content-pre-padding: 1.25em 1.5em !default
|
||||
|
||||
$content-table-cell-border: 1px solid $border !default
|
||||
$content-table-cell-border-width: 0 0 1px !default
|
||||
$content-table-cell-padding: 0.5em 0.75em !default
|
||||
$content-table-cell-heading-color: $text-strong !default
|
||||
$content-table-head-cell-border-width: 0 0 2px !default
|
||||
$content-table-head-cell-color: $text-strong !default
|
||||
$content-table-body-last-row-cell-border-bottom-width: 0 !default
|
||||
$content-table-foot-cell-border-width: 2px 0 0 !default
|
||||
$content-table-foot-cell-color: $text-strong !default
|
||||
|
||||
.content
|
||||
@extend %block
|
||||
// Inline
|
||||
li + li
|
||||
margin-top: 0.25em
|
||||
// Block
|
||||
p,
|
||||
dl,
|
||||
ol,
|
||||
ul,
|
||||
blockquote,
|
||||
pre,
|
||||
table
|
||||
&:not(:last-child)
|
||||
margin-bottom: $content-block-margin-bottom
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: $content-heading-color
|
||||
font-weight: $content-heading-weight
|
||||
line-height: $content-heading-line-height
|
||||
h1
|
||||
font-size: 2em
|
||||
margin-bottom: 0.5em
|
||||
&:not(:first-child)
|
||||
margin-top: 1em
|
||||
h2
|
||||
font-size: 1.75em
|
||||
margin-bottom: 0.5714em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.1428em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
margin-bottom: 0.6666em
|
||||
&:not(:first-child)
|
||||
margin-top: 1.3333em
|
||||
h4
|
||||
font-size: 1.25em
|
||||
margin-bottom: 0.8em
|
||||
h5
|
||||
font-size: 1.125em
|
||||
margin-bottom: 0.8888em
|
||||
h6
|
||||
font-size: 1em
|
||||
margin-bottom: 1em
|
||||
blockquote
|
||||
background-color: $content-blockquote-background-color
|
||||
+ltr-property("border", $content-blockquote-border-left, false)
|
||||
padding: $content-blockquote-padding
|
||||
ol
|
||||
list-style-position: outside
|
||||
+ltr-property("margin", 2em, false)
|
||||
margin-top: 1em
|
||||
&:not([type])
|
||||
list-style-type: decimal
|
||||
&.is-lower-alpha
|
||||
list-style-type: lower-alpha
|
||||
&.is-lower-roman
|
||||
list-style-type: lower-roman
|
||||
&.is-upper-alpha
|
||||
list-style-type: upper-alpha
|
||||
&.is-upper-roman
|
||||
list-style-type: upper-roman
|
||||
ul
|
||||
list-style: disc outside
|
||||
+ltr-property("margin", 2em, false)
|
||||
margin-top: 1em
|
||||
ul
|
||||
list-style-type: circle
|
||||
margin-top: 0.5em
|
||||
ul
|
||||
list-style-type: square
|
||||
dd
|
||||
+ltr-property("margin", 2em, false)
|
||||
figure
|
||||
margin-left: 2em
|
||||
margin-right: 2em
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 2em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 2em
|
||||
img
|
||||
display: inline-block
|
||||
figcaption
|
||||
font-style: italic
|
||||
pre
|
||||
+overflow-touch
|
||||
overflow-x: auto
|
||||
padding: $content-pre-padding
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
sup,
|
||||
sub
|
||||
font-size: 75%
|
||||
table
|
||||
width: 100%
|
||||
td,
|
||||
th
|
||||
border: $content-table-cell-border
|
||||
border-width: $content-table-cell-border-width
|
||||
padding: $content-table-cell-padding
|
||||
vertical-align: top
|
||||
th
|
||||
color: $content-table-cell-heading-color
|
||||
&:not([align])
|
||||
text-align: inherit
|
||||
thead
|
||||
td,
|
||||
th
|
||||
border-width: $content-table-head-cell-border-width
|
||||
color: $content-table-head-cell-color
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
border-width: $content-table-foot-cell-border-width
|
||||
color: $content-table-foot-cell-color
|
||||
tbody
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: $content-table-body-last-row-cell-border-bottom-width
|
||||
.tabs
|
||||
li + li
|
||||
margin-top: 0
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-normal
|
||||
font-size: $size-normal
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
283
sass/elements/content.scss
Normal file
283
sass/elements/content.scss
Normal file
@@ -0,0 +1,283 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$content-heading-color: #{cv.getVar("text-strong")} !default;
|
||||
$content-heading-weight: #{cv.getVar("weight-extrabold")} !default;
|
||||
$content-heading-line-height: 1.125 !default;
|
||||
|
||||
$content-block-margin-bottom: 1em !default;
|
||||
|
||||
$content-blockquote-background-color: #{cv.getVar("background")} !default;
|
||||
$content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default;
|
||||
$content-blockquote-padding: 1.25em 1.5em !default;
|
||||
|
||||
$content-pre-padding: 1.25em 1.5em !default;
|
||||
|
||||
$content-table-cell-border: 1px solid #{cv.getVar("border")} !default;
|
||||
$content-table-cell-border-width: 0 0 1px !default;
|
||||
$content-table-cell-padding: 0.5em 0.75em !default;
|
||||
$content-table-cell-heading-color: #{cv.getVar("text-strong")} !default;
|
||||
$content-table-head-cell-border-width: 0 0 2px !default;
|
||||
$content-table-head-cell-color: #{cv.getVar("text-strong")} !default;
|
||||
$content-table-body-last-row-cell-border-bottom-width: 0 !default;
|
||||
$content-table-foot-cell-border-width: 2px 0 0 !default;
|
||||
$content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
|
||||
|
||||
.#{iv.$class-prefix}content {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"content-heading-color": #{$content-heading-color},
|
||||
"content-heading-weight": #{$content-heading-weight},
|
||||
"content-heading-line-height": #{$content-heading-line-height},
|
||||
"content-block-margin-bottom": #{$content-block-margin-bottom},
|
||||
"content-blockquote-background-color": #{$content-blockquote-background-color},
|
||||
"content-blockquote-border-left": #{$content-blockquote-border-left},
|
||||
"content-blockquote-padding": #{$content-blockquote-padding},
|
||||
"content-pre-padding": #{$content-pre-padding},
|
||||
"content-table-cell-border": #{$content-table-cell-border},
|
||||
"content-table-cell-border-width": #{$content-table-cell-border-width},
|
||||
"content-table-cell-padding": #{$content-table-cell-padding},
|
||||
"content-table-cell-heading-color": #{$content-table-cell-heading-color},
|
||||
"content-table-head-cell-border-width": #{$content-table-head-cell-border-width},
|
||||
"content-table-head-cell-color": #{$content-table-head-cell-color},
|
||||
"content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width},
|
||||
"content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width},
|
||||
"content-table-foot-cell-color": #{$content-table-foot-cell-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}content {
|
||||
@extend %block;
|
||||
|
||||
// Inline
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
// Block
|
||||
p,
|
||||
dl,
|
||||
ol,
|
||||
ul,
|
||||
blockquote,
|
||||
pre,
|
||||
table {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: cv.getVar("content-block-margin-bottom");
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: cv.getVar("content-heading-color");
|
||||
font-weight: cv.getVar("content-heading-weight");
|
||||
line-height: cv.getVar("content-heading-line-height");
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 0.5714em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1.1428em;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.6666em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1.3333em;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.125em;
|
||||
margin-bottom: 0.8888em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: cv.getVar("content-blockquote-background-color");
|
||||
border-inline-start: cv.getVar("content-blockquote-border-left");
|
||||
padding: cv.getVar("content-blockquote-padding");
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: outside;
|
||||
margin-inline-start: 2em;
|
||||
margin-top: 1em;
|
||||
|
||||
&:not([type]) {
|
||||
list-style-type: decimal;
|
||||
|
||||
&.#{iv.$class-prefix}is-lower-alpha {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-lower-roman {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-upper-alpha {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-upper-roman {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
margin-inline-start: 2em;
|
||||
margin-top: 1em;
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
margin-bottom: 0.25em;
|
||||
margin-top: 0.25em;
|
||||
|
||||
ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: 2em;
|
||||
}
|
||||
|
||||
figure:not([class]) {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
text-align: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@include mx.overflow-touch;
|
||||
overflow-x: auto;
|
||||
padding: cv.getVar("content-pre-padding");
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
border: cv.getVar("content-table-cell-border");
|
||||
border-width: cv.getVar("content-table-cell-border-width");
|
||||
padding: cv.getVar("content-table-cell-padding");
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
color: cv.getVar("content-table-cell-heading-color");
|
||||
|
||||
&:not([align]) {
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
td,
|
||||
th {
|
||||
border-width: cv.getVar("content-table-head-cell-border-width");
|
||||
color: cv.getVar("content-table-head-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td,
|
||||
th {
|
||||
border-width: cv.getVar("content-table-foot-cell-border-width");
|
||||
color: cv.getVar("content-table-foot-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom-width: cv.getVar(
|
||||
"content-table-body-last-row-cell-border-bottom-width"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}tabs {
|
||||
li + li {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-normal {
|
||||
font-size: cv.getVar("size-normal");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
6
sass/elements/delete.scss
Normal file
6
sass/elements/delete.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
.#{iv.$class-prefix}delete {
|
||||
@include mx.delete;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
|
||||
@@ -1,46 +0,0 @@
|
||||
$icon-dimensions: 1.5rem !default
|
||||
$icon-dimensions-small: 1rem !default
|
||||
$icon-dimensions-medium: 2rem !default
|
||||
$icon-dimensions-large: 3rem !default
|
||||
$icon-text-spacing: 0.25em !default
|
||||
|
||||
.icon
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
height: $icon-dimensions
|
||||
width: $icon-dimensions
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $icon-dimensions-small
|
||||
width: $icon-dimensions-small
|
||||
&.is-medium
|
||||
height: $icon-dimensions-medium
|
||||
width: $icon-dimensions-medium
|
||||
&.is-large
|
||||
height: $icon-dimensions-large
|
||||
width: $icon-dimensions-large
|
||||
|
||||
.icon-text
|
||||
align-items: flex-start
|
||||
color: inherit
|
||||
display: inline-flex
|
||||
flex-wrap: wrap
|
||||
line-height: $icon-dimensions
|
||||
vertical-align: top
|
||||
.icon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
&:not(:last-child)
|
||||
+ltr
|
||||
margin-right: $icon-text-spacing
|
||||
+rtl
|
||||
margin-left: $icon-text-spacing
|
||||
&:not(:first-child)
|
||||
+ltr
|
||||
margin-left: $icon-text-spacing
|
||||
+rtl
|
||||
margin-right: $icon-text-spacing
|
||||
|
||||
div.icon-text
|
||||
display: flex
|
||||
67
sass/elements/icon.scss
Normal file
67
sass/elements/icon.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
$icon-dimensions: 1.5rem !default;
|
||||
$icon-dimensions-small: 1rem !default;
|
||||
$icon-dimensions-medium: 2rem !default;
|
||||
$icon-dimensions-large: 3rem !default;
|
||||
$icon-text-spacing: 0.25em !default;
|
||||
|
||||
.#{iv.$class-prefix}icon,
|
||||
.#{iv.$class-prefix}icon-text {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"icon-dimensions": #{$icon-dimensions},
|
||||
"icon-dimensions-small": #{$icon-dimensions-small},
|
||||
"icon-dimensions-medium": #{$icon-dimensions-medium},
|
||||
"icon-dimensions-large": #{$icon-dimensions-large},
|
||||
"icon-text-spacing": #{$icon-text-spacing},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
height: cv.getVar("icon-dimensions");
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: color;
|
||||
width: cv.getVar("icon-dimensions");
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
height: cv.getVar("icon-dimensions-small");
|
||||
width: cv.getVar("icon-dimensions-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
height: cv.getVar("icon-dimensions-medium");
|
||||
width: cv.getVar("icon-dimensions-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
height: cv.getVar("icon-dimensions-large");
|
||||
width: cv.getVar("icon-dimensions-large");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon-text {
|
||||
align-items: flex-start;
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: cv.getVar("icon-text-spacing");
|
||||
line-height: cv.getVar("icon-dimensions");
|
||||
vertical-align: top;
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.#{iv.$class-prefix}icon-text {
|
||||
display: flex;
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$dimensions: 16 24 32 48 64 96 128 !default
|
||||
|
||||
.image
|
||||
display: block
|
||||
position: relative
|
||||
img
|
||||
display: block
|
||||
height: auto
|
||||
width: 100%
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
// Ratio
|
||||
&.is-square,
|
||||
&.is-1by1,
|
||||
&.is-5by4,
|
||||
&.is-4by3,
|
||||
&.is-3by2,
|
||||
&.is-5by3,
|
||||
&.is-16by9,
|
||||
&.is-2by1,
|
||||
&.is-3by1,
|
||||
&.is-4by5,
|
||||
&.is-3by4,
|
||||
&.is-2by3,
|
||||
&.is-3by5,
|
||||
&.is-9by16,
|
||||
&.is-1by2,
|
||||
&.is-1by3
|
||||
img,
|
||||
.has-ratio
|
||||
@extend %overlay
|
||||
height: 100%
|
||||
width: 100%
|
||||
&.is-square,
|
||||
&.is-1by1
|
||||
padding-top: 100%
|
||||
&.is-5by4
|
||||
padding-top: 80%
|
||||
&.is-4by3
|
||||
padding-top: 75%
|
||||
&.is-3by2
|
||||
padding-top: 66.6666%
|
||||
&.is-5by3
|
||||
padding-top: 60%
|
||||
&.is-16by9
|
||||
padding-top: 56.25%
|
||||
&.is-2by1
|
||||
padding-top: 50%
|
||||
&.is-3by1
|
||||
padding-top: 33.3333%
|
||||
&.is-4by5
|
||||
padding-top: 125%
|
||||
&.is-3by4
|
||||
padding-top: 133.3333%
|
||||
&.is-2by3
|
||||
padding-top: 150%
|
||||
&.is-3by5
|
||||
padding-top: 166.6666%
|
||||
&.is-9by16
|
||||
padding-top: 177.7777%
|
||||
&.is-1by2
|
||||
padding-top: 200%
|
||||
&.is-1by3
|
||||
padding-top: 300%
|
||||
// Sizes
|
||||
@each $dimension in $dimensions
|
||||
&.is-#{$dimension}x#{$dimension}
|
||||
height: $dimension * 1px
|
||||
width: $dimension * 1px
|
||||
62
sass/elements/image.scss
Normal file
62
sass/elements/image.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$dimensions: 16 24 32 48 64 96 128 !default;
|
||||
|
||||
.#{iv.$class-prefix}image {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Ratio
|
||||
&.#{iv.$class-prefix}is-square {
|
||||
img,
|
||||
.#{iv.$class-prefix}has-ratio {
|
||||
@include mx.overlay;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-square {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
@each $pair in iv.$aspect-ratios {
|
||||
$w: nth($pair, 1);
|
||||
$h: nth($pair, 2);
|
||||
|
||||
&.#{iv.$class-prefix}is-#{$w}by#{$h} {
|
||||
aspect-ratio: #{$w} / #{$h};
|
||||
|
||||
img,
|
||||
.#{iv.$class-prefix}has-ratio {
|
||||
@include mx.overlay;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@each $dimension in $dimensions {
|
||||
&.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} {
|
||||
height: $dimension * 1px;
|
||||
width: $dimension * 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
sass/elements/loader.scss
Normal file
15
sass/elements/loader.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
.#{iv.$class-prefix}loader {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid cv.getVar("border");
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
width: 1em;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$notification-background-color: $background !default
|
||||
$notification-code-background-color: $scheme-main !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
|
||||
|
||||
$notification-colors: $colors !default
|
||||
|
||||
.notification
|
||||
@extend %block
|
||||
background-color: $notification-background-color
|
||||
border-radius: $notification-radius
|
||||
position: relative
|
||||
+ltr
|
||||
padding: $notification-padding-ltr
|
||||
+rtl
|
||||
padding: $notification-padding-rtl
|
||||
a:not(.button):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
strong
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background: $notification-code-background-color
|
||||
pre code
|
||||
background: transparent
|
||||
& > .delete
|
||||
+ltr-position(0.5rem)
|
||||
position: absolute
|
||||
top: 0.5rem
|
||||
.title,
|
||||
.subtitle,
|
||||
.content
|
||||
color: currentColor
|
||||
// Colors
|
||||
@each $name, $pair in $notification-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// If light and dark colors are provided
|
||||
@if length($pair) >= 4
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
105
sass/elements/notification.scss
Normal file
105
sass/elements/notification.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$notification-code-background-color: cv.getVar("scheme-main") !default;
|
||||
$notification-radius: cv.getVar("radius") !default;
|
||||
$notification-padding: 1.375em 1.5em !default;
|
||||
|
||||
$notification-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}notification {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"notification-h": #{cv.getVar("scheme-h")},
|
||||
"notification-s": #{cv.getVar("scheme-s")},
|
||||
"notification-background-l": #{cv.getVar("background-l")},
|
||||
"notification-color-l": #{cv.getVar("text-strong-l")},
|
||||
"notification-code-background-color": #{$notification-code-background-color},
|
||||
"notification-radius": #{$notification-radius},
|
||||
"notification-padding": #{$notification-padding},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}notification {
|
||||
@extend %block;
|
||||
|
||||
background-color: hsl(
|
||||
cv.getVar("notification-h"),
|
||||
cv.getVar("notification-s"),
|
||||
cv.getVar("notification-background-l")
|
||||
);
|
||||
border-radius: cv.getVar("notification-radius");
|
||||
color: hsl(
|
||||
cv.getVar("notification-h"),
|
||||
cv.getVar("notification-s"),
|
||||
cv.getVar("notification-color-l")
|
||||
);
|
||||
padding: cv.getVar("notification-padding");
|
||||
position: relative;
|
||||
|
||||
a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
background: cv.getVar("notification-code-background-color");
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& > .#{iv.$class-prefix}delete {
|
||||
position: absolute;
|
||||
inset-inline-end: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}title,
|
||||
.#{iv.$class-prefix}subtitle,
|
||||
.#{iv.$class-prefix}content {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $notification-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"notification-h": #{cv.getVar($name, "", "-h")},
|
||||
"notification-s": #{cv.getVar($name, "", "-s")},
|
||||
"notification-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"notification-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
|
||||
&.#{iv.$class-prefix}is-light {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"notification-background-l": 90%,
|
||||
"notification-color-l": #{cv.getVar($name, "", "-light-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-dark {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"notification-background-l": 20%,
|
||||
"notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
.block
|
||||
@extend %block
|
||||
|
||||
.delete
|
||||
@extend %delete
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
letter-spacing: 1px
|
||||
margin-bottom: 5px
|
||||
text-transform: uppercase
|
||||
|
||||
.loader
|
||||
@extend %loader
|
||||
|
||||
.number
|
||||
align-items: center
|
||||
background-color: $background
|
||||
border-radius: $radius-rounded
|
||||
display: inline-flex
|
||||
font-size: $size-medium
|
||||
height: 2em
|
||||
justify-content: center
|
||||
margin-right: 1.5rem
|
||||
min-width: 2.5em
|
||||
padding: 0.25rem 0.5rem
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
@@ -1,73 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$progress-bar-background-color: $border-light !default
|
||||
$progress-value-background-color: $text !default
|
||||
$progress-border-radius: $radius-rounded !default
|
||||
|
||||
$progress-indeterminate-duration: 1.5s !default
|
||||
|
||||
$progress-colors: $colors !default
|
||||
|
||||
.progress
|
||||
@extend %block
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
border: none
|
||||
border-radius: $progress-border-radius
|
||||
display: block
|
||||
height: $size-normal
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
width: 100%
|
||||
&::-webkit-progress-bar
|
||||
background-color: $progress-bar-background-color
|
||||
&::-webkit-progress-value
|
||||
background-color: $progress-value-background-color
|
||||
&::-moz-progress-bar
|
||||
background-color: $progress-value-background-color
|
||||
&::-ms-fill
|
||||
background-color: $progress-value-background-color
|
||||
border: none
|
||||
// Colors
|
||||
@each $name, $pair in $progress-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&::-webkit-progress-value
|
||||
background-color: $color
|
||||
&::-moz-progress-bar
|
||||
background-color: $color
|
||||
&::-ms-fill
|
||||
background-color: $color
|
||||
&:indeterminate
|
||||
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
|
||||
|
||||
&:indeterminate
|
||||
animation-duration: $progress-indeterminate-duration
|
||||
animation-iteration-count: infinite
|
||||
animation-name: moveIndeterminate
|
||||
animation-timing-function: linear
|
||||
background-color: $progress-bar-background-color
|
||||
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
|
||||
background-position: top left
|
||||
background-repeat: no-repeat
|
||||
background-size: 150% 150%
|
||||
&::-webkit-progress-bar
|
||||
background-color: transparent
|
||||
&::-moz-progress-bar
|
||||
background-color: transparent
|
||||
&::-ms-fill
|
||||
animation-name: none
|
||||
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $size-small
|
||||
&.is-medium
|
||||
height: $size-medium
|
||||
&.is-large
|
||||
height: $size-large
|
||||
|
||||
@keyframes moveIndeterminate
|
||||
from
|
||||
background-position: 200% 0
|
||||
to
|
||||
background-position: -200% 0
|
||||
115
sass/elements/progress.scss
Normal file
115
sass/elements/progress.scss
Normal file
@@ -0,0 +1,115 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$progress-bar-background-color: cv.getVar("border-weak") !default;
|
||||
$progress-value-background-color: cv.getVar("text") !default;
|
||||
$progress-border-radius: cv.getVar("radius-rounded") !default;
|
||||
|
||||
$progress-indeterminate-duration: 1.5s !default;
|
||||
|
||||
$progress-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}progress {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"progress-border-radius": #{$progress-border-radius},
|
||||
"progress-bar-background-color": #{$progress-bar-background-color},
|
||||
"progress-value-background-color": #{$progress-value-background-color},
|
||||
"progress-indeterminate-duration": #{$progress-indeterminate-duration},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}progress {
|
||||
@extend %block;
|
||||
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: cv.getVar("progress-border-radius");
|
||||
display: block;
|
||||
height: cv.getVar("size-normal");
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: cv.getVar("progress-bar-background-color");
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: cv.getVar("progress-value-background-color");
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: cv.getVar("progress-value-background-color");
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
background-color: cv.getVar("progress-value-background-color");
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $progress-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-var(
|
||||
"progress-value-background-color",
|
||||
#{cv.getVar($name)}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
animation-duration: cv.getVar("progress-indeterminate-duration");
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: moveIndeterminate;
|
||||
animation-timing-function: linear;
|
||||
background-color: cv.getVar("progress-bar-background-color");
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
cv.getVar("progress-value-background-color") 30%,
|
||||
cv.getVar("progress-bar-background-color") 30%
|
||||
);
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 150% 150%;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
height: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
height: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
height: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveIndeterminate {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: (-200%) 0;
|
||||
}
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$table-color: $text-strong !default
|
||||
$table-background-color: $scheme-main !default
|
||||
|
||||
$table-cell-border: 1px solid $border !default
|
||||
$table-cell-border-width: 0 0 1px !default
|
||||
$table-cell-padding: 0.5em 0.75em !default
|
||||
$table-cell-heading-color: $text-strong !default
|
||||
$table-cell-text-align: left !default
|
||||
|
||||
$table-head-cell-border-width: 0 0 2px !default
|
||||
$table-head-cell-color: $text-strong !default
|
||||
$table-foot-cell-border-width: 2px 0 0 !default
|
||||
$table-foot-cell-color: $text-strong !default
|
||||
|
||||
$table-head-background-color: transparent !default
|
||||
$table-body-background-color: transparent !default
|
||||
$table-foot-background-color: transparent !default
|
||||
|
||||
$table-row-hover-background-color: $scheme-main-bis !default
|
||||
|
||||
$table-row-active-background-color: $primary !default
|
||||
$table-row-active-color: $primary-invert !default
|
||||
|
||||
$table-striped-row-even-background-color: $scheme-main-bis !default
|
||||
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
|
||||
|
||||
$table-colors: $colors !default
|
||||
|
||||
.table
|
||||
@extend %block
|
||||
background-color: $table-background-color
|
||||
color: $table-color
|
||||
td,
|
||||
th
|
||||
border: $table-cell-border
|
||||
border-width: $table-cell-border-width
|
||||
padding: $table-cell-padding
|
||||
vertical-align: top
|
||||
// Colors
|
||||
@each $name, $pair in $table-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
// Modifiers
|
||||
&.is-narrow
|
||||
white-space: nowrap
|
||||
width: 1%
|
||||
&.is-selected
|
||||
background-color: $table-row-active-background-color
|
||||
color: $table-row-active-color
|
||||
a,
|
||||
strong
|
||||
color: currentColor
|
||||
&.is-vcentered
|
||||
vertical-align: middle
|
||||
th
|
||||
color: $table-cell-heading-color
|
||||
&:not([align])
|
||||
text-align: $table-cell-text-align
|
||||
tr
|
||||
&.is-selected
|
||||
background-color: $table-row-active-background-color
|
||||
color: $table-row-active-color
|
||||
a,
|
||||
strong
|
||||
color: currentColor
|
||||
td,
|
||||
th
|
||||
border-color: $table-row-active-color
|
||||
color: currentColor
|
||||
thead
|
||||
background-color: $table-head-background-color
|
||||
td,
|
||||
th
|
||||
border-width: $table-head-cell-border-width
|
||||
color: $table-head-cell-color
|
||||
tfoot
|
||||
background-color: $table-foot-background-color
|
||||
td,
|
||||
th
|
||||
border-width: $table-foot-cell-border-width
|
||||
color: $table-foot-cell-color
|
||||
tbody
|
||||
background-color: $table-body-background-color
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 0
|
||||
// Modifiers
|
||||
&.is-bordered
|
||||
td,
|
||||
th
|
||||
border-width: 1px
|
||||
tr
|
||||
&:last-child
|
||||
td,
|
||||
th
|
||||
border-bottom-width: 1px
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
&.is-hoverable
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: $table-row-hover-background-color
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: $table-row-hover-background-color
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-hover-background-color
|
||||
&.is-narrow
|
||||
td,
|
||||
th
|
||||
padding: 0.25em 0.5em
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-background-color
|
||||
|
||||
.table-container
|
||||
@extend %block
|
||||
+overflow-touch
|
||||
overflow: auto
|
||||
overflow-y: hidden
|
||||
max-width: 100%
|
||||
261
sass/elements/table.scss
Normal file
261
sass/elements/table.scss
Normal file
@@ -0,0 +1,261 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$table-color: cv.getVar("text-strong") !default;
|
||||
$table-background-color: cv.getVar("scheme-main") !default;
|
||||
|
||||
$table-cell-border-color: cv.getVar("border") !default;
|
||||
$table-cell-border-style: solid !default;
|
||||
$table-cell-border-width: 0 0 1px !default;
|
||||
$table-cell-padding: 0.5em 0.75em !default;
|
||||
$table-cell-heading-color: cv.getVar("text-strong") !default;
|
||||
$table-cell-text-align: left !default;
|
||||
|
||||
$table-head-cell-border-width: 0 0 2px !default;
|
||||
$table-head-cell-color: cv.getVar("text-strong") !default;
|
||||
$table-foot-cell-border-width: 2px 0 0 !default;
|
||||
$table-foot-cell-color: cv.getVar("text-strong") !default;
|
||||
|
||||
$table-head-background-color: transparent !default;
|
||||
$table-body-background-color: transparent !default;
|
||||
$table-foot-background-color: transparent !default;
|
||||
|
||||
$table-row-hover-background-color: cv.getVar("scheme-main-bis") !default;
|
||||
|
||||
$table-row-active-background-color: cv.getVar("primary") !default;
|
||||
$table-row-active-color: cv.getVar("primary-invert") !default;
|
||||
|
||||
$table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default;
|
||||
$table-striped-row-even-hover-background-color: cv.getVar(
|
||||
"scheme-main-ter"
|
||||
) !default;
|
||||
|
||||
$table-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}table {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"table-color": #{$table-color},
|
||||
"table-background-color": #{$table-background-color},
|
||||
"table-cell-border-color": #{$table-cell-border-color},
|
||||
"table-cell-border-style": #{$table-cell-border-style},
|
||||
"table-cell-border-width": #{$table-cell-border-width},
|
||||
"table-cell-padding": #{$table-cell-padding},
|
||||
"table-cell-heading-color": #{$table-cell-heading-color},
|
||||
"table-cell-text-align": #{$table-cell-text-align},
|
||||
"table-head-cell-border-width": #{$table-head-cell-border-width},
|
||||
"table-head-cell-color": #{$table-head-cell-color},
|
||||
"table-foot-cell-border-width": #{$table-foot-cell-border-width},
|
||||
"table-foot-cell-color": #{$table-foot-cell-color},
|
||||
"table-head-background-color": #{$table-head-background-color},
|
||||
"table-body-background-color": #{$table-body-background-color},
|
||||
"table-foot-background-color": #{$table-foot-background-color},
|
||||
"table-row-hover-background-color": #{$table-row-hover-background-color},
|
||||
"table-row-active-background-color": #{$table-row-active-background-color},
|
||||
"table-row-active-color": #{$table-row-active-color},
|
||||
"table-striped-row-even-background-color": #{$table-striped-row-even-background-color},
|
||||
"table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}table {
|
||||
@extend %block;
|
||||
|
||||
background-color: cv.getVar("table-background-color");
|
||||
color: cv.getVar("table-color");
|
||||
|
||||
td,
|
||||
th {
|
||||
background-color: cv.getVar("table-cell-background-color");
|
||||
border-color: cv.getVar("table-cell-border-color");
|
||||
border-style: cv.getVar("table-cell-border-style");
|
||||
border-width: cv.getVar("table-cell-border-width");
|
||||
color: cv.getVar("table-color");
|
||||
padding: cv.getVar("table-cell-padding");
|
||||
vertical-align: top;
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $table-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"table-color": #{cv.getVar($name, "", "-invert")},
|
||||
"table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
|
||||
"table-cell-background-color": #{cv.getVar($name)},
|
||||
"table-cell-border-color": #{cv.getVar($name)},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-narrow {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
background-color: cv.getVar("table-row-active-background-color");
|
||||
color: cv.getVar("table-row-active-color");
|
||||
|
||||
a,
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-vcentered {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: cv.getVar("table-cell-heading-color");
|
||||
|
||||
&:not([align]) {
|
||||
text-align: cv.getVar("table-cell-text-align");
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
background-color: cv.getVar("table-row-active-background-color");
|
||||
color: cv.getVar("table-row-active-color");
|
||||
|
||||
a,
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-color: cv.getVar("table-row-active-color");
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $pair in $table-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"table-color": #{cv.getVar($name, "", "-invert")},
|
||||
"table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
|
||||
"table-cell-background-color": #{cv.getVar($name)},
|
||||
"table-cell-border-color": #{cv.getVar($name)},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: cv.getVar("table-head-background-color");
|
||||
|
||||
td,
|
||||
th {
|
||||
border-width: cv.getVar("table-head-cell-border-width");
|
||||
color: cv.getVar("table-head-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
background-color: cv.getVar("table-foot-background-color");
|
||||
|
||||
td,
|
||||
th {
|
||||
border-width: cv.getVar("table-foot-cell-border-width");
|
||||
color: cv.getVar("table-foot-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
background-color: cv.getVar("table-body-background-color");
|
||||
|
||||
tr {
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-bordered {
|
||||
td,
|
||||
th {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-hoverable {
|
||||
tbody {
|
||||
tr:not(.#{iv.$class-prefix}is-selected) {
|
||||
&:hover {
|
||||
background-color: cv.getVar("table-row-hover-background-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-striped {
|
||||
tbody {
|
||||
tr:not(.#{iv.$class-prefix}is-selected) {
|
||||
&:hover {
|
||||
background-color: cv.getVar("table-row-hover-background-color");
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: cv.getVar(
|
||||
"table-striped-row-even-hover-background-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-narrow {
|
||||
td,
|
||||
th {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-striped {
|
||||
tbody {
|
||||
tr:not(.#{iv.$class-prefix}is-selected) {
|
||||
&:nth-child(even) {
|
||||
background-color: cv.getVar(
|
||||
"table-striped-row-even-background-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}table-container {
|
||||
@extend %block;
|
||||
@include mx.overflow-touch;
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$tag-background-color: $background !default
|
||||
$tag-color: $text !default
|
||||
$tag-radius: $radius !default
|
||||
$tag-delete-margin: 1px !default
|
||||
|
||||
$tag-colors: $colors !default
|
||||
|
||||
.tags
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
.tag
|
||||
margin-bottom: 0.5rem
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", 0.5rem)
|
||||
&:last-child
|
||||
margin-bottom: -0.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
// Sizes
|
||||
&.are-medium
|
||||
.tag:not(.is-normal):not(.is-large)
|
||||
font-size: $size-normal
|
||||
&.are-large
|
||||
.tag:not(.is-normal):not(.is-medium)
|
||||
font-size: $size-medium
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
.tag
|
||||
margin-right: 0.25rem
|
||||
margin-left: 0.25rem
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.tag
|
||||
&:not(:first-child)
|
||||
margin-left: 0.5rem
|
||||
&:not(:last-child)
|
||||
margin-right: 0
|
||||
&.has-addons
|
||||
.tag
|
||||
+ltr-property("margin", 0)
|
||||
&:not(:first-child)
|
||||
+ltr-property("margin", 0, false)
|
||||
+ltr
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
+rtl
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
&:not(:last-child)
|
||||
+ltr
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
+rtl
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
|
||||
.tag:not(body)
|
||||
align-items: center
|
||||
background-color: $tag-background-color
|
||||
border-radius: $tag-radius
|
||||
color: $tag-color
|
||||
display: inline-flex
|
||||
font-size: $size-small
|
||||
height: 2em
|
||||
justify-content: center
|
||||
line-height: 1.5
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
white-space: nowrap
|
||||
.delete
|
||||
+ltr-property("margin", 0.25rem, false)
|
||||
+ltr-property("margin", -0.375rem)
|
||||
// Colors
|
||||
@each $name, $pair in $tag-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// If a light and dark colors are provided
|
||||
@if length($pair) > 3
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
// Sizes
|
||||
&.is-normal
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-normal
|
||||
&.is-large
|
||||
font-size: $size-medium
|
||||
.icon
|
||||
&:first-child:not(:last-child)
|
||||
+ltr-property("margin", -0.375em, false)
|
||||
+ltr-property("margin", 0.1875em)
|
||||
&:last-child:not(:first-child)
|
||||
+ltr-property("margin", 0.1875em, false)
|
||||
+ltr-property("margin", -0.375em)
|
||||
&:first-child:last-child
|
||||
+ltr-property("margin", -0.375em, false)
|
||||
+ltr-property("margin", -0.375em)
|
||||
// Modifiers
|
||||
&.is-delete
|
||||
+ltr-property("margin", $tag-delete-margin, false)
|
||||
padding: 0
|
||||
position: relative
|
||||
width: 2em
|
||||
&::before,
|
||||
&::after
|
||||
background-color: currentColor
|
||||
content: ""
|
||||
display: block
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&::before
|
||||
height: 1px
|
||||
width: 50%
|
||||
&::after
|
||||
height: 50%
|
||||
width: 1px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: darken($tag-background-color, 5%)
|
||||
&:active
|
||||
background-color: darken($tag-background-color, 10%)
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
|
||||
a.tag
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
219
sass/elements/tag.scss
Normal file
219
sass/elements/tag.scss
Normal file
@@ -0,0 +1,219 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$tag-h: cv.getVar("scheme-h");
|
||||
$tag-s: cv.getVar("scheme-s");
|
||||
$tag-background-l: cv.getVar("background-l");
|
||||
$tag-background-l-delta: 0%;
|
||||
$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$tag-active-background-l-delta: cv.getVar("active-background-l-delta");
|
||||
$tag-color-l: cv.getVar("text-l");
|
||||
$tag-radius: cv.getVar("radius") !default;
|
||||
$tag-delete-margin: 1px !default;
|
||||
|
||||
$tag-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}tags {
|
||||
@extend %block;
|
||||
|
||||
align-items: center;
|
||||
color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}are-medium {
|
||||
.#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
|
||||
.#{iv.$class-prefix}is-large
|
||||
) {
|
||||
font-size: cv.getVar("size-normal");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}are-large {
|
||||
.#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
|
||||
.#{iv.$class-prefix}is-medium
|
||||
) {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
gap: 0.25rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-addons {
|
||||
gap: 0;
|
||||
|
||||
.#{iv.$class-prefix}tag {
|
||||
&:not(:first-child) {
|
||||
border-start-start-radius: 0; // Top left
|
||||
border-end-start-radius: 0; // Top right
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-start-end-radius: 0; // Bottom left
|
||||
border-end-end-radius: 0; // Bottom right
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}tag {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-h": #{$tag-h},
|
||||
"tag-s": #{$tag-s},
|
||||
"tag-background-l": #{$tag-background-l},
|
||||
"tag-background-l-delta": #{$tag-background-l-delta},
|
||||
"tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
|
||||
"tag-active-background-l-delta": #{$tag-active-background-l-delta},
|
||||
"tag-color-l": #{$tag-color-l},
|
||||
"tag-radius": #{$tag-radius},
|
||||
"tag-delete-margin": #{$tag-delete-margin},
|
||||
)
|
||||
);
|
||||
|
||||
align-items: center;
|
||||
background-color: hsl(
|
||||
cv.getVar("tag-h"),
|
||||
cv.getVar("tag-s"),
|
||||
calc(
|
||||
#{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
|
||||
)
|
||||
);
|
||||
border-radius: $tag-radius;
|
||||
color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
|
||||
display: inline-flex;
|
||||
font-size: cv.getVar("size-small");
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
white-space: nowrap;
|
||||
|
||||
.#{iv.$class-prefix}delete {
|
||||
margin-inline-start: 0.25rem;
|
||||
margin-inline-end: -0.375rem;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $tag-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-h": #{cv.getVar($name, "", "-h")},
|
||||
"tag-s": #{cv.getVar($name, "", "-s")},
|
||||
"tag-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"tag-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
|
||||
&.#{iv.$class-prefix}is-light {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-background-l": #{cv.getVar("light-l")},
|
||||
"tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-normal {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-normal");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:first-child:not(:last-child) {
|
||||
margin-inline-start: -0.375em;
|
||||
margin-inline-end: 0.1875em;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
margin-inline-start: 0.1875em;
|
||||
margin-inline-end: -0.375em;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
margin-inline-start: -0.375em;
|
||||
margin-inline-end: -0.375em;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-delete {
|
||||
margin-inline-start: cv.getVar("tag-delete-margin");
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 2em;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: currentColor;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 1px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
}
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}tag,
|
||||
button.#{iv.$class-prefix}tag,
|
||||
.#{iv.$class-prefix}tag.is-hoverable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$title-color: $text-strong !default
|
||||
$title-family: false !default
|
||||
$title-size: $size-3 !default
|
||||
$title-weight: $weight-semibold !default
|
||||
$title-line-height: 1.125 !default
|
||||
$title-strong-color: inherit !default
|
||||
$title-strong-weight: inherit !default
|
||||
$title-sub-size: 0.75em !default
|
||||
$title-sup-size: 0.75em !default
|
||||
|
||||
$subtitle-color: $text !default
|
||||
$subtitle-family: false !default
|
||||
$subtitle-size: $size-5 !default
|
||||
$subtitle-weight: $weight-normal !default
|
||||
$subtitle-line-height: 1.25 !default
|
||||
$subtitle-strong-color: $text-strong !default
|
||||
$subtitle-strong-weight: $weight-semibold !default
|
||||
$subtitle-negative-margin: -1.25rem !default
|
||||
|
||||
.title,
|
||||
.subtitle
|
||||
@extend %block
|
||||
word-break: break-word
|
||||
em,
|
||||
span
|
||||
font-weight: inherit
|
||||
sub
|
||||
font-size: $title-sub-size
|
||||
sup
|
||||
font-size: $title-sup-size
|
||||
.tag
|
||||
vertical-align: middle
|
||||
|
||||
.title
|
||||
color: $title-color
|
||||
@if $title-family
|
||||
font-family: $title-family
|
||||
font-size: $title-size
|
||||
font-weight: $title-weight
|
||||
line-height: $title-line-height
|
||||
strong
|
||||
color: $title-strong-color
|
||||
font-weight: $title-strong-weight
|
||||
&:not(.is-spaced) + .subtitle
|
||||
margin-top: $subtitle-negative-margin
|
||||
// Sizes
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
|
||||
.subtitle
|
||||
color: $subtitle-color
|
||||
@if $subtitle-family
|
||||
font-family: $subtitle-family
|
||||
font-size: $subtitle-size
|
||||
font-weight: $subtitle-weight
|
||||
line-height: $subtitle-line-height
|
||||
strong
|
||||
color: $subtitle-strong-color
|
||||
font-weight: $subtitle-strong-weight
|
||||
&:not(.is-spaced) + .title
|
||||
margin-top: $subtitle-negative-margin
|
||||
// Sizes
|
||||
@each $size in $sizes
|
||||
$i: index($sizes, $size)
|
||||
&.is-#{$i}
|
||||
font-size: $size
|
||||
128
sass/elements/title.scss
Normal file
128
sass/elements/title.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$title-color: cv.getVar("text-strong") !default;
|
||||
$title-family: false !default;
|
||||
$title-size: cv.getVar("size-3") !default;
|
||||
$title-weight: cv.getVar("weight-extrabold") !default;
|
||||
$title-line-height: 1.125 !default;
|
||||
$title-strong-color: inherit !default;
|
||||
$title-strong-weight: inherit !default;
|
||||
$title-sub-size: 0.75em !default;
|
||||
$title-sup-size: 0.75em !default;
|
||||
|
||||
$subtitle-color: cv.getVar("text") !default;
|
||||
$subtitle-family: false !default;
|
||||
$subtitle-size: cv.getVar("size-5") !default;
|
||||
$subtitle-weight: cv.getVar("weight-normal") !default;
|
||||
$subtitle-line-height: 1.25 !default;
|
||||
$subtitle-strong-color: cv.getVar("text-strong") !default;
|
||||
$subtitle-strong-weight: cv.getVar("weight-semibold") !default;
|
||||
|
||||
.#{iv.$class-prefix}title,
|
||||
.#{iv.$class-prefix}subtitle {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"title-color": #{$title-color},
|
||||
"title-family": #{$title-family},
|
||||
"title-size": #{$title-size},
|
||||
"title-weight": #{$title-weight},
|
||||
"title-line-height": #{$title-line-height},
|
||||
"title-strong-color": #{$title-strong-color},
|
||||
"title-strong-weight": #{$title-strong-weight},
|
||||
"title-sub-size": #{$title-sub-size},
|
||||
"title-sup-size": #{$title-sup-size},
|
||||
"subtitle-color": #{$subtitle-color},
|
||||
"subtitle-family": #{$subtitle-family},
|
||||
"subtitle-size": #{$subtitle-size},
|
||||
"subtitle-weight": #{$subtitle-weight},
|
||||
"subtitle-line-height": #{$subtitle-line-height},
|
||||
"subtitle-strong-color": #{$subtitle-strong-color},
|
||||
"subtitle-strong-weight": #{$subtitle-strong-weight},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}title,
|
||||
.#{iv.$class-prefix}subtitle {
|
||||
@extend %block;
|
||||
word-break: break-word;
|
||||
|
||||
em,
|
||||
span {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: cv.getVar("title-sub-size");
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: cv.getVar("title-sup-size");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}tag {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}title {
|
||||
color: cv.getVar("title-color");
|
||||
font-size: cv.getVar("title-size");
|
||||
font-weight: cv.getVar("title-weight");
|
||||
line-height: cv.getVar("title-line-height");
|
||||
|
||||
@if $title-family {
|
||||
font-family: cv.getVar("title-family");
|
||||
}
|
||||
|
||||
strong {
|
||||
color: cv.getVar("title-strong-color");
|
||||
font-weight: cv.getVar("title-strong-weight");
|
||||
}
|
||||
|
||||
&:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@each $size in dv.$sizes {
|
||||
$i: index(dv.$sizes, $size);
|
||||
|
||||
&.#{iv.$class-prefix}is-#{$i} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}subtitle {
|
||||
color: cv.getVar("subtitle-color");
|
||||
font-size: cv.getVar("subtitle-size");
|
||||
font-weight: cv.getVar("subtitle-weight");
|
||||
line-height: cv.getVar("subtitle-line-height");
|
||||
|
||||
@if $subtitle-family {
|
||||
font-family: cv.getVar("subtitle-family");
|
||||
}
|
||||
|
||||
strong {
|
||||
color: cv.getVar("subtitle-strong-color");
|
||||
font-weight: cv.getVar("subtitle-strong-weight");
|
||||
}
|
||||
|
||||
&:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@each $size in dv.$sizes {
|
||||
$i: index(dv.$sizes, $size);
|
||||
|
||||
&.#{iv.$class-prefix}is-#{$i} {
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/* Bulma Form */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "shared"
|
||||
@import "input-textarea"
|
||||
@import "checkbox-radio"
|
||||
@import "select"
|
||||
@import "file"
|
||||
@import "tools"
|
||||
9
sass/form/_index.scss
Normal file
9
sass/form/_index.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
/* Bulma Form */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "shared";
|
||||
@forward "input-textarea";
|
||||
@forward "checkbox-radio";
|
||||
@forward "select";
|
||||
@forward "file";
|
||||
@forward "tools";
|
||||
@@ -1,22 +0,0 @@
|
||||
%checkbox-radio
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
line-height: 1.25
|
||||
position: relative
|
||||
input
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: $input-hover-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &,
|
||||
input[disabled]
|
||||
color: $input-disabled-color
|
||||
cursor: not-allowed
|
||||
|
||||
.checkbox
|
||||
@extend %checkbox-radio
|
||||
|
||||
.radio
|
||||
@extend %checkbox-radio
|
||||
& + .radio
|
||||
+ltr-property("margin", 0.5em, false)
|
||||
32
sass/form/checkbox-radio.scss
Normal file
32
sass/form/checkbox-radio.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@use "shared";
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
%checkbox-radio {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1.25;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] &,
|
||||
input[disabled] {
|
||||
color: shared.$input-disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}checkbox {
|
||||
@extend %checkbox-radio;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}radio {
|
||||
@extend %checkbox-radio;
|
||||
|
||||
& + .#{iv.$class-prefix}radio {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
@@ -1,184 +0,0 @@
|
||||
$file-border-color: $border !default
|
||||
$file-radius: $radius !default
|
||||
|
||||
$file-cta-background-color: $scheme-main-ter !default
|
||||
$file-cta-color: $text !default
|
||||
$file-cta-hover-color: $text-strong !default
|
||||
$file-cta-active-color: $text-strong !default
|
||||
|
||||
$file-name-border-color: $border !default
|
||||
$file-name-border-style: solid !default
|
||||
$file-name-border-width: 1px 1px 1px 0 !default
|
||||
$file-name-max-width: 16em !default
|
||||
|
||||
$file-colors: $form-colors !default
|
||||
|
||||
.file
|
||||
@extend %unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
position: relative
|
||||
// Colors
|
||||
@each $name, $pair in $file-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
.file-cta
|
||||
background-color: $color
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
.file-cta
|
||||
background-color: bulmaDarken($color, 2.5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
.file-cta
|
||||
border-color: transparent
|
||||
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
.file-cta
|
||||
background-color: bulmaDarken($color, 5%)
|
||||
border-color: transparent
|
||||
color: $color-invert
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-normal
|
||||
font-size: $size-normal
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 28px
|
||||
// Modifiers
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.file-name
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&.is-empty
|
||||
.file-cta
|
||||
border-radius: $file-radius
|
||||
.file-name
|
||||
display: none
|
||||
&.is-boxed
|
||||
.file-label
|
||||
flex-direction: column
|
||||
.file-cta
|
||||
flex-direction: column
|
||||
height: auto
|
||||
padding: 1em 3em
|
||||
.file-name
|
||||
border-width: 0 1px 1px
|
||||
.file-icon
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-small
|
||||
.file-icon .fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
.file-icon .fa
|
||||
font-size: 28px
|
||||
&.is-large
|
||||
.file-icon .fa
|
||||
font-size: 35px
|
||||
&.has-name
|
||||
.file-cta
|
||||
border-radius: $file-radius $file-radius 0 0
|
||||
.file-name
|
||||
border-radius: 0 0 $file-radius $file-radius
|
||||
border-width: 0 1px 1px
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-fullwidth
|
||||
.file-label
|
||||
width: 100%
|
||||
.file-name
|
||||
flex-grow: 1
|
||||
max-width: none
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
.file-cta
|
||||
border-radius: 0 $file-radius $file-radius 0
|
||||
.file-name
|
||||
border-radius: $file-radius 0 0 $file-radius
|
||||
border-width: 1px 0 1px 1px
|
||||
order: -1
|
||||
|
||||
.file-label
|
||||
align-items: stretch
|
||||
display: flex
|
||||
cursor: pointer
|
||||
justify-content: flex-start
|
||||
overflow: hidden
|
||||
position: relative
|
||||
&:hover
|
||||
.file-cta
|
||||
background-color: bulmaDarken($file-cta-background-color, 2.5%)
|
||||
color: $file-cta-hover-color
|
||||
.file-name
|
||||
border-color: bulmaDarken($file-name-border-color, 2.5%)
|
||||
&:active
|
||||
.file-cta
|
||||
background-color: bulmaDarken($file-cta-background-color, 5%)
|
||||
color: $file-cta-active-color
|
||||
.file-name
|
||||
border-color: bulmaDarken($file-name-border-color, 5%)
|
||||
|
||||
.file-input
|
||||
height: 100%
|
||||
left: 0
|
||||
opacity: 0
|
||||
outline: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.file-cta,
|
||||
.file-name
|
||||
@extend %control
|
||||
border-color: $file-border-color
|
||||
border-radius: $file-radius
|
||||
font-size: 1em
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
white-space: nowrap
|
||||
|
||||
.file-cta
|
||||
background-color: $file-cta-background-color
|
||||
color: $file-cta-color
|
||||
|
||||
.file-name
|
||||
border-color: $file-name-border-color
|
||||
border-style: $file-name-border-style
|
||||
border-width: $file-name-border-width
|
||||
display: block
|
||||
max-width: $file-name-max-width
|
||||
overflow: hidden
|
||||
text-align: inherit
|
||||
text-overflow: ellipsis
|
||||
|
||||
.file-icon
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 1em
|
||||
justify-content: center
|
||||
+ltr-property("margin", 0.5em)
|
||||
width: 1em
|
||||
.fa
|
||||
font-size: 14px
|
||||
330
sass/form/file.scss
Normal file
330
sass/form/file.scss
Normal file
@@ -0,0 +1,330 @@
|
||||
@use "shared";
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/controls";
|
||||
@use "../utilities/extends";
|
||||
|
||||
$file-radius: cv.getVar("radius") !default;
|
||||
|
||||
$file-h: cv.getVar("scheme-h");
|
||||
$file-s: cv.getVar("scheme-s");
|
||||
$file-background-l: cv.getVar("scheme-main-ter-l");
|
||||
$file-background-l-delta: 0%;
|
||||
$file-hover-background-l-delta: -5%;
|
||||
$file-active-background-l-delta: -10%;
|
||||
$file-border-l: cv.getVar("border-l");
|
||||
$file-border-l-delta: 0%;
|
||||
$file-hover-border-l-delta: -10%;
|
||||
$file-active-border-l-delta: -20%;
|
||||
$file-cta-color-l: cv.getVar("text-strong-l");
|
||||
$file-name-color-l: cv.getVar("text-strong-l");
|
||||
$file-color-l-delta: 0%;
|
||||
$file-hover-color-l-delta: -5%;
|
||||
$file-active-color-l-delta: -10%;
|
||||
|
||||
$file-cta-color: cv.getVar("text") !default;
|
||||
$file-cta-hover-color: cv.getVar("text-strong") !default;
|
||||
$file-cta-active-color: cv.getVar("text-strong") !default;
|
||||
|
||||
$file-name-border-color: cv.getVar("border") !default;
|
||||
$file-name-border-style: solid !default;
|
||||
$file-name-border-width: 1px 1px 1px 0 !default;
|
||||
$file-name-max-width: 16em !default;
|
||||
|
||||
$file-colors: shared.$form-colors !default;
|
||||
|
||||
.#{iv.$class-prefix}file {
|
||||
@extend %block;
|
||||
@extend %unselectable;
|
||||
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"file-radius": #{$file-radius},
|
||||
"file-name-border-color": #{$file-name-border-color},
|
||||
"file-name-border-style": #{$file-name-border-style},
|
||||
"file-name-border-width": #{$file-name-border-width},
|
||||
"file-name-max-width": #{$file-name-max-width},
|
||||
"file-h": #{$file-h},
|
||||
"file-s": #{$file-s},
|
||||
"file-background-l": #{$file-background-l},
|
||||
"file-background-l-delta": #{$file-background-l-delta},
|
||||
"file-hover-background-l-delta": #{$file-hover-background-l-delta},
|
||||
"file-active-background-l-delta": #{$file-active-background-l-delta},
|
||||
"file-border-l": #{$file-border-l},
|
||||
"file-border-l-delta": #{$file-border-l-delta},
|
||||
"file-hover-border-l-delta": #{$file-hover-border-l-delta},
|
||||
"file-active-border-l-delta": #{$file-active-border-l-delta},
|
||||
"file-cta-color-l": #{$file-cta-color-l},
|
||||
"file-name-color-l": #{$file-name-color-l},
|
||||
"file-color-l-delta": #{$file-color-l-delta},
|
||||
"file-hover-color-l-delta": #{$file-hover-color-l-delta},
|
||||
"file-active-color-l-delta": #{$file-active-color-l-delta},
|
||||
)
|
||||
);
|
||||
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $file-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"file-h": #{cv.getVar($name, "", "-h")},
|
||||
"file-s": #{cv.getVar($name, "", "-s")},
|
||||
"file-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"file-border-l": #{cv.getVar($name, "", "-l")},
|
||||
"file-cta-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-normal {
|
||||
font-size: cv.getVar("size-normal");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
|
||||
.#{iv.$class-prefix}file-icon {
|
||||
.#{iv.$class-prefix}fa {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
|
||||
.#{iv.$class-prefix}file-icon {
|
||||
.#{iv.$class-prefix}fa {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}has-name {
|
||||
.#{iv.$class-prefix}file-cta {
|
||||
border-end-end-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
border-end-start-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-empty {
|
||||
.#{iv.$class-prefix}file-cta {
|
||||
border-radius: cv.getVar("file-radius");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
.#{iv.$class-prefix}file-label {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-cta {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 1em 3em;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-icon {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
|
||||
.#{iv.$class-prefix}fa {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-name {
|
||||
.#{iv.$class-prefix}file-cta {
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
border-start-end-radius: cv.getVar("file-radius");
|
||||
border-start-start-radius: cv.getVar("file-radius");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
border-end-end-radius: cv.getVar("file-radius");
|
||||
border-end-start-radius: cv.getVar("file-radius");
|
||||
border-start-end-radius: 0;
|
||||
border-start-start-radius: 0;
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
.#{iv.$class-prefix}file-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
flex-grow: 1;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.#{iv.$class-prefix}file-cta {
|
||||
border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius");
|
||||
border-width: 1px 0 1px 1px;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-label {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")},
|
||||
"file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")},
|
||||
"file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"file-background-l-delta": #{cv.getVar("file-active-background-l-delta")},
|
||||
"file-border-l-delta": #{cv.getVar("file-active-border-l-delta")},
|
||||
"file-color-l-delta": #{cv.getVar("file-active-color-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-input {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-cta,
|
||||
.#{iv.$class-prefix}file-name {
|
||||
@extend %control;
|
||||
border-color: hsl(
|
||||
cv.getVar("file-h"),
|
||||
cv.getVar("file-s"),
|
||||
calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")})
|
||||
);
|
||||
border-radius: cv.getVar("file-radius");
|
||||
font-size: 1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-cta {
|
||||
background-color: hsl(
|
||||
cv.getVar("file-h"),
|
||||
cv.getVar("file-s"),
|
||||
calc(
|
||||
#{cv.getVar("file-background-l")} + #{cv.getVar(
|
||||
"file-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
color: hsl(
|
||||
cv.getVar("file-h"),
|
||||
cv.getVar("file-s"),
|
||||
calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")})
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-name {
|
||||
border-color: hsl(
|
||||
cv.getVar("file-h"),
|
||||
cv.getVar("file-s"),
|
||||
calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")})
|
||||
);
|
||||
border-style: cv.getVar("file-name-border-style");
|
||||
border-width: cv.getVar("file-name-border-width");
|
||||
color: hsl(
|
||||
cv.getVar("file-h"),
|
||||
cv.getVar("file-s"),
|
||||
calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")})
|
||||
);
|
||||
display: block;
|
||||
max-width: cv.getVar("file-name-max-width");
|
||||
overflow: hidden;
|
||||
text-align: inherit;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}file-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 1em;
|
||||
justify-content: center;
|
||||
margin-inline-end: 0.5em;
|
||||
width: 1em;
|
||||
|
||||
.#{iv.$class-prefix}fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
$textarea-padding: $control-padding-horizontal !default
|
||||
$textarea-max-height: 40em !default
|
||||
$textarea-min-height: 8em !default
|
||||
|
||||
$textarea-colors: $form-colors !default
|
||||
|
||||
%input-textarea
|
||||
@extend %input
|
||||
box-shadow: $input-shadow
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
&[readonly]
|
||||
box-shadow: none
|
||||
// Colors
|
||||
@each $name, $pair in $textarea-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-fullwidth
|
||||
display: block
|
||||
width: 100%
|
||||
&.is-inline
|
||||
display: inline
|
||||
width: auto
|
||||
|
||||
.input
|
||||
@extend %input-textarea
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
|
||||
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
|
||||
&.is-static
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
box-shadow: none
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.textarea
|
||||
@extend %input-textarea
|
||||
display: block
|
||||
max-width: 100%
|
||||
min-width: 100%
|
||||
padding: $textarea-padding
|
||||
resize: vertical
|
||||
&:not([rows])
|
||||
max-height: $textarea-max-height
|
||||
min-height: $textarea-min-height
|
||||
&[rows]
|
||||
height: initial
|
||||
// Modifiers
|
||||
&.has-fixed-size
|
||||
resize: none
|
||||
123
sass/form/input-textarea.scss
Normal file
123
sass/form/input-textarea.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
@use "shared";
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/controls";
|
||||
|
||||
$textarea-padding: cv.getVar("control-padding-horizontal") !default;
|
||||
$textarea-max-height: 40em !default;
|
||||
$textarea-min-height: 8em !default;
|
||||
|
||||
$textarea-colors: shared.$form-colors !default;
|
||||
|
||||
%input-textarea {
|
||||
@extend %input;
|
||||
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-h": #{cv.getVar("scheme-h")},
|
||||
"input-s": #{cv.getVar("scheme-s")},
|
||||
"input-border-style": solid,
|
||||
"input-border-width": 1px,
|
||||
"input-border-l": #{cv.getVar("border-l")},
|
||||
)
|
||||
);
|
||||
|
||||
box-shadow: shared.$input-shadow;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
&[readonly] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $textarea-colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-h": #{cv.getVar($name, "", "-h")},
|
||||
"input-s": #{cv.getVar($name, "", "-s")},
|
||||
"input-l": #{cv.getVar($name, "", "-l")},
|
||||
"input-focus-h": #{cv.getVar($name, "", "-h")},
|
||||
"input-focus-s": #{cv.getVar($name, "", "-s")},
|
||||
"input-focus-l": #{cv.getVar($name, "", "-l")},
|
||||
"input-border-l": #{cv.getVar($name, "", "-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
@include controls.control-small;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
@include controls.control-medium;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
@include controls.control-large;
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-inline {
|
||||
display: inline;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}input {
|
||||
@extend %input-textarea;
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em);
|
||||
padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-static {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}textarea {
|
||||
@extend %input-textarea;
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"textarea-padding": #{$textarea-padding},
|
||||
"textarea-max-height": #{$textarea-max-height},
|
||||
"textarea-min-height": #{$textarea-min-height},
|
||||
)
|
||||
);
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
padding: cv.getVar("textarea-padding");
|
||||
resize: vertical;
|
||||
|
||||
&:not([rows]) {
|
||||
max-height: cv.getVar("textarea-max-height");
|
||||
min-height: cv.getVar("textarea-min-height");
|
||||
}
|
||||
|
||||
&[rows] {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}has-fixed-size {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
$select-colors: $form-colors !default
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
max-width: 100%
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:not(.is-multiple)
|
||||
height: $input-height
|
||||
&:not(.is-multiple):not(.is-loading)
|
||||
&::after
|
||||
@extend %arrow
|
||||
border-color: $input-arrow
|
||||
+ltr-position(1.125em)
|
||||
z-index: 4
|
||||
&.is-rounded
|
||||
select
|
||||
border-radius: $radius-rounded
|
||||
+ltr-property("padding", 1em, false)
|
||||
select
|
||||
@extend %input
|
||||
cursor: pointer
|
||||
display: block
|
||||
font-size: 1em
|
||||
max-width: 100%
|
||||
outline: none
|
||||
&::-ms-expand
|
||||
display: none
|
||||
&[disabled]:hover,
|
||||
fieldset[disabled] &:hover
|
||||
border-color: $input-disabled-border-color
|
||||
&:not([multiple])
|
||||
+ltr-property("padding", 2.5em)
|
||||
&[multiple]
|
||||
height: auto
|
||||
padding: 0
|
||||
option
|
||||
padding: 0.5em 1em
|
||||
// States
|
||||
&:not(.is-multiple):not(.is-loading):hover
|
||||
&::after
|
||||
border-color: $input-hover-color
|
||||
// Colors
|
||||
@each $name, $pair in $select-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&:not(:hover)::after
|
||||
border-color: $color
|
||||
select
|
||||
border-color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: bulmaDarken($color, 5%)
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+control-small
|
||||
&.is-medium
|
||||
+control-medium
|
||||
&.is-large
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-disabled
|
||||
&::after
|
||||
border-color: $input-disabled-color !important
|
||||
opacity: 0.5
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
margin-top: 0
|
||||
position: absolute
|
||||
+ltr-position(0.625em)
|
||||
top: 0.625em
|
||||
transform: none
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
143
sass/form/select.scss
Normal file
143
sass/form/select.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
@use "shared";
|
||||
@use "../utilities/controls";
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
|
||||
$select-colors: shared.$form-colors !default;
|
||||
|
||||
.#{iv.$class-prefix}select {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-h": #{cv.getVar("scheme-h")},
|
||||
"input-s": #{cv.getVar("scheme-s")},
|
||||
"input-border-style": solid,
|
||||
"input-border-width": 1px,
|
||||
"input-border-l": #{cv.getVar("border-l")},
|
||||
)
|
||||
);
|
||||
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
&:not(.#{iv.$class-prefix}is-multiple) {
|
||||
height: shared.$input-height;
|
||||
}
|
||||
|
||||
&:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) {
|
||||
&::after {
|
||||
@extend %arrow;
|
||||
inset-inline-end: 1.125em;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
select {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@extend %input;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[disabled]:hover,
|
||||
fieldset[disabled] &:hover {
|
||||
border-color: shared.$input-disabled-border-color;
|
||||
}
|
||||
|
||||
&:not([multiple]) {
|
||||
padding-inline-end: 2.5em;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
|
||||
option {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in $select-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-h": #{cv.getVar($name, "", "-h")},
|
||||
"input-s": #{cv.getVar($name, "", "-s")},
|
||||
"input-l": #{cv.getVar($name, "", "-l")},
|
||||
"input-focus-h": #{cv.getVar($name, "", "-h")},
|
||||
"input-focus-s": #{cv.getVar($name, "", "-s")},
|
||||
"input-focus-l": #{cv.getVar($name, "", "-l")},
|
||||
"input-border-l": #{cv.getVar($name, "", "-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
@include controls.control-small;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
@include controls.control-medium;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
@include controls.control-large;
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-disabled {
|
||||
&::after {
|
||||
border-color: shared.$input-disabled-color !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
width: 100%;
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-loading {
|
||||
&::after {
|
||||
@extend %loader;
|
||||
inset-inline-end: 0.625em;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 0.625em;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-small:after {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium:after {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large:after {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
@import "../utilities/controls"
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$form-colors: $colors !default
|
||||
|
||||
$input-color: $text-strong !default
|
||||
$input-background-color: $scheme-main !default
|
||||
$input-border-color: $border !default
|
||||
$input-height: $control-height !default
|
||||
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
|
||||
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
|
||||
|
||||
$input-hover-color: $text-strong !default
|
||||
$input-hover-border-color: $border-hover !default
|
||||
|
||||
$input-focus-color: $text-strong !default
|
||||
$input-focus-border-color: $link !default
|
||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
||||
|
||||
$input-disabled-color: $text-light !default
|
||||
$input-disabled-background-color: $background !default
|
||||
$input-disabled-border-color: $background !default
|
||||
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
|
||||
|
||||
$input-arrow: $link !default
|
||||
|
||||
$input-icon-color: $border !default
|
||||
$input-icon-active-color: $text !default
|
||||
|
||||
$input-radius: $radius !default
|
||||
|
||||
=input
|
||||
@extend %control
|
||||
background-color: $input-background-color
|
||||
border-color: $input-border-color
|
||||
border-radius: $input-radius
|
||||
color: $input-color
|
||||
+placeholder
|
||||
color: $input-placeholder-color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $input-hover-border-color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $input-focus-border-color
|
||||
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $input-disabled-background-color
|
||||
border-color: $input-disabled-border-color
|
||||
box-shadow: none
|
||||
color: $input-disabled-color
|
||||
+placeholder
|
||||
color: $input-disabled-placeholder-color
|
||||
|
||||
%input
|
||||
+input
|
||||
172
sass/form/shared.scss
Normal file
172
sass/form/shared.scss
Normal file
@@ -0,0 +1,172 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$form-colors: dv.$colors !default;
|
||||
|
||||
$input-h: #{cv.getVar("scheme-h")} !default;
|
||||
$input-s: #{cv.getVar("scheme-s")} !default;
|
||||
$input-l: #{cv.getVar("scheme-main-l")} !default;
|
||||
$input-border-l: cv.getVar("border-l") !default;
|
||||
$input-border-l-delta: 0% !default;
|
||||
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
|
||||
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
|
||||
$input-color-l: cv.getVar("text-strong-l") !default;
|
||||
$input-background-l: cv.getVar("scheme-main-l") !default;
|
||||
$input-background-l-delta: 0% !default;
|
||||
$input-height: cv.getVar("control-height") !default;
|
||||
$input-shadow: inset 0 0.0625em 0.125em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.05
|
||||
) !default;
|
||||
$input-placeholder-color: hsla(
|
||||
#{cv.getVar("text-h")},
|
||||
#{cv.getVar("text-s")},
|
||||
#{cv.getVar("text-strong-l")},
|
||||
0.3
|
||||
) !default;
|
||||
|
||||
$input-focus-h: cv.getVar("focus-h") !default;
|
||||
$input-focus-s: cv.getVar("focus-s") !default;
|
||||
$input-focus-l: cv.getVar("focus-l") !default;
|
||||
$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
|
||||
$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
|
||||
|
||||
$input-disabled-color: cv.getVar("text-weak") !default;
|
||||
$input-disabled-background-color: cv.getVar("background") !default;
|
||||
$input-disabled-border-color: cv.getVar("background") !default;
|
||||
$input-disabled-placeholder-color: hsla(
|
||||
#{cv.getVar("text-h")},
|
||||
#{cv.getVar("text-s")},
|
||||
#{cv.getVar("text-weak-l")},
|
||||
0.3
|
||||
) !default;
|
||||
|
||||
$input-arrow: cv.getVar("link") !default;
|
||||
|
||||
$input-icon-color: cv.getVar("text-light") !default;
|
||||
$input-icon-hover-color: cv.getVar("text-weak") !default;
|
||||
$input-icon-focus-color: cv.getVar("link") !default;
|
||||
|
||||
$input-radius: cv.getVar("radius") !default;
|
||||
|
||||
.#{iv.$class-prefix}control,
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}textarea,
|
||||
.#{iv.$class-prefix}select select {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-h": #{$input-h},
|
||||
"input-s": #{$input-s},
|
||||
"input-l": #{$input-l},
|
||||
"input-border-l": #{$input-border-l},
|
||||
"input-border-l-delta": #{$input-border-l-delta},
|
||||
"input-hover-border-l-delta": #{$input-hover-border-l-delta},
|
||||
"input-active-border-l-delta": #{$input-active-border-l-delta},
|
||||
"input-focus-h": #{$input-focus-h},
|
||||
"input-focus-s": #{$input-focus-s},
|
||||
"input-focus-l": #{$input-focus-l},
|
||||
"input-focus-shadow-size": #{$input-focus-shadow-size},
|
||||
"input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
|
||||
"input-color-l": #{$input-color-l},
|
||||
"input-background-l": #{$input-background-l},
|
||||
"input-background-l-delta": #{$input-background-l-delta},
|
||||
"input-height": #{$input-height},
|
||||
"input-shadow": #{$input-shadow},
|
||||
"input-placeholder-color": #{$input-placeholder-color},
|
||||
"input-disabled-color": #{$input-disabled-color},
|
||||
"input-disabled-background-color": #{$input-disabled-background-color},
|
||||
"input-disabled-border-color": #{$input-disabled-border-color},
|
||||
"input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
|
||||
"input-arrow": #{$input-arrow},
|
||||
"input-icon-color": #{$input-icon-color},
|
||||
"input-icon-hover-color": #{$input-icon-hover-color},
|
||||
"input-icon-focus-color": #{$input-icon-focus-color},
|
||||
"input-radius": #{$input-radius},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin input {
|
||||
@extend %control;
|
||||
background-color: hsl(
|
||||
#{cv.getVar("input-h")},
|
||||
#{cv.getVar("input-s")},
|
||||
calc(
|
||||
#{cv.getVar("input-background-l")} + #{cv.getVar(
|
||||
"input-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-color: hsl(
|
||||
cv.getVar("input-h"),
|
||||
cv.getVar("input-s"),
|
||||
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
|
||||
);
|
||||
border-radius: cv.getVar("input-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("input-h")},
|
||||
#{cv.getVar("input-s")},
|
||||
#{cv.getVar("input-color-l")}
|
||||
);
|
||||
|
||||
@include mx.placeholder {
|
||||
color: cv.getVar("input-placeholder-color");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.#{iv.$class-prefix}is-hovered {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&.#{iv.$class-prefix}is-focused {
|
||||
border-color: hsl(
|
||||
cv.getVar("input-focus-h"),
|
||||
cv.getVar("input-focus-s"),
|
||||
cv.getVar("input-focus-l")
|
||||
);
|
||||
box-shadow: cv.getVar("input-focus-shadow-size")
|
||||
hsla(
|
||||
cv.getVar("input-focus-h"),
|
||||
cv.getVar("input-focus-s"),
|
||||
cv.getVar("input-focus-l"),
|
||||
cv.getVar("input-focus-shadow-alpha")
|
||||
);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: cv.getVar("input-disabled-background-color");
|
||||
border-color: cv.getVar("input-disabled-border-color");
|
||||
box-shadow: none;
|
||||
color: cv.getVar("input-disabled-color");
|
||||
|
||||
@include mx.placeholder {
|
||||
color: cv.getVar("input-disabled-placeholder-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%input {
|
||||
@include input;
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
$label-color: $text-strong !default
|
||||
$label-weight: $weight-bold !default
|
||||
|
||||
$help-size: $size-small !default
|
||||
|
||||
$label-colors: $form-colors !default
|
||||
|
||||
.label
|
||||
color: $label-color
|
||||
display: block
|
||||
font-size: $size-normal
|
||||
font-weight: $label-weight
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5em
|
||||
// Sizes
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
|
||||
.help
|
||||
display: block
|
||||
font-size: $help-size
|
||||
margin-top: 0.25rem
|
||||
@each $name, $pair in $label-colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.field
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
// Modifiers
|
||||
&.has-addons
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
.control
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", -1px)
|
||||
&:not(:first-child):not(:last-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
border-radius: 0
|
||||
&:first-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
+ltr
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
+rtl
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&:last-child:not(:only-child)
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
+ltr
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
+rtl
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.button,
|
||||
.input,
|
||||
.select select
|
||||
&:not([disabled])
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
z-index: 2
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
z-index: 3
|
||||
&:hover
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
justify-content: flex-end
|
||||
&.has-addons-fullwidth
|
||||
.control
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
&.is-grouped
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
& > .control
|
||||
flex-shrink: 0
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
+ltr-property("margin", 0.75rem)
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-grouped-centered
|
||||
justify-content: center
|
||||
&.is-grouped-right
|
||||
justify-content: flex-end
|
||||
&.is-grouped-multiline
|
||||
flex-wrap: wrap
|
||||
& > .control
|
||||
&:last-child,
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
&:last-child
|
||||
margin-bottom: -0.75rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
&.is-horizontal
|
||||
+tablet
|
||||
display: flex
|
||||
|
||||
.field-label
|
||||
.label
|
||||
font-size: inherit
|
||||
+mobile
|
||||
margin-bottom: 0.5rem
|
||||
+tablet
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
+ltr-property("margin", 1.5rem)
|
||||
text-align: right
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
padding-top: 0.375em
|
||||
&.is-normal
|
||||
padding-top: 0.375em
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
padding-top: 0.375em
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
padding-top: 0.375em
|
||||
|
||||
.field-body
|
||||
.field .field
|
||||
margin-bottom: 0
|
||||
+tablet
|
||||
display: flex
|
||||
flex-basis: 0
|
||||
flex-grow: 5
|
||||
flex-shrink: 1
|
||||
.field
|
||||
margin-bottom: 0
|
||||
& > .field
|
||||
flex-shrink: 1
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
&:not(:last-child)
|
||||
+ltr-property("margin", 0.75rem)
|
||||
|
||||
.control
|
||||
box-sizing: border-box
|
||||
clear: both
|
||||
font-size: $size-normal
|
||||
position: relative
|
||||
text-align: inherit
|
||||
// Modifiers
|
||||
&.has-icons-left,
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select
|
||||
&:focus
|
||||
& ~ .icon
|
||||
color: $input-icon-active-color
|
||||
&.is-small ~ .icon
|
||||
font-size: $size-small
|
||||
&.is-medium ~ .icon
|
||||
font-size: $size-medium
|
||||
&.is-large ~ .icon
|
||||
font-size: $size-large
|
||||
.icon
|
||||
color: $input-icon-color
|
||||
height: $input-height
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: $input-height
|
||||
z-index: 4
|
||||
&.has-icons-left
|
||||
.input,
|
||||
.select select
|
||||
padding-left: $input-height
|
||||
.icon.is-left
|
||||
left: 0
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select select
|
||||
padding-right: $input-height
|
||||
.icon.is-right
|
||||
right: 0
|
||||
&.is-loading
|
||||
&::after
|
||||
@extend %loader
|
||||
position: absolute !important
|
||||
+ltr-position(0.625em)
|
||||
top: 0.625em
|
||||
z-index: 4
|
||||
&.is-small:after
|
||||
font-size: $size-small
|
||||
&.is-medium:after
|
||||
font-size: $size-medium
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
341
sass/form/tools.scss
Normal file
341
sass/form/tools.scss
Normal file
@@ -0,0 +1,341 @@
|
||||
@use "shared";
|
||||
@use "../utilities/controls";
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$label-color: cv.getVar("text-strong") !default;
|
||||
$label-weight: cv.getVar("weight-semibold") !default;
|
||||
|
||||
$help-size: cv.getVar("size-small") !default;
|
||||
|
||||
$label-colors: shared.$form-colors !default;
|
||||
|
||||
.#{iv.$class-prefix}label {
|
||||
color: $label-color;
|
||||
display: block;
|
||||
font-size: cv.getVar("size-normal");
|
||||
font-weight: $label-weight;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}help {
|
||||
display: block;
|
||||
font-size: $help-size;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
@each $name, $pair in $label-colors {
|
||||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
color: hsl(
|
||||
#{cv.getVar($name, "", "-h")},
|
||||
#{cv.getVar($name, "", "-s")},
|
||||
#{cv.getVar($name, "", "-on-scheme-l")}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Containers
|
||||
|
||||
.#{iv.$class-prefix}field {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"block-spacing": 0.75rem,
|
||||
)
|
||||
);
|
||||
|
||||
@extend %block;
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}has-addons {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.#{iv.$class-prefix}control {
|
||||
&:not(:last-child) {
|
||||
margin-inline-end: -1px;
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
.#{iv.$class-prefix}button,
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select select {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child:not(:only-child) {
|
||||
.#{iv.$class-prefix}button,
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select select {
|
||||
// @include ltr {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:not(:only-child) {
|
||||
.#{iv.$class-prefix}button,
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select select {
|
||||
// @include ltr {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}button,
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select select {
|
||||
&:not([disabled]) {
|
||||
&:hover,
|
||||
&.#{iv.$class-prefix}is-hovered {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.#{iv.$class-prefix}is-focused,
|
||||
&:active,
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-expanded {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-addons-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-addons-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-addons-fullwidth {
|
||||
.#{iv.$class-prefix}control {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-grouped {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-start;
|
||||
|
||||
& > .#{iv.$class-prefix}control {
|
||||
flex-shrink: 0;
|
||||
|
||||
&.#{iv.$class-prefix}is-expanded {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-grouped-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-grouped-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-grouped-multiline {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-horizontal {
|
||||
@include mx.tablet {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}field-label {
|
||||
.#{iv.$class-prefix}label {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin-inline-end: 1.5rem;
|
||||
text-align: right;
|
||||
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-normal {
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
padding-top: 0.375em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}field-body {
|
||||
.#{iv.$class-prefix}field .#{iv.$class-prefix}field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 5;
|
||||
flex-shrink: 1;
|
||||
|
||||
.#{iv.$class-prefix}field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& > .#{iv.$class-prefix}field {
|
||||
flex-shrink: 1;
|
||||
|
||||
&:not(.#{iv.$class-prefix}is-narrow) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-inline-end: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}control {
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
font-size: cv.getVar("size-normal");
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}has-icons-left,
|
||||
&.#{iv.$class-prefix}has-icons-right {
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select {
|
||||
&:hover {
|
||||
& ~ .#{iv.$class-prefix}icon {
|
||||
color: cv.getVar("input-icon-hover-color");
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
& ~ .#{iv.$class-prefix}icon {
|
||||
color: cv.getVar("input-icon-focus-color");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
color: cv.getVar("input-icon-color");
|
||||
height: cv.getVar("input-height");
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: cv.getVar("input-height");
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-icons-left {
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select select {
|
||||
padding-left: cv.getVar("input-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-icons-right {
|
||||
.#{iv.$class-prefix}input,
|
||||
.#{iv.$class-prefix}select select {
|
||||
padding-right: cv.getVar("input-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-loading {
|
||||
&::after {
|
||||
@extend %loader;
|
||||
inset-inline-end: 0.75em;
|
||||
position: absolute !important;
|
||||
top: 0.75em;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-small:after {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium:after {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large:after {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
/* Bulma Grid */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "columns"
|
||||
@import "tiles"
|
||||
5
sass/grid/_index.scss
Normal file
5
sass/grid/_index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Bulma Grid */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "columns";
|
||||
@forward "grid";
|
||||
957
sass/grid/columns-v2.scss
Normal file
957
sass/grid/columns-v2.scss
Normal file
@@ -0,0 +1,957 @@
|
||||
@use "sass:math";
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$column-gap: 1.5rem !default;
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$column-gap},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}column {
|
||||
display: block;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-narrow {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-full {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-three-quarters {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-two-thirds {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-half {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-one-third {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-one-quarter {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-one-fifth {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-two-fifths {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-three-fifths {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-four-fifths {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-three-quarters {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-two-thirds {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-half {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-one-third {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-one-quarter {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-one-fifth {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-two-fifths {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-three-fifths {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-four-fifths {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-#{$i} {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-#{$i} {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
&.#{iv.$class-prefix}is-narrow-mobile {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-mobile {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-mobile {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-mobile {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-mobile {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-mobile {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-mobile {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-mobile {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-mobile {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-mobile {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-mobile {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-mobile {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-mobile {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-mobile {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-mobile {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-mobile {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-mobile {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-mobile {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-mobile {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-mobile {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-mobile {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-mobile {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
&.#{iv.$class-prefix}is-narrow,
|
||||
&.#{iv.$class-prefix}is-narrow-tablet {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full,
|
||||
&.#{iv.$class-prefix}is-full-tablet {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters,
|
||||
&.#{iv.$class-prefix}is-three-quarters-tablet {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds,
|
||||
&.#{iv.$class-prefix}is-two-thirds-tablet {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half,
|
||||
&.#{iv.$class-prefix}is-half-tablet {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third,
|
||||
&.#{iv.$class-prefix}is-one-third-tablet {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter,
|
||||
&.#{iv.$class-prefix}is-one-quarter-tablet {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth,
|
||||
&.#{iv.$class-prefix}is-one-fifth-tablet {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths,
|
||||
&.#{iv.$class-prefix}is-two-fifths-tablet {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths,
|
||||
&.#{iv.$class-prefix}is-three-fifths-tablet {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths,
|
||||
&.#{iv.$class-prefix}is-four-fifths-tablet {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters,
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-tablet {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds,
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-tablet {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half,
|
||||
&.#{iv.$class-prefix}is-offset-half-tablet {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third,
|
||||
&.#{iv.$class-prefix}is-offset-one-third-tablet {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter,
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-tablet {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth,
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-tablet {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths,
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-tablet {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths,
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-tablet {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths,
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-tablet {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i},
|
||||
&.#{iv.$class-prefix}is-#{$i}-tablet {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i},
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-tablet {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.touch {
|
||||
&.#{iv.$class-prefix}is-narrow-touch {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-touch {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-touch {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-touch {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-touch {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-touch {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-touch {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-touch {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-touch {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-touch {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-touch {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-touch {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-touch {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-touch {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-touch {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-touch {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-touch {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-touch {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-touch {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-touch {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-touch {
|
||||
flex: none;
|
||||
width: math.percentage(math.div($i, 12));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-touch {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
&.#{iv.$class-prefix}is-narrow-desktop {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-desktop {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-desktop {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-desktop {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-desktop {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-desktop {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-desktop {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-desktop {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-desktop {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-desktop {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-desktop {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-desktop {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-desktop {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-desktop {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-desktop {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-desktop {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-desktop {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-desktop {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-desktop {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-desktop {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-desktop {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-desktop {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
&.#{iv.$class-prefix}is-narrow-widescreen {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-widescreen {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-widescreen {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-widescreen {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-widescreen {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-widescreen {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-widescreen {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-widescreen {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-widescreen {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-widescreen {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-widescreen {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-widescreen {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-widescreen {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-widescreen {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-widescreen {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-widescreen {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-widescreen {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-widescreen {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-widescreen {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-widescreen {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-widescreen {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.fullhd {
|
||||
&.#{iv.$class-prefix}is-narrow-fullhd {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-fullhd {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-fullhd {
|
||||
flex: none;
|
||||
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-fullhd {
|
||||
flex: none;
|
||||
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-fullhd {
|
||||
flex: none;
|
||||
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-fullhd {
|
||||
flex: none;
|
||||
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-fullhd {
|
||||
flex: none;
|
||||
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-fullhd {
|
||||
flex: none;
|
||||
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-fullhd {
|
||||
flex: none;
|
||||
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-fullhd {
|
||||
flex: none;
|
||||
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-fullhd {
|
||||
flex: none;
|
||||
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-fullhd {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-fullhd {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-fullhd {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-fullhd {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-fullhd {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-fullhd {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-fullhd {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-fullhd {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-fullhd {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-fullhd {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-fullhd {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns {
|
||||
@extend %block;
|
||||
gap: cv.getVar("column-gap");
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-gapless {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-mobile {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-multiline {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-vcentered {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
@include mx.tablet {
|
||||
&:not(.#{iv.$class-prefix}is-desktop) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-desktop {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-variable {
|
||||
@for $i from 0 through 8 {
|
||||
&.#{iv.$class-prefix}is-#{$i} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
&.#{iv.$class-prefix}is-#{$i}-mobile {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
&.#{iv.$class-prefix}is-#{$i}-tablet {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet-only {
|
||||
&.#{iv.$class-prefix}is-#{$i}-tablet-only {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.touch {
|
||||
&.#{iv.$class-prefix}is-#{$i}-touch {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
&.#{iv.$class-prefix}is-#{$i}-desktop {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop-only {
|
||||
&.#{iv.$class-prefix}is-#{$i}-desktop-only {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
&.#{iv.$class-prefix}is-#{$i}-widescreen {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen-only {
|
||||
&.#{iv.$class-prefix}is-#{$i}-widescreen-only {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.fullhd {
|
||||
&.#{iv.$class-prefix}is-#{$i}-fullhd {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$i * 0.25rem},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,513 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$column-gap: 0.75rem !default
|
||||
|
||||
.column
|
||||
display: block
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
padding: $column-gap
|
||||
.columns.is-mobile > &.is-narrow
|
||||
flex: none
|
||||
width: unset
|
||||
.columns.is-mobile > &.is-full
|
||||
flex: none
|
||||
width: 100%
|
||||
.columns.is-mobile > &.is-three-quarters
|
||||
flex: none
|
||||
width: 75%
|
||||
.columns.is-mobile > &.is-two-thirds
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
.columns.is-mobile > &.is-half
|
||||
flex: none
|
||||
width: 50%
|
||||
.columns.is-mobile > &.is-one-third
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
.columns.is-mobile > &.is-one-quarter
|
||||
flex: none
|
||||
width: 25%
|
||||
.columns.is-mobile > &.is-one-fifth
|
||||
flex: none
|
||||
width: 20%
|
||||
.columns.is-mobile > &.is-two-fifths
|
||||
flex: none
|
||||
width: 40%
|
||||
.columns.is-mobile > &.is-three-fifths
|
||||
flex: none
|
||||
width: 60%
|
||||
.columns.is-mobile > &.is-four-fifths
|
||||
flex: none
|
||||
width: 80%
|
||||
.columns.is-mobile > &.is-offset-three-quarters
|
||||
+ltr-property("margin", 75%, false)
|
||||
.columns.is-mobile > &.is-offset-two-thirds
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
.columns.is-mobile > &.is-offset-half
|
||||
+ltr-property("margin", 50%, false)
|
||||
.columns.is-mobile > &.is-offset-one-third
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
.columns.is-mobile > &.is-offset-one-quarter
|
||||
+ltr-property("margin", 25%, false)
|
||||
.columns.is-mobile > &.is-offset-one-fifth
|
||||
+ltr-property("margin", 20%, false)
|
||||
.columns.is-mobile > &.is-offset-two-fifths
|
||||
+ltr-property("margin", 40%, false)
|
||||
.columns.is-mobile > &.is-offset-three-fifths
|
||||
+ltr-property("margin", 60%, false)
|
||||
.columns.is-mobile > &.is-offset-four-fifths
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
.columns.is-mobile > &.is-#{$i}
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
.columns.is-mobile > &.is-offset-#{$i}
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
+mobile
|
||||
&.is-narrow-mobile
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-mobile
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-mobile
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-mobile
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-mobile
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-mobile
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-mobile
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-mobile
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-mobile
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-mobile
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-mobile
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-mobile
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-mobile
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-mobile
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-mobile
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-mobile
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-mobile
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-mobile
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-mobile
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-mobile
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-mobile
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
&.is-offset-#{$i}-mobile
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
+tablet
|
||||
&.is-narrow,
|
||||
&.is-narrow-tablet
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full,
|
||||
&.is-full-tablet
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters,
|
||||
&.is-three-quarters-tablet
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds,
|
||||
&.is-two-thirds-tablet
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half,
|
||||
&.is-half-tablet
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third,
|
||||
&.is-one-third-tablet
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter,
|
||||
&.is-one-quarter-tablet
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth,
|
||||
&.is-one-fifth-tablet
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths,
|
||||
&.is-two-fifths-tablet
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths,
|
||||
&.is-three-fifths-tablet
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths,
|
||||
&.is-four-fifths-tablet
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters,
|
||||
&.is-offset-three-quarters-tablet
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds,
|
||||
&.is-offset-two-thirds-tablet
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half,
|
||||
&.is-offset-half-tablet
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third,
|
||||
&.is-offset-one-third-tablet
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter,
|
||||
&.is-offset-one-quarter-tablet
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth,
|
||||
&.is-offset-one-fifth-tablet
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths,
|
||||
&.is-offset-two-fifths-tablet
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths,
|
||||
&.is-offset-three-fifths-tablet
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths,
|
||||
&.is-offset-four-fifths-tablet
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i},
|
||||
&.is-#{$i}-tablet
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
&.is-offset-#{$i},
|
||||
&.is-offset-#{$i}-tablet
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
+touch
|
||||
&.is-narrow-touch
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-touch
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-touch
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-touch
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-touch
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-touch
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-touch
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-touch
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-touch
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-touch
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-touch
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-touch
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-touch
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-touch
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-touch
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-touch
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-touch
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-touch
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-touch
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-touch
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-touch
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
&.is-offset-#{$i}-touch
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
+desktop
|
||||
&.is-narrow-desktop
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-desktop
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-desktop
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-desktop
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-desktop
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-desktop
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-desktop
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-desktop
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-desktop
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-desktop
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-desktop
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-desktop
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-desktop
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-desktop
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-desktop
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-desktop
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-desktop
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-desktop
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-desktop
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-desktop
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-desktop
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
&.is-offset-#{$i}-desktop
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
+widescreen
|
||||
&.is-narrow-widescreen
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-widescreen
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-widescreen
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-widescreen
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-widescreen
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-widescreen
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-widescreen
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-widescreen
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-widescreen
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-widescreen
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-widescreen
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-widescreen
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-widescreen
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-widescreen
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-widescreen
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-widescreen
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-widescreen
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-widescreen
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-widescreen
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-widescreen
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-widescreen
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
&.is-offset-#{$i}-widescreen
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
+fullhd
|
||||
&.is-narrow-fullhd
|
||||
flex: none
|
||||
width: unset
|
||||
&.is-full-fullhd
|
||||
flex: none
|
||||
width: 100%
|
||||
&.is-three-quarters-fullhd
|
||||
flex: none
|
||||
width: 75%
|
||||
&.is-two-thirds-fullhd
|
||||
flex: none
|
||||
width: 66.6666%
|
||||
&.is-half-fullhd
|
||||
flex: none
|
||||
width: 50%
|
||||
&.is-one-third-fullhd
|
||||
flex: none
|
||||
width: 33.3333%
|
||||
&.is-one-quarter-fullhd
|
||||
flex: none
|
||||
width: 25%
|
||||
&.is-one-fifth-fullhd
|
||||
flex: none
|
||||
width: 20%
|
||||
&.is-two-fifths-fullhd
|
||||
flex: none
|
||||
width: 40%
|
||||
&.is-three-fifths-fullhd
|
||||
flex: none
|
||||
width: 60%
|
||||
&.is-four-fifths-fullhd
|
||||
flex: none
|
||||
width: 80%
|
||||
&.is-offset-three-quarters-fullhd
|
||||
+ltr-property("margin", 75%, false)
|
||||
&.is-offset-two-thirds-fullhd
|
||||
+ltr-property("margin", 66.6666%, false)
|
||||
&.is-offset-half-fullhd
|
||||
+ltr-property("margin", 50%, false)
|
||||
&.is-offset-one-third-fullhd
|
||||
+ltr-property("margin", 33.3333%, false)
|
||||
&.is-offset-one-quarter-fullhd
|
||||
+ltr-property("margin", 25%, false)
|
||||
&.is-offset-one-fifth-fullhd
|
||||
+ltr-property("margin", 20%, false)
|
||||
&.is-offset-two-fifths-fullhd
|
||||
+ltr-property("margin", 40%, false)
|
||||
&.is-offset-three-fifths-fullhd
|
||||
+ltr-property("margin", 60%, false)
|
||||
&.is-offset-four-fifths-fullhd
|
||||
+ltr-property("margin", 80%, false)
|
||||
@for $i from 0 through 12
|
||||
&.is-#{$i}-fullhd
|
||||
flex: none
|
||||
width: percentage(divide($i, 12))
|
||||
&.is-offset-#{$i}-fullhd
|
||||
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||
|
||||
.columns
|
||||
+ltr-property("margin", (-$column-gap), false)
|
||||
+ltr-property("margin", (-$column-gap))
|
||||
margin-top: (-$column-gap)
|
||||
&:last-child
|
||||
margin-bottom: (-$column-gap)
|
||||
&:not(:last-child)
|
||||
margin-bottom: calc(1.5rem - #{$column-gap})
|
||||
// Modifiers
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-gapless
|
||||
+ltr-property("margin", 0, false)
|
||||
+ltr-property("margin", 0)
|
||||
margin-top: 0
|
||||
& > .column
|
||||
margin: 0
|
||||
padding: 0 !important
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
&.is-mobile
|
||||
display: flex
|
||||
&.is-multiline
|
||||
flex-wrap: wrap
|
||||
&.is-vcentered
|
||||
align-items: center
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-desktop)
|
||||
display: flex
|
||||
+desktop
|
||||
// Modifiers
|
||||
&.is-desktop
|
||||
display: flex
|
||||
|
||||
@if $variable-columns
|
||||
.columns.is-variable
|
||||
--columnGap: 0.75rem
|
||||
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
|
||||
+ltr-property("margin", calc(-1 * var(--columnGap)))
|
||||
> .column
|
||||
padding-left: var(--columnGap)
|
||||
padding-right: var(--columnGap)
|
||||
@for $i from 0 through 8
|
||||
&.is-#{$i}
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+mobile
|
||||
&.is-#{$i}-mobile
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+tablet
|
||||
&.is-#{$i}-tablet
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+tablet-only
|
||||
&.is-#{$i}-tablet-only
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+touch
|
||||
&.is-#{$i}-touch
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+desktop
|
||||
&.is-#{$i}-desktop
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+desktop-only
|
||||
&.is-#{$i}-desktop-only
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+widescreen
|
||||
&.is-#{$i}-widescreen
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+widescreen-only
|
||||
&.is-#{$i}-widescreen-only
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
+fullhd
|
||||
&.is-#{$i}-fullhd
|
||||
--columnGap: #{$i * 0.25rem}
|
||||
877
sass/grid/columns.scss
Normal file
877
sass/grid/columns.scss
Normal file
@@ -0,0 +1,877 @@
|
||||
@use "sass:math";
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$column-gap: 0.75rem !default;
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"column-gap": #{$column-gap},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}column {
|
||||
display: block;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: $column-gap;
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-narrow {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-full {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-three-quarters {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-two-thirds {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-half {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-one-third {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-one-quarter {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-one-fifth {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-two-fifths {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-three-fifths {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-four-fifths {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-three-quarters {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-two-thirds {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-half {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-one-third {
|
||||
margin-inline-start: 0.3333%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-one-quarter {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-one-fifth {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-two-fifths {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-three-fifths {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-four-fifths {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-#{$i} {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
|
||||
> &.#{iv.$class-prefix}is-offset-#{$i} {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
&.#{iv.$class-prefix}is-narrow-mobile {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-mobile {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-mobile {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-mobile {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-mobile {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-mobile {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-mobile {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-mobile {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-mobile {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-mobile {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-mobile {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-mobile {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-mobile {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-mobile {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-mobile {
|
||||
margin-inline-start: 0.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-mobile {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-mobile {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-mobile {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-mobile {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-mobile {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-mobile {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-mobile {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
&.#{iv.$class-prefix}is-narrow,
|
||||
&.#{iv.$class-prefix}is-narrow-tablet {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full,
|
||||
&.#{iv.$class-prefix}is-full-tablet {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters,
|
||||
&.#{iv.$class-prefix}is-three-quarters-tablet {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds,
|
||||
&.#{iv.$class-prefix}is-two-thirds-tablet {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half,
|
||||
&.#{iv.$class-prefix}is-half-tablet {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third,
|
||||
&.#{iv.$class-prefix}is-one-third-tablet {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter,
|
||||
&.#{iv.$class-prefix}is-one-quarter-tablet {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth,
|
||||
&.#{iv.$class-prefix}is-one-fifth-tablet {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths,
|
||||
&.#{iv.$class-prefix}is-two-fifths-tablet {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths,
|
||||
&.#{iv.$class-prefix}is-three-fifths-tablet {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths,
|
||||
&.#{iv.$class-prefix}is-four-fifths-tablet {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters,
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-tablet {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds,
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-tablet {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half,
|
||||
&.#{iv.$class-prefix}is-offset-half-tablet {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third,
|
||||
&.#{iv.$class-prefix}is-offset-one-third-tablet {
|
||||
margin-inline-start: 0.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter,
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-tablet {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth,
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-tablet {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths,
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-tablet {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths,
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-tablet {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths,
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-tablet {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i},
|
||||
&.#{iv.$class-prefix}is-#{$i}-tablet {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i},
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-tablet {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.touch {
|
||||
&.#{iv.$class-prefix}is-narrow-touch {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-touch {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-touch {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-touch {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-touch {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-touch {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-touch {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-touch {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-touch {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-touch {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-touch {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-touch {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-touch {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-touch {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-touch {
|
||||
margin-inline-start: 0.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-touch {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-touch {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-touch {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-touch {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-touch {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-touch {
|
||||
flex: none;
|
||||
width: math.percentage(math.div($i, 12));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-touch {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
&.#{iv.$class-prefix}is-narrow-desktop {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-desktop {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-desktop {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-desktop {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-desktop {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-desktop {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-desktop {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-desktop {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-desktop {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-desktop {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-desktop {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-desktop {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-desktop {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-desktop {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-desktop {
|
||||
margin-inline-start: 0.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-desktop {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-desktop {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-desktop {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-desktop {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-desktop {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-desktop {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-desktop {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
&.#{iv.$class-prefix}is-narrow-widescreen {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-widescreen {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-widescreen {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-widescreen {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-widescreen {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-widescreen {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-widescreen {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-widescreen {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-widescreen {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-widescreen {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-widescreen {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-widescreen {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-widescreen {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-widescreen {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-widescreen {
|
||||
margin-inline-start: 0.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-widescreen {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-widescreen {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-widescreen {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-widescreen {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-widescreen {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-widescreen {
|
||||
flex: none;
|
||||
width: calc(
|
||||
math.percentage(math.div($i, 12)) - calc(
|
||||
#{cv.getVar("column-gap")} / 2
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.fullhd {
|
||||
&.#{iv.$class-prefix}is-narrow-fullhd {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-full-fullhd {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-quarters-fullhd {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-thirds-fullhd {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-half-fullhd {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-third-fullhd {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-quarter-fullhd {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-one-fifth-fullhd {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-two-fifths-fullhd {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-three-fifths-fullhd {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-four-fifths-fullhd {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-quarters-fullhd {
|
||||
margin-inline-start: 75%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-thirds-fullhd {
|
||||
margin-inline-start: 66.6666%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-half-fullhd {
|
||||
margin-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-third-fullhd {
|
||||
margin-inline-start: 33.3333%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-quarter-fullhd {
|
||||
margin-inline-start: 25%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-one-fifth-fullhd {
|
||||
margin-inline-start: 20%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-two-fifths-fullhd {
|
||||
margin-inline-start: 40%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-three-fifths-fullhd {
|
||||
margin-inline-start: 60%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-four-fifths-fullhd {
|
||||
margin-inline-start: 80%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
&.#{iv.$class-prefix}is-#{$i}-fullhd {
|
||||
flex: none;
|
||||
width: math.percentage(math.div($i, 12));
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-offset-#{$i}-fullhd {
|
||||
margin-inline-start: math.percentage(math.div($i, 12));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}columns {
|
||||
margin-inline-start: calc(-1 * #{cv.getVar("column-gap")});
|
||||
margin-inline-end: calc(-1 * #{cv.getVar("column-gap")});
|
||||
margin-top: calc(-1 * #{cv.getVar("column-gap")});
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: calc(-1 * #{cv.getVar("column-gap")});
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: calc(1.5rem - #{$column-gap});
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-gapless {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
& > .#{iv.$class-prefix}column {
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-mobile {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-multiline {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-vcentered {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
@include mx.tablet {
|
||||
&:not(.#{iv.$class-prefix}is-desktop) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-desktop {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
209
sass/grid/grid.scss
Normal file
209
sass/grid/grid.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$max-column-count: 12;
|
||||
$grip-gap: 0.75rem;
|
||||
$column-min-base: 1.5rem;
|
||||
|
||||
@mixin fixed-grid-properties($suffix: "") {
|
||||
@for $i from 1 through $max-column-count {
|
||||
&.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} {
|
||||
.#{iv.$class-prefix}grid {
|
||||
@include cv.register-var("grid-column-count", #{$i});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$grid-container-name: bulma-fixed-grid;
|
||||
|
||||
.#{iv.$class-prefix}fixed-grid {
|
||||
@extend %block;
|
||||
container-name: $grid-container-name;
|
||||
container-type: inline-size;
|
||||
|
||||
.#{iv.$class-prefix}grid {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1),
|
||||
"grid-column-count": 2,
|
||||
)
|
||||
);
|
||||
|
||||
grid-template-columns: repeat(cv.getVar("grid-column-count"), 1fr);
|
||||
}
|
||||
|
||||
@include fixed-grid-properties;
|
||||
|
||||
@include mx.container-until($grid-container-name, iv.$tablet) {
|
||||
@include fixed-grid-properties("-mobile");
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$tablet) {
|
||||
@include fixed-grid-properties("-tablet");
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$desktop) {
|
||||
@include fixed-grid-properties("-desktop");
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$widescreen) {
|
||||
@include fixed-grid-properties("-widescreen");
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$fullhd) {
|
||||
@include fixed-grid-properties("-fullhd");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-auto-count {
|
||||
.#{iv.$class-prefix}grid {
|
||||
@include mx.container-until($grid-container-name, iv.$tablet) {
|
||||
@include cv.register-var("grid-column-count", 2);
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$tablet) {
|
||||
@include cv.register-var("grid-column-count", 4);
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$desktop) {
|
||||
@include cv.register-var("grid-column-count", 8);
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$widescreen) {
|
||||
@include cv.register-var("grid-column-count", 12);
|
||||
}
|
||||
|
||||
@include mx.container-from($grid-container-name, iv.$fullhd) {
|
||||
@include cv.register-var("grid-column-count", 16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}grid {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"grid-gap": $grip-gap,
|
||||
"grid-column-min": 9rem,
|
||||
"grid-cell-column-span": 1,
|
||||
"grid-cell-row-span": 1,
|
||||
)
|
||||
);
|
||||
|
||||
@extend %block;
|
||||
display: grid;
|
||||
gap: cv.getVar("grid-gap");
|
||||
column-gap: #{cv.getVarWithBackup("grid-column-gap", "grid-gap")};
|
||||
row-gap: #{cv.getVarWithBackup("grid-row-gap", "grid-gap")};
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(#{cv.getVar("grid-column-min")}, 1fr)
|
||||
);
|
||||
grid-template-rows: auto;
|
||||
|
||||
&.is-auto-fill {
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(#{cv.getVar("grid-column-min")}, 1fr)
|
||||
);
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
&.#{iv.$class-prefix}is-col-min-#{$i} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"grid-column-min": #{$column-min-base * $i},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cell-properties($suffix: "") {
|
||||
@for $i from 1 through $max-column-count {
|
||||
$name: $i + $suffix;
|
||||
|
||||
&.#{iv.$class-prefix}is-col-start-#{$name} {
|
||||
@include cv.register-var("grid-cell-column-start", #{$i});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-col-end-#{$name} {
|
||||
@include cv.register-var("grid-cell-column-end", #{$i});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-col-from-end-#{$name} {
|
||||
@include cv.register-var("grid-cell-column-start", #{$i * -1});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-col-span-#{$name} {
|
||||
@include cv.register-var("grid-cell-column-span", #{$i});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-row-start-#{$name} {
|
||||
@include cv.register-var("grid-cell-row-start", #{$i});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-row-end-#{$name} {
|
||||
@include cv.register-var("grid-cell-row-end", #{$i});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-row-from-end-#{$name} {
|
||||
@include cv.register-var("grid-cell-row-start", #{$i * -1});
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-row-span-#{$name} {
|
||||
@include cv.register-var("grid-cell-row-span", #{$i});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}cell {
|
||||
grid-column-end: span cv.getVar("grid-cell-column-span");
|
||||
grid-column-start: cv.getVar("grid-cell-column-start");
|
||||
grid-row-end: span cv.getVar("grid-cell-row-span");
|
||||
grid-row-start: cv.getVar("grid-cell-row-start");
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-col-start-end {
|
||||
@include cv.register-var("grid-cell-column-start", -1);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-row-start-end {
|
||||
@include cv.register-var("grid-cell-row-start", -1);
|
||||
}
|
||||
|
||||
@include cell-properties;
|
||||
@include mx.mobile {
|
||||
@include cell-properties("-mobile");
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
@include cell-properties("-tablet");
|
||||
}
|
||||
|
||||
@include mx.tablet-only {
|
||||
@include cell-properties("-tablet-only");
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
@include cell-properties("-desktop");
|
||||
}
|
||||
|
||||
@include mx.desktop-only {
|
||||
@include cell-properties("-desktop-only");
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
@include cell-properties("-widescreen");
|
||||
}
|
||||
|
||||
@include mx.widescreen-only {
|
||||
@include cell-properties("-widescreen-only");
|
||||
}
|
||||
|
||||
@include mx.fullhd {
|
||||
@include cell-properties("-fullhd");
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
$tile-spacing: 0.75rem !default
|
||||
|
||||
.tile
|
||||
align-items: stretch
|
||||
display: block
|
||||
flex-basis: 0
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
min-height: min-content
|
||||
// Modifiers
|
||||
&.is-ancestor
|
||||
margin-left: $tile-spacing * -1
|
||||
margin-right: $tile-spacing * -1
|
||||
margin-top: $tile-spacing * -1
|
||||
&:last-child
|
||||
margin-bottom: $tile-spacing * -1
|
||||
&:not(:last-child)
|
||||
margin-bottom: $tile-spacing
|
||||
&.is-child
|
||||
margin: 0 !important
|
||||
&.is-parent
|
||||
padding: $tile-spacing
|
||||
&.is-vertical
|
||||
flex-direction: column
|
||||
& > .tile.is-child:not(:last-child)
|
||||
margin-bottom: 1.5rem !important
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(.is-child)
|
||||
display: flex
|
||||
@for $i from 1 through 12
|
||||
&.is-#{$i}
|
||||
flex: none
|
||||
width: (divide($i, 12)) * 100%
|
||||
@@ -1,12 +0,0 @@
|
||||
/* Bulma Helpers */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "color"
|
||||
@import "flexbox"
|
||||
@import "float"
|
||||
@import "other"
|
||||
@import "overflow"
|
||||
@import "position"
|
||||
@import "spacing"
|
||||
@import "typography"
|
||||
@import "visibility"
|
||||
15
sass/helpers/_index.scss
Normal file
15
sass/helpers/_index.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
/* Bulma Helpers */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "aspect-ratio";
|
||||
@forward "border";
|
||||
@forward "color";
|
||||
@forward "flexbox";
|
||||
@forward "float";
|
||||
@forward "gap";
|
||||
@forward "overflow";
|
||||
@forward "position";
|
||||
@forward "spacing";
|
||||
@forward "typography";
|
||||
@forward "visibility";
|
||||
@forward "other";
|
||||
10
sass/helpers/aspect-ratio.scss
Normal file
10
sass/helpers/aspect-ratio.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
@each $pair in iv.$aspect-ratios {
|
||||
$w: nth($pair, 1);
|
||||
$h: nth($pair, 2);
|
||||
|
||||
.#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
|
||||
aspect-ratio: #{$w} / #{$h};
|
||||
}
|
||||
}
|
||||
15
sass/helpers/border.scss
Normal file
15
sass/helpers/border.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
$radii: (
|
||||
"small": "radius-small",
|
||||
"normal": "radius",
|
||||
"large": "radius-large",
|
||||
"rounded": "radius-rounded",
|
||||
);
|
||||
|
||||
@each $name, $var in $radii {
|
||||
.#{iv.$helpers-has-prefix}radius-#{$name} {
|
||||
border-radius: cv.getVar($var);
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
@import "../utilities/derived-variables"
|
||||
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
.has-text-#{$name}
|
||||
color: $color !important
|
||||
a.has-text-#{$name}
|
||||
&:hover,
|
||||
&:focus
|
||||
color: bulmaDarken($color, 10%) !important
|
||||
.has-background-#{$name}
|
||||
background-color: $color !important
|
||||
@if length($pair) >= 4
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
// Light
|
||||
.has-text-#{$name}-light
|
||||
color: $color-light !important
|
||||
a.has-text-#{$name}-light
|
||||
&:hover,
|
||||
&:focus
|
||||
color: bulmaDarken($color-light, 10%) !important
|
||||
.has-background-#{$name}-light
|
||||
background-color: $color-light !important
|
||||
// Dark
|
||||
.has-text-#{$name}-dark
|
||||
color: $color-dark !important
|
||||
a.has-text-#{$name}-dark
|
||||
&:hover,
|
||||
&:focus
|
||||
color: bulmaLighten($color-dark, 10%) !important
|
||||
.has-background-#{$name}-dark
|
||||
background-color: $color-dark !important
|
||||
|
||||
@each $name, $shade in $shades
|
||||
.has-text-#{$name}
|
||||
color: $shade !important
|
||||
.has-background-#{$name}
|
||||
background-color: $shade !important
|
||||
364
sass/helpers/color.scss
Normal file
364
sass/helpers/color.scss
Normal file
@@ -0,0 +1,364 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
$digits: (
|
||||
"00",
|
||||
"05",
|
||||
"10",
|
||||
"15",
|
||||
"20",
|
||||
"25",
|
||||
"30",
|
||||
"35",
|
||||
"40",
|
||||
"45",
|
||||
"50",
|
||||
"55",
|
||||
"60",
|
||||
"65",
|
||||
"70",
|
||||
"75",
|
||||
"80",
|
||||
"85",
|
||||
"90",
|
||||
"95",
|
||||
"100"
|
||||
);
|
||||
|
||||
.#{iv.$helpers-has-prefix}background {
|
||||
background-color: cv.getVar("background");
|
||||
}
|
||||
|
||||
@each $name, $color in dv.$colors {
|
||||
$background: hsl(
|
||||
#{cv.getVar($name, "", "-h")},
|
||||
#{cv.getVar($name, "", "-s")},
|
||||
calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
|
||||
);
|
||||
|
||||
$color: hsl(
|
||||
#{cv.getVar($name, "", "-h")},
|
||||
#{cv.getVar($name, "", "-s")},
|
||||
calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
|
||||
);
|
||||
|
||||
[class*="#{iv.$helpers-prefix}color-#{$name}"],
|
||||
[class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-l")},
|
||||
"color-l-delta": 0%,
|
||||
)
|
||||
);
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
[class*="#{iv.$helpers-prefix}background-#{$name}"],
|
||||
[class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-l")},
|
||||
"background-l-delta": 0%,
|
||||
)
|
||||
);
|
||||
background-color: $background !important;
|
||||
}
|
||||
|
||||
// Invert
|
||||
.#{iv.$helpers-prefix}color-#{$name}-invert,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-invert,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// On Scheme
|
||||
.#{iv.$helpers-prefix}color-#{$name}-on-scheme,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-on-scheme-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-on-scheme,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-on-scheme-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Light
|
||||
.#{iv.$helpers-prefix}color-#{$name}-light,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-light {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-light-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-light,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-light {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-light-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}color-#{$name}-light-invert,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-light-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-light-invert,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-light-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Dark
|
||||
.#{iv.$helpers-prefix}color-#{$name}-dark,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-dark {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-dark-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-dark,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-dark {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-dark-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}color-#{$name}-dark-invert,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-dark-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-dark-invert,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-dark-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Soft/Bold
|
||||
.#{iv.$helpers-prefix}color-#{$name}-soft,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-soft {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar("soft-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-soft,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-soft {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar("soft-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}color-#{$name}-bold,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-bold {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar("bold-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-bold,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-bold {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar("bold-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}color-#{$name}-soft-invert,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar("soft-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-soft-invert,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar("soft-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}color-#{$name}-bold-invert,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar("bold-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-bold-invert,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar("bold-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@each $digit in $digits {
|
||||
.#{iv.$helpers-prefix}color-#{$name}-#{$digit},
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-#{$digit},
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
|
||||
.#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
|
||||
.#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
a.#{iv.$helpers-prefix}color-#{$name},
|
||||
button.#{iv.$helpers-prefix}color-#{$name},
|
||||
#{iv.$helpers-prefix}color-#{$name}.is-hoverable,
|
||||
a.#{iv.$helpers-has-prefix}text-#{$name},
|
||||
button.#{iv.$helpers-has-prefix}text-#{$name},
|
||||
#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l-delta": #{cv.getVar("hover-color-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"color-l-delta": #{cv.getVar("active-color-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
a.#{iv.$helpers-prefix}background-#{$name},
|
||||
button.#{iv.$helpers-prefix}background-#{$name},
|
||||
#{iv.$helpers-prefix}background-#{$name}.is-hoverable,
|
||||
a.#{iv.$helpers-has-prefix}background-#{$name},
|
||||
button.#{iv.$helpers-has-prefix}background-#{$name},
|
||||
#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l-delta": #{cv.getVar("hover-background-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"background-l-delta": #{cv.getVar("active-background-l-delta")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Palettes
|
||||
.#{iv.$helpers-prefix}palette-#{$name} {
|
||||
--h: #{cv.getVar($name, "", "-h")};
|
||||
--s: #{cv.getVar($name, "", "-s")};
|
||||
--l: #{cv.getVar($name, "", "-l")};
|
||||
--color: hsl(var(--h), var(--s), var(--l));
|
||||
|
||||
@each $digit in $digits {
|
||||
--#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")};
|
||||
--color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $shade in dv.$shades {
|
||||
.#{iv.$helpers-prefix}color-#{$name},
|
||||
.#{iv.$helpers-has-prefix}text-#{$name} {
|
||||
color: $shade !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}background-#{$name},
|
||||
.#{iv.$helpers-has-prefix}background-#{$name} {
|
||||
background-color: $shade !important;
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
$flex-direction-values: row, row-reverse, column, column-reverse
|
||||
@each $value in $flex-direction-values
|
||||
.is-flex-direction-#{$value}
|
||||
flex-direction: $value !important
|
||||
|
||||
$flex-wrap-values: nowrap, wrap, wrap-reverse
|
||||
@each $value in $flex-wrap-values
|
||||
.is-flex-wrap-#{$value}
|
||||
flex-wrap: $value !important
|
||||
|
||||
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
|
||||
@each $value in $justify-content-values
|
||||
.is-justify-content-#{$value}
|
||||
justify-content: $value !important
|
||||
|
||||
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
|
||||
@each $value in $align-content-values
|
||||
.is-align-content-#{$value}
|
||||
align-content: $value !important
|
||||
|
||||
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
|
||||
@each $value in $align-items-values
|
||||
.is-align-items-#{$value}
|
||||
align-items: $value !important
|
||||
|
||||
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
|
||||
@each $value in $align-self-values
|
||||
.is-align-self-#{$value}
|
||||
align-self: $value !important
|
||||
|
||||
$flex-operators: grow, shrink
|
||||
@each $operator in $flex-operators
|
||||
@for $i from 0 through 5
|
||||
.is-flex-#{$operator}-#{$i}
|
||||
flex-#{$operator}: $i !important
|
||||
62
sass/helpers/flexbox.scss
Normal file
62
sass/helpers/flexbox.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
$flex-direction-values: row, row-reverse, column, column-reverse;
|
||||
|
||||
@each $value in $flex-direction-values {
|
||||
.#{iv.$helpers-prefix}flex-direction-#{$value} {
|
||||
flex-direction: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
$flex-wrap-values: nowrap, wrap, wrap-reverse;
|
||||
|
||||
@each $value in $flex-wrap-values {
|
||||
.#{iv.$helpers-prefix}flex-wrap-#{$value} {
|
||||
flex-wrap: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
$justify-content-values: flex-start, flex-end, center, space-between,
|
||||
space-around, space-evenly, start, end, left, right;
|
||||
|
||||
@each $value in $justify-content-values {
|
||||
.#{iv.$helpers-prefix}justify-content-#{$value} {
|
||||
justify-content: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
$align-content-values: flex-start, flex-end, center, space-between, space-around,
|
||||
space-evenly, stretch, start, end, baseline;
|
||||
|
||||
@each $value in $align-content-values {
|
||||
.#{iv.$helpers-prefix}align-content-#{$value} {
|
||||
align-content: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end,
|
||||
self-start, self-end;
|
||||
|
||||
@each $value in $align-items-values {
|
||||
.#{iv.$helpers-prefix}align-items-#{$value} {
|
||||
align-items: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
|
||||
|
||||
@each $value in $align-self-values {
|
||||
.#{iv.$helpers-prefix}align-self-#{$value} {
|
||||
align-self: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
$flex-operators: grow, shrink;
|
||||
|
||||
@each $operator in $flex-operators {
|
||||
@for $i from 0 through 5 {
|
||||
.#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
|
||||
flex-#{$operator}: $i !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
.is-clearfix
|
||||
+clearfix
|
||||
|
||||
.is-pulled-left
|
||||
float: left !important
|
||||
|
||||
.is-pulled-right
|
||||
float: right !important
|
||||
28
sass/helpers/float.scss
Normal file
28
sass/helpers/float.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
.#{iv.$helpers-prefix}clearfix {
|
||||
@include mx.clearfix;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}float-left,
|
||||
.#{iv.$helpers-prefix}pulled-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}float-right,
|
||||
.#{iv.$helpers-prefix}pulled-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}float-none {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
$clears: both left none right;
|
||||
|
||||
@each $clear in $clears {
|
||||
.#{iv.$helpers-prefix}clear-#{$clear} {
|
||||
clear: $clear !important;
|
||||
}
|
||||
}
|
||||
24
sass/helpers/gap.scss
Normal file
24
sass/helpers/gap.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@use "sass:math";
|
||||
@use "sass:string";
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
.#{iv.$helpers-prefix}gapless {
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
$gaps: "gap", "column-gap", "row-gap";
|
||||
$gap-base: 0.5rem;
|
||||
|
||||
@each $gap in $gaps {
|
||||
@for $i from 0 through 8 {
|
||||
.#{iv.$helpers-prefix}#{$gap}-#{$i} {
|
||||
#{$gap}: ($gap-base * $i) !important;
|
||||
}
|
||||
|
||||
@if $i < 8 {
|
||||
.#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
|
||||
#{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
.is-radiusless
|
||||
border-radius: 0 !important
|
||||
|
||||
.is-shadowless
|
||||
box-shadow: none !important
|
||||
|
||||
.is-clickable
|
||||
cursor: pointer !important
|
||||
pointer-events: all !important
|
||||
|
||||
.is-unselectable
|
||||
@extend %unselectable
|
||||
19
sass/helpers/other.scss
Normal file
19
sass/helpers/other.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
.#{iv.$helpers-prefix}radiusless {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}shadowless {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}clickable {
|
||||
cursor: pointer !important;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}unselectable {
|
||||
@extend %unselectable;
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
.is-clipped
|
||||
overflow: hidden !important
|
||||
21
sass/helpers/overflow.scss
Normal file
21
sass/helpers/overflow.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
|
||||
.#{iv.$helpers-prefix}clipped {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
$overflows: auto clip hidden scroll visible;
|
||||
|
||||
@each $overflow in $overflows {
|
||||
.#{iv.$helpers-prefix}overflow-#{$overflow} {
|
||||
overflow: $overflow !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}overflow-x-#{$overflow} {
|
||||
overflow-x: $overflow !important;
|
||||
}
|
||||
|
||||
.#{iv.$helpers-prefix}overflow-y-#{$overflow} {
|
||||
overflow-y: $overflow !important;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@import "../utilities/mixins"
|
||||
|
||||
.is-overlay
|
||||
@extend %overlay
|
||||
|
||||
.is-relative
|
||||
position: relative !important
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user