mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add CSS class name prefix
This commit is contained in:
Jeremy Thomas
parent
f75e9fcec2
commit
7de49012b7
5
bulma-prefixed.scss
Normal file
5
bulma-prefixed.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@charset "utf-8";
|
||||
|
||||
$class-prefix: "bulma-";
|
||||
|
||||
@import "bulma";
|
||||
11826
css/bulma-prefixed.css
Normal file
11826
css/bulma-prefixed.css
Normal file
File diff suppressed because it is too large
Load Diff
1
css/bulma-prefixed.css.map
Normal file
1
css/bulma-prefixed.css.map
Normal file
File diff suppressed because one or more lines are too long
1
css/bulma-prefixed.min.css
vendored
Normal file
1
css/bulma-prefixed.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4851
css/bulma-rtl.css
4851
css/bulma-rtl.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2
css/bulma-rtl.min.css
vendored
2
css/bulma-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
4851
css/bulma.css
vendored
4851
css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2
css/bulma.min.css
vendored
2
css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
15
docs/css/bulma.css
vendored
15
docs/css/bulma.css
vendored
@ -1,4 +1,5 @@
|
||||
/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
|
||||
@charset "UTF-8";
|
||||
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
|
||||
/* Bulma Utilities */
|
||||
.button, .input, .textarea, .select select, .file-cta,
|
||||
.file-name, .pagination-previous,
|
||||
@ -2812,7 +2813,7 @@ div.icon-text {
|
||||
}
|
||||
|
||||
.table th:not([align]) {
|
||||
text-align: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table tr.is-selected {
|
||||
@ -4603,7 +4604,7 @@ fieldset[disabled] .select select:hover {
|
||||
|
||||
.breadcrumb li + li::before {
|
||||
color: #b5b5b5;
|
||||
content: "\0002f";
|
||||
content: "/";
|
||||
}
|
||||
|
||||
.breadcrumb ul,
|
||||
@ -4645,19 +4646,19 @@ fieldset[disabled] .select select:hover {
|
||||
}
|
||||
|
||||
.breadcrumb.has-arrow-separator li + li::before {
|
||||
content: "\02192";
|
||||
content: "→";
|
||||
}
|
||||
|
||||
.breadcrumb.has-bullet-separator li + li::before {
|
||||
content: "\02022";
|
||||
content: "•";
|
||||
}
|
||||
|
||||
.breadcrumb.has-dot-separator li + li::before {
|
||||
content: "\000b7";
|
||||
content: "·";
|
||||
}
|
||||
|
||||
.breadcrumb.has-succeeds-separator li + li::before {
|
||||
content: "\0227B";
|
||||
content: "≻";
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
@ -1,83 +1,83 @@
|
||||
const { defineConfig } = require('cypress')
|
||||
const { defineConfig } = require("cypress");
|
||||
|
||||
module.exports = defineConfig({
|
||||
projectId: 'tnstsp',
|
||||
projectId: "bulma-e2e",
|
||||
env: {
|
||||
black: 'rgb(10, 10, 10)',
|
||||
'black-bis': 'rgb(18, 18, 18)',
|
||||
'black-ter': 'rgb(36, 36, 36)',
|
||||
'grey-darker': 'rgb(54, 54, 54)',
|
||||
'grey-dark': 'rgb(74, 74, 74)',
|
||||
grey: 'rgb(122, 122, 122)',
|
||||
'grey-light': 'rgb(181, 181, 181)',
|
||||
'grey-lighter': 'rgb(219, 219, 219)',
|
||||
'grey-lightest': 'rgb(237, 237, 237)',
|
||||
'white-ter': 'rgb(245, 245, 245)',
|
||||
'white-bis': 'rgb(250, 250, 250)',
|
||||
white: 'rgb(255, 255, 255)',
|
||||
transparent: 'rgba(0, 0, 0, 0)',
|
||||
'black-transparent': 'rgba(0, 0, 0, 0.7)',
|
||||
orange: 'rgb(255, 71, 15)',
|
||||
yellow: 'rgb(255, 224, 138)',
|
||||
green: 'rgb(72, 199, 142)',
|
||||
turquoise: 'rgb(0, 209, 178)',
|
||||
cyan: 'rgb(62, 142, 208)',
|
||||
blue: 'rgb(72, 95, 199)',
|
||||
purple: 'rgb(184, 107, 255)',
|
||||
red: 'rgb(241, 70, 104)',
|
||||
'color-names': ['primary', 'link', 'info', 'success', 'warning', 'danger'],
|
||||
primary: 'rgb(0, 209, 178)',
|
||||
'primary-invert': 'rgb(255, 255, 255)',
|
||||
'primary-light': 'rgb(235, 255, 252)',
|
||||
'primary-dark': 'rgb(0, 148, 126)',
|
||||
link: 'rgb(72, 95, 199)',
|
||||
'link-invert': 'rgb(255, 255, 255)',
|
||||
'link-light': 'rgb(239, 241, 250)',
|
||||
'link-dark': 'rgb(56, 80, 183)',
|
||||
info: 'rgb(62, 142, 208)',
|
||||
'info-invert': 'rgb(255, 255, 255)',
|
||||
'info-light': 'rgb(239, 245, 251)',
|
||||
'info-dark': 'rgb(41, 111, 168)',
|
||||
success: 'rgb(72, 199, 142)',
|
||||
'success-invert': 'rgb(255, 255, 255)',
|
||||
'success-light': 'rgb(239, 250, 245)',
|
||||
'success-dark': 'rgb(37, 121, 83)',
|
||||
warning: 'rgb(255, 224, 138)',
|
||||
'warning-invert': 'rgba(0, 0, 0, 0.7)',
|
||||
'warning-light': 'rgb(255, 250, 235)',
|
||||
'warning-dark': 'rgb(148, 108, 0)',
|
||||
danger: 'rgb(241, 70, 104)',
|
||||
'danger-invert': 'rgb(255, 255, 255)',
|
||||
'danger-light': 'rgb(254, 236, 240)',
|
||||
'danger-dark': 'rgb(204, 15, 53)',
|
||||
'scheme-main': 'rgb(255, 255, 255)',
|
||||
'scheme-main-bis': 'rgb(250, 250, 250)',
|
||||
'scheme-main-ter': 'rgb(245, 245, 245)',
|
||||
border: 'rgb(219, 219, 219)',
|
||||
'border-hover': 'rgb(181, 181, 181)',
|
||||
text: 'rgb(74, 74, 74)',
|
||||
'text-strong': 'rgb(54, 54, 54)',
|
||||
'text-light': 'rgb(122, 122, 122)',
|
||||
'text-invert': 'rgb(255, 255, 255)',
|
||||
code: 'rgb(218, 16, 57)',
|
||||
'control-radius': '4px',
|
||||
'control-radius-small': '2px',
|
||||
'control-border-width': '1px',
|
||||
'control-height': '40px',
|
||||
'control-line-height': '24px',
|
||||
'control-padding-vertical': '7px',
|
||||
'control-padding-horizontal': '11px',
|
||||
'input-shadow': 'rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset',
|
||||
'size-small': '12px',
|
||||
'size-normal': '16px',
|
||||
'size-medium': '20px',
|
||||
'size-large': '24px',
|
||||
'weight-light': '300',
|
||||
'weight-normal': '400',
|
||||
'weight-medium': '500',
|
||||
'weight-semibold': '600',
|
||||
'weight-bold': '700',
|
||||
'family-code': 'monospace',
|
||||
black: "rgb(10, 10, 10)",
|
||||
"black-bis": "rgb(18, 18, 18)",
|
||||
"black-ter": "rgb(36, 36, 36)",
|
||||
"grey-darker": "rgb(54, 54, 54)",
|
||||
"grey-dark": "rgb(74, 74, 74)",
|
||||
grey: "rgb(122, 122, 122)",
|
||||
"grey-light": "rgb(181, 181, 181)",
|
||||
"grey-lighter": "rgb(219, 219, 219)",
|
||||
"grey-lightest": "rgb(237, 237, 237)",
|
||||
"white-ter": "rgb(245, 245, 245)",
|
||||
"white-bis": "rgb(250, 250, 250)",
|
||||
white: "rgb(255, 255, 255)",
|
||||
transparent: "rgba(0, 0, 0, 0)",
|
||||
"black-transparent": "rgba(0, 0, 0, 0.7)",
|
||||
orange: "rgb(255, 71, 15)",
|
||||
yellow: "rgb(255, 224, 138)",
|
||||
green: "rgb(72, 199, 142)",
|
||||
turquoise: "rgb(0, 209, 178)",
|
||||
cyan: "rgb(62, 142, 208)",
|
||||
blue: "rgb(72, 95, 199)",
|
||||
purple: "rgb(184, 107, 255)",
|
||||
red: "rgb(241, 70, 104)",
|
||||
"color-names": ["primary", "link", "info", "success", "warning", "danger"],
|
||||
primary: "rgb(0, 209, 178)",
|
||||
"primary-invert": "rgb(255, 255, 255)",
|
||||
"primary-light": "rgb(235, 255, 252)",
|
||||
"primary-dark": "rgb(0, 148, 126)",
|
||||
link: "rgb(72, 95, 199)",
|
||||
"link-invert": "rgb(255, 255, 255)",
|
||||
"link-light": "rgb(239, 241, 250)",
|
||||
"link-dark": "rgb(56, 80, 183)",
|
||||
info: "rgb(62, 142, 208)",
|
||||
"info-invert": "rgb(255, 255, 255)",
|
||||
"info-light": "rgb(239, 245, 251)",
|
||||
"info-dark": "rgb(41, 111, 168)",
|
||||
success: "rgb(72, 199, 142)",
|
||||
"success-invert": "rgb(255, 255, 255)",
|
||||
"success-light": "rgb(239, 250, 245)",
|
||||
"success-dark": "rgb(37, 121, 83)",
|
||||
warning: "rgb(255, 224, 138)",
|
||||
"warning-invert": "rgba(0, 0, 0, 0.7)",
|
||||
"warning-light": "rgb(255, 250, 235)",
|
||||
"warning-dark": "rgb(148, 108, 0)",
|
||||
danger: "rgb(241, 70, 104)",
|
||||
"danger-invert": "rgb(255, 255, 255)",
|
||||
"danger-light": "rgb(254, 236, 240)",
|
||||
"danger-dark": "rgb(204, 15, 53)",
|
||||
"scheme-main": "rgb(255, 255, 255)",
|
||||
"scheme-main-bis": "rgb(250, 250, 250)",
|
||||
"scheme-main-ter": "rgb(245, 245, 245)",
|
||||
border: "rgb(219, 219, 219)",
|
||||
"border-hover": "rgb(181, 181, 181)",
|
||||
text: "rgb(74, 74, 74)",
|
||||
"text-strong": "rgb(54, 54, 54)",
|
||||
"text-light": "rgb(122, 122, 122)",
|
||||
"text-invert": "rgb(255, 255, 255)",
|
||||
code: "rgb(218, 16, 57)",
|
||||
"control-radius": "4px",
|
||||
"control-radius-small": "2px",
|
||||
"control-border-width": "1px",
|
||||
"control-height": "40px",
|
||||
"control-line-height": "24px",
|
||||
"control-padding-vertical": "7px",
|
||||
"control-padding-horizontal": "11px",
|
||||
"input-shadow": "rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset",
|
||||
"size-small": "12px",
|
||||
"size-normal": "16px",
|
||||
"size-medium": "20px",
|
||||
"size-large": "24px",
|
||||
"weight-light": "300",
|
||||
"weight-normal": "400",
|
||||
"weight-medium": "500",
|
||||
"weight-semibold": "600",
|
||||
"weight-bold": "700",
|
||||
"family-code": "monospace",
|
||||
viewports: {
|
||||
mobile: [320, 480],
|
||||
tablet: [769, 640],
|
||||
@ -98,14 +98,15 @@ module.exports = defineConfig({
|
||||
medium: 20,
|
||||
large: 24,
|
||||
},
|
||||
'just-sizes': ['small', 'normal', 'medium', 'large'],
|
||||
"just-sizes": ["small", "normal", "medium", "large"],
|
||||
},
|
||||
e2e: {
|
||||
// We've imported your old cypress plugins here.
|
||||
// You may want to clean this up later by importing these.
|
||||
setupNodeEvents(on, config) {
|
||||
return require('./cypress/plugins/index.js')(on, config)
|
||||
return require("./cypress/plugins/index.js")(on, config);
|
||||
},
|
||||
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
|
||||
specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
|
||||
},
|
||||
})
|
||||
video: false,
|
||||
});
|
||||
|
||||
@ -41,11 +41,15 @@
|
||||
"build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css",
|
||||
"build-sass": "node-sass --output-style expanded --source-map true bulma.scss css/bulma.css",
|
||||
"clean": "rimraf css",
|
||||
"prefixed": "npm run prefixed-sass && npm run prefixed-autoprefix && npm run prefixed-cleancss",
|
||||
"prefixed-sass": "node-sass --output-style expanded --source-map true bulma-prefixed.scss css/bulma-prefixed.css",
|
||||
"prefixed-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-prefixed.css css/bulma-prefixed.css",
|
||||
"prefixed-cleancss": "cleancss -o css/bulma-prefixed.min.css css/bulma-prefixed.css",
|
||||
"rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss",
|
||||
"rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.scss css/bulma-rtl.css",
|
||||
"rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
|
||||
"rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
|
||||
"deploy": "npm run clean && npm run build && npm run rtl",
|
||||
"deploy": "npm run clean && npm run build && npm run prefixed && npm run rtl",
|
||||
"start": "npm run build-sass -- --watch"
|
||||
},
|
||||
"files": [
|
||||
|
||||
@ -9,7 +9,7 @@ $breadcrumb-item-padding-horizontal: 0.75em !default;
|
||||
|
||||
$breadcrumb-item-separator-color: $border-hover !default;
|
||||
|
||||
.breadcrumb {
|
||||
.#{$class-prefix}breadcrumb {
|
||||
@extend %block;
|
||||
|
||||
@extend %unselectable;
|
||||
@ -22,7 +22,8 @@ $breadcrumb-item-separator-color: $border-hover !default;
|
||||
color: $breadcrumb-item-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal;
|
||||
padding: $breadcrumb-item-padding-vertical
|
||||
$breadcrumb-item-padding-horizontal;
|
||||
|
||||
&:hover {
|
||||
color: $breadcrumb-item-hover-color;
|
||||
@ -59,7 +60,7 @@ $breadcrumb-item-separator-color: $border-hover !default;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
&:first-child {
|
||||
@include ltr-property("margin", 0.5em);
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ $card-footer-padding: 0.75rem !default;
|
||||
|
||||
$card-media-margin: $block-spacing !default;
|
||||
|
||||
.card {
|
||||
.#{$class-prefix}card {
|
||||
background-color: $card-background-color;
|
||||
border-radius: $card-radius;
|
||||
box-shadow: $card-shadow;
|
||||
@ -41,7 +41,7 @@ $card-media-margin: $block-spacing !default;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.#{$class-prefix}card-header {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: $card-header-background-color;
|
||||
@ -50,7 +50,7 @@ $card-media-margin: $block-spacing !default;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-header-title {
|
||||
.#{$class-prefix}card-header-title {
|
||||
align-items: center;
|
||||
color: $card-header-color;
|
||||
display: flex;
|
||||
@ -63,7 +63,7 @@ $card-media-margin: $block-spacing !default;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-icon {
|
||||
.#{$class-prefix}card-header-icon {
|
||||
@include reset;
|
||||
|
||||
align-items: center;
|
||||
@ -73,7 +73,7 @@ $card-media-margin: $block-spacing !default;
|
||||
padding: $card-header-padding;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
.#{$class-prefix}card-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@ -92,14 +92,14 @@ $card-media-margin: $block-spacing !default;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.#{$class-prefix}card-content {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: $card-content-background-color;
|
||||
padding: $card-content-padding;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
.#{$class-prefix}card-footer {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: $card-footer-background-color;
|
||||
@ -108,7 +108,7 @@ $card-media-margin: $block-spacing !default;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
.#{$class-prefix}card-footer-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
@ -124,8 +124,8 @@ $card-media-margin: $block-spacing !default;
|
||||
|
||||
// Combinations
|
||||
|
||||
.card {
|
||||
.media:not(:last-child) {
|
||||
.#{$class-prefix}card {
|
||||
.#{$class-prefix}media:not(:last-child) {
|
||||
margin-bottom: $card-media-margin;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,27 +19,27 @@ $dropdown-item-active-background-color: $link !default;
|
||||
|
||||
$dropdown-divider-background-color: $border-light !default;
|
||||
|
||||
.dropdown {
|
||||
.#{$class-prefix}dropdown {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
&.is-active,
|
||||
&.is-hoverable:hover {
|
||||
.dropdown-menu {
|
||||
.#{$class-prefix}dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
.dropdown-menu {
|
||||
.#{$class-prefix}dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-up {
|
||||
.dropdown-menu {
|
||||
.#{$class-prefix}dropdown-menu {
|
||||
bottom: 100%;
|
||||
padding-bottom: $dropdown-content-offset;
|
||||
padding-top: initial;
|
||||
@ -48,7 +48,7 @@ $dropdown-divider-background-color: $border-light !default;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.#{$class-prefix}dropdown-menu {
|
||||
display: none;
|
||||
|
||||
@include ltr-position(0, false);
|
||||
@ -60,7 +60,7 @@ $dropdown-divider-background-color: $border-light !default;
|
||||
z-index: $dropdown-content-z;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
.#{$class-prefix}dropdown-content {
|
||||
background-color: $dropdown-content-background-color;
|
||||
border-radius: $dropdown-content-radius;
|
||||
box-shadow: $dropdown-content-shadow;
|
||||
@ -68,7 +68,7 @@ $dropdown-divider-background-color: $border-light !default;
|
||||
padding-top: $dropdown-content-padding-top;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
.#{$class-prefix}dropdown-item {
|
||||
color: $dropdown-item-color;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
@ -77,8 +77,8 @@ $dropdown-divider-background-color: $border-light !default;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a.dropdown-item,
|
||||
button.dropdown-item {
|
||||
a.#{$class-prefix}dropdown-item,
|
||||
button.#{$class-prefix}dropdown-item {
|
||||
@include ltr-property("padding", 3rem);
|
||||
|
||||
text-align: inherit;
|
||||
@ -96,7 +96,7 @@ button.dropdown-item {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
.#{$class-prefix}dropdown-divider {
|
||||
background-color: $dropdown-divider-background-color;
|
||||
border: none;
|
||||
display: block;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
$level-item-spacing: $block-spacing * 0.5 !default;
|
||||
|
||||
.level {
|
||||
.#{$class-prefix}level {
|
||||
@extend %block;
|
||||
|
||||
align-items: center;
|
||||
@ -21,16 +21,16 @@ $level-item-spacing: $block-spacing * 0.5 !default;
|
||||
&.is-mobile {
|
||||
display: flex;
|
||||
|
||||
.level-left,
|
||||
.level-right {
|
||||
.#{$class-prefix}level-left,
|
||||
.#{$class-prefix}level-right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.level-left + .level-right {
|
||||
.#{$class-prefix}level-left + .#{$class-prefix}level-right {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.level-item {
|
||||
.#{$class-prefix}level-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -47,7 +47,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
|
||||
@include tablet {
|
||||
display: flex;
|
||||
|
||||
& > .level-item {
|
||||
& > .#{$class-prefix}level-item {
|
||||
&:not(.is-narrow) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -55,7 +55,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
|
||||
}
|
||||
}
|
||||
|
||||
.level-item {
|
||||
.#{$class-prefix}level-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
@ -63,8 +63,8 @@ $level-item-spacing: $block-spacing * 0.5 !default;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
|
||||
.title,
|
||||
.subtitle {
|
||||
.#{$class-prefix}title,
|
||||
.#{$class-prefix}subtitle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -76,13 +76,13 @@ $level-item-spacing: $block-spacing * 0.5 !default;
|
||||
}
|
||||
}
|
||||
|
||||
.level-left,
|
||||
.level-right {
|
||||
.#{$class-prefix}level-left,
|
||||
.#{$class-prefix}level-right {
|
||||
flex-basis: auto;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
.level-item {
|
||||
.#{$class-prefix}level-item {
|
||||
// Modifiers
|
||||
&.is-flexible {
|
||||
flex-grow: 1;
|
||||
@ -97,24 +97,23 @@ $level-item-spacing: $block-spacing * 0.5 !default;
|
||||
}
|
||||
}
|
||||
|
||||
.level-left {
|
||||
.#{$class-prefix}level-left {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Responsiveness
|
||||
@include mobile {
|
||||
& + .level-right {
|
||||
& + .#{$class-prefix}level-right {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.level-right {
|
||||
.#{$class-prefix}level-right {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
@ -9,35 +9,35 @@ $media-level-1-spacing: 0.75rem !default;
|
||||
$media-level-1-content-spacing: 0.5rem !default;
|
||||
$media-level-2-spacing: 0.5rem !default;
|
||||
|
||||
.media {
|
||||
.#{$class-prefix}media {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
text-align: inherit;
|
||||
|
||||
.content:not(:last-child) {
|
||||
.#{$class-prefix}content:not(:last-child) {
|
||||
margin-bottom: $media-content-spacing;
|
||||
}
|
||||
|
||||
.media {
|
||||
.#{$class-prefix}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) {
|
||||
.#{$class-prefix}content:not(:last-child),
|
||||
.#{$class-prefix}control:not(:last-child) {
|
||||
margin-bottom: $media-level-1-content-spacing;
|
||||
}
|
||||
|
||||
.media {
|
||||
.#{$class-prefix}media {
|
||||
padding-top: $media-level-2-spacing;
|
||||
|
||||
& + .media {
|
||||
& + .#{$class-prefix}media {
|
||||
margin-top: $media-level-2-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .media {
|
||||
& + .#{$class-prefix}media {
|
||||
border-top: $media-border-size solid $media-border-color;
|
||||
margin-top: $media-spacing;
|
||||
padding-top: $media-spacing;
|
||||
@ -45,29 +45,29 @@ $media-level-2-spacing: 0.5rem !default;
|
||||
|
||||
// Sizes
|
||||
&.is-large {
|
||||
& + .media {
|
||||
& + .#{$class-prefix}media {
|
||||
margin-top: $media-spacing-large;
|
||||
padding-top: $media-spacing-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-left,
|
||||
.media-right {
|
||||
.#{$class-prefix}media-left,
|
||||
.#{$class-prefix}media-right {
|
||||
flex-basis: auto;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.media-left {
|
||||
.#{$class-prefix}media-left {
|
||||
@include ltr-property("margin", $media-spacing);
|
||||
}
|
||||
|
||||
.media-right {
|
||||
.#{$class-prefix}media-right {
|
||||
@include ltr-property("margin", $media-spacing, false);
|
||||
}
|
||||
|
||||
.media-content {
|
||||
.#{$class-prefix}media-content {
|
||||
flex-basis: auto;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
@ -75,7 +75,7 @@ $media-level-2-spacing: 0.5rem !default;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.media-content {
|
||||
.#{$class-prefix}media-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ $menu-label-font-size: 0.75em !default;
|
||||
$menu-label-letter-spacing: 0.1em !default;
|
||||
$menu-label-spacing: 1em !default;
|
||||
|
||||
.menu {
|
||||
.#{$class-prefix}menu {
|
||||
font-size: $size-normal;
|
||||
|
||||
// Sizes
|
||||
@ -35,7 +35,7 @@ $menu-label-spacing: 1em !default;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
.#{$class-prefix}menu-list {
|
||||
line-height: $menu-list-line-height;
|
||||
|
||||
a {
|
||||
@ -67,7 +67,7 @@ $menu-label-spacing: 1em !default;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
.#{$class-prefix}menu-label {
|
||||
color: $menu-label-color;
|
||||
font-size: $menu-label-font-size;
|
||||
letter-spacing: $menu-label-letter-spacing;
|
||||
|
||||
@ -21,7 +21,7 @@ $message-body-pre-code-background-color: transparent !default;
|
||||
$message-header-body-border-width: 0 !default;
|
||||
$message-colors: $colors !default;
|
||||
|
||||
.message {
|
||||
.#{$class-prefix}message {
|
||||
@extend %block;
|
||||
|
||||
background-color: $message-background-color;
|
||||
@ -32,7 +32,7 @@ $message-colors: $colors !default;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
a:not(.button):not(.tag):not(.dropdown-item) {
|
||||
a:not(.#{$class-prefix}button):not(.#{$class-prefix}tag):not(.#{$class-prefix}dropdown-item) {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -62,15 +62,16 @@ $message-colors: $colors !default;
|
||||
|
||||
@if length($components) >= 4 {
|
||||
$color-dark: nth($components, 4);
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
$color-luminance: colorLuminance($color);
|
||||
$darken-percentage: $color-luminance * 70%;
|
||||
$desaturate-percentage: $color-luminance * 30%;
|
||||
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
|
||||
$color-dark: desaturate(
|
||||
darken($color, $darken-percentage),
|
||||
$desaturate-percentage
|
||||
);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
$color-lightning: max(100% - lightness($color) - 2%, 0%);
|
||||
$color-light: lighten($color, $color-lightning);
|
||||
}
|
||||
@ -78,12 +79,12 @@ $message-colors: $colors !default;
|
||||
&.is-#{$name} {
|
||||
background-color: $color-light;
|
||||
|
||||
.message-header {
|
||||
.#{$class-prefix}message-header {
|
||||
background-color: $color;
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
.#{$class-prefix}message-body {
|
||||
border-color: $color;
|
||||
color: $color-dark;
|
||||
}
|
||||
@ -91,7 +92,7 @@ $message-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
.#{$class-prefix}message-header {
|
||||
align-items: center;
|
||||
background-color: $message-header-background-color;
|
||||
border-radius: $message-header-radius $message-header-radius 0 0;
|
||||
@ -103,21 +104,21 @@ $message-colors: $colors !default;
|
||||
padding: $message-header-padding;
|
||||
position: relative;
|
||||
|
||||
.delete {
|
||||
.#{$class-prefix}delete {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include ltr-property("margin", 0.75em, false);
|
||||
}
|
||||
|
||||
& + .message-body {
|
||||
& + .#{$class-prefix}message-body {
|
||||
border-width: $message-header-body-border-width;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-body {
|
||||
.#{$class-prefix}message-body {
|
||||
border-color: $message-body-border-color;
|
||||
border-radius: $message-body-radius;
|
||||
border-style: solid;
|
||||
|
||||
@ -32,7 +32,7 @@ $modal-card-body-padding: 20px !default;
|
||||
|
||||
$modal-breakpoint: $tablet !default;
|
||||
|
||||
.modal {
|
||||
.#{$class-prefix}modal {
|
||||
@extend %overlay;
|
||||
|
||||
align-items: center;
|
||||
@ -49,14 +49,14 @@ $modal-breakpoint: $tablet !default;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
.#{$class-prefix}modal-background {
|
||||
@extend %overlay;
|
||||
|
||||
background-color: $modal-background-background-color;
|
||||
}
|
||||
|
||||
.modal-content,
|
||||
.modal-card {
|
||||
.#{$class-prefix}modal-content,
|
||||
.#{$class-prefix}modal-card {
|
||||
margin: 0 $modal-content-margin-mobile;
|
||||
max-height: calc(100vh - #{$modal-content-spacing-mobile});
|
||||
overflow: auto;
|
||||
@ -71,7 +71,7 @@ $modal-breakpoint: $tablet !default;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
.#{$class-prefix}modal-close {
|
||||
@extend %delete;
|
||||
|
||||
background: none;
|
||||
@ -84,7 +84,7 @@ $modal-breakpoint: $tablet !default;
|
||||
width: $modal-close-dimensions;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
.#{$class-prefix}modal-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - #{$modal-card-spacing});
|
||||
@ -92,8 +92,8 @@ $modal-breakpoint: $tablet !default;
|
||||
-ms-overflow-y: visible;
|
||||
}
|
||||
|
||||
.modal-card-head,
|
||||
.modal-card-foot {
|
||||
.#{$class-prefix}modal-card-head,
|
||||
.#{$class-prefix}modal-card-foot {
|
||||
align-items: center;
|
||||
background-color: $modal-card-head-background-color;
|
||||
display: flex;
|
||||
@ -103,13 +103,13 @@ $modal-breakpoint: $tablet !default;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-card-head {
|
||||
.#{$class-prefix}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 {
|
||||
.#{$class-prefix}modal-card-title {
|
||||
color: $modal-card-title-color;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
@ -117,19 +117,19 @@ $modal-breakpoint: $tablet !default;
|
||||
line-height: $modal-card-title-line-height;
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
.#{$class-prefix}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 {
|
||||
.#{$class-prefix}button {
|
||||
&:not(:last-child) {
|
||||
@include ltr-property("margin", 0.5em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
.#{$class-prefix}modal-card-body {
|
||||
@include overflow-touch;
|
||||
|
||||
background-color: $modal-card-body-background-color;
|
||||
|
||||
@ -34,7 +34,8 @@ $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-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;
|
||||
@ -57,7 +58,7 @@ $navbar-colors: $colors !default;
|
||||
z-index: $navbar-fixed-z;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.#{$class-prefix}navbar {
|
||||
background-color: $navbar-background-color;
|
||||
min-height: $navbar-height;
|
||||
position: relative;
|
||||
@ -71,14 +72,14 @@ $navbar-colors: $colors !default;
|
||||
background-color: $color;
|
||||
color: $color-invert;
|
||||
|
||||
.navbar-brand {
|
||||
& > .navbar-item,
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-brand {
|
||||
& > .#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
& > a.navbar-item,
|
||||
.navbar-link {
|
||||
& > a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active {
|
||||
@ -87,27 +88,27 @@ $navbar-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-link {
|
||||
&::after {
|
||||
border-color: $color-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-burger {
|
||||
.#{$class-prefix}navbar-burger {
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
@include from($navbar-breakpoint) {
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
& > .navbar-item,
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-start,
|
||||
.#{$class-prefix}navbar-end {
|
||||
& > .#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
& > a.navbar-item,
|
||||
.navbar-link {
|
||||
& > a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active {
|
||||
@ -116,22 +117,25 @@ $navbar-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
.#{$class-prefix}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 {
|
||||
.#{$class-prefix}navbar-item.has-dropdown:focus
|
||||
.#{$class-prefix}navbar-link,
|
||||
.#{$class-prefix}navbar-item.has-dropdown:hover
|
||||
.#{$class-prefix}navbar-link,
|
||||
.#{$class-prefix}navbar-item.has-dropdown.is-active
|
||||
.#{$class-prefix}navbar-link {
|
||||
background-color: bulmaDarken($color, 5%);
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
a.navbar-item {
|
||||
.#{$class-prefix}navbar-dropdown {
|
||||
a.#{$class-prefix}navbar-item {
|
||||
&.is-active {
|
||||
background-color: $color;
|
||||
color: $color-invert;
|
||||
@ -142,7 +146,7 @@ $navbar-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
& > .container {
|
||||
& > .#{$class-prefix}container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: $navbar-height;
|
||||
@ -182,16 +186,16 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-tabs {
|
||||
.#{$class-prefix}navbar-brand,
|
||||
.#{$class-prefix}navbar-tabs {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
a.navbar-item {
|
||||
.#{$class-prefix}navbar-brand {
|
||||
a.#{$class-prefix}navbar-item {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
@ -199,7 +203,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-tabs {
|
||||
.#{$class-prefix}navbar-tabs {
|
||||
@include overflow-touch;
|
||||
|
||||
max-width: 100vw;
|
||||
@ -207,7 +211,7 @@ body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.navbar-burger {
|
||||
.#{$class-prefix}navbar-burger {
|
||||
@extend %reset;
|
||||
|
||||
color: $navbar-burger-color;
|
||||
@ -216,19 +220,19 @@ body {
|
||||
@include ltr-property("margin", auto, false);
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.#{$class-prefix}navbar-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
color: $navbar-item-color;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
padding: 0.5rem 0.75rem;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
&:only-child {
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
@ -236,8 +240,8 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
a.navbar-item,
|
||||
.navbar-link {
|
||||
a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
@ -249,7 +253,7 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
.#{$class-prefix}navbar-item {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
@ -288,12 +292,12 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
.#{$class-prefix}navbar-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.navbar-link:not(.is-arrowless) {
|
||||
.#{$class-prefix}navbar-link:not(.is-arrowless) {
|
||||
@include ltr-property("padding", 2.5em);
|
||||
|
||||
&::after {
|
||||
@ -306,18 +310,18 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
.#{$class-prefix}navbar-dropdown {
|
||||
font-size: 0.875rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
.navbar-item {
|
||||
.#{$class-prefix}navbar-item {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
.#{$class-prefix}navbar-divider {
|
||||
background-color: $navbar-divider-background-color;
|
||||
border: none;
|
||||
display: none;
|
||||
@ -326,25 +330,25 @@ a.navbar-item,
|
||||
}
|
||||
|
||||
@include until($navbar-breakpoint) {
|
||||
.navbar > .container {
|
||||
.#{$class-prefix}navbar > .#{$class-prefix}container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-tabs {
|
||||
.navbar-item {
|
||||
.#{$class-prefix}navbar-brand,
|
||||
.#{$class-prefix}navbar-tabs {
|
||||
.#{$class-prefix}navbar-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-link {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.#{$class-prefix}navbar-menu {
|
||||
background-color: $navbar-background-color;
|
||||
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
|
||||
padding: 0.5rem 0;
|
||||
@ -355,7 +359,7 @@ a.navbar-item,
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.navbar {
|
||||
.#{$class-prefix}navbar {
|
||||
&.is-fixed-bottom-touch,
|
||||
&.is-fixed-top-touch {
|
||||
@include navbar-fixed;
|
||||
@ -375,7 +379,7 @@ a.navbar-item,
|
||||
|
||||
&.is-fixed-top,
|
||||
&.is-fixed-top-touch {
|
||||
.navbar-menu {
|
||||
.#{$class-prefix}navbar-menu {
|
||||
@include overflow-touch;
|
||||
|
||||
max-height: calc(100vh - #{$navbar-height});
|
||||
@ -396,36 +400,35 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include from($navbar-breakpoint) {
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
.#{$class-prefix}navbar,
|
||||
.#{$class-prefix}navbar-menu,
|
||||
.#{$class-prefix}navbar-start,
|
||||
.#{$class-prefix}navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.#{$class-prefix}navbar {
|
||||
min-height: $navbar-height;
|
||||
|
||||
&.is-spaced {
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal;
|
||||
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
.#{$class-prefix}navbar-start,
|
||||
.#{$class-prefix}navbar-end {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.navbar-item,
|
||||
.navbar-link {
|
||||
a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-transparent {
|
||||
a.navbar-item,
|
||||
.navbar-link {
|
||||
a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active {
|
||||
@ -433,19 +436,19 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item.has-dropdown {
|
||||
.#{$class-prefix}navbar-item.has-dropdown {
|
||||
&.is-active,
|
||||
&.is-hoverable:focus,
|
||||
&.is-hoverable:focus-within,
|
||||
&.is-hoverable:hover {
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-link {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
a.navbar-item {
|
||||
.#{$class-prefix}navbar-dropdown {
|
||||
a.#{$class-prefix}navbar-item {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $navbar-dropdown-item-hover-background-color;
|
||||
@ -461,27 +464,27 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-burger {
|
||||
.#{$class-prefix}navbar-burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
.#{$class-prefix}navbar-item {
|
||||
&.has-dropdown {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&.has-dropdown-up {
|
||||
.navbar-link::after {
|
||||
.#{$class-prefix}navbar-link::after {
|
||||
transform: rotate(135deg) translate(0.25em, -0.25em);
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
.#{$class-prefix}navbar-dropdown {
|
||||
border-bottom: $navbar-dropdown-border-top;
|
||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
|
||||
border-top: none;
|
||||
@ -495,10 +498,10 @@ a.navbar-item,
|
||||
&.is-hoverable:focus,
|
||||
&.is-hoverable:focus-within,
|
||||
&.is-hoverable:hover {
|
||||
.navbar-dropdown {
|
||||
.#{$class-prefix}navbar-dropdown {
|
||||
display: block;
|
||||
|
||||
.navbar.is-spaced &,
|
||||
.#{$class-prefix}navbar.is-spaced &,
|
||||
&.is-boxed {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
@ -508,24 +511,24 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.#{$class-prefix}navbar-menu {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-start {
|
||||
.#{$class-prefix}navbar-start {
|
||||
justify-content: flex-start;
|
||||
|
||||
@include ltr-property("margin", auto);
|
||||
}
|
||||
|
||||
.navbar-end {
|
||||
.#{$class-prefix}navbar-end {
|
||||
justify-content: flex-end;
|
||||
|
||||
@include ltr-property("margin", auto, false);
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
.#{$class-prefix}navbar-dropdown {
|
||||
background-color: $navbar-dropdown-background-color;
|
||||
border-bottom-left-radius: $navbar-dropdown-radius;
|
||||
border-bottom-right-radius: $navbar-dropdown-radius;
|
||||
@ -541,12 +544,12 @@ a.navbar-item,
|
||||
top: 100%;
|
||||
z-index: $navbar-dropdown-z;
|
||||
|
||||
.navbar-item {
|
||||
.#{$class-prefix}navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a.navbar-item {
|
||||
a.#{$class-prefix}navbar-item {
|
||||
@include ltr-property("padding", 3rem);
|
||||
|
||||
&:focus,
|
||||
@ -561,7 +564,7 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-spaced &,
|
||||
.#{$class-prefix}navbar.is-spaced &,
|
||||
&.is-boxed {
|
||||
border-radius: $navbar-dropdown-boxed-radius;
|
||||
border-top: none;
|
||||
@ -581,23 +584,23 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
.#{$class-prefix}navbar-divider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar > .container,
|
||||
.container > .navbar {
|
||||
.navbar-brand {
|
||||
.#{$class-prefix}navbar > .#{$class-prefix}container,
|
||||
.#{$class-prefix}container > .#{$class-prefix}navbar {
|
||||
.#{$class-prefix}navbar-brand {
|
||||
@include ltr-property("margin", -0.75rem, false);
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.#{$class-prefix}navbar-menu {
|
||||
@include ltr-property("margin", -0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.navbar {
|
||||
.#{$class-prefix}navbar {
|
||||
&.is-fixed-bottom-desktop,
|
||||
&.is-fixed-top-desktop {
|
||||
@include navbar-fixed;
|
||||
@ -636,8 +639,8 @@ a.navbar-item,
|
||||
}
|
||||
|
||||
// Hover/Active states
|
||||
a.navbar-item,
|
||||
.navbar-link {
|
||||
a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
&.is-active {
|
||||
color: $navbar-item-active-color;
|
||||
}
|
||||
@ -647,21 +650,20 @@ a.navbar-item,
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item.has-dropdown {
|
||||
.#{$class-prefix}navbar-item.has-dropdown {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-active {
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-link {
|
||||
background-color: $navbar-item-hover-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Combination
|
||||
|
||||
.hero {
|
||||
.#{$class-prefix}hero {
|
||||
&.is-fullheight-with-navbar {
|
||||
min-height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@ $pagination-ellipsis-color: $grey-light !default;
|
||||
|
||||
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
|
||||
.pagination {
|
||||
.#{$class-prefix}pagination {
|
||||
@extend %block;
|
||||
|
||||
font-size: $size-normal;
|
||||
@ -55,31 +55,31 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
.#{$class-prefix}pagination-previous,
|
||||
.#{$class-prefix}pagination-next {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border-radius: $radius-rounded;
|
||||
}
|
||||
|
||||
.pagination-link {
|
||||
.#{$class-prefix}pagination-link {
|
||||
border-radius: $radius-rounded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination,
|
||||
.pagination-list {
|
||||
.#{$class-prefix}pagination,
|
||||
.#{$class-prefix}pagination-list {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis {
|
||||
.#{$class-prefix}pagination-previous,
|
||||
.#{$class-prefix}pagination-next,
|
||||
.#{$class-prefix}pagination-link,
|
||||
.#{$class-prefix}pagination-ellipsis {
|
||||
@extend %control;
|
||||
|
||||
@extend %unselectable;
|
||||
@ -92,9 +92,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link {
|
||||
.#{$class-prefix}pagination-previous,
|
||||
.#{$class-prefix}pagination-next,
|
||||
.#{$class-prefix}pagination-link {
|
||||
border-color: $pagination-border-color;
|
||||
color: $pagination-color;
|
||||
min-width: $pagination-min-width;
|
||||
@ -122,14 +122,14 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
.#{$class-prefix}pagination-previous,
|
||||
.#{$class-prefix}pagination-next {
|
||||
padding-left: $pagination-nav-padding-left;
|
||||
padding-right: $pagination-nav-padding-right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pagination-link {
|
||||
.#{$class-prefix}pagination-link {
|
||||
&.is-current {
|
||||
background-color: $pagination-current-background-color;
|
||||
border-color: $pagination-current-border-color;
|
||||
@ -137,12 +137,12 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
.#{$class-prefix}pagination-ellipsis {
|
||||
color: $pagination-ellipsis-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
.#{$class-prefix}pagination-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
@ -151,17 +151,17 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.pagination {
|
||||
.#{$class-prefix}pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
.#{$class-prefix}pagination-previous,
|
||||
.#{$class-prefix}pagination-next {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
.#{$class-prefix}pagination-list {
|
||||
li {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
@ -169,61 +169,60 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet {
|
||||
.pagination-list {
|
||||
.#{$class-prefix}pagination-list {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
justify-content: flex-start;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis {
|
||||
.#{$class-prefix}pagination-previous,
|
||||
.#{$class-prefix}pagination-next,
|
||||
.#{$class-prefix}pagination-link,
|
||||
.#{$class-prefix}pagination-ellipsis {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pagination-previous {
|
||||
.#{$class-prefix}pagination-previous {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.pagination-next {
|
||||
.#{$class-prefix}pagination-next {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.#{$class-prefix}pagination {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
|
||||
&.is-centered {
|
||||
.pagination-previous {
|
||||
.#{$class-prefix}pagination-previous {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
.#{$class-prefix}pagination-list {
|
||||
justify-content: center;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.pagination-next {
|
||||
.#{$class-prefix}pagination-next {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
.pagination-previous {
|
||||
.#{$class-prefix}pagination-previous {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.pagination-next {
|
||||
.#{$class-prefix}pagination-next {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
.#{$class-prefix}pagination-list {
|
||||
justify-content: flex-end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ $panel-block-active-icon-color: $link !default;
|
||||
$panel-icon-color: $text-light !default;
|
||||
$panel-colors: $colors !default;
|
||||
|
||||
.panel {
|
||||
.#{$class-prefix}panel {
|
||||
border-radius: $panel-radius;
|
||||
box-shadow: $panel-shadow;
|
||||
font-size: $size-normal;
|
||||
@ -45,30 +45,30 @@ $panel-colors: $colors !default;
|
||||
$color-invert: nth($components, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.panel-heading {
|
||||
.#{$class-prefix}panel-heading {
|
||||
background-color: $color;
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
.panel-tabs a.is-active {
|
||||
.#{$class-prefix}panel-tabs a.is-active {
|
||||
border-bottom-color: $color;
|
||||
}
|
||||
|
||||
.panel-block.is-active .panel-icon {
|
||||
.#{$class-prefix}panel-block.is-active .#{$class-prefix}panel-icon {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-tabs,
|
||||
.panel-block {
|
||||
.#{$class-prefix}panel-tabs,
|
||||
.#{$class-prefix}panel-block {
|
||||
&:not(:last-child) {
|
||||
border-bottom: $panel-item-border;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
.#{$class-prefix}panel-heading {
|
||||
background-color: $panel-heading-background-color;
|
||||
border-radius: $panel-radius $panel-radius 0 0;
|
||||
color: $panel-heading-color;
|
||||
@ -78,7 +78,7 @@ $panel-colors: $colors !default;
|
||||
padding: $panel-heading-padding;
|
||||
}
|
||||
|
||||
.panel-tabs {
|
||||
.#{$class-prefix}panel-tabs {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
font-size: $panel-tabs-font-size;
|
||||
@ -97,7 +97,7 @@ $panel-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-list {
|
||||
.#{$class-prefix}panel-list {
|
||||
a {
|
||||
color: $panel-list-item-color;
|
||||
|
||||
@ -107,7 +107,7 @@ $panel-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-block {
|
||||
.#{$class-prefix}panel-block {
|
||||
align-items: center;
|
||||
color: $panel-block-color;
|
||||
display: flex;
|
||||
@ -118,7 +118,7 @@ $panel-colors: $colors !default;
|
||||
@include ltr-property("margin", 0.75em);
|
||||
}
|
||||
|
||||
& > .control {
|
||||
& > .#{$class-prefix}control {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
width: 100%;
|
||||
@ -132,7 +132,7 @@ $panel-colors: $colors !default;
|
||||
border-left-color: $panel-block-active-border-left-color;
|
||||
color: $panel-block-active-color;
|
||||
|
||||
.panel-icon {
|
||||
.#{$class-prefix}panel-icon {
|
||||
color: $panel-block-active-icon-color;
|
||||
}
|
||||
}
|
||||
@ -143,8 +143,8 @@ $panel-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
a.panel-block,
|
||||
label.panel-block {
|
||||
a.#{$class-prefix}panel-block,
|
||||
label.#{$class-prefix}panel-block {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@ -152,7 +152,7 @@ label.panel-block {
|
||||
}
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
.#{$class-prefix}panel-icon {
|
||||
@include fa(14px, 1em);
|
||||
|
||||
color: $panel-icon-color;
|
||||
|
||||
@ -28,7 +28,7 @@ $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 {
|
||||
.#{$class-prefix}tabs {
|
||||
@extend %block;
|
||||
|
||||
@include overflow-touch;
|
||||
@ -99,7 +99,7 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
&:first-child {
|
||||
@include ltr-property("margin", 0.5em);
|
||||
}
|
||||
@ -131,12 +131,10 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
|
||||
}
|
||||
|
||||
|
||||
@include 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;
|
||||
@ -178,7 +176,11 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
|
||||
li {
|
||||
& + li {
|
||||
@include ltr-property("margin", -#{$tabs-toggle-link-border-width}, false);
|
||||
@include ltr-property(
|
||||
"margin",
|
||||
-#{$tabs-toggle-link-border-width},
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
@ -187,7 +189,6 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
border-bottom-left-radius: $tabs-toggle-link-radius;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-top-right-radius: $tabs-toggle-link-radius;
|
||||
border-bottom-right-radius: $tabs-toggle-link-radius;
|
||||
@ -200,7 +201,6 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
border-bottom-right-radius: $tabs-toggle-link-radius;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-top-left-radius: $tabs-toggle-link-radius;
|
||||
border-bottom-left-radius: $tabs-toggle-link-radius;
|
||||
@ -230,7 +230,6 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-bottom-right-radius: $radius-rounded;
|
||||
border-top-right-radius: $radius-rounded;
|
||||
@ -245,7 +244,6 @@ $tabs-toggle-link-active-color: $link-invert !default;
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-bottom-left-radius: $radius-rounded;
|
||||
border-top-left-radius: $radius-rounded;
|
||||
|
||||
@ -6,10 +6,12 @@ $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-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 {
|
||||
.#{$class-prefix}box {
|
||||
@extend %block;
|
||||
|
||||
background-color: $box-background-color;
|
||||
@ -20,7 +22,7 @@ $box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $l
|
||||
padding: $box-padding;
|
||||
}
|
||||
|
||||
a.box {
|
||||
a.#{$class-prefix}box {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $box-link-hover-shadow;
|
||||
|
||||
@ -44,7 +44,20 @@ $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;
|
||||
$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
|
||||
@mixin button-small {
|
||||
@ -67,7 +80,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
font-size: $size-large;
|
||||
}
|
||||
|
||||
.button {
|
||||
.#{$class-prefix}button {
|
||||
@extend %control;
|
||||
|
||||
@extend %unselectable;
|
||||
@ -94,7 +107,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
&,
|
||||
&.is-small,
|
||||
&.is-medium,
|
||||
@ -104,18 +117,29 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
@include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false);
|
||||
@include ltr-property(
|
||||
"margin",
|
||||
calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}),
|
||||
false
|
||||
);
|
||||
@include ltr-property("margin", $button-padding-horizontal * 0.25);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include ltr-property("margin", $button-padding-horizontal * 0.25, false);
|
||||
@include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}));
|
||||
@include 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});
|
||||
margin-left: calc(
|
||||
#{-0.5 * $button-padding-horizontal} - #{$button-border-width}
|
||||
);
|
||||
margin-right: calc(
|
||||
#{-0.5 * $button-padding-horizontal} - #{$button-border-width}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -244,7 +268,10 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
|
||||
&.is-loading {
|
||||
&::after {
|
||||
border-color: transparent transparent $color-invert $color-invert !important;
|
||||
border-color: transparent
|
||||
transparent
|
||||
$color-invert
|
||||
$color-invert !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -272,7 +299,10 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
&::after {
|
||||
border-color: transparent transparent $color-invert $color-invert !important;
|
||||
border-color: transparent
|
||||
transparent
|
||||
$color-invert
|
||||
$color-invert !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -405,13 +435,13 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
.#{$class-prefix}buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.button {
|
||||
.#{$class-prefix}button {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:not(:last-child):not(.is-fullwidth) {
|
||||
@ -429,25 +459,25 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
|
||||
// Sizes
|
||||
&.are-small {
|
||||
.button:not(.is-normal):not(.is-medium):not(.is-large) {
|
||||
.#{$class-prefix}button:not(.is-normal):not(.is-medium):not(.is-large) {
|
||||
@include button-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.are-medium {
|
||||
.button:not(.is-small):not(.is-normal):not(.is-large) {
|
||||
.#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-large) {
|
||||
@include button-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&.are-large {
|
||||
.button:not(.is-small):not(.is-normal):not(.is-medium) {
|
||||
.#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-medium) {
|
||||
@include button-large;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-addons {
|
||||
.button {
|
||||
.#{$class-prefix}button {
|
||||
&:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
@ -492,7 +522,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
justify-content: center;
|
||||
|
||||
&:not(.has-addons) {
|
||||
.button:not(.is-fullwidth) {
|
||||
.#{$class-prefix}button:not(.is-fullwidth) {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@ -503,7 +533,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
justify-content: flex-end;
|
||||
|
||||
&:not(.has-addons) {
|
||||
.button:not(.is-fullwidth) {
|
||||
.#{$class-prefix}button:not(.is-fullwidth) {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@ -515,13 +545,12 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
|
||||
@include breakpoint($bp-name) {
|
||||
@each $size, $value in $bp-sizes {
|
||||
@if $size != "normal" {
|
||||
.button.is-responsive.is-#{$size} {
|
||||
.#{$class-prefix}button.is-responsive.is-#{$size} {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.button.is-responsive,
|
||||
.button.is-responsive.is-normal {
|
||||
} @else {
|
||||
.#{$class-prefix}button.is-responsive,
|
||||
.#{$class-prefix}button.is-responsive.is-normal {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
$container-offset: 2 * $gap !default;
|
||||
$container-max-width: $fullhd !default;
|
||||
|
||||
.container {
|
||||
.#{$class-prefix}container {
|
||||
flex-grow: 1;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
@ -20,28 +20,24 @@ $container-max-width: $fullhd !default;
|
||||
max-width: $desktop - $container-offset;
|
||||
}
|
||||
|
||||
|
||||
@include until-widescreen {
|
||||
&.is-widescreen:not(.is-max-desktop) {
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include until-fullhd {
|
||||
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include widescreen {
|
||||
&:not(.is-max-desktop) {
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include fullhd {
|
||||
&:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset;
|
||||
|
||||
@ -22,7 +22,7 @@ $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 {
|
||||
.#{$class-prefix}content {
|
||||
@extend %block;
|
||||
|
||||
// Inline
|
||||
@ -236,7 +236,7 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.#{$class-prefix}tabs {
|
||||
li + li {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ $icon-dimensions-medium: 2rem !default;
|
||||
$icon-dimensions-large: 3rem !default;
|
||||
$icon-text-spacing: 0.25em !default;
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
@ -28,7 +28,7 @@ $icon-text-spacing: 0.25em !default;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
.#{$class-prefix}icon-text {
|
||||
align-items: flex-start;
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
@ -36,7 +36,7 @@ $icon-text-spacing: 0.25em !default;
|
||||
line-height: $icon-dimensions;
|
||||
vertical-align: top;
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
@ -45,7 +45,6 @@ $icon-text-spacing: 0.25em !default;
|
||||
margin-right: $icon-text-spacing;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
margin-left: $icon-text-spacing;
|
||||
}
|
||||
@ -56,7 +55,6 @@ $icon-text-spacing: 0.25em !default;
|
||||
margin-left: $icon-text-spacing;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
margin-right: $icon-text-spacing;
|
||||
}
|
||||
@ -64,6 +62,6 @@ $icon-text-spacing: 0.25em !default;
|
||||
}
|
||||
}
|
||||
|
||||
div.icon-text {
|
||||
div.#{$class-prefix}icon-text {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
$dimensions: 16 24 32 48 64 96 128 !default;
|
||||
|
||||
.image {
|
||||
.#{$class-prefix}image {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
|
||||
|
||||
$notification-colors: $colors !default;
|
||||
|
||||
.notification {
|
||||
.#{$class-prefix}notification {
|
||||
@extend %block;
|
||||
|
||||
background-color: $notification-background-color;
|
||||
@ -20,13 +20,11 @@ $notification-colors: $colors !default;
|
||||
padding: $notification-padding-ltr;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
padding: $notification-padding-rtl;
|
||||
}
|
||||
|
||||
|
||||
a:not(.button):not(.dropdown-item) {
|
||||
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -44,16 +42,16 @@ $notification-colors: $colors !default;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& > .delete {
|
||||
& > .#{$class-prefix}delete {
|
||||
@include ltr-position(0.5rem);
|
||||
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
.content {
|
||||
.#{$class-prefix}title,
|
||||
.#{$class-prefix}subtitle,
|
||||
.#{$class-prefix}content {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
.block {
|
||||
.#{$class-prefix}block {
|
||||
@extend %block;
|
||||
}
|
||||
|
||||
.delete {
|
||||
.#{$class-prefix}delete {
|
||||
@extend %delete;
|
||||
}
|
||||
|
||||
.heading {
|
||||
.#{$class-prefix}heading {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
@ -16,11 +16,11 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.loader {
|
||||
.#{$class-prefix}loader {
|
||||
@extend %loader;
|
||||
}
|
||||
|
||||
.number {
|
||||
.#{$class-prefix}number {
|
||||
align-items: center;
|
||||
background-color: $background;
|
||||
border-radius: $radius-rounded;
|
||||
|
||||
@ -8,7 +8,7 @@ $progress-indeterminate-duration: 1.5s !default;
|
||||
|
||||
$progress-colors: $colors !default;
|
||||
|
||||
.progress {
|
||||
.#{$class-prefix}progress {
|
||||
@extend %block;
|
||||
|
||||
-moz-appearance: none;
|
||||
@ -56,7 +56,11 @@ $progress-colors: $colors !default;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$color 30%,
|
||||
$progress-bar-background-color 30%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -67,7 +71,11 @@ $progress-colors: $colors !default;
|
||||
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-image: linear-gradient(
|
||||
to right,
|
||||
$text 30%,
|
||||
$progress-bar-background-color 30%
|
||||
);
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 150% 150%;
|
||||
|
||||
@ -28,7 +28,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
|
||||
|
||||
$table-colors: $colors !default;
|
||||
|
||||
.table {
|
||||
.#{$class-prefix}table {
|
||||
@extend %block;
|
||||
|
||||
background-color: $table-background-color;
|
||||
@ -196,7 +196,7 @@ $table-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.#{$class-prefix}table-container {
|
||||
@extend %block;
|
||||
|
||||
@include overflow-touch;
|
||||
|
||||
@ -7,13 +7,13 @@ $tag-delete-margin: 1px !default;
|
||||
|
||||
$tag-colors: $colors !default;
|
||||
|
||||
.tags {
|
||||
.#{$class-prefix}tags {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tag {
|
||||
.#{$class-prefix}tag {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
@ -31,13 +31,13 @@ $tag-colors: $colors !default;
|
||||
|
||||
// Sizes
|
||||
&.are-medium {
|
||||
.tag:not(.is-normal):not(.is-large) {
|
||||
.#{$class-prefix}tag:not(.is-normal):not(.is-large) {
|
||||
font-size: $size-normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.are-large {
|
||||
.tag:not(.is-normal):not(.is-medium) {
|
||||
.#{$class-prefix}tag:not(.is-normal):not(.is-medium) {
|
||||
font-size: $size-medium;
|
||||
}
|
||||
}
|
||||
@ -45,7 +45,7 @@ $tag-colors: $colors !default;
|
||||
&.is-centered {
|
||||
justify-content: center;
|
||||
|
||||
.tag {
|
||||
.#{$class-prefix}tag {
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
@ -54,7 +54,7 @@ $tag-colors: $colors !default;
|
||||
&.is-right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.tag {
|
||||
.#{$class-prefix}tag {
|
||||
&:not(:first-child) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@ -66,7 +66,7 @@ $tag-colors: $colors !default;
|
||||
}
|
||||
|
||||
&.has-addons {
|
||||
.tag {
|
||||
.#{$class-prefix}tag {
|
||||
@include ltr-property("margin", 0);
|
||||
|
||||
&:not(:first-child) {
|
||||
@ -76,7 +76,6 @@ $tag-colors: $colors !default;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
@ -89,7 +88,6 @@ $tag-colors: $colors !default;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
@ -99,7 +97,7 @@ $tag-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.tag:not(body) {
|
||||
.#{$class-prefix}tag:not(body) {
|
||||
align-items: center;
|
||||
background-color: $tag-background-color;
|
||||
border-radius: $tag-radius;
|
||||
@ -113,7 +111,7 @@ $tag-colors: $colors !default;
|
||||
padding-right: 0.75em;
|
||||
white-space: nowrap;
|
||||
|
||||
.delete {
|
||||
.#{$class-prefix}delete {
|
||||
@include ltr-property("margin", 0.25rem, false);
|
||||
@include ltr-property("margin", -0.375rem);
|
||||
}
|
||||
@ -153,7 +151,7 @@ $tag-colors: $colors !default;
|
||||
font-size: $size-medium;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
&:first-child:not(:last-child) {
|
||||
@include ltr-property("margin", -0.375em, false);
|
||||
@include ltr-property("margin", 0.1875em);
|
||||
@ -215,7 +213,7 @@ $tag-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
a.tag {
|
||||
a.#{$class-prefix}tag {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -19,8 +19,8 @@ $subtitle-strong-color: $text-strong !default;
|
||||
$subtitle-strong-weight: $weight-semibold !default;
|
||||
$subtitle-negative-margin: -1.25rem !default;
|
||||
|
||||
.title,
|
||||
.subtitle {
|
||||
.#{$class-prefix}title,
|
||||
.#{$class-prefix}subtitle {
|
||||
@extend %block;
|
||||
|
||||
word-break: break-word;
|
||||
@ -38,12 +38,12 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
font-size: $title-sup-size;
|
||||
}
|
||||
|
||||
.tag {
|
||||
.#{$class-prefix}tag {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.#{$class-prefix}title {
|
||||
color: $title-color;
|
||||
|
||||
@if $title-family {
|
||||
@ -59,7 +59,7 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
font-weight: $title-strong-weight;
|
||||
}
|
||||
|
||||
&:not(.is-spaced) + .subtitle {
|
||||
&:not(.is-spaced) + .#{$class-prefix}subtitle {
|
||||
margin-top: $subtitle-negative-margin;
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.#{$class-prefix}subtitle {
|
||||
color: $subtitle-color;
|
||||
|
||||
@if $subtitle-family {
|
||||
@ -89,7 +89,7 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
font-weight: $subtitle-strong-weight;
|
||||
}
|
||||
|
||||
&:not(.is-spaced) + .title {
|
||||
&:not(.is-spaced) + .#{$class-prefix}title {
|
||||
margin-top: $subtitle-negative-margin;
|
||||
}
|
||||
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
.#{$class-prefix}checkbox {
|
||||
@extend %checkbox-radio;
|
||||
}
|
||||
|
||||
.radio {
|
||||
.#{$class-prefix}radio {
|
||||
@extend %checkbox-radio;
|
||||
|
||||
& + .radio {
|
||||
& + .#{$class-prefix}radio {
|
||||
@include ltr-property("margin", 0.5em, false);
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ $file-name-max-width: 16em !default;
|
||||
|
||||
$file-colors: $form-colors !default;
|
||||
|
||||
.file {
|
||||
.#{$class-prefix}file {
|
||||
@extend %unselectable;
|
||||
|
||||
align-items: stretch;
|
||||
@ -27,7 +27,7 @@ $file-colors: $form-colors !default;
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
background-color: $color;
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
@ -35,7 +35,7 @@ $file-colors: $form-colors !default;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
background-color: bulmaDarken($color, 2.5%);
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
@ -44,7 +44,7 @@ $file-colors: $form-colors !default;
|
||||
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
|
||||
color: $color-invert;
|
||||
@ -53,7 +53,7 @@ $file-colors: $form-colors !default;
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
background-color: bulmaDarken($color, 5%);
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
@ -74,7 +74,7 @@ $file-colors: $form-colors !default;
|
||||
&.is-medium {
|
||||
font-size: $size-medium;
|
||||
|
||||
.file-icon {
|
||||
.#{$class-prefix}file-icon {
|
||||
.fa {
|
||||
font-size: 21px;
|
||||
}
|
||||
@ -84,7 +84,7 @@ $file-colors: $form-colors !default;
|
||||
&.is-large {
|
||||
font-size: $size-large;
|
||||
|
||||
.file-icon {
|
||||
.#{$class-prefix}file-icon {
|
||||
.fa {
|
||||
font-size: 28px;
|
||||
}
|
||||
@ -93,43 +93,43 @@ $file-colors: $form-colors !default;
|
||||
|
||||
// Modifiers
|
||||
&.has-name {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.is-empty {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
border-radius: $file-radius;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-boxed {
|
||||
.file-label {
|
||||
.#{$class-prefix}file-label {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 1em 3em;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
.#{$class-prefix}file-icon {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
|
||||
@ -139,29 +139,29 @@ $file-colors: $form-colors !default;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
.file-icon .fa {
|
||||
.#{$class-prefix}file-icon .fa {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
.file-icon .fa {
|
||||
.#{$class-prefix}file-icon .fa {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
.file-icon .fa {
|
||||
.#{$class-prefix}file-icon .fa {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-name {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
border-radius: $file-radius $file-radius 0 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-radius: 0 0 $file-radius $file-radius;
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
@ -173,11 +173,11 @@ $file-colors: $form-colors !default;
|
||||
}
|
||||
|
||||
&.is-fullwidth {
|
||||
.file-label {
|
||||
.#{$class-prefix}file-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
flex-grow: 1;
|
||||
max-width: none;
|
||||
}
|
||||
@ -186,11 +186,11 @@ $file-colors: $form-colors !default;
|
||||
&.is-right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
border-radius: 0 $file-radius $file-radius 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-radius: $file-radius 0 0 $file-radius;
|
||||
border-width: 1px 0 1px 1px;
|
||||
order: -1;
|
||||
@ -198,7 +198,7 @@ $file-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.file-label {
|
||||
.#{$class-prefix}file-label {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
@ -207,29 +207,29 @@ $file-colors: $form-colors !default;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
background-color: bulmaDarken($file-cta-background-color, 2.5%);
|
||||
color: $file-cta-hover-color;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-color: bulmaDarken($file-name-border-color, 2.5%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
background-color: bulmaDarken($file-cta-background-color, 5%);
|
||||
color: $file-cta-active-color;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-color: bulmaDarken($file-name-border-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-input {
|
||||
.#{$class-prefix}file-input {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
@ -239,8 +239,8 @@ $file-colors: $form-colors !default;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-cta,
|
||||
.file-name {
|
||||
.#{$class-prefix}file-cta,
|
||||
.#{$class-prefix}file-name {
|
||||
@extend %control;
|
||||
|
||||
border-color: $file-border-color;
|
||||
@ -251,12 +251,12 @@ $file-colors: $form-colors !default;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-cta {
|
||||
.#{$class-prefix}file-cta {
|
||||
background-color: $file-cta-background-color;
|
||||
color: $file-cta-color;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
.#{$class-prefix}file-name {
|
||||
border-color: $file-name-border-color;
|
||||
border-style: $file-name-border-style;
|
||||
border-width: $file-name-border-width;
|
||||
@ -267,7 +267,7 @@ $file-colors: $form-colors !default;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
.#{$class-prefix}file-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 1em;
|
||||
|
||||
@ -56,7 +56,7 @@ $textarea-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
.#{$class-prefix}input {
|
||||
@extend %input-textarea;
|
||||
|
||||
&.is-rounded {
|
||||
@ -74,7 +74,7 @@ $textarea-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
.#{$class-prefix}textarea {
|
||||
@extend %input-textarea;
|
||||
|
||||
display: block;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
$select-colors: $form-colors !default;
|
||||
|
||||
.select {
|
||||
.#{$class-prefix}select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
|
||||
@ -5,7 +5,7 @@ $help-size: $size-small !default;
|
||||
|
||||
$label-colors: $form-colors !default;
|
||||
|
||||
.label {
|
||||
.#{$class-prefix}label {
|
||||
color: $label-color;
|
||||
display: block;
|
||||
font-size: $size-normal;
|
||||
@ -29,7 +29,7 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
.#{$class-prefix}help {
|
||||
display: block;
|
||||
font-size: $help-size;
|
||||
margin-top: 0.25rem;
|
||||
@ -45,7 +45,7 @@ $label-colors: $form-colors !default;
|
||||
|
||||
// Containers
|
||||
|
||||
.field {
|
||||
.#{$class-prefix}field {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@ -55,29 +55,28 @@ $label-colors: $form-colors !default;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.control {
|
||||
.#{$class-prefix}control {
|
||||
&:not(:last-child) {
|
||||
@include ltr-property("margin", -1px);
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
.button,
|
||||
.input,
|
||||
.select select {
|
||||
.#{$class-prefix}button,
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select select {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child:not(:only-child) {
|
||||
.button,
|
||||
.input,
|
||||
.select select {
|
||||
.#{$class-prefix}button,
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select select {
|
||||
@include ltr {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
@ -86,15 +85,14 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
|
||||
&:last-child:not(:only-child) {
|
||||
.button,
|
||||
.input,
|
||||
.select select {
|
||||
.#{$class-prefix}button,
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select select {
|
||||
@include ltr {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@ -102,9 +100,9 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.button,
|
||||
.input,
|
||||
.select select {
|
||||
.#{$class-prefix}button,
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select select {
|
||||
&:not([disabled]) {
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
@ -139,7 +137,7 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
|
||||
&.has-addons-fullwidth {
|
||||
.control {
|
||||
.#{$class-prefix}control {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -150,7 +148,7 @@ $label-colors: $form-colors !default;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
& > .control {
|
||||
& > .#{$class-prefix}control {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
@ -176,7 +174,7 @@ $label-colors: $form-colors !default;
|
||||
&.is-grouped-multiline {
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > .control {
|
||||
& > .#{$class-prefix}control {
|
||||
&:last-child,
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.75rem;
|
||||
@ -200,8 +198,8 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.field-label {
|
||||
.label {
|
||||
.#{$class-prefix}field-label {
|
||||
.#{$class-prefix}label {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@ -209,7 +207,6 @@ $label-colors: $form-colors !default;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
@include tablet {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
@ -240,8 +237,8 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.field-body {
|
||||
.field .field {
|
||||
.#{$class-prefix}field-body {
|
||||
.#{$class-prefix}field .#{$class-prefix}field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -251,11 +248,11 @@ $label-colors: $form-colors !default;
|
||||
flex-grow: 5;
|
||||
flex-shrink: 1;
|
||||
|
||||
.field {
|
||||
.#{$class-prefix}field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& > .field {
|
||||
& > .#{$class-prefix}field {
|
||||
flex-shrink: 1;
|
||||
|
||||
&:not(.is-narrow) {
|
||||
@ -269,7 +266,7 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
.#{$class-prefix}control {
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
font-size: $size-normal;
|
||||
@ -279,28 +276,28 @@ $label-colors: $form-colors !default;
|
||||
// Modifiers
|
||||
&.has-icons-left,
|
||||
&.has-icons-right {
|
||||
.input,
|
||||
.select {
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select {
|
||||
&:focus {
|
||||
& ~ .icon {
|
||||
& ~ .#{$class-prefix}icon {
|
||||
color: $input-icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small ~ .icon {
|
||||
&.is-small ~ .#{$class-prefix}icon {
|
||||
font-size: $size-small;
|
||||
}
|
||||
|
||||
&.is-medium ~ .icon {
|
||||
&.is-medium ~ .#{$class-prefix}icon {
|
||||
font-size: $size-medium;
|
||||
}
|
||||
|
||||
&.is-large ~ .icon {
|
||||
&.is-large ~ .#{$class-prefix}icon {
|
||||
font-size: $size-large;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
.#{$class-prefix}icon {
|
||||
color: $input-icon-color;
|
||||
height: $input-height;
|
||||
pointer-events: none;
|
||||
@ -312,23 +309,23 @@ $label-colors: $form-colors !default;
|
||||
}
|
||||
|
||||
&.has-icons-left {
|
||||
.input,
|
||||
.select select {
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select select {
|
||||
padding-left: $input-height;
|
||||
}
|
||||
|
||||
.icon.is-left {
|
||||
.#{$class-prefix}icon.is-left {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-icons-right {
|
||||
.input,
|
||||
.select select {
|
||||
.#{$class-prefix}input,
|
||||
.#{$class-prefix}select select {
|
||||
padding-right: $input-height;
|
||||
}
|
||||
|
||||
.icon.is-right {
|
||||
.#{$class-prefix}icon.is-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,111 +2,111 @@
|
||||
|
||||
$column-gap: 0.75rem !default;
|
||||
|
||||
.column {
|
||||
.#{$class-prefix}column {
|
||||
display: block;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: $column-gap;
|
||||
|
||||
.columns.is-mobile > &.is-narrow {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-narrow {
|
||||
flex: none;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-full {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-full {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-three-quarters {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-three-quarters {
|
||||
flex: none;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-two-thirds {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-two-thirds {
|
||||
flex: none;
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-half {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-half {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-one-third {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-one-third {
|
||||
flex: none;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-one-quarter {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-one-quarter {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-one-fifth {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-one-fifth {
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-two-fifths {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-two-fifths {
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-three-fifths {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-three-fifths {
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-four-fifths {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-four-fifths {
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-three-quarters {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-three-quarters {
|
||||
@include ltr-property("margin", 75%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-two-thirds {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-two-thirds {
|
||||
@include ltr-property("margin", 66.6666%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-half {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-half {
|
||||
@include ltr-property("margin", 50%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-one-third {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-one-third {
|
||||
@include ltr-property("margin", 33.3333%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-one-quarter {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-one-quarter {
|
||||
@include ltr-property("margin", 25%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-one-fifth {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-one-fifth {
|
||||
@include ltr-property("margin", 20%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-two-fifths {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-two-fifths {
|
||||
@include ltr-property("margin", 40%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-three-fifths {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-three-fifths {
|
||||
@include ltr-property("margin", 60%, false);
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-four-fifths {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-four-fifths {
|
||||
@include ltr-property("margin", 80%, false);
|
||||
}
|
||||
|
||||
@for $i from 0 through 12 {
|
||||
.columns.is-mobile > &.is-#{$i} {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-#{$i} {
|
||||
flex: none;
|
||||
width: percentage(divide($i, 12));
|
||||
}
|
||||
|
||||
.columns.is-mobile > &.is-offset-#{$i} {
|
||||
.#{$class-prefix}columns.is-mobile > &.is-offset-#{$i} {
|
||||
@include ltr-property("margin", percentage(divide($i, 12)), false);
|
||||
}
|
||||
}
|
||||
@ -215,7 +215,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet {
|
||||
&.is-narrow,
|
||||
&.is-narrow-tablet {
|
||||
@ -342,7 +341,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include touch {
|
||||
&.is-narrow-touch {
|
||||
flex: none;
|
||||
@ -447,7 +445,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include desktop {
|
||||
&.is-narrow-desktop {
|
||||
flex: none;
|
||||
@ -552,7 +549,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include widescreen {
|
||||
&.is-narrow-widescreen {
|
||||
flex: none;
|
||||
@ -657,7 +653,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include fullhd {
|
||||
&.is-narrow-fullhd {
|
||||
flex: none;
|
||||
@ -763,7 +758,7 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
.#{$class-prefix}columns {
|
||||
@include ltr-property("margin", -$column-gap, false);
|
||||
@include ltr-property("margin", -$column-gap);
|
||||
|
||||
@ -788,7 +783,7 @@ $column-gap: 0.75rem !default;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
& > .column {
|
||||
& > .#{$class-prefix}column {
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
@ -821,7 +816,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include desktop {
|
||||
// Modifiers
|
||||
&.is-desktop {
|
||||
@ -831,13 +825,13 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
|
||||
@if $variable-columns {
|
||||
.columns.is-variable {
|
||||
.#{$class-prefix}columns.is-variable {
|
||||
--columnGap: 0.75rem;
|
||||
|
||||
@include ltr-property("margin", calc(-1 * var(--columnGap)), false);
|
||||
@include ltr-property("margin", calc(-1 * var(--columnGap)));
|
||||
|
||||
> .column {
|
||||
> .#{$class-prefix}column {
|
||||
padding-left: var(--columnGap);
|
||||
padding-right: var(--columnGap);
|
||||
}
|
||||
@ -853,56 +847,48 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet {
|
||||
&.is-#{$i}-tablet {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet-only {
|
||||
&.is-#{$i}-tablet-only {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include touch {
|
||||
&.is-#{$i}-touch {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include desktop {
|
||||
&.is-#{$i}-desktop {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include desktop-only {
|
||||
&.is-#{$i}-desktop-only {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include widescreen {
|
||||
&.is-#{$i}-widescreen {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include widescreen-only {
|
||||
&.is-#{$i}-widescreen-only {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include fullhd {
|
||||
&.is-#{$i}-fullhd {
|
||||
--columnGap: #{$i * 0.25rem};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
$tile-spacing: 0.75rem !default;
|
||||
|
||||
.tile {
|
||||
.#{$class-prefix}tile {
|
||||
align-items: stretch;
|
||||
display: block;
|
||||
flex-basis: 0;
|
||||
@ -36,7 +36,7 @@ $tile-spacing: 0.75rem !default;
|
||||
&.is-vertical {
|
||||
flex-direction: column;
|
||||
|
||||
& > .tile.is-child:not(:last-child) {
|
||||
& > .#{$class-prefix}tile.is-child:not(:last-child) {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ $footer-background-color: $scheme-main-bis !default;
|
||||
$footer-color: false !default;
|
||||
$footer-padding: 3rem 1.5rem 6rem !default;
|
||||
|
||||
.footer {
|
||||
.#{$class-prefix}footer {
|
||||
background-color: $footer-background-color;
|
||||
padding: $footer-padding;
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@ $hero-body-padding-large: 18rem 6rem !default;
|
||||
$hero-colors: $colors !default;
|
||||
|
||||
// Main container
|
||||
.hero {
|
||||
.#{$class-prefix}hero {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.navbar {
|
||||
.#{$class-prefix}navbar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.#{$class-prefix}tabs {
|
||||
ul {
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -34,37 +34,37 @@ $hero-colors: $colors !default;
|
||||
background-color: $color;
|
||||
color: $color-invert;
|
||||
|
||||
a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
|
||||
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item):not(.tag):not(.#{$class-prefix}pagination-link.is-current),
|
||||
strong {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.title {
|
||||
.#{$class-prefix}title {
|
||||
color: $color-invert;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.#{$class-prefix}subtitle {
|
||||
color: bulmaRgba($color-invert, 0.9);
|
||||
|
||||
a:not(.button),
|
||||
a:not(.#{$class-prefix}button),
|
||||
strong {
|
||||
color: $color-invert;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.#{$class-prefix}navbar-menu {
|
||||
@include touch {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
color: bulmaRgba($color-invert, 0.7);
|
||||
}
|
||||
|
||||
a.navbar-item,
|
||||
.navbar-link {
|
||||
a.#{$class-prefix}navbar-item,
|
||||
.#{$class-prefix}navbar-link {
|
||||
&:hover,
|
||||
&.is-active {
|
||||
background-color: bulmaDarken($color, 5%);
|
||||
@ -72,7 +72,7 @@ $hero-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.#{$class-prefix}tabs {
|
||||
a {
|
||||
color: $color-invert;
|
||||
opacity: 0.9;
|
||||
@ -113,14 +113,30 @@ $hero-colors: $colors !default;
|
||||
// Modifiers
|
||||
@if type-of($color) == "color" {
|
||||
&.is-bold {
|
||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%);
|
||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%);
|
||||
$gradient-top-left: darken(
|
||||
saturate(adjust-hue($color, -10deg), 10%),
|
||||
10%
|
||||
);
|
||||
$gradient-bottom-right: lighten(
|
||||
saturate(adjust-hue($color, 10deg), 5%),
|
||||
5%
|
||||
);
|
||||
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
|
||||
background-image: linear-gradient(
|
||||
141deg,
|
||||
$gradient-top-left 0%,
|
||||
$color 71%,
|
||||
$gradient-bottom-right 100%
|
||||
);
|
||||
|
||||
@include mobile {
|
||||
.navbar-menu {
|
||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
|
||||
.#{$class-prefix}navbar-menu {
|
||||
background-image: linear-gradient(
|
||||
141deg,
|
||||
$gradient-top-left 0%,
|
||||
$color 71%,
|
||||
$gradient-bottom-right 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -130,14 +146,14 @@ $hero-colors: $colors !default;
|
||||
|
||||
// Sizes
|
||||
&.is-small {
|
||||
.hero-body {
|
||||
.#{$class-prefix}hero-body {
|
||||
padding: $hero-body-padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include tablet {
|
||||
.hero-body {
|
||||
.#{$class-prefix}hero-body {
|
||||
padding: $hero-body-padding-medium;
|
||||
}
|
||||
}
|
||||
@ -145,7 +161,7 @@ $hero-colors: $colors !default;
|
||||
|
||||
&.is-large {
|
||||
@include tablet {
|
||||
.hero-body {
|
||||
.#{$class-prefix}hero-body {
|
||||
padding: $hero-body-padding-large;
|
||||
}
|
||||
}
|
||||
@ -154,11 +170,11 @@ $hero-colors: $colors !default;
|
||||
&.is-halfheight,
|
||||
&.is-fullheight,
|
||||
&.is-fullheight-with-navbar {
|
||||
.hero-body {
|
||||
.#{$class-prefix}hero-body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
& > .container {
|
||||
& > .#{$class-prefix}container {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
@ -176,7 +192,7 @@ $hero-colors: $colors !default;
|
||||
|
||||
// Components
|
||||
|
||||
.hero-video {
|
||||
.#{$class-prefix}hero-video {
|
||||
@extend %overlay;
|
||||
|
||||
overflow: hidden;
|
||||
@ -201,12 +217,12 @@ $hero-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
.#{$class-prefix}hero-buttons {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
// Responsiveness
|
||||
@include mobile {
|
||||
.button {
|
||||
.#{$class-prefix}button {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
@ -215,12 +231,11 @@ $hero-colors: $colors !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include tablet {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.button:not(:last-child) {
|
||||
.#{$class-prefix}button:not(:last-child) {
|
||||
@include ltr-property("margin", 1.5rem);
|
||||
}
|
||||
}
|
||||
@ -228,13 +243,13 @@ $hero-colors: $colors !default;
|
||||
|
||||
// Containers
|
||||
|
||||
.hero-head,
|
||||
.hero-foot {
|
||||
.#{$class-prefix}hero-head,
|
||||
.#{$class-prefix}hero-foot {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-body {
|
||||
.#{$class-prefix}hero-body {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
padding: $hero-body-padding;
|
||||
|
||||
@ -5,7 +5,7 @@ $section-padding-desktop: 3rem 3rem !default;
|
||||
$section-padding-medium: 9rem 4.5rem !default;
|
||||
$section-padding-large: 18rem 6rem !default;
|
||||
|
||||
.section {
|
||||
.#{$class-prefix}section {
|
||||
padding: $section-padding;
|
||||
|
||||
// Responsiveness
|
||||
|
||||
@ -26,7 +26,9 @@ $red: hsl(348, 86%, 61%) !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
"Helvetica", "Arial", sans-serif !default;
|
||||
$family-monospace: monospace !default;
|
||||
$render-mode: optimizeLegibility !default;
|
||||
|
||||
@ -66,7 +68,44 @@ $widescreen-enabled: true !default;
|
||||
// 1344px container + 4rem
|
||||
$fullhd: 1344px + 2 * $gap !default;
|
||||
$fullhd-enabled: true !default;
|
||||
$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;
|
||||
$breakpoints: (
|
||||
"mobile": (
|
||||
"until": $tablet
|
||||
),
|
||||
"tablet": (
|
||||
"from": $tablet
|
||||
),
|
||||
"tablet-only": (
|
||||
"from": $tablet,
|
||||
"until": $desktop
|
||||
),
|
||||
"touch": (
|
||||
"from": $desktop
|
||||
),
|
||||
"desktop": (
|
||||
"from": $desktop
|
||||
),
|
||||
"desktop-only": (
|
||||
"from": $desktop,
|
||||
"until": $widescreen
|
||||
),
|
||||
"until-widescreen": (
|
||||
"until": $widescreen
|
||||
),
|
||||
"widescreen": (
|
||||
"from": $widescreen
|
||||
),
|
||||
"widescreen-only": (
|
||||
"from": $widescreen,
|
||||
"until": $fullhd
|
||||
),
|
||||
"until-fullhd": (
|
||||
"until": $fullhd
|
||||
),
|
||||
"fullhd": (
|
||||
"from": $fullhd
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
@ -81,3 +120,7 @@ $speed: 86ms !default;
|
||||
|
||||
$variable-columns: true !default;
|
||||
$rtl: false !default;
|
||||
|
||||
// Prefixes
|
||||
|
||||
$class-prefix: "" !default;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user