library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add CSS class name prefix

Browse Source
This commit is contained in:
Jeremy Thomas 2022-11-23 22:53:56 +00:00
parent f75e9fcec2
commit 7de49012b7
50 changed files with 20999 additions and 9088 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bulma-prefixed.scss Normal file
View File

@ -0,0 +1,5 @@
@charset "utf-8";
$class-prefix: "bulma-";
@import "bulma";

11826
css/bulma-prefixed.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
css/bulma-prefixed.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
css/bulma-prefixed.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4855
css/bulma-rtl.css
View File

File diff suppressed because it is too large Load Diff

2
css/bulma-rtl.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4855
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

7328
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
docs/css/bulma.css vendored
View File

@ -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 */ /* Bulma Utilities */
.button, .input, .textarea, .select select, .file-cta, .button, .input, .textarea, .select select, .file-cta,
.file-name, .pagination-previous, .file-name, .pagination-previous,
@ -510,8 +511,8 @@ a.box:active {
} }
.button .icon:first-child:last-child { .button .icon:first-child:last-child {
margin-left: calc(-0.5em - 1px); margin-left: calc( -0.5em - 1px);
margin-right: calc(-0.5em - 1px); margin-right: calc( -0.5em - 1px);
} }
.button:hover, .button.is-hovered { .button:hover, .button.is-hovered {
@ -2812,7 +2813,7 @@ div.icon-text {
} }
.table th:not([align]) { .table th:not([align]) {
text-align: inherit; text-align: left;
} }
.table tr.is-selected { .table tr.is-selected {
@ -4603,7 +4604,7 @@ fieldset[disabled] .select select:hover {
.breadcrumb li + li::before { .breadcrumb li + li::before {
color: #b5b5b5; color: #b5b5b5;
content: "\0002f"; content: "/";
} }
.breadcrumb ul, .breadcrumb ul,
@ -4645,19 +4646,19 @@ fieldset[disabled] .select select:hover {
} }
.breadcrumb.has-arrow-separator li + li::before { .breadcrumb.has-arrow-separator li + li::before {
content: "\02192"; content: "→";
} }
.breadcrumb.has-bullet-separator li + li::before { .breadcrumb.has-bullet-separator li + li::before {
content: "\02022"; content: "•";
} }
.breadcrumb.has-dot-separator li + li::before { .breadcrumb.has-dot-separator li + li::before {
content: "\000b7"; content: "·";
} }
.breadcrumb.has-succeeds-separator li + li::before { .breadcrumb.has-succeeds-separator li + li::before {
content: "\0227B"; content: "≻";
} }
.card { .card {

163
docs/cypress.config.js
View File

@ -1,83 +1,83 @@
const { defineConfig } = require('cypress') const { defineConfig } = require("cypress");
module.exports = defineConfig({ module.exports = defineConfig({
projectId: 'tnstsp', projectId: "bulma-e2e",
env: { env: {
black: 'rgb(10, 10, 10)', black: "rgb(10, 10, 10)",
'black-bis': 'rgb(18, 18, 18)', "black-bis": "rgb(18, 18, 18)",
'black-ter': 'rgb(36, 36, 36)', "black-ter": "rgb(36, 36, 36)",
'grey-darker': 'rgb(54, 54, 54)', "grey-darker": "rgb(54, 54, 54)",
'grey-dark': 'rgb(74, 74, 74)', "grey-dark": "rgb(74, 74, 74)",
grey: 'rgb(122, 122, 122)', grey: "rgb(122, 122, 122)",
'grey-light': 'rgb(181, 181, 181)', "grey-light": "rgb(181, 181, 181)",
'grey-lighter': 'rgb(219, 219, 219)', "grey-lighter": "rgb(219, 219, 219)",
'grey-lightest': 'rgb(237, 237, 237)', "grey-lightest": "rgb(237, 237, 237)",
'white-ter': 'rgb(245, 245, 245)', "white-ter": "rgb(245, 245, 245)",
'white-bis': 'rgb(250, 250, 250)', "white-bis": "rgb(250, 250, 250)",
white: 'rgb(255, 255, 255)', white: "rgb(255, 255, 255)",
transparent: 'rgba(0, 0, 0, 0)', transparent: "rgba(0, 0, 0, 0)",
'black-transparent': 'rgba(0, 0, 0, 0.7)', "black-transparent": "rgba(0, 0, 0, 0.7)",
orange: 'rgb(255, 71, 15)', orange: "rgb(255, 71, 15)",
yellow: 'rgb(255, 224, 138)', yellow: "rgb(255, 224, 138)",
green: 'rgb(72, 199, 142)', green: "rgb(72, 199, 142)",
turquoise: 'rgb(0, 209, 178)', turquoise: "rgb(0, 209, 178)",
cyan: 'rgb(62, 142, 208)', cyan: "rgb(62, 142, 208)",
blue: 'rgb(72, 95, 199)', blue: "rgb(72, 95, 199)",
purple: 'rgb(184, 107, 255)', purple: "rgb(184, 107, 255)",
red: 'rgb(241, 70, 104)', red: "rgb(241, 70, 104)",
'color-names': ['primary', 'link', 'info', 'success', 'warning', 'danger'], "color-names": ["primary", "link", "info", "success", "warning", "danger"],
primary: 'rgb(0, 209, 178)', primary: "rgb(0, 209, 178)",
'primary-invert': 'rgb(255, 255, 255)', "primary-invert": "rgb(255, 255, 255)",
'primary-light': 'rgb(235, 255, 252)', "primary-light": "rgb(235, 255, 252)",
'primary-dark': 'rgb(0, 148, 126)', "primary-dark": "rgb(0, 148, 126)",
link: 'rgb(72, 95, 199)', link: "rgb(72, 95, 199)",
'link-invert': 'rgb(255, 255, 255)', "link-invert": "rgb(255, 255, 255)",
'link-light': 'rgb(239, 241, 250)', "link-light": "rgb(239, 241, 250)",
'link-dark': 'rgb(56, 80, 183)', "link-dark": "rgb(56, 80, 183)",
info: 'rgb(62, 142, 208)', info: "rgb(62, 142, 208)",
'info-invert': 'rgb(255, 255, 255)', "info-invert": "rgb(255, 255, 255)",
'info-light': 'rgb(239, 245, 251)', "info-light": "rgb(239, 245, 251)",
'info-dark': 'rgb(41, 111, 168)', "info-dark": "rgb(41, 111, 168)",
success: 'rgb(72, 199, 142)', success: "rgb(72, 199, 142)",
'success-invert': 'rgb(255, 255, 255)', "success-invert": "rgb(255, 255, 255)",
'success-light': 'rgb(239, 250, 245)', "success-light": "rgb(239, 250, 245)",
'success-dark': 'rgb(37, 121, 83)', "success-dark": "rgb(37, 121, 83)",
warning: 'rgb(255, 224, 138)', warning: "rgb(255, 224, 138)",
'warning-invert': 'rgba(0, 0, 0, 0.7)', "warning-invert": "rgba(0, 0, 0, 0.7)",
'warning-light': 'rgb(255, 250, 235)', "warning-light": "rgb(255, 250, 235)",
'warning-dark': 'rgb(148, 108, 0)', "warning-dark": "rgb(148, 108, 0)",
danger: 'rgb(241, 70, 104)', danger: "rgb(241, 70, 104)",
'danger-invert': 'rgb(255, 255, 255)', "danger-invert": "rgb(255, 255, 255)",
'danger-light': 'rgb(254, 236, 240)', "danger-light": "rgb(254, 236, 240)",
'danger-dark': 'rgb(204, 15, 53)', "danger-dark": "rgb(204, 15, 53)",
'scheme-main': 'rgb(255, 255, 255)', "scheme-main": "rgb(255, 255, 255)",
'scheme-main-bis': 'rgb(250, 250, 250)', "scheme-main-bis": "rgb(250, 250, 250)",
'scheme-main-ter': 'rgb(245, 245, 245)', "scheme-main-ter": "rgb(245, 245, 245)",
border: 'rgb(219, 219, 219)', border: "rgb(219, 219, 219)",
'border-hover': 'rgb(181, 181, 181)', "border-hover": "rgb(181, 181, 181)",
text: 'rgb(74, 74, 74)', text: "rgb(74, 74, 74)",
'text-strong': 'rgb(54, 54, 54)', "text-strong": "rgb(54, 54, 54)",
'text-light': 'rgb(122, 122, 122)', "text-light": "rgb(122, 122, 122)",
'text-invert': 'rgb(255, 255, 255)', "text-invert": "rgb(255, 255, 255)",
code: 'rgb(218, 16, 57)', code: "rgb(218, 16, 57)",
'control-radius': '4px', "control-radius": "4px",
'control-radius-small': '2px', "control-radius-small": "2px",
'control-border-width': '1px', "control-border-width": "1px",
'control-height': '40px', "control-height": "40px",
'control-line-height': '24px', "control-line-height": "24px",
'control-padding-vertical': '7px', "control-padding-vertical": "7px",
'control-padding-horizontal': '11px', "control-padding-horizontal": "11px",
'input-shadow': 'rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset', "input-shadow": "rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset",
'size-small': '12px', "size-small": "12px",
'size-normal': '16px', "size-normal": "16px",
'size-medium': '20px', "size-medium": "20px",
'size-large': '24px', "size-large": "24px",
'weight-light': '300', "weight-light": "300",
'weight-normal': '400', "weight-normal": "400",
'weight-medium': '500', "weight-medium": "500",
'weight-semibold': '600', "weight-semibold": "600",
'weight-bold': '700', "weight-bold": "700",
'family-code': 'monospace', "family-code": "monospace",
viewports: { viewports: {
mobile: [320, 480], mobile: [320, 480],
tablet: [769, 640], tablet: [769, 640],
@ -98,14 +98,15 @@ module.exports = defineConfig({
medium: 20, medium: 20,
large: 24, large: 24,
}, },
'just-sizes': ['small', 'normal', 'medium', 'large'], "just-sizes": ["small", "normal", "medium", "large"],
}, },
e2e: { e2e: {
// We've imported your old cypress plugins here. // We've imported your old cypress plugins here.
// You may want to clean this up later by importing these. // You may want to clean this up later by importing these.
setupNodeEvents(on, config) { 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,
});

6
package.json
View File

@ -41,11 +41,15 @@
"build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css", "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", "build-sass": "node-sass --output-style expanded --source-map true bulma.scss css/bulma.css",
"clean": "rimraf 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": "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-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-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", "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" "start": "npm run build-sass -- --watch"
}, },
"files": [ "files": [

7
sass/components/breadcrumb.scss
View File

@ -9,7 +9,7 @@ $breadcrumb-item-padding-horizontal: 0.75em !default;
$breadcrumb-item-separator-color: $border-hover !default; $breadcrumb-item-separator-color: $border-hover !default;
.breadcrumb { .#{$class-prefix}breadcrumb {
@extend %block; @extend %block;
@extend %unselectable; @extend %unselectable;
@ -22,7 +22,8 @@ $breadcrumb-item-separator-color: $border-hover !default;
color: $breadcrumb-item-color; color: $breadcrumb-item-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal; padding: $breadcrumb-item-padding-vertical
$breadcrumb-item-padding-horizontal;
&:hover { &:hover {
color: $breadcrumb-item-hover-color; color: $breadcrumb-item-hover-color;
@ -59,7 +60,7 @@ $breadcrumb-item-separator-color: $border-hover !default;
justify-content: flex-start; justify-content: flex-start;
} }
.icon { .#{$class-prefix}icon {
&:first-child { &:first-child {
@include ltr-property("margin", 0.5em); @include ltr-property("margin", 0.5em);
} }

20
sass/components/card.scss
View File

@ -20,7 +20,7 @@ $card-footer-padding: 0.75rem !default;
$card-media-margin: $block-spacing !default; $card-media-margin: $block-spacing !default;
.card { .#{$class-prefix}card {
background-color: $card-background-color; background-color: $card-background-color;
border-radius: $card-radius; border-radius: $card-radius;
box-shadow: $card-shadow; box-shadow: $card-shadow;
@ -41,7 +41,7 @@ $card-media-margin: $block-spacing !default;
} }
} }
.card-header { .#{$class-prefix}card-header {
@extend %card-item; @extend %card-item;
background-color: $card-header-background-color; background-color: $card-header-background-color;
@ -50,7 +50,7 @@ $card-media-margin: $block-spacing !default;
display: flex; display: flex;
} }
.card-header-title { .#{$class-prefix}card-header-title {
align-items: center; align-items: center;
color: $card-header-color; color: $card-header-color;
display: flex; display: flex;
@ -63,7 +63,7 @@ $card-media-margin: $block-spacing !default;
} }
} }
.card-header-icon { .#{$class-prefix}card-header-icon {
@include reset; @include reset;
align-items: center; align-items: center;
@ -73,7 +73,7 @@ $card-media-margin: $block-spacing !default;
padding: $card-header-padding; padding: $card-header-padding;
} }
.card-image { .#{$class-prefix}card-image {
display: block; display: block;
position: relative; position: relative;
@ -92,14 +92,14 @@ $card-media-margin: $block-spacing !default;
} }
} }
.card-content { .#{$class-prefix}card-content {
@extend %card-item; @extend %card-item;
background-color: $card-content-background-color; background-color: $card-content-background-color;
padding: $card-content-padding; padding: $card-content-padding;
} }
.card-footer { .#{$class-prefix}card-footer {
@extend %card-item; @extend %card-item;
background-color: $card-footer-background-color; background-color: $card-footer-background-color;
@ -108,7 +108,7 @@ $card-media-margin: $block-spacing !default;
display: flex; display: flex;
} }
.card-footer-item { .#{$class-prefix}card-footer-item {
align-items: center; align-items: center;
display: flex; display: flex;
flex-basis: 0; flex-basis: 0;
@ -124,8 +124,8 @@ $card-media-margin: $block-spacing !default;
// Combinations // Combinations
.card { .#{$class-prefix}card {
.media:not(:last-child) { .#{$class-prefix}media:not(:last-child) {
margin-bottom: $card-media-margin; margin-bottom: $card-media-margin;
} }
} }

20
sass/components/dropdown.scss
View File

@ -19,27 +19,27 @@ $dropdown-item-active-background-color: $link !default;
$dropdown-divider-background-color: $border-light !default; $dropdown-divider-background-color: $border-light !default;
.dropdown { .#{$class-prefix}dropdown {
display: inline-flex; display: inline-flex;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
&.is-active, &.is-active,
&.is-hoverable:hover { &.is-hoverable:hover {
.dropdown-menu { .#{$class-prefix}dropdown-menu {
display: block; display: block;
} }
} }
&.is-right { &.is-right {
.dropdown-menu { .#{$class-prefix}dropdown-menu {
left: auto; left: auto;
right: 0; right: 0;
} }
} }
&.is-up { &.is-up {
.dropdown-menu { .#{$class-prefix}dropdown-menu {
bottom: 100%; bottom: 100%;
padding-bottom: $dropdown-content-offset; padding-bottom: $dropdown-content-offset;
padding-top: initial; padding-top: initial;
@ -48,7 +48,7 @@ $dropdown-divider-background-color: $border-light !default;
} }
} }
.dropdown-menu { .#{$class-prefix}dropdown-menu {
display: none; display: none;
@include ltr-position(0, false); @include ltr-position(0, false);
@ -60,7 +60,7 @@ $dropdown-divider-background-color: $border-light !default;
z-index: $dropdown-content-z; z-index: $dropdown-content-z;
} }
.dropdown-content { .#{$class-prefix}dropdown-content {
background-color: $dropdown-content-background-color; background-color: $dropdown-content-background-color;
border-radius: $dropdown-content-radius; border-radius: $dropdown-content-radius;
box-shadow: $dropdown-content-shadow; box-shadow: $dropdown-content-shadow;
@ -68,7 +68,7 @@ $dropdown-divider-background-color: $border-light !default;
padding-top: $dropdown-content-padding-top; padding-top: $dropdown-content-padding-top;
} }
.dropdown-item { .#{$class-prefix}dropdown-item {
color: $dropdown-item-color; color: $dropdown-item-color;
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
@ -77,8 +77,8 @@ $dropdown-divider-background-color: $border-light !default;
position: relative; position: relative;
} }
a.dropdown-item, a.#{$class-prefix}dropdown-item,
button.dropdown-item { button.#{$class-prefix}dropdown-item {
@include ltr-property("padding", 3rem); @include ltr-property("padding", 3rem);
text-align: inherit; text-align: inherit;
@ -96,7 +96,7 @@ button.dropdown-item {
} }
} }
.dropdown-divider { .#{$class-prefix}dropdown-divider {
background-color: $dropdown-divider-background-color; background-color: $dropdown-divider-background-color;
border: none; border: none;
display: block; display: block;

31
sass/components/level.scss
View File

@ -2,7 +2,7 @@
$level-item-spacing: $block-spacing * 0.5 !default; $level-item-spacing: $block-spacing * 0.5 !default;
.level { .#{$class-prefix}level {
@extend %block; @extend %block;
align-items: center; align-items: center;
@ -21,16 +21,16 @@ $level-item-spacing: $block-spacing * 0.5 !default;
&.is-mobile { &.is-mobile {
display: flex; display: flex;
.level-left, .#{$class-prefix}level-left,
.level-right { .#{$class-prefix}level-right {
display: flex; display: flex;
} }
.level-left + .level-right { .#{$class-prefix}level-left + .#{$class-prefix}level-right {
margin-top: 0; margin-top: 0;
} }
.level-item { .#{$class-prefix}level-item {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
@ -47,7 +47,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
@include tablet { @include tablet {
display: flex; display: flex;
& > .level-item { & > .#{$class-prefix}level-item {
&:not(.is-narrow) { &:not(.is-narrow) {
flex-grow: 1; flex-grow: 1;
} }
@ -55,7 +55,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
} }
} }
.level-item { .#{$class-prefix}level-item {
align-items: center; align-items: center;
display: flex; display: flex;
flex-basis: auto; flex-basis: auto;
@ -63,8 +63,8 @@ $level-item-spacing: $block-spacing * 0.5 !default;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
.title, .#{$class-prefix}title,
.subtitle { .#{$class-prefix}subtitle {
margin-bottom: 0; margin-bottom: 0;
} }
@ -76,13 +76,13 @@ $level-item-spacing: $block-spacing * 0.5 !default;
} }
} }
.level-left, .#{$class-prefix}level-left,
.level-right { .#{$class-prefix}level-right {
flex-basis: auto; flex-basis: auto;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
.level-item { .#{$class-prefix}level-item {
// Modifiers // Modifiers
&.is-flexible { &.is-flexible {
flex-grow: 1; flex-grow: 1;
@ -97,24 +97,23 @@ $level-item-spacing: $block-spacing * 0.5 !default;
} }
} }
.level-left { .#{$class-prefix}level-left {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
// Responsiveness // Responsiveness
@include mobile { @include mobile {
& + .level-right { & + .#{$class-prefix}level-right {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
} }
@include tablet { @include tablet {
display: flex; display: flex;
} }
} }
.level-right { .#{$class-prefix}level-right {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;

30
sass/components/media.scss
View File

@ -9,35 +9,35 @@ $media-level-1-spacing: 0.75rem !default;
$media-level-1-content-spacing: 0.5rem !default; $media-level-1-content-spacing: 0.5rem !default;
$media-level-2-spacing: 0.5rem !default; $media-level-2-spacing: 0.5rem !default;
.media { .#{$class-prefix}media {
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
text-align: inherit; text-align: inherit;
.content:not(:last-child) { .#{$class-prefix}content:not(:last-child) {
margin-bottom: $media-content-spacing; margin-bottom: $media-content-spacing;
} }
.media { .#{$class-prefix}media {
border-top: $media-border-size solid $media-border-color; border-top: $media-border-size solid $media-border-color;
display: flex; display: flex;
padding-top: $media-level-1-spacing; padding-top: $media-level-1-spacing;
.content:not(:last-child), .#{$class-prefix}content:not(:last-child),
.control:not(:last-child) { .#{$class-prefix}control:not(:last-child) {
margin-bottom: $media-level-1-content-spacing; margin-bottom: $media-level-1-content-spacing;
} }
.media { .#{$class-prefix}media {
padding-top: $media-level-2-spacing; padding-top: $media-level-2-spacing;
& + .media { & + .#{$class-prefix}media {
margin-top: $media-level-2-spacing; margin-top: $media-level-2-spacing;
} }
} }
} }
& + .media { & + .#{$class-prefix}media {
border-top: $media-border-size solid $media-border-color; border-top: $media-border-size solid $media-border-color;
margin-top: $media-spacing; margin-top: $media-spacing;
padding-top: $media-spacing; padding-top: $media-spacing;
@ -45,29 +45,29 @@ $media-level-2-spacing: 0.5rem !default;
// Sizes // Sizes
&.is-large { &.is-large {
& + .media { & + .#{$class-prefix}media {
margin-top: $media-spacing-large; margin-top: $media-spacing-large;
padding-top: $media-spacing-large; padding-top: $media-spacing-large;
} }
} }
} }
.media-left, .#{$class-prefix}media-left,
.media-right { .#{$class-prefix}media-right {
flex-basis: auto; flex-basis: auto;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.media-left { .#{$class-prefix}media-left {
@include ltr-property("margin", $media-spacing); @include ltr-property("margin", $media-spacing);
} }
.media-right { .#{$class-prefix}media-right {
@include ltr-property("margin", $media-spacing, false); @include ltr-property("margin", $media-spacing, false);
} }
.media-content { .#{$class-prefix}media-content {
flex-basis: auto; flex-basis: auto;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -75,7 +75,7 @@ $media-level-2-spacing: 0.5rem !default;
} }
@include mobile { @include mobile {
.media-content { .#{$class-prefix}media-content {
overflow-x: auto; overflow-x: auto;
} }
} }

6
sass/components/menu.scss
View File

@ -18,7 +18,7 @@ $menu-label-font-size: 0.75em !default;
$menu-label-letter-spacing: 0.1em !default; $menu-label-letter-spacing: 0.1em !default;
$menu-label-spacing: 1em !default; $menu-label-spacing: 1em !default;
.menu { .#{$class-prefix}menu {
font-size: $size-normal; font-size: $size-normal;
// Sizes // Sizes
@ -35,7 +35,7 @@ $menu-label-spacing: 1em !default;
} }
} }
.menu-list { .#{$class-prefix}menu-list {
line-height: $menu-list-line-height; line-height: $menu-list-line-height;
a { a {
@ -67,7 +67,7 @@ $menu-label-spacing: 1em !default;
} }
} }
.menu-label { .#{$class-prefix}menu-label {
color: $menu-label-color; color: $menu-label-color;
font-size: $menu-label-font-size; font-size: $menu-label-font-size;
letter-spacing: $menu-label-letter-spacing; letter-spacing: $menu-label-letter-spacing;

27
sass/components/message.scss
View File

@ -21,7 +21,7 @@ $message-body-pre-code-background-color: transparent !default;
$message-header-body-border-width: 0 !default; $message-header-body-border-width: 0 !default;
$message-colors: $colors !default; $message-colors: $colors !default;
.message { .#{$class-prefix}message {
@extend %block; @extend %block;
background-color: $message-background-color; background-color: $message-background-color;
@ -32,7 +32,7 @@ $message-colors: $colors !default;
color: currentColor; 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; color: currentColor;
text-decoration: underline; text-decoration: underline;
} }
@ -62,15 +62,16 @@ $message-colors: $colors !default;
@if length($components) >= 4 { @if length($components) >= 4 {
$color-dark: nth($components, 4); $color-dark: nth($components, 4);
} } @else {
@else {
$color-luminance: colorLuminance($color); $color-luminance: colorLuminance($color);
$darken-percentage: $color-luminance * 70%; $darken-percentage: $color-luminance * 70%;
$desaturate-percentage: $color-luminance * 30%; $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-lightning: max(100% - lightness($color) - 2%, 0%);
$color-light: lighten($color, $color-lightning); $color-light: lighten($color, $color-lightning);
} }
@ -78,12 +79,12 @@ $message-colors: $colors !default;
&.is-#{$name} { &.is-#{$name} {
background-color: $color-light; background-color: $color-light;
.message-header { .#{$class-prefix}message-header {
background-color: $color; background-color: $color;
color: $color-invert; color: $color-invert;
} }
.message-body { .#{$class-prefix}message-body {
border-color: $color; border-color: $color;
color: $color-dark; color: $color-dark;
} }
@ -91,7 +92,7 @@ $message-colors: $colors !default;
} }
} }
.message-header { .#{$class-prefix}message-header {
align-items: center; align-items: center;
background-color: $message-header-background-color; background-color: $message-header-background-color;
border-radius: $message-header-radius $message-header-radius 0 0; border-radius: $message-header-radius $message-header-radius 0 0;
@ -103,21 +104,21 @@ $message-colors: $colors !default;
padding: $message-header-padding; padding: $message-header-padding;
position: relative; position: relative;
.delete { .#{$class-prefix}delete {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@include ltr-property("margin", 0.75em, false); @include ltr-property("margin", 0.75em, false);
} }
& + .message-body { & + .#{$class-prefix}message-body {
border-width: $message-header-body-border-width; border-width: $message-header-body-border-width;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
} }
.message-body { .#{$class-prefix}message-body {
border-color: $message-body-border-color; border-color: $message-body-border-color;
border-radius: $message-body-radius; border-radius: $message-body-radius;
border-style: solid; border-style: solid;

26
sass/components/modal.scss
View File

@ -32,7 +32,7 @@ $modal-card-body-padding: 20px !default;
$modal-breakpoint: $tablet !default; $modal-breakpoint: $tablet !default;
.modal { .#{$class-prefix}modal {
@extend %overlay; @extend %overlay;
align-items: center; align-items: center;
@ -49,14 +49,14 @@ $modal-breakpoint: $tablet !default;
} }
} }
.modal-background { .#{$class-prefix}modal-background {
@extend %overlay; @extend %overlay;
background-color: $modal-background-background-color; background-color: $modal-background-background-color;
} }
.modal-content, .#{$class-prefix}modal-content,
.modal-card { .#{$class-prefix}modal-card {
margin: 0 $modal-content-margin-mobile; margin: 0 $modal-content-margin-mobile;
max-height: calc(100vh - #{$modal-content-spacing-mobile}); max-height: calc(100vh - #{$modal-content-spacing-mobile});
overflow: auto; overflow: auto;
@ -71,7 +71,7 @@ $modal-breakpoint: $tablet !default;
} }
} }
.modal-close { .#{$class-prefix}modal-close {
@extend %delete; @extend %delete;
background: none; background: none;
@ -84,7 +84,7 @@ $modal-breakpoint: $tablet !default;
width: $modal-close-dimensions; width: $modal-close-dimensions;
} }
.modal-card { .#{$class-prefix}modal-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: calc(100vh - #{$modal-card-spacing}); max-height: calc(100vh - #{$modal-card-spacing});
@ -92,8 +92,8 @@ $modal-breakpoint: $tablet !default;
-ms-overflow-y: visible; -ms-overflow-y: visible;
} }
.modal-card-head, .#{$class-prefix}modal-card-head,
.modal-card-foot { .#{$class-prefix}modal-card-foot {
align-items: center; align-items: center;
background-color: $modal-card-head-background-color; background-color: $modal-card-head-background-color;
display: flex; display: flex;
@ -103,13 +103,13 @@ $modal-breakpoint: $tablet !default;
position: relative; position: relative;
} }
.modal-card-head { .#{$class-prefix}modal-card-head {
border-bottom: $modal-card-head-border-bottom; border-bottom: $modal-card-head-border-bottom;
border-top-left-radius: $modal-card-head-radius; border-top-left-radius: $modal-card-head-radius;
border-top-right-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; color: $modal-card-title-color;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
@ -117,19 +117,19 @@ $modal-breakpoint: $tablet !default;
line-height: $modal-card-title-line-height; 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-left-radius: $modal-card-foot-radius;
border-bottom-right-radius: $modal-card-foot-radius; border-bottom-right-radius: $modal-card-foot-radius;
border-top: $modal-card-foot-border-top; border-top: $modal-card-foot-border-top;
.button { .#{$class-prefix}button {
&:not(:last-child) { &:not(:last-child) {
@include ltr-property("margin", 0.5em); @include ltr-property("margin", 0.5em);
} }
} }
} }
.modal-card-body { .#{$class-prefix}modal-card-body {
@include overflow-touch; @include overflow-touch;
background-color: $modal-card-body-background-color; background-color: $modal-card-body-background-color;

184
sass/components/navbar.scss
View File

@ -34,7 +34,8 @@ $navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-z: 20 !default; $navbar-dropdown-z: 20 !default;
$navbar-dropdown-boxed-radius: $radius-large !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-color: $scheme-invert !default;
$navbar-dropdown-item-hover-background-color: $background !default; $navbar-dropdown-item-hover-background-color: $background !default;
@ -57,7 +58,7 @@ $navbar-colors: $colors !default;
z-index: $navbar-fixed-z; z-index: $navbar-fixed-z;
} }
.navbar { .#{$class-prefix}navbar {
background-color: $navbar-background-color; background-color: $navbar-background-color;
min-height: $navbar-height; min-height: $navbar-height;
position: relative; position: relative;
@ -71,14 +72,14 @@ $navbar-colors: $colors !default;
background-color: $color; background-color: $color;
color: $color-invert; color: $color-invert;
.navbar-brand { .#{$class-prefix}navbar-brand {
& > .navbar-item, & > .#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
color: $color-invert; color: $color-invert;
} }
& > a.navbar-item, & > a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
&:focus, &:focus,
&:hover, &:hover,
&.is-active { &.is-active {
@ -87,27 +88,27 @@ $navbar-colors: $colors !default;
} }
} }
.navbar-link { .#{$class-prefix}navbar-link {
&::after { &::after {
border-color: $color-invert; border-color: $color-invert;
} }
} }
} }
.navbar-burger { .#{$class-prefix}navbar-burger {
color: $color-invert; color: $color-invert;
} }
@include from($navbar-breakpoint) { @include from($navbar-breakpoint) {
.navbar-start, .#{$class-prefix}navbar-start,
.navbar-end { .#{$class-prefix}navbar-end {
& > .navbar-item, & > .#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
color: $color-invert; color: $color-invert;
} }
& > a.navbar-item, & > a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
&:focus, &:focus,
&:hover, &:hover,
&.is-active { &.is-active {
@ -116,22 +117,25 @@ $navbar-colors: $colors !default;
} }
} }
.navbar-link { .#{$class-prefix}navbar-link {
&::after { &::after {
border-color: $color-invert; border-color: $color-invert;
} }
} }
} }
.navbar-item.has-dropdown:focus .navbar-link, .#{$class-prefix}navbar-item.has-dropdown:focus
.navbar-item.has-dropdown:hover .navbar-link, .#{$class-prefix}navbar-link,
.navbar-item.has-dropdown.is-active .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%); background-color: bulmaDarken($color, 5%);
color: $color-invert; color: $color-invert;
} }
.navbar-dropdown { .#{$class-prefix}navbar-dropdown {
a.navbar-item { a.#{$class-prefix}navbar-item {
&.is-active { &.is-active {
background-color: $color; background-color: $color;
color: $color-invert; color: $color-invert;
@ -142,7 +146,7 @@ $navbar-colors: $colors !default;
} }
} }
& > .container { & > .#{$class-prefix}container {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
min-height: $navbar-height; min-height: $navbar-height;
@ -182,16 +186,16 @@ body {
} }
} }
.navbar-brand, .#{$class-prefix}navbar-brand,
.navbar-tabs { .#{$class-prefix}navbar-tabs {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
min-height: $navbar-height; min-height: $navbar-height;
} }
.navbar-brand { .#{$class-prefix}navbar-brand {
a.navbar-item { a.#{$class-prefix}navbar-item {
&:focus, &:focus,
&:hover { &:hover {
background-color: transparent; background-color: transparent;
@ -199,7 +203,7 @@ body {
} }
} }
.navbar-tabs { .#{$class-prefix}navbar-tabs {
@include overflow-touch; @include overflow-touch;
max-width: 100vw; max-width: 100vw;
@ -207,7 +211,7 @@ body {
overflow-y: hidden; overflow-y: hidden;
} }
.navbar-burger { .#{$class-prefix}navbar-burger {
@extend %reset; @extend %reset;
color: $navbar-burger-color; color: $navbar-burger-color;
@ -216,19 +220,19 @@ body {
@include ltr-property("margin", auto, false); @include ltr-property("margin", auto, false);
} }
.navbar-menu { .#{$class-prefix}navbar-menu {
display: none; display: none;
} }
.navbar-item, .#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
color: $navbar-item-color; color: $navbar-item-color;
display: block; display: block;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
position: relative; position: relative;
.icon { .#{$class-prefix}icon {
&:only-child { &:only-child {
margin-left: -0.25rem; margin-left: -0.25rem;
margin-right: -0.25rem; margin-right: -0.25rem;
@ -236,8 +240,8 @@ body {
} }
} }
a.navbar-item, a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
cursor: pointer; cursor: pointer;
&:focus, &:focus,
@ -249,7 +253,7 @@ a.navbar-item,
} }
} }
.navbar-item { .#{$class-prefix}navbar-item {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -288,12 +292,12 @@ a.navbar-item,
} }
} }
.navbar-content { .#{$class-prefix}navbar-content {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.navbar-link:not(.is-arrowless) { .#{$class-prefix}navbar-link:not(.is-arrowless) {
@include ltr-property("padding", 2.5em); @include ltr-property("padding", 2.5em);
&::after { &::after {
@ -306,18 +310,18 @@ a.navbar-item,
} }
} }
.navbar-dropdown { .#{$class-prefix}navbar-dropdown {
font-size: 0.875rem; font-size: 0.875rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-top: 0.5rem; padding-top: 0.5rem;
.navbar-item { .#{$class-prefix}navbar-item {
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
} }
} }
.navbar-divider { .#{$class-prefix}navbar-divider {
background-color: $navbar-divider-background-color; background-color: $navbar-divider-background-color;
border: none; border: none;
display: none; display: none;
@ -326,25 +330,25 @@ a.navbar-item,
} }
@include until($navbar-breakpoint) { @include until($navbar-breakpoint) {
.navbar > .container { .#{$class-prefix}navbar > .#{$class-prefix}container {
display: block; display: block;
} }
.navbar-brand, .#{$class-prefix}navbar-brand,
.navbar-tabs { .#{$class-prefix}navbar-tabs {
.navbar-item { .#{$class-prefix}navbar-item {
align-items: center; align-items: center;
display: flex; display: flex;
} }
} }
.navbar-link { .#{$class-prefix}navbar-link {
&::after { &::after {
display: none; display: none;
} }
} }
.navbar-menu { .#{$class-prefix}navbar-menu {
background-color: $navbar-background-color; background-color: $navbar-background-color;
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1); box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
padding: 0.5rem 0; padding: 0.5rem 0;
@ -355,7 +359,7 @@ a.navbar-item,
} }
// Fixed navbar // Fixed navbar
.navbar { .#{$class-prefix}navbar {
&.is-fixed-bottom-touch, &.is-fixed-bottom-touch,
&.is-fixed-top-touch { &.is-fixed-top-touch {
@include navbar-fixed; @include navbar-fixed;
@ -375,7 +379,7 @@ a.navbar-item,
&.is-fixed-top, &.is-fixed-top,
&.is-fixed-top-touch { &.is-fixed-top-touch {
.navbar-menu { .#{$class-prefix}navbar-menu {
@include overflow-touch; @include overflow-touch;
max-height: calc(100vh - #{$navbar-height}); max-height: calc(100vh - #{$navbar-height});
@ -396,36 +400,35 @@ a.navbar-item,
} }
} }
@include from($navbar-breakpoint) { @include from($navbar-breakpoint) {
.navbar, .#{$class-prefix}navbar,
.navbar-menu, .#{$class-prefix}navbar-menu,
.navbar-start, .#{$class-prefix}navbar-start,
.navbar-end { .#{$class-prefix}navbar-end {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
} }
.navbar { .#{$class-prefix}navbar {
min-height: $navbar-height; min-height: $navbar-height;
&.is-spaced { &.is-spaced {
padding: $navbar-padding-vertical $navbar-padding-horizontal; padding: $navbar-padding-vertical $navbar-padding-horizontal;
.navbar-start, .#{$class-prefix}navbar-start,
.navbar-end { .#{$class-prefix}navbar-end {
align-items: center; align-items: center;
} }
a.navbar-item, a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
border-radius: $radius; border-radius: $radius;
} }
} }
&.is-transparent { &.is-transparent {
a.navbar-item, a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
&:focus, &:focus,
&:hover, &:hover,
&.is-active { &.is-active {
@ -433,19 +436,19 @@ a.navbar-item,
} }
} }
.navbar-item.has-dropdown { .#{$class-prefix}navbar-item.has-dropdown {
&.is-active, &.is-active,
&.is-hoverable:focus, &.is-hoverable:focus,
&.is-hoverable:focus-within, &.is-hoverable:focus-within,
&.is-hoverable:hover { &.is-hoverable:hover {
.navbar-link { .#{$class-prefix}navbar-link {
background-color: transparent !important; background-color: transparent !important;
} }
} }
} }
.navbar-dropdown { .#{$class-prefix}navbar-dropdown {
a.navbar-item { a.#{$class-prefix}navbar-item {
&:focus, &:focus,
&:hover { &:hover {
background-color: $navbar-dropdown-item-hover-background-color; background-color: $navbar-dropdown-item-hover-background-color;
@ -461,27 +464,27 @@ a.navbar-item,
} }
} }
.navbar-burger { .#{$class-prefix}navbar-burger {
display: none; display: none;
} }
.navbar-item, .#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
align-items: center; align-items: center;
display: flex; display: flex;
} }
.navbar-item { .#{$class-prefix}navbar-item {
&.has-dropdown { &.has-dropdown {
align-items: stretch; align-items: stretch;
} }
&.has-dropdown-up { &.has-dropdown-up {
.navbar-link::after { .#{$class-prefix}navbar-link::after {
transform: rotate(135deg) translate(0.25em, -0.25em); transform: rotate(135deg) translate(0.25em, -0.25em);
} }
.navbar-dropdown { .#{$class-prefix}navbar-dropdown {
border-bottom: $navbar-dropdown-border-top; border-bottom: $navbar-dropdown-border-top;
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0; border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
border-top: none; border-top: none;
@ -495,10 +498,10 @@ a.navbar-item,
&.is-hoverable:focus, &.is-hoverable:focus,
&.is-hoverable:focus-within, &.is-hoverable:focus-within,
&.is-hoverable:hover { &.is-hoverable:hover {
.navbar-dropdown { .#{$class-prefix}navbar-dropdown {
display: block; display: block;
.navbar.is-spaced &, .#{$class-prefix}navbar.is-spaced &,
&.is-boxed { &.is-boxed {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
@ -508,24 +511,24 @@ a.navbar-item,
} }
} }
.navbar-menu { .#{$class-prefix}navbar-menu {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
} }
.navbar-start { .#{$class-prefix}navbar-start {
justify-content: flex-start; justify-content: flex-start;
@include ltr-property("margin", auto); @include ltr-property("margin", auto);
} }
.navbar-end { .#{$class-prefix}navbar-end {
justify-content: flex-end; justify-content: flex-end;
@include ltr-property("margin", auto, false); @include ltr-property("margin", auto, false);
} }
.navbar-dropdown { .#{$class-prefix}navbar-dropdown {
background-color: $navbar-dropdown-background-color; background-color: $navbar-dropdown-background-color;
border-bottom-left-radius: $navbar-dropdown-radius; border-bottom-left-radius: $navbar-dropdown-radius;
border-bottom-right-radius: $navbar-dropdown-radius; border-bottom-right-radius: $navbar-dropdown-radius;
@ -541,12 +544,12 @@ a.navbar-item,
top: 100%; top: 100%;
z-index: $navbar-dropdown-z; z-index: $navbar-dropdown-z;
.navbar-item { .#{$class-prefix}navbar-item {
padding: 0.375rem 1rem; padding: 0.375rem 1rem;
white-space: nowrap; white-space: nowrap;
} }
a.navbar-item { a.#{$class-prefix}navbar-item {
@include ltr-property("padding", 3rem); @include ltr-property("padding", 3rem);
&:focus, &:focus,
@ -561,7 +564,7 @@ a.navbar-item,
} }
} }
.navbar.is-spaced &, .#{$class-prefix}navbar.is-spaced &,
&.is-boxed { &.is-boxed {
border-radius: $navbar-dropdown-boxed-radius; border-radius: $navbar-dropdown-boxed-radius;
border-top: none; border-top: none;
@ -581,23 +584,23 @@ a.navbar-item,
} }
} }
.navbar-divider { .#{$class-prefix}navbar-divider {
display: block; display: block;
} }
.navbar > .container, .#{$class-prefix}navbar > .#{$class-prefix}container,
.container > .navbar { .#{$class-prefix}container > .#{$class-prefix}navbar {
.navbar-brand { .#{$class-prefix}navbar-brand {
@include ltr-property("margin", -0.75rem, false); @include ltr-property("margin", -0.75rem, false);
} }
.navbar-menu { .#{$class-prefix}navbar-menu {
@include ltr-property("margin", -0.75rem); @include ltr-property("margin", -0.75rem);
} }
} }
// Fixed navbar // Fixed navbar
.navbar { .#{$class-prefix}navbar {
&.is-fixed-bottom-desktop, &.is-fixed-bottom-desktop,
&.is-fixed-top-desktop { &.is-fixed-top-desktop {
@include navbar-fixed; @include navbar-fixed;
@ -636,8 +639,8 @@ a.navbar-item,
} }
// Hover/Active states // Hover/Active states
a.navbar-item, a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
&.is-active { &.is-active {
color: $navbar-item-active-color; color: $navbar-item-active-color;
} }
@ -647,21 +650,20 @@ a.navbar-item,
} }
} }
.navbar-item.has-dropdown { .#{$class-prefix}navbar-item.has-dropdown {
&:focus, &:focus,
&:hover, &:hover,
&.is-active { &.is-active {
.navbar-link { .#{$class-prefix}navbar-link {
background-color: $navbar-item-hover-background-color; background-color: $navbar-item-hover-background-color;
} }
} }
} }
} }
// Combination // Combination
.hero { .#{$class-prefix}hero {
&.is-fullheight-with-navbar { &.is-fullheight-with-navbar {
min-height: calc(100vh - #{$navbar-height}); min-height: calc(100vh - #{$navbar-height});
} }

73
sass/components/pagination.scss
View File

@ -35,7 +35,7 @@ $pagination-ellipsis-color: $grey-light !default;
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.pagination { .#{$class-prefix}pagination {
@extend %block; @extend %block;
font-size: $size-normal; font-size: $size-normal;
@ -55,31 +55,31 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
} }
&.is-rounded { &.is-rounded {
.pagination-previous, .#{$class-prefix}pagination-previous,
.pagination-next { .#{$class-prefix}pagination-next {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
border-radius: $radius-rounded; border-radius: $radius-rounded;
} }
.pagination-link { .#{$class-prefix}pagination-link {
border-radius: $radius-rounded; border-radius: $radius-rounded;
} }
} }
} }
.pagination, .#{$class-prefix}pagination,
.pagination-list { .#{$class-prefix}pagination-list {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
.pagination-previous, .#{$class-prefix}pagination-previous,
.pagination-next, .#{$class-prefix}pagination-next,
.pagination-link, .#{$class-prefix}pagination-link,
.pagination-ellipsis { .#{$class-prefix}pagination-ellipsis {
@extend %control; @extend %control;
@extend %unselectable; @extend %unselectable;
@ -92,9 +92,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
text-align: center; text-align: center;
} }
.pagination-previous, .#{$class-prefix}pagination-previous,
.pagination-next, .#{$class-prefix}pagination-next,
.pagination-link { .#{$class-prefix}pagination-link {
border-color: $pagination-border-color; border-color: $pagination-border-color;
color: $pagination-color; color: $pagination-color;
min-width: $pagination-min-width; min-width: $pagination-min-width;
@ -122,14 +122,14 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
} }
} }
.pagination-previous, .#{$class-prefix}pagination-previous,
.pagination-next { .#{$class-prefix}pagination-next {
padding-left: $pagination-nav-padding-left; padding-left: $pagination-nav-padding-left;
padding-right: $pagination-nav-padding-right; padding-right: $pagination-nav-padding-right;
white-space: nowrap; white-space: nowrap;
} }
.pagination-link { .#{$class-prefix}pagination-link {
&.is-current { &.is-current {
background-color: $pagination-current-background-color; background-color: $pagination-current-background-color;
border-color: $pagination-current-border-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; color: $pagination-ellipsis-color;
pointer-events: none; pointer-events: none;
} }
.pagination-list { .#{$class-prefix}pagination-list {
flex-wrap: wrap; flex-wrap: wrap;
li { li {
@ -151,17 +151,17 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
} }
@include mobile { @include mobile {
.pagination { .#{$class-prefix}pagination {
flex-wrap: wrap; flex-wrap: wrap;
} }
.pagination-previous, .#{$class-prefix}pagination-previous,
.pagination-next { .#{$class-prefix}pagination-next {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.pagination-list { .#{$class-prefix}pagination-list {
li { li {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -169,61 +169,60 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
} }
} }
@include tablet { @include tablet {
.pagination-list { .#{$class-prefix}pagination-list {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
justify-content: flex-start; justify-content: flex-start;
order: 1; order: 1;
} }
.pagination-previous, .#{$class-prefix}pagination-previous,
.pagination-next, .#{$class-prefix}pagination-next,
.pagination-link, .#{$class-prefix}pagination-link,
.pagination-ellipsis { .#{$class-prefix}pagination-ellipsis {
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
.pagination-previous { .#{$class-prefix}pagination-previous {
order: 2; order: 2;
} }
.pagination-next { .#{$class-prefix}pagination-next {
order: 3; order: 3;
} }
.pagination { .#{$class-prefix}pagination {
justify-content: space-between; justify-content: space-between;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
&.is-centered { &.is-centered {
.pagination-previous { .#{$class-prefix}pagination-previous {
order: 1; order: 1;
} }
.pagination-list { .#{$class-prefix}pagination-list {
justify-content: center; justify-content: center;
order: 2; order: 2;
} }
.pagination-next { .#{$class-prefix}pagination-next {
order: 3; order: 3;
} }
} }
&.is-right { &.is-right {
.pagination-previous { .#{$class-prefix}pagination-previous {
order: 1; order: 1;
} }
.pagination-next { .#{$class-prefix}pagination-next {
order: 2; order: 2;
} }
.pagination-list { .#{$class-prefix}pagination-list {
justify-content: flex-end; justify-content: flex-end;
order: 3; order: 3;
} }

30
sass/components/panel.scss
View File

@ -30,7 +30,7 @@ $panel-block-active-icon-color: $link !default;
$panel-icon-color: $text-light !default; $panel-icon-color: $text-light !default;
$panel-colors: $colors !default; $panel-colors: $colors !default;
.panel { .#{$class-prefix}panel {
border-radius: $panel-radius; border-radius: $panel-radius;
box-shadow: $panel-shadow; box-shadow: $panel-shadow;
font-size: $size-normal; font-size: $size-normal;
@ -45,30 +45,30 @@ $panel-colors: $colors !default;
$color-invert: nth($components, 2); $color-invert: nth($components, 2);
&.is-#{$name} { &.is-#{$name} {
.panel-heading { .#{$class-prefix}panel-heading {
background-color: $color; background-color: $color;
color: $color-invert; color: $color-invert;
} }
.panel-tabs a.is-active { .#{$class-prefix}panel-tabs a.is-active {
border-bottom-color: $color; border-bottom-color: $color;
} }
.panel-block.is-active .panel-icon { .#{$class-prefix}panel-block.is-active .#{$class-prefix}panel-icon {
color: $color; color: $color;
} }
} }
} }
} }
.panel-tabs, .#{$class-prefix}panel-tabs,
.panel-block { .#{$class-prefix}panel-block {
&:not(:last-child) { &:not(:last-child) {
border-bottom: $panel-item-border; border-bottom: $panel-item-border;
} }
} }
.panel-heading { .#{$class-prefix}panel-heading {
background-color: $panel-heading-background-color; background-color: $panel-heading-background-color;
border-radius: $panel-radius $panel-radius 0 0; border-radius: $panel-radius $panel-radius 0 0;
color: $panel-heading-color; color: $panel-heading-color;
@ -78,7 +78,7 @@ $panel-colors: $colors !default;
padding: $panel-heading-padding; padding: $panel-heading-padding;
} }
.panel-tabs { .#{$class-prefix}panel-tabs {
align-items: flex-end; align-items: flex-end;
display: flex; display: flex;
font-size: $panel-tabs-font-size; font-size: $panel-tabs-font-size;
@ -97,7 +97,7 @@ $panel-colors: $colors !default;
} }
} }
.panel-list { .#{$class-prefix}panel-list {
a { a {
color: $panel-list-item-color; color: $panel-list-item-color;
@ -107,7 +107,7 @@ $panel-colors: $colors !default;
} }
} }
.panel-block { .#{$class-prefix}panel-block {
align-items: center; align-items: center;
color: $panel-block-color; color: $panel-block-color;
display: flex; display: flex;
@ -118,7 +118,7 @@ $panel-colors: $colors !default;
@include ltr-property("margin", 0.75em); @include ltr-property("margin", 0.75em);
} }
& > .control { & > .#{$class-prefix}control {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
width: 100%; width: 100%;
@ -132,7 +132,7 @@ $panel-colors: $colors !default;
border-left-color: $panel-block-active-border-left-color; border-left-color: $panel-block-active-border-left-color;
color: $panel-block-active-color; color: $panel-block-active-color;
.panel-icon { .#{$class-prefix}panel-icon {
color: $panel-block-active-icon-color; color: $panel-block-active-icon-color;
} }
} }
@ -143,8 +143,8 @@ $panel-colors: $colors !default;
} }
} }
a.panel-block, a.#{$class-prefix}panel-block,
label.panel-block { label.#{$class-prefix}panel-block {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -152,7 +152,7 @@ label.panel-block {
} }
} }
.panel-icon { .#{$class-prefix}panel-icon {
@include fa(14px, 1em); @include fa(14px, 1em);
color: $panel-icon-color; color: $panel-icon-color;

16
sass/components/tabs.scss
View File

@ -28,7 +28,7 @@ $tabs-toggle-link-active-background-color: $link !default;
$tabs-toggle-link-active-border-color: $link !default; $tabs-toggle-link-active-border-color: $link !default;
$tabs-toggle-link-active-color: $link-invert !default; $tabs-toggle-link-active-color: $link-invert !default;
.tabs { .#{$class-prefix}tabs {
@extend %block; @extend %block;
@include overflow-touch; @include overflow-touch;
@ -99,7 +99,7 @@ $tabs-toggle-link-active-color: $link-invert !default;
} }
} }
.icon { .#{$class-prefix}icon {
&:first-child { &:first-child {
@include ltr-property("margin", 0.5em); @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; border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
} }
@include rtl { @include rtl {
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius; border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius;
} }
&:hover { &:hover {
background-color: $tabs-boxed-link-hover-background-color; background-color: $tabs-boxed-link-hover-background-color;
border-bottom-color: $tabs-boxed-link-hover-border-bottom-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 {
& + 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 { &:first-child a {
@ -187,7 +189,6 @@ $tabs-toggle-link-active-color: $link-invert !default;
border-bottom-left-radius: $tabs-toggle-link-radius; border-bottom-left-radius: $tabs-toggle-link-radius;
} }
@include rtl { @include rtl {
border-top-right-radius: $tabs-toggle-link-radius; border-top-right-radius: $tabs-toggle-link-radius;
border-bottom-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; border-bottom-right-radius: $tabs-toggle-link-radius;
} }
@include rtl { @include rtl {
border-top-left-radius: $tabs-toggle-link-radius; border-top-left-radius: $tabs-toggle-link-radius;
border-bottom-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; padding-left: 1.25em;
} }
@include rtl { @include rtl {
border-bottom-right-radius: $radius-rounded; border-bottom-right-radius: $radius-rounded;
border-top-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; padding-right: 1.25em;
} }
@include rtl { @include rtl {
border-bottom-left-radius: $radius-rounded; border-bottom-left-radius: $radius-rounded;
border-top-left-radius: $radius-rounded; border-top-left-radius: $radius-rounded;

10
sass/elements/box.scss
View File

@ -6,10 +6,12 @@ $box-radius: $radius-large !default;
$box-shadow: $shadow !default; $box-shadow: $shadow !default;
$box-padding: 1.25rem !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-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default; 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; @extend %block;
background-color: $box-background-color; 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; padding: $box-padding;
} }
a.box { a.#{$class-prefix}box {
&:hover, &:hover,
&:focus { &:focus {
box-shadow: $box-link-hover-shadow; box-shadow: $box-link-hover-shadow;

73
sass/elements/button.scss
View File

@ -44,7 +44,20 @@ $button-static-background-color: $scheme-main-ter !default;
$button-static-border-color: $border !default; $button-static-border-color: $border !default;
$button-colors: $colors !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 // The button sizes use mixins so they can be used at different breakpoints
@mixin button-small { @mixin button-small {
@ -67,7 +80,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
font-size: $size-large; font-size: $size-large;
} }
.button { .#{$class-prefix}button {
@extend %control; @extend %control;
@extend %unselectable; @extend %unselectable;
@ -94,7 +107,7 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
color: inherit; color: inherit;
} }
.icon { .#{$class-prefix}icon {
&, &,
&.is-small, &.is-small,
&.is-medium, &.is-medium,
@ -104,18 +117,29 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
} }
&:first-child:not(:last-child) { &: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); @include ltr-property("margin", $button-padding-horizontal * 0.25);
} }
&:last-child:not(:first-child) { &:last-child:not(:first-child) {
@include ltr-property("margin", $button-padding-horizontal * 0.25, false); @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 { &:first-child:last-child {
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}); margin-left: calc(
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}); #{-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 { &.is-loading {
&::after { &::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, &:focus,
&.is-focused { &.is-focused {
&::after { &::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; align-items: center;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
.button { .#{$class-prefix}button {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
&:not(:last-child):not(.is-fullwidth) { &:not(:last-child):not(.is-fullwidth) {
@ -429,25 +459,25 @@ $button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $si
// Sizes // Sizes
&.are-small { &.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; @include button-small;
} }
} }
&.are-medium { &.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; @include button-medium;
} }
} }
&.are-large { &.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; @include button-large;
} }
} }
&.has-addons { &.has-addons {
.button { .#{$class-prefix}button {
&:not(:first-child) { &:not(:first-child) {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-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; justify-content: center;
&:not(.has-addons) { &:not(.has-addons) {
.button:not(.is-fullwidth) { .#{$class-prefix}button:not(.is-fullwidth) {
margin-left: 0.25rem; margin-left: 0.25rem;
margin-right: 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; justify-content: flex-end;
&:not(.has-addons) { &:not(.has-addons) {
.button:not(.is-fullwidth) { .#{$class-prefix}button:not(.is-fullwidth) {
margin-left: 0.25rem; margin-left: 0.25rem;
margin-right: 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) { @include breakpoint($bp-name) {
@each $size, $value in $bp-sizes { @each $size, $value in $bp-sizes {
@if $size != "normal" { @if $size != "normal" {
.button.is-responsive.is-#{$size} { .#{$class-prefix}button.is-responsive.is-#{$size} {
font-size: $value; font-size: $value;
} }
} } @else {
@else { .#{$class-prefix}button.is-responsive,
.button.is-responsive, .#{$class-prefix}button.is-responsive.is-normal {
.button.is-responsive.is-normal {
font-size: $value; font-size: $value;
} }
} }

6
sass/elements/container.scss
View File

@ -3,7 +3,7 @@
$container-offset: 2 * $gap !default; $container-offset: 2 * $gap !default;
$container-max-width: $fullhd !default; $container-max-width: $fullhd !default;
.container { .#{$class-prefix}container {
flex-grow: 1; flex-grow: 1;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
@ -20,28 +20,24 @@ $container-max-width: $fullhd !default;
max-width: $desktop - $container-offset; max-width: $desktop - $container-offset;
} }
@include until-widescreen { @include until-widescreen {
&.is-widescreen:not(.is-max-desktop) { &.is-widescreen:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset; max-width: min($widescreen, $container-max-width) - $container-offset;
} }
} }
@include until-fullhd { @include until-fullhd {
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) { &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset; max-width: min($fullhd, $container-max-width) - $container-offset;
} }
} }
@include widescreen { @include widescreen {
&:not(.is-max-desktop) { &:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset; max-width: min($widescreen, $container-max-width) - $container-offset;
} }
} }
@include fullhd { @include fullhd {
&:not(.is-max-desktop):not(.is-max-widescreen) { &:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset; max-width: min($fullhd, $container-max-width) - $container-offset;

4
sass/elements/content.scss
View File

@ -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-border-width: 2px 0 0 !default;
$content-table-foot-cell-color: $text-strong !default; $content-table-foot-cell-color: $text-strong !default;
.content { .#{$class-prefix}content {
@extend %block; @extend %block;
// Inline // Inline
@ -236,7 +236,7 @@ $content-table-foot-cell-color: $text-strong !default;
} }
} }
.tabs { .#{$class-prefix}tabs {
li + li { li + li {
margin-top: 0; margin-top: 0;
} }

10
sass/elements/icon.scss
View File

@ -4,7 +4,7 @@ $icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default; $icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default; $icon-text-spacing: 0.25em !default;
.icon { .#{$class-prefix}icon {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -28,7 +28,7 @@ $icon-text-spacing: 0.25em !default;
} }
} }
.icon-text { .#{$class-prefix}icon-text {
align-items: flex-start; align-items: flex-start;
color: inherit; color: inherit;
display: inline-flex; display: inline-flex;
@ -36,7 +36,7 @@ $icon-text-spacing: 0.25em !default;
line-height: $icon-dimensions; line-height: $icon-dimensions;
vertical-align: top; vertical-align: top;
.icon { .#{$class-prefix}icon {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -45,7 +45,6 @@ $icon-text-spacing: 0.25em !default;
margin-right: $icon-text-spacing; margin-right: $icon-text-spacing;
} }
@include rtl { @include rtl {
margin-left: $icon-text-spacing; margin-left: $icon-text-spacing;
} }
@ -56,7 +55,6 @@ $icon-text-spacing: 0.25em !default;
margin-left: $icon-text-spacing; margin-left: $icon-text-spacing;
} }
@include rtl { @include rtl {
margin-right: $icon-text-spacing; 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; display: flex;
} }

2
sass/elements/image.scss
View File

@ -2,7 +2,7 @@
$dimensions: 16 24 32 48 64 96 128 !default; $dimensions: 16 24 32 48 64 96 128 !default;
.image { .#{$class-prefix}image {
display: block; display: block;
position: relative; position: relative;

14
sass/elements/notification.scss
View File

@ -9,7 +9,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
$notification-colors: $colors !default; $notification-colors: $colors !default;
.notification { .#{$class-prefix}notification {
@extend %block; @extend %block;
background-color: $notification-background-color; background-color: $notification-background-color;
@ -20,13 +20,11 @@ $notification-colors: $colors !default;
padding: $notification-padding-ltr; padding: $notification-padding-ltr;
} }
@include rtl { @include rtl {
padding: $notification-padding-rtl; padding: $notification-padding-rtl;
} }
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
a:not(.button):not(.dropdown-item) {
color: currentColor; color: currentColor;
text-decoration: underline; text-decoration: underline;
} }
@ -44,16 +42,16 @@ $notification-colors: $colors !default;
background: transparent; background: transparent;
} }
& > .delete { & > .#{$class-prefix}delete {
@include ltr-position(0.5rem); @include ltr-position(0.5rem);
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
} }
.title, .#{$class-prefix}title,
.subtitle, .#{$class-prefix}subtitle,
.content { .#{$class-prefix}content {
color: currentColor; color: currentColor;
} }

10
sass/elements/other.scss
View File

@ -1,14 +1,14 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
.block { .#{$class-prefix}block {
@extend %block; @extend %block;
} }
.delete { .#{$class-prefix}delete {
@extend %delete; @extend %delete;
} }
.heading { .#{$class-prefix}heading {
display: block; display: block;
font-size: 11px; font-size: 11px;
letter-spacing: 1px; letter-spacing: 1px;
@ -16,11 +16,11 @@
text-transform: uppercase; text-transform: uppercase;
} }
.loader { .#{$class-prefix}loader {
@extend %loader; @extend %loader;
} }
.number { .#{$class-prefix}number {
align-items: center; align-items: center;
background-color: $background; background-color: $background;
border-radius: $radius-rounded; border-radius: $radius-rounded;

14
sass/elements/progress.scss
View File

@ -8,7 +8,7 @@ $progress-indeterminate-duration: 1.5s !default;
$progress-colors: $colors !default; $progress-colors: $colors !default;
.progress { .#{$class-prefix}progress {
@extend %block; @extend %block;
-moz-appearance: none; -moz-appearance: none;
@ -56,7 +56,11 @@ $progress-colors: $colors !default;
} }
&:indeterminate { &: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-name: moveIndeterminate;
animation-timing-function: linear; animation-timing-function: linear;
background-color: $progress-bar-background-color; 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-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 150% 150%; background-size: 150% 150%;

4
sass/elements/table.scss
View File

@ -28,7 +28,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default;
$table-colors: $colors !default; $table-colors: $colors !default;
.table { .#{$class-prefix}table {
@extend %block; @extend %block;
background-color: $table-background-color; background-color: $table-background-color;
@ -196,7 +196,7 @@ $table-colors: $colors !default;
} }
} }
.table-container { .#{$class-prefix}table-container {
@extend %block; @extend %block;
@include overflow-touch; @include overflow-touch;

24
sass/elements/tag.scss
View File

@ -7,13 +7,13 @@ $tag-delete-margin: 1px !default;
$tag-colors: $colors !default; $tag-colors: $colors !default;
.tags { .#{$class-prefix}tags {
align-items: center; align-items: center;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
.tag { .#{$class-prefix}tag {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
&:not(:last-child) { &:not(:last-child) {
@ -31,13 +31,13 @@ $tag-colors: $colors !default;
// Sizes // Sizes
&.are-medium { &.are-medium {
.tag:not(.is-normal):not(.is-large) { .#{$class-prefix}tag:not(.is-normal):not(.is-large) {
font-size: $size-normal; font-size: $size-normal;
} }
} }
&.are-large { &.are-large {
.tag:not(.is-normal):not(.is-medium) { .#{$class-prefix}tag:not(.is-normal):not(.is-medium) {
font-size: $size-medium; font-size: $size-medium;
} }
} }
@ -45,7 +45,7 @@ $tag-colors: $colors !default;
&.is-centered { &.is-centered {
justify-content: center; justify-content: center;
.tag { .#{$class-prefix}tag {
margin-right: 0.25rem; margin-right: 0.25rem;
margin-left: 0.25rem; margin-left: 0.25rem;
} }
@ -54,7 +54,7 @@ $tag-colors: $colors !default;
&.is-right { &.is-right {
justify-content: flex-end; justify-content: flex-end;
.tag { .#{$class-prefix}tag {
&:not(:first-child) { &:not(:first-child) {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -66,7 +66,7 @@ $tag-colors: $colors !default;
} }
&.has-addons { &.has-addons {
.tag { .#{$class-prefix}tag {
@include ltr-property("margin", 0); @include ltr-property("margin", 0);
&:not(:first-child) { &:not(:first-child) {
@ -76,7 +76,6 @@ $tag-colors: $colors !default;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@include rtl { @include rtl {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@ -89,7 +88,6 @@ $tag-colors: $colors !default;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@include rtl { @include rtl {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-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; align-items: center;
background-color: $tag-background-color; background-color: $tag-background-color;
border-radius: $tag-radius; border-radius: $tag-radius;
@ -113,7 +111,7 @@ $tag-colors: $colors !default;
padding-right: 0.75em; padding-right: 0.75em;
white-space: nowrap; white-space: nowrap;
.delete { .#{$class-prefix}delete {
@include ltr-property("margin", 0.25rem, false); @include ltr-property("margin", 0.25rem, false);
@include ltr-property("margin", -0.375rem); @include ltr-property("margin", -0.375rem);
} }
@ -153,7 +151,7 @@ $tag-colors: $colors !default;
font-size: $size-medium; font-size: $size-medium;
} }
.icon { .#{$class-prefix}icon {
&:first-child:not(:last-child) { &:first-child:not(:last-child) {
@include ltr-property("margin", -0.375em, false); @include ltr-property("margin", -0.375em, false);
@include ltr-property("margin", 0.1875em); @include ltr-property("margin", 0.1875em);
@ -215,7 +213,7 @@ $tag-colors: $colors !default;
} }
} }
a.tag { a.#{$class-prefix}tag {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

14
sass/elements/title.scss
View File

@ -19,8 +19,8 @@ $subtitle-strong-color: $text-strong !default;
$subtitle-strong-weight: $weight-semibold !default; $subtitle-strong-weight: $weight-semibold !default;
$subtitle-negative-margin: -1.25rem !default; $subtitle-negative-margin: -1.25rem !default;
.title, .#{$class-prefix}title,
.subtitle { .#{$class-prefix}subtitle {
@extend %block; @extend %block;
word-break: break-word; word-break: break-word;
@ -38,12 +38,12 @@ $subtitle-negative-margin: -1.25rem !default;
font-size: $title-sup-size; font-size: $title-sup-size;
} }
.tag { .#{$class-prefix}tag {
vertical-align: middle; vertical-align: middle;
} }
} }
.title { .#{$class-prefix}title {
color: $title-color; color: $title-color;
@if $title-family { @if $title-family {
@ -59,7 +59,7 @@ $subtitle-negative-margin: -1.25rem !default;
font-weight: $title-strong-weight; font-weight: $title-strong-weight;
} }
&:not(.is-spaced) + .subtitle { &:not(.is-spaced) + .#{$class-prefix}subtitle {
margin-top: $subtitle-negative-margin; margin-top: $subtitle-negative-margin;
} }
@ -73,7 +73,7 @@ $subtitle-negative-margin: -1.25rem !default;
} }
} }
.subtitle { .#{$class-prefix}subtitle {
color: $subtitle-color; color: $subtitle-color;
@if $subtitle-family { @if $subtitle-family {
@ -89,7 +89,7 @@ $subtitle-negative-margin: -1.25rem !default;
font-weight: $subtitle-strong-weight; font-weight: $subtitle-strong-weight;
} }
&:not(.is-spaced) + .title { &:not(.is-spaced) + .#{$class-prefix}title {
margin-top: $subtitle-negative-margin; margin-top: $subtitle-negative-margin;
} }

6
sass/form/checkbox-radio.scss
View File

@ -20,14 +20,14 @@
} }
} }
.checkbox { .#{$class-prefix}checkbox {
@extend %checkbox-radio; @extend %checkbox-radio;
} }
.radio { .#{$class-prefix}radio {
@extend %checkbox-radio; @extend %checkbox-radio;
& + .radio { & + .#{$class-prefix}radio {
@include ltr-property("margin", 0.5em, false); @include ltr-property("margin", 0.5em, false);
} }
} }

70
sass/form/file.scss
View File

@ -13,7 +13,7 @@ $file-name-max-width: 16em !default;
$file-colors: $form-colors !default; $file-colors: $form-colors !default;
.file { .#{$class-prefix}file {
@extend %unselectable; @extend %unselectable;
align-items: stretch; align-items: stretch;
@ -27,7 +27,7 @@ $file-colors: $form-colors !default;
$color-invert: nth($pair, 2); $color-invert: nth($pair, 2);
&.is-#{$name} { &.is-#{$name} {
.file-cta { .#{$class-prefix}file-cta {
background-color: $color; background-color: $color;
border-color: transparent; border-color: transparent;
color: $color-invert; color: $color-invert;
@ -35,7 +35,7 @@ $file-colors: $form-colors !default;
&:hover, &:hover,
&.is-hovered { &.is-hovered {
.file-cta { .#{$class-prefix}file-cta {
background-color: bulmaDarken($color, 2.5%); background-color: bulmaDarken($color, 2.5%);
border-color: transparent; border-color: transparent;
color: $color-invert; color: $color-invert;
@ -44,7 +44,7 @@ $file-colors: $form-colors !default;
&:focus, &:focus,
&.is-focused { &.is-focused {
.file-cta { .#{$class-prefix}file-cta {
border-color: transparent; border-color: transparent;
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25); box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
color: $color-invert; color: $color-invert;
@ -53,7 +53,7 @@ $file-colors: $form-colors !default;
&:active, &:active,
&.is-active { &.is-active {
.file-cta { .#{$class-prefix}file-cta {
background-color: bulmaDarken($color, 5%); background-color: bulmaDarken($color, 5%);
border-color: transparent; border-color: transparent;
color: $color-invert; color: $color-invert;
@ -74,7 +74,7 @@ $file-colors: $form-colors !default;
&.is-medium { &.is-medium {
font-size: $size-medium; font-size: $size-medium;
.file-icon { .#{$class-prefix}file-icon {
.fa { .fa {
font-size: 21px; font-size: 21px;
} }
@ -84,7 +84,7 @@ $file-colors: $form-colors !default;
&.is-large { &.is-large {
font-size: $size-large; font-size: $size-large;
.file-icon { .#{$class-prefix}file-icon {
.fa { .fa {
font-size: 28px; font-size: 28px;
} }
@ -93,43 +93,43 @@ $file-colors: $form-colors !default;
// Modifiers // Modifiers
&.has-name { &.has-name {
.file-cta { .#{$class-prefix}file-cta {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.file-name { .#{$class-prefix}file-name {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
&.is-empty { &.is-empty {
.file-cta { .#{$class-prefix}file-cta {
border-radius: $file-radius; border-radius: $file-radius;
} }
.file-name { .#{$class-prefix}file-name {
display: none; display: none;
} }
} }
} }
&.is-boxed { &.is-boxed {
.file-label { .#{$class-prefix}file-label {
flex-direction: column; flex-direction: column;
} }
.file-cta { .#{$class-prefix}file-cta {
flex-direction: column; flex-direction: column;
height: auto; height: auto;
padding: 1em 3em; padding: 1em 3em;
} }
.file-name { .#{$class-prefix}file-name {
border-width: 0 1px 1px; border-width: 0 1px 1px;
} }
.file-icon { .#{$class-prefix}file-icon {
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
@ -139,29 +139,29 @@ $file-colors: $form-colors !default;
} }
&.is-small { &.is-small {
.file-icon .fa { .#{$class-prefix}file-icon .fa {
font-size: 14px; font-size: 14px;
} }
} }
&.is-medium { &.is-medium {
.file-icon .fa { .#{$class-prefix}file-icon .fa {
font-size: 28px; font-size: 28px;
} }
} }
&.is-large { &.is-large {
.file-icon .fa { .#{$class-prefix}file-icon .fa {
font-size: 35px; font-size: 35px;
} }
} }
&.has-name { &.has-name {
.file-cta { .#{$class-prefix}file-cta {
border-radius: $file-radius $file-radius 0 0; border-radius: $file-radius $file-radius 0 0;
} }
.file-name { .#{$class-prefix}file-name {
border-radius: 0 0 $file-radius $file-radius; border-radius: 0 0 $file-radius $file-radius;
border-width: 0 1px 1px; border-width: 0 1px 1px;
} }
@ -173,11 +173,11 @@ $file-colors: $form-colors !default;
} }
&.is-fullwidth { &.is-fullwidth {
.file-label { .#{$class-prefix}file-label {
width: 100%; width: 100%;
} }
.file-name { .#{$class-prefix}file-name {
flex-grow: 1; flex-grow: 1;
max-width: none; max-width: none;
} }
@ -186,11 +186,11 @@ $file-colors: $form-colors !default;
&.is-right { &.is-right {
justify-content: flex-end; justify-content: flex-end;
.file-cta { .#{$class-prefix}file-cta {
border-radius: 0 $file-radius $file-radius 0; border-radius: 0 $file-radius $file-radius 0;
} }
.file-name { .#{$class-prefix}file-name {
border-radius: $file-radius 0 0 $file-radius; border-radius: $file-radius 0 0 $file-radius;
border-width: 1px 0 1px 1px; border-width: 1px 0 1px 1px;
order: -1; order: -1;
@ -198,7 +198,7 @@ $file-colors: $form-colors !default;
} }
} }
.file-label { .#{$class-prefix}file-label {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
@ -207,29 +207,29 @@ $file-colors: $form-colors !default;
position: relative; position: relative;
&:hover { &:hover {
.file-cta { .#{$class-prefix}file-cta {
background-color: bulmaDarken($file-cta-background-color, 2.5%); background-color: bulmaDarken($file-cta-background-color, 2.5%);
color: $file-cta-hover-color; color: $file-cta-hover-color;
} }
.file-name { .#{$class-prefix}file-name {
border-color: bulmaDarken($file-name-border-color, 2.5%); border-color: bulmaDarken($file-name-border-color, 2.5%);
} }
} }
&:active { &:active {
.file-cta { .#{$class-prefix}file-cta {
background-color: bulmaDarken($file-cta-background-color, 5%); background-color: bulmaDarken($file-cta-background-color, 5%);
color: $file-cta-active-color; color: $file-cta-active-color;
} }
.file-name { .#{$class-prefix}file-name {
border-color: bulmaDarken($file-name-border-color, 5%); border-color: bulmaDarken($file-name-border-color, 5%);
} }
} }
} }
.file-input { .#{$class-prefix}file-input {
height: 100%; height: 100%;
left: 0; left: 0;
opacity: 0; opacity: 0;
@ -239,8 +239,8 @@ $file-colors: $form-colors !default;
width: 100%; width: 100%;
} }
.file-cta, .#{$class-prefix}file-cta,
.file-name { .#{$class-prefix}file-name {
@extend %control; @extend %control;
border-color: $file-border-color; border-color: $file-border-color;
@ -251,12 +251,12 @@ $file-colors: $form-colors !default;
white-space: nowrap; white-space: nowrap;
} }
.file-cta { .#{$class-prefix}file-cta {
background-color: $file-cta-background-color; background-color: $file-cta-background-color;
color: $file-cta-color; color: $file-cta-color;
} }
.file-name { .#{$class-prefix}file-name {
border-color: $file-name-border-color; border-color: $file-name-border-color;
border-style: $file-name-border-style; border-style: $file-name-border-style;
border-width: $file-name-border-width; border-width: $file-name-border-width;
@ -267,7 +267,7 @@ $file-colors: $form-colors !default;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.file-icon { .#{$class-prefix}file-icon {
align-items: center; align-items: center;
display: flex; display: flex;
height: 1em; height: 1em;

4
sass/form/input-textarea.scss
View File

@ -56,7 +56,7 @@ $textarea-colors: $form-colors !default;
} }
} }
.input { .#{$class-prefix}input {
@extend %input-textarea; @extend %input-textarea;
&.is-rounded { &.is-rounded {
@ -74,7 +74,7 @@ $textarea-colors: $form-colors !default;
} }
} }
.textarea { .#{$class-prefix}textarea {
@extend %input-textarea; @extend %input-textarea;
display: block; display: block;

2
sass/form/select.scss
View File

@ -1,6 +1,6 @@
$select-colors: $form-colors !default; $select-colors: $form-colors !default;
.select { .#{$class-prefix}select {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
position: relative; position: relative;

81
sass/form/tools.scss
View File

@ -5,7 +5,7 @@ $help-size: $size-small !default;
$label-colors: $form-colors !default; $label-colors: $form-colors !default;
.label { .#{$class-prefix}label {
color: $label-color; color: $label-color;
display: block; display: block;
font-size: $size-normal; font-size: $size-normal;
@ -29,7 +29,7 @@ $label-colors: $form-colors !default;
} }
} }
.help { .#{$class-prefix}help {
display: block; display: block;
font-size: $help-size; font-size: $help-size;
margin-top: 0.25rem; margin-top: 0.25rem;
@ -45,7 +45,7 @@ $label-colors: $form-colors !default;
// Containers // Containers
.field { .#{$class-prefix}field {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -55,29 +55,28 @@ $label-colors: $form-colors !default;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.control { .#{$class-prefix}control {
&:not(:last-child) { &:not(:last-child) {
@include ltr-property("margin", -1px); @include ltr-property("margin", -1px);
} }
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
.button, .#{$class-prefix}button,
.input, .#{$class-prefix}input,
.select select { .#{$class-prefix}select select {
border-radius: 0; border-radius: 0;
} }
} }
&:first-child:not(:only-child) { &:first-child:not(:only-child) {
.button, .#{$class-prefix}button,
.input, .#{$class-prefix}input,
.select select { .#{$class-prefix}select select {
@include ltr { @include ltr {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
@include rtl { @include rtl {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -86,15 +85,14 @@ $label-colors: $form-colors !default;
} }
&:last-child:not(:only-child) { &:last-child:not(:only-child) {
.button, .#{$class-prefix}button,
.input, .#{$class-prefix}input,
.select select { .#{$class-prefix}select select {
@include ltr { @include ltr {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
@include rtl { @include rtl {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@ -102,9 +100,9 @@ $label-colors: $form-colors !default;
} }
} }
.button, .#{$class-prefix}button,
.input, .#{$class-prefix}input,
.select select { .#{$class-prefix}select select {
&:not([disabled]) { &:not([disabled]) {
&:hover, &:hover,
&.is-hovered { &.is-hovered {
@ -139,7 +137,7 @@ $label-colors: $form-colors !default;
} }
&.has-addons-fullwidth { &.has-addons-fullwidth {
.control { .#{$class-prefix}control {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
} }
@ -150,7 +148,7 @@ $label-colors: $form-colors !default;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
& > .control { & > .#{$class-prefix}control {
flex-shrink: 0; flex-shrink: 0;
&:not(:last-child) { &:not(:last-child) {
@ -176,7 +174,7 @@ $label-colors: $form-colors !default;
&.is-grouped-multiline { &.is-grouped-multiline {
flex-wrap: wrap; flex-wrap: wrap;
& > .control { & > .#{$class-prefix}control {
&:last-child, &:last-child,
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
@ -200,8 +198,8 @@ $label-colors: $form-colors !default;
} }
} }
.field-label { .#{$class-prefix}field-label {
.label { .#{$class-prefix}label {
font-size: inherit; font-size: inherit;
} }
@ -209,7 +207,6 @@ $label-colors: $form-colors !default;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@include tablet { @include tablet {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
@ -240,8 +237,8 @@ $label-colors: $form-colors !default;
} }
} }
.field-body { .#{$class-prefix}field-body {
.field .field { .#{$class-prefix}field .#{$class-prefix}field {
margin-bottom: 0; margin-bottom: 0;
} }
@ -251,11 +248,11 @@ $label-colors: $form-colors !default;
flex-grow: 5; flex-grow: 5;
flex-shrink: 1; flex-shrink: 1;
.field { .#{$class-prefix}field {
margin-bottom: 0; margin-bottom: 0;
} }
& > .field { & > .#{$class-prefix}field {
flex-shrink: 1; flex-shrink: 1;
&:not(.is-narrow) { &:not(.is-narrow) {
@ -269,7 +266,7 @@ $label-colors: $form-colors !default;
} }
} }
.control { .#{$class-prefix}control {
box-sizing: border-box; box-sizing: border-box;
clear: both; clear: both;
font-size: $size-normal; font-size: $size-normal;
@ -279,28 +276,28 @@ $label-colors: $form-colors !default;
// Modifiers // Modifiers
&.has-icons-left, &.has-icons-left,
&.has-icons-right { &.has-icons-right {
.input, .#{$class-prefix}input,
.select { .#{$class-prefix}select {
&:focus { &:focus {
& ~ .icon { & ~ .#{$class-prefix}icon {
color: $input-icon-active-color; color: $input-icon-active-color;
} }
} }
&.is-small ~ .icon { &.is-small ~ .#{$class-prefix}icon {
font-size: $size-small; font-size: $size-small;
} }
&.is-medium ~ .icon { &.is-medium ~ .#{$class-prefix}icon {
font-size: $size-medium; font-size: $size-medium;
} }
&.is-large ~ .icon { &.is-large ~ .#{$class-prefix}icon {
font-size: $size-large; font-size: $size-large;
} }
} }
.icon { .#{$class-prefix}icon {
color: $input-icon-color; color: $input-icon-color;
height: $input-height; height: $input-height;
pointer-events: none; pointer-events: none;
@ -312,23 +309,23 @@ $label-colors: $form-colors !default;
} }
&.has-icons-left { &.has-icons-left {
.input, .#{$class-prefix}input,
.select select { .#{$class-prefix}select select {
padding-left: $input-height; padding-left: $input-height;
} }
.icon.is-left { .#{$class-prefix}icon.is-left {
left: 0; left: 0;
} }
} }
&.has-icons-right { &.has-icons-right {
.input, .#{$class-prefix}input,
.select select { .#{$class-prefix}select select {
padding-right: $input-height; padding-right: $input-height;
} }
.icon.is-right { .#{$class-prefix}icon.is-right {
right: 0; right: 0;
} }
} }

68
sass/grid/columns.scss
View File

@ -2,111 +2,111 @@
$column-gap: 0.75rem !default; $column-gap: 0.75rem !default;
.column { .#{$class-prefix}column {
display: block; display: block;
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
padding: $column-gap; padding: $column-gap;
.columns.is-mobile > &.is-narrow { .#{$class-prefix}columns.is-mobile > &.is-narrow {
flex: none; flex: none;
width: unset; width: unset;
} }
.columns.is-mobile > &.is-full { .#{$class-prefix}columns.is-mobile > &.is-full {
flex: none; flex: none;
width: 100%; width: 100%;
} }
.columns.is-mobile > &.is-three-quarters { .#{$class-prefix}columns.is-mobile > &.is-three-quarters {
flex: none; flex: none;
width: 75%; width: 75%;
} }
.columns.is-mobile > &.is-two-thirds { .#{$class-prefix}columns.is-mobile > &.is-two-thirds {
flex: none; flex: none;
width: 66.6666%; width: 66.6666%;
} }
.columns.is-mobile > &.is-half { .#{$class-prefix}columns.is-mobile > &.is-half {
flex: none; flex: none;
width: 50%; width: 50%;
} }
.columns.is-mobile > &.is-one-third { .#{$class-prefix}columns.is-mobile > &.is-one-third {
flex: none; flex: none;
width: 33.3333%; width: 33.3333%;
} }
.columns.is-mobile > &.is-one-quarter { .#{$class-prefix}columns.is-mobile > &.is-one-quarter {
flex: none; flex: none;
width: 25%; width: 25%;
} }
.columns.is-mobile > &.is-one-fifth { .#{$class-prefix}columns.is-mobile > &.is-one-fifth {
flex: none; flex: none;
width: 20%; width: 20%;
} }
.columns.is-mobile > &.is-two-fifths { .#{$class-prefix}columns.is-mobile > &.is-two-fifths {
flex: none; flex: none;
width: 40%; width: 40%;
} }
.columns.is-mobile > &.is-three-fifths { .#{$class-prefix}columns.is-mobile > &.is-three-fifths {
flex: none; flex: none;
width: 60%; width: 60%;
} }
.columns.is-mobile > &.is-four-fifths { .#{$class-prefix}columns.is-mobile > &.is-four-fifths {
flex: none; flex: none;
width: 80%; width: 80%;
} }
.columns.is-mobile > &.is-offset-three-quarters { .#{$class-prefix}columns.is-mobile > &.is-offset-three-quarters {
@include ltr-property("margin", 75%, false); @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); @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); @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); @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); @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); @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); @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); @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); @include ltr-property("margin", 80%, false);
} }
@for $i from 0 through 12 { @for $i from 0 through 12 {
.columns.is-mobile > &.is-#{$i} { .#{$class-prefix}columns.is-mobile > &.is-#{$i} {
flex: none; flex: none;
width: percentage(divide($i, 12)); 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); @include ltr-property("margin", percentage(divide($i, 12)), false);
} }
} }
@ -215,7 +215,6 @@ $column-gap: 0.75rem !default;
} }
} }
@include tablet { @include tablet {
&.is-narrow, &.is-narrow,
&.is-narrow-tablet { &.is-narrow-tablet {
@ -342,7 +341,6 @@ $column-gap: 0.75rem !default;
} }
} }
@include touch { @include touch {
&.is-narrow-touch { &.is-narrow-touch {
flex: none; flex: none;
@ -447,7 +445,6 @@ $column-gap: 0.75rem !default;
} }
} }
@include desktop { @include desktop {
&.is-narrow-desktop { &.is-narrow-desktop {
flex: none; flex: none;
@ -552,7 +549,6 @@ $column-gap: 0.75rem !default;
} }
} }
@include widescreen { @include widescreen {
&.is-narrow-widescreen { &.is-narrow-widescreen {
flex: none; flex: none;
@ -657,7 +653,6 @@ $column-gap: 0.75rem !default;
} }
} }
@include fullhd { @include fullhd {
&.is-narrow-fullhd { &.is-narrow-fullhd {
flex: none; 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, false);
@include ltr-property("margin", -$column-gap); @include ltr-property("margin", -$column-gap);
@ -788,7 +783,7 @@ $column-gap: 0.75rem !default;
margin-top: 0; margin-top: 0;
& > .column { & > .#{$class-prefix}column {
margin: 0; margin: 0;
padding: 0 !important; padding: 0 !important;
} }
@ -821,7 +816,6 @@ $column-gap: 0.75rem !default;
} }
} }
@include desktop { @include desktop {
// Modifiers // Modifiers
&.is-desktop { &.is-desktop {
@ -831,13 +825,13 @@ $column-gap: 0.75rem !default;
} }
@if $variable-columns { @if $variable-columns {
.columns.is-variable { .#{$class-prefix}columns.is-variable {
--columnGap: 0.75rem; --columnGap: 0.75rem;
@include ltr-property("margin", calc(-1 * var(--columnGap)), false); @include ltr-property("margin", calc(-1 * var(--columnGap)), false);
@include ltr-property("margin", calc(-1 * var(--columnGap))); @include ltr-property("margin", calc(-1 * var(--columnGap)));
> .column { > .#{$class-prefix}column {
padding-left: var(--columnGap); padding-left: var(--columnGap);
padding-right: var(--columnGap); padding-right: var(--columnGap);
} }
@ -853,56 +847,48 @@ $column-gap: 0.75rem !default;
} }
} }
@include tablet { @include tablet {
&.is-#{$i}-tablet { &.is-#{$i}-tablet {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include tablet-only { @include tablet-only {
&.is-#{$i}-tablet-only { &.is-#{$i}-tablet-only {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include touch { @include touch {
&.is-#{$i}-touch { &.is-#{$i}-touch {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include desktop { @include desktop {
&.is-#{$i}-desktop { &.is-#{$i}-desktop {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include desktop-only { @include desktop-only {
&.is-#{$i}-desktop-only { &.is-#{$i}-desktop-only {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include widescreen { @include widescreen {
&.is-#{$i}-widescreen { &.is-#{$i}-widescreen {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include widescreen-only { @include widescreen-only {
&.is-#{$i}-widescreen-only { &.is-#{$i}-widescreen-only {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};
} }
} }
@include fullhd { @include fullhd {
&.is-#{$i}-fullhd { &.is-#{$i}-fullhd {
--columnGap: #{$i * 0.25rem}; --columnGap: #{$i * 0.25rem};

4
sass/grid/tiles.scss
View File

@ -2,7 +2,7 @@
$tile-spacing: 0.75rem !default; $tile-spacing: 0.75rem !default;
.tile { .#{$class-prefix}tile {
align-items: stretch; align-items: stretch;
display: block; display: block;
flex-basis: 0; flex-basis: 0;
@ -36,7 +36,7 @@ $tile-spacing: 0.75rem !default;
&.is-vertical { &.is-vertical {
flex-direction: column; flex-direction: column;
& > .tile.is-child:not(:last-child) { & > .#{$class-prefix}tile.is-child:not(:last-child) {
margin-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
} }
} }

2
sass/layout/footer.scss
View File

@ -4,7 +4,7 @@ $footer-background-color: $scheme-main-bis !default;
$footer-color: false !default; $footer-color: false !default;
$footer-padding: 3rem 1.5rem 6rem !default; $footer-padding: 3rem 1.5rem 6rem !default;
.footer { .#{$class-prefix}footer {
background-color: $footer-background-color; background-color: $footer-background-color;
padding: $footer-padding; padding: $footer-padding;

77
sass/layout/hero.scss
View File

@ -9,17 +9,17 @@ $hero-body-padding-large: 18rem 6rem !default;
$hero-colors: $colors !default; $hero-colors: $colors !default;
// Main container // Main container
.hero { .#{$class-prefix}hero {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.navbar { .#{$class-prefix}navbar {
background: none; background: none;
} }
.tabs { .#{$class-prefix}tabs {
ul { ul {
border-bottom: none; border-bottom: none;
} }
@ -34,37 +34,37 @@ $hero-colors: $colors !default;
background-color: $color; background-color: $color;
color: $color-invert; 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 { strong {
color: inherit; color: inherit;
} }
.title { .#{$class-prefix}title {
color: $color-invert; color: $color-invert;
} }
.subtitle { .#{$class-prefix}subtitle {
color: bulmaRgba($color-invert, 0.9); color: bulmaRgba($color-invert, 0.9);
a:not(.button), a:not(.#{$class-prefix}button),
strong { strong {
color: $color-invert; color: $color-invert;
} }
} }
.navbar-menu { .#{$class-prefix}navbar-menu {
@include touch { @include touch {
background-color: $color; background-color: $color;
} }
} }
.navbar-item, .#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
color: bulmaRgba($color-invert, 0.7); color: bulmaRgba($color-invert, 0.7);
} }
a.navbar-item, a.#{$class-prefix}navbar-item,
.navbar-link { .#{$class-prefix}navbar-link {
&:hover, &:hover,
&.is-active { &.is-active {
background-color: bulmaDarken($color, 5%); background-color: bulmaDarken($color, 5%);
@ -72,7 +72,7 @@ $hero-colors: $colors !default;
} }
} }
.tabs { .#{$class-prefix}tabs {
a { a {
color: $color-invert; color: $color-invert;
opacity: 0.9; opacity: 0.9;
@ -113,14 +113,30 @@ $hero-colors: $colors !default;
// Modifiers // Modifiers
@if type-of($color) == "color" { @if type-of($color) == "color" {
&.is-bold { &.is-bold {
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%); $gradient-top-left: darken(
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%); 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 { @include mobile {
.navbar-menu { .#{$class-prefix}navbar-menu {
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%
);
} }
} }
} }
@ -130,14 +146,14 @@ $hero-colors: $colors !default;
// Sizes // Sizes
&.is-small { &.is-small {
.hero-body { .#{$class-prefix}hero-body {
padding: $hero-body-padding-small; padding: $hero-body-padding-small;
} }
} }
&.is-medium { &.is-medium {
@include tablet { @include tablet {
.hero-body { .#{$class-prefix}hero-body {
padding: $hero-body-padding-medium; padding: $hero-body-padding-medium;
} }
} }
@ -145,7 +161,7 @@ $hero-colors: $colors !default;
&.is-large { &.is-large {
@include tablet { @include tablet {
.hero-body { .#{$class-prefix}hero-body {
padding: $hero-body-padding-large; padding: $hero-body-padding-large;
} }
} }
@ -154,11 +170,11 @@ $hero-colors: $colors !default;
&.is-halfheight, &.is-halfheight,
&.is-fullheight, &.is-fullheight,
&.is-fullheight-with-navbar { &.is-fullheight-with-navbar {
.hero-body { .#{$class-prefix}hero-body {
align-items: center; align-items: center;
display: flex; display: flex;
& > .container { & > .#{$class-prefix}container {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
@ -176,7 +192,7 @@ $hero-colors: $colors !default;
// Components // Components
.hero-video { .#{$class-prefix}hero-video {
@extend %overlay; @extend %overlay;
overflow: hidden; overflow: hidden;
@ -201,12 +217,12 @@ $hero-colors: $colors !default;
} }
} }
.hero-buttons { .#{$class-prefix}hero-buttons {
margin-top: 1.5rem; margin-top: 1.5rem;
// Responsiveness // Responsiveness
@include mobile { @include mobile {
.button { .#{$class-prefix}button {
display: flex; display: flex;
&:not(:last-child) { &:not(:last-child) {
@ -215,12 +231,11 @@ $hero-colors: $colors !default;
} }
} }
@include tablet { @include tablet {
display: flex; display: flex;
justify-content: center; justify-content: center;
.button:not(:last-child) { .#{$class-prefix}button:not(:last-child) {
@include ltr-property("margin", 1.5rem); @include ltr-property("margin", 1.5rem);
} }
} }
@ -228,13 +243,13 @@ $hero-colors: $colors !default;
// Containers // Containers
.hero-head, .#{$class-prefix}hero-head,
.hero-foot { .#{$class-prefix}hero-foot {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
.hero-body { .#{$class-prefix}hero-body {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
padding: $hero-body-padding; padding: $hero-body-padding;

2
sass/layout/section.scss
View File

@ -5,7 +5,7 @@ $section-padding-desktop: 3rem 3rem !default;
$section-padding-medium: 9rem 4.5rem !default; $section-padding-medium: 9rem 4.5rem !default;
$section-padding-large: 18rem 6rem !default; $section-padding-large: 18rem 6rem !default;
.section { .#{$class-prefix}section {
padding: $section-padding; padding: $section-padding;
// Responsiveness // Responsiveness

47
sass/utilities/initial-variables.scss
View File

@ -26,7 +26,9 @@ $red: hsl(348, 86%, 61%) !default;
// Typography // 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; $family-monospace: monospace !default;
$render-mode: optimizeLegibility !default; $render-mode: optimizeLegibility !default;
@ -66,7 +68,44 @@ $widescreen-enabled: true !default;
// 1344px container + 4rem // 1344px container + 4rem
$fullhd: 1344px + 2 * $gap !default; $fullhd: 1344px + 2 * $gap !default;
$fullhd-enabled: true !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 // Miscellaneous
@ -81,3 +120,7 @@ $speed: 86ms !default;
$variable-columns: true !default; $variable-columns: true !default;
$rtl: false !default; $rtl: false !default;
// Prefixes
$class-prefix: "" !default;