From dafc032ff07fbcfaf072e9cc1f2dbd5ae708475d Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 23 Nov 2022 17:44:02 +0000 Subject: [PATCH] Convert sass files to scss files --- .github/CONTRIBUTING.md | 46 +- .github/PULL_REQUEST_TEMPLATE.md | 4 +- bower.json | 12 +- bulma-rtl.sass | 3 - bulma-rtl.scss | 5 + bulma.sass | 10 - bulma.scss | 11 + package.json | 11 +- sass/base/_all.sass | 6 - sass/base/_all.scss | 6 + sass/base/animations.sass | 5 - sass/base/animations.scss | 9 + sass/base/generic.sass | 145 ---- sass/base/generic.scss | 173 +++++ sass/base/helpers.sass | 1 - sass/base/helpers.scss | 1 + sass/base/minireset.sass | 79 --- sass/base/minireset.scss | 92 +++ sass/components/_all.sass | 15 - sass/components/_all.scss | 15 + sass/components/breadcrumb.sass | 77 --- sass/components/breadcrumb.scss | 124 ++++ sass/components/card.sass | 103 --- sass/components/card.scss | 131 ++++ sass/components/dropdown.sass | 83 --- sass/components/dropdown.scss | 105 +++ sass/components/level.sass | 79 --- sass/components/level.scss | 125 ++++ sass/components/media.sass | 59 -- sass/components/media.scss | 81 +++ sass/components/menu.sass | 59 -- sass/components/menu.scss | 83 +++ sass/components/message.sass | 101 --- sass/components/message.scss | 136 ++++ sass/components/modal.sass | 117 ---- sass/components/modal.scss | 140 ++++ sass/components/navbar.sass | 446 ------------- sass/components/navbar.scss | 668 +++++++++++++++++++ sass/components/pagination.sass | 167 ----- sass/components/pagination.scss | 232 +++++++ sass/components/panel.sass | 121 ---- sass/components/panel.scss | 166 +++++ sass/components/tabs.sass | 176 ----- sass/components/tabs.scss | 271 ++++++++ sass/elements/_all.sass | 16 - sass/elements/_all.scss | 16 + sass/elements/box.sass | 26 - sass/elements/box.scss | 32 + sass/elements/button.sass | 357 ---------- sass/elements/button.scss | 530 +++++++++++++++ sass/elements/container.sass | 29 - sass/elements/container.scss | 50 ++ sass/elements/content.sass | 162 ----- sass/elements/content.scss | 261 ++++++++ sass/elements/form.sass | 1 - sass/elements/form.scss | 1 + sass/elements/icon.sass | 46 -- sass/elements/icon.scss | 69 ++ sass/elements/image.sass | 73 -- sass/elements/image.scss | 117 ++++ sass/elements/notification.sass | 52 -- sass/elements/notification.scss | 81 +++ sass/elements/other.sass | 31 - sass/elements/other.scss | 36 + sass/elements/progress.sass | 73 -- sass/elements/progress.scss | 110 ++++ sass/elements/table.sass | 134 ---- sass/elements/table.scss | 207 ++++++ sass/elements/tag.sass | 140 ---- sass/elements/tag.scss | 222 +++++++ sass/elements/title.sass | 70 -- sass/elements/title.scss | 104 +++ sass/form/_all.sass | 9 - sass/form/_all.scss | 9 + sass/form/checkbox-radio.sass | 22 - sass/form/checkbox-radio.scss | 33 + sass/form/file.sass | 184 ------ sass/form/file.scss | 283 ++++++++ sass/form/input-textarea.sass | 66 -- sass/form/input-textarea.scss | 99 +++ sass/form/select.sass | 88 --- sass/form/select.scss | 153 +++++ sass/form/shared.sass | 60 -- sass/form/shared.scss | 74 +++ sass/form/tools.sass | 215 ------ sass/form/tools.scss | 360 ++++++++++ sass/grid/_all.sass | 5 - sass/grid/_all.scss | 5 + sass/grid/columns.sass | 513 --------------- sass/grid/columns.scss | 913 ++++++++++++++++++++++++++ sass/grid/tiles.sass | 36 - sass/grid/tiles.scss | 57 ++ sass/helpers/_all.sass | 12 - sass/helpers/_all.scss | 12 + sass/helpers/color.sass | 39 -- sass/helpers/color.scss | 67 ++ sass/helpers/flexbox.sass | 35 - sass/helpers/flexbox.scss | 57 ++ sass/helpers/float.sass | 10 - sass/helpers/float.scss | 13 + sass/helpers/other.sass | 14 - sass/helpers/other.scss | 18 + sass/helpers/overflow.sass | 2 - sass/helpers/overflow.scss | 3 + sass/helpers/position.sass | 7 - sass/helpers/position.scss | 9 + sass/helpers/spacing.sass | 31 - sass/helpers/spacing.scss | 45 ++ sass/helpers/typography.sass | 103 --- sass/helpers/typography.scss | 175 +++++ sass/helpers/visibility.sass | 122 ---- sass/helpers/visibility.scss | 215 ++++++ sass/layout/_all.sass | 6 - sass/layout/_all.scss | 6 + sass/layout/footer.sass | 11 - sass/layout/footer.scss | 14 + sass/layout/hero.sass | 153 ----- sass/layout/hero.scss | 245 +++++++ sass/layout/section.sass | 17 - sass/layout/section.scss | 24 + sass/utilities/_all.sass | 9 - sass/utilities/_all.scss | 9 + sass/utilities/animations.sass | 1 - sass/utilities/animations.scss | 1 + sass/utilities/controls.sass | 49 -- sass/utilities/controls.scss | 59 ++ sass/utilities/derived-variables.sass | 114 ---- sass/utilities/derived-variables.scss | 114 ++++ sass/utilities/extends.sass | 25 - sass/utilities/extends.scss | 33 + sass/utilities/functions.sass | 135 ---- sass/utilities/functions.scss | 199 ++++++ sass/utilities/initial-variables.sass | 79 --- sass/utilities/initial-variables.scss | 83 +++ sass/utilities/mixins.sass | 303 --------- sass/utilities/mixins.scss | 415 ++++++++++++ test/dart-sass/dart-sass.js | 26 +- test/node-sass/node-sass.js | 32 +- test/ruby-sass/sass/customize.scss | 28 +- test/ruby-sass/sass/override.scss | 42 +- 140 files changed, 8331 insertions(+), 5619 deletions(-) delete mode 100644 bulma-rtl.sass create mode 100644 bulma-rtl.scss delete mode 100644 bulma.sass create mode 100644 bulma.scss delete mode 100644 sass/base/_all.sass create mode 100644 sass/base/_all.scss delete mode 100644 sass/base/animations.sass create mode 100644 sass/base/animations.scss delete mode 100644 sass/base/generic.sass create mode 100644 sass/base/generic.scss delete mode 100644 sass/base/helpers.sass create mode 100644 sass/base/helpers.scss delete mode 100644 sass/base/minireset.sass create mode 100644 sass/base/minireset.scss delete mode 100644 sass/components/_all.sass create mode 100644 sass/components/_all.scss delete mode 100644 sass/components/breadcrumb.sass create mode 100644 sass/components/breadcrumb.scss delete mode 100644 sass/components/card.sass create mode 100644 sass/components/card.scss delete mode 100644 sass/components/dropdown.sass create mode 100644 sass/components/dropdown.scss delete mode 100644 sass/components/level.sass create mode 100644 sass/components/level.scss delete mode 100644 sass/components/media.sass create mode 100644 sass/components/media.scss delete mode 100644 sass/components/menu.sass create mode 100644 sass/components/menu.scss delete mode 100644 sass/components/message.sass create mode 100644 sass/components/message.scss delete mode 100644 sass/components/modal.sass create mode 100644 sass/components/modal.scss delete mode 100644 sass/components/navbar.sass create mode 100644 sass/components/navbar.scss delete mode 100644 sass/components/pagination.sass create mode 100644 sass/components/pagination.scss delete mode 100644 sass/components/panel.sass create mode 100644 sass/components/panel.scss delete mode 100644 sass/components/tabs.sass create mode 100644 sass/components/tabs.scss delete mode 100644 sass/elements/_all.sass create mode 100644 sass/elements/_all.scss delete mode 100644 sass/elements/box.sass create mode 100644 sass/elements/box.scss delete mode 100644 sass/elements/button.sass create mode 100644 sass/elements/button.scss delete mode 100644 sass/elements/container.sass create mode 100644 sass/elements/container.scss delete mode 100644 sass/elements/content.sass create mode 100644 sass/elements/content.scss delete mode 100644 sass/elements/form.sass create mode 100644 sass/elements/form.scss delete mode 100644 sass/elements/icon.sass create mode 100644 sass/elements/icon.scss delete mode 100644 sass/elements/image.sass create mode 100644 sass/elements/image.scss delete mode 100644 sass/elements/notification.sass create mode 100644 sass/elements/notification.scss delete mode 100644 sass/elements/other.sass create mode 100644 sass/elements/other.scss delete mode 100644 sass/elements/progress.sass create mode 100644 sass/elements/progress.scss delete mode 100644 sass/elements/table.sass create mode 100644 sass/elements/table.scss delete mode 100644 sass/elements/tag.sass create mode 100644 sass/elements/tag.scss delete mode 100644 sass/elements/title.sass create mode 100644 sass/elements/title.scss delete mode 100644 sass/form/_all.sass create mode 100644 sass/form/_all.scss delete mode 100644 sass/form/checkbox-radio.sass create mode 100644 sass/form/checkbox-radio.scss delete mode 100644 sass/form/file.sass create mode 100644 sass/form/file.scss delete mode 100644 sass/form/input-textarea.sass create mode 100644 sass/form/input-textarea.scss delete mode 100644 sass/form/select.sass create mode 100644 sass/form/select.scss delete mode 100644 sass/form/shared.sass create mode 100644 sass/form/shared.scss delete mode 100644 sass/form/tools.sass create mode 100644 sass/form/tools.scss delete mode 100644 sass/grid/_all.sass create mode 100644 sass/grid/_all.scss delete mode 100644 sass/grid/columns.sass create mode 100644 sass/grid/columns.scss delete mode 100644 sass/grid/tiles.sass create mode 100644 sass/grid/tiles.scss delete mode 100644 sass/helpers/_all.sass create mode 100644 sass/helpers/_all.scss delete mode 100644 sass/helpers/color.sass create mode 100644 sass/helpers/color.scss delete mode 100644 sass/helpers/flexbox.sass create mode 100644 sass/helpers/flexbox.scss delete mode 100644 sass/helpers/float.sass create mode 100644 sass/helpers/float.scss delete mode 100644 sass/helpers/other.sass create mode 100644 sass/helpers/other.scss delete mode 100644 sass/helpers/overflow.sass create mode 100644 sass/helpers/overflow.scss delete mode 100644 sass/helpers/position.sass create mode 100644 sass/helpers/position.scss delete mode 100644 sass/helpers/spacing.sass create mode 100644 sass/helpers/spacing.scss delete mode 100644 sass/helpers/typography.sass create mode 100644 sass/helpers/typography.scss delete mode 100644 sass/helpers/visibility.sass create mode 100644 sass/helpers/visibility.scss delete mode 100644 sass/layout/_all.sass create mode 100644 sass/layout/_all.scss delete mode 100644 sass/layout/footer.sass create mode 100644 sass/layout/footer.scss delete mode 100644 sass/layout/hero.sass create mode 100644 sass/layout/hero.scss delete mode 100644 sass/layout/section.sass create mode 100644 sass/layout/section.scss delete mode 100644 sass/utilities/_all.sass create mode 100644 sass/utilities/_all.scss delete mode 100644 sass/utilities/animations.sass create mode 100644 sass/utilities/animations.scss delete mode 100644 sass/utilities/controls.sass create mode 100644 sass/utilities/controls.scss delete mode 100644 sass/utilities/derived-variables.sass create mode 100644 sass/utilities/derived-variables.scss delete mode 100644 sass/utilities/extends.sass create mode 100644 sass/utilities/extends.scss delete mode 100644 sass/utilities/functions.sass create mode 100644 sass/utilities/functions.scss delete mode 100644 sass/utilities/initial-variables.sass create mode 100644 sass/utilities/initial-variables.scss delete mode 100644 sass/utilities/mixins.sass create mode 100644 sass/utilities/mixins.scss diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 3814c3f5..4112323c 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -2,20 +2,20 @@ Thanks for helping out! 😇 ### Raising an issue -* Make sure the issue hasn't been raised yet -* Include **screenshots** and animated GIFs in your issue whenever possible +- Make sure the issue hasn't been raised yet +- Include **screenshots** and animated GIFs in your issue whenever possible ### Submitting a Pull Request -* Include **screenshots** and animated GIFs in your pull request whenever possible -* Use the **present** tense ("Add feature" not "Added feature") -* Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...") -* Limit the first line to 72 characters or fewer -* Reference issues and pull requests liberally +- Include **screenshots** and animated GIFs in your pull request whenever possible +- Use the **present** tense ("Add feature" not "Added feature") +- Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...") +- Limit the first line to 72 characters or fewer +- Reference issues and pull requests liberally ### Try your changes -When modifying any `.sass`, you will need to rebuild the css. You can do this by running: +When modifying any `.scss`, you will need to rebuild the css. You can do this by running: ``` npm install @@ -26,21 +26,21 @@ To see documentation changes check [the documentation readme](../docs/README.md) ### Bulma Sass styleguide -* **No semi-colons** `;` or **curly braces** `{` `}` -* **No camelCase** -* Use only **classes** -* Order the CSS properties **alphabetically** -* Order the CSS rule by - * direct styles - * nested tags - * pseudo-classes - * color modifiers - * size modifiers - * modifiers - * responsive styles -* Add appropriate one-line comments for each of these sections within a CSS rule -* **No trailing space** -* End files with a **newline** +- **No semi-colons** `;` or **curly braces** `{` `}` +- **No camelCase** +- Use only **classes** +- Order the CSS properties **alphabetically** +- Order the CSS rule by + - direct styles + - nested tags + - pseudo-classes + - color modifiers + - size modifiers + - modifiers + - responsive styles +- Add appropriate one-line comments for each of these sections within a CSS rule +- **No trailing space** +- End files with a **newline** ```sass .element diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 4618f7b0..070da5a8 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,7 +2,9 @@ + This is a **new feature | improvement | bugfix | documentation fix**. + @@ -24,7 +26,7 @@ None. - + diff --git a/bower.json b/bower.json index 60d51c7b..64f8b4ec 100644 --- a/bower.json +++ b/bower.json @@ -4,8 +4,16 @@ "homepage": "https://bulma.io", "authors": ["jgthms "], "description": "Modern CSS framework based on Flexbox", - "main": "bulma.sass", - "keywords": ["css", "sass", "flexbox", "responsive", "framework"], + "main": "bulma.scss", + "keywords": [ + "css", + "sass", + "scss", + "modern", + "flexbox", + "responsive", + "framework" + ], "license": "MIT", "ignore": [ "**/.*", diff --git a/bulma-rtl.sass b/bulma-rtl.sass deleted file mode 100644 index daeba985..00000000 --- a/bulma-rtl.sass +++ /dev/null @@ -1,3 +0,0 @@ -@charset "utf-8" -$rtl: true -@import "bulma" diff --git a/bulma-rtl.scss b/bulma-rtl.scss new file mode 100644 index 00000000..5c9db7c9 --- /dev/null +++ b/bulma-rtl.scss @@ -0,0 +1,5 @@ +@charset "utf-8"; + +$rtl: true; + +@import "bulma"; diff --git a/bulma.sass b/bulma.sass deleted file mode 100644 index 87dec21b..00000000 --- a/bulma.sass +++ /dev/null @@ -1,10 +0,0 @@ -@charset "utf-8" -/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ -@import "sass/utilities/_all" -@import "sass/base/_all" -@import "sass/elements/_all" -@import "sass/form/_all" -@import "sass/components/_all" -@import "sass/grid/_all" -@import "sass/helpers/_all" -@import "sass/layout/_all" diff --git a/bulma.scss b/bulma.scss new file mode 100644 index 00000000..8dc2a359 --- /dev/null +++ b/bulma.scss @@ -0,0 +1,11 @@ +@charset "utf-8"; + +/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ +@import "sass/utilities/_all"; +@import "sass/base/_all"; +@import "sass/elements/_all"; +@import "sass/form/_all"; +@import "sass/components/_all"; +@import "sass/grid/_all"; +@import "sass/helpers/_all"; +@import "sass/layout/_all"; diff --git a/package.json b/package.json index 475e3552..6abf3dc8 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "url": "https://jgthms.com" }, "description": "Modern CSS framework based on Flexbox", - "main": "bulma.sass", + "main": "bulma.scss", "unpkg": "css/bulma.css", "style": "bulma/css/bulma.min.css", "repository": { @@ -19,6 +19,8 @@ "keywords": [ "css", "sass", + "scss", + "modern", "flexbox", "responsive", "framework" @@ -37,10 +39,10 @@ "build": "npm run build-sass && npm run build-autoprefix && npm run build-cleancss", "build-autoprefix": "postcss --use autoprefixer --map false --output css/bulma.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.sass css/bulma.css", + "build-sass": "node-sass --output-style expanded --source-map true bulma.scss css/bulma.css", "clean": "rimraf css", "rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss", - "rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass 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-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css", "deploy": "npm run clean && npm run build && npm run rtl", @@ -49,7 +51,8 @@ "files": [ "css", "sass", - "bulma.sass", + "bulma.scss", + "bulma-rtl.scss", "LICENSE", "README.md" ] diff --git a/sass/base/_all.sass b/sass/base/_all.sass deleted file mode 100644 index a5ae0a7b..00000000 --- a/sass/base/_all.sass +++ /dev/null @@ -1,6 +0,0 @@ -/* Bulma Base */ -@charset "utf-8" - -@import "minireset" -@import "generic" -@import "animations" diff --git a/sass/base/_all.scss b/sass/base/_all.scss new file mode 100644 index 00000000..75156896 --- /dev/null +++ b/sass/base/_all.scss @@ -0,0 +1,6 @@ +/* Bulma Base */ +@charset "utf-8"; + +@import "minireset"; +@import "generic"; +@import "animations"; diff --git a/sass/base/animations.sass b/sass/base/animations.sass deleted file mode 100644 index a14525d7..00000000 --- a/sass/base/animations.sass +++ /dev/null @@ -1,5 +0,0 @@ -@keyframes spinAround - from - transform: rotate(0deg) - to - transform: rotate(359deg) diff --git a/sass/base/animations.scss b/sass/base/animations.scss new file mode 100644 index 00000000..4849c5a4 --- /dev/null +++ b/sass/base/animations.scss @@ -0,0 +1,9 @@ +@keyframes spinAround { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(359deg); + } +} diff --git a/sass/base/generic.sass b/sass/base/generic.sass deleted file mode 100644 index 42c736ae..00000000 --- a/sass/base/generic.sass +++ /dev/null @@ -1,145 +0,0 @@ -@import "../utilities/mixins" - -$body-background-color: $scheme-main !default -$body-size: 16px !default -$body-min-width: 300px !default -$body-rendering: optimizeLegibility !default -$body-family: $family-primary !default -$body-overflow-x: hidden !default -$body-overflow-y: scroll !default - -$body-color: $text !default -$body-font-size: 1em !default -$body-weight: $weight-normal !default -$body-line-height: 1.5 !default - -$code-family: $family-code !default -$code-padding: 0.25em 0.5em 0.25em !default -$code-weight: normal !default -$code-size: 0.875em !default - -$small-font-size: 0.875em !default - -$hr-background-color: $background !default -$hr-height: 2px !default -$hr-margin: 1.5rem 0 !default - -$strong-color: $text-strong !default -$strong-weight: $weight-bold !default - -$pre-font-size: 0.875em !default -$pre-padding: 1.25rem 1.5rem !default -$pre-code-font-size: 1em !default - -html - background-color: $body-background-color - font-size: $body-size - -moz-osx-font-smoothing: grayscale - -webkit-font-smoothing: antialiased - min-width: $body-min-width - overflow-x: $body-overflow-x - overflow-y: $body-overflow-y - text-rendering: $body-rendering - text-size-adjust: 100% - -article, -aside, -figure, -footer, -header, -hgroup, -section - display: block - -body, -button, -input, -optgroup, -select, -textarea - font-family: $body-family - -code, -pre - -moz-osx-font-smoothing: auto - -webkit-font-smoothing: auto - font-family: $code-family - -body - color: $body-color - font-size: $body-font-size - font-weight: $body-weight - line-height: $body-line-height - -// Inline - -a - color: $link - cursor: pointer - text-decoration: none - strong - color: currentColor - &:hover - color: $link-hover - -code - background-color: $code-background - color: $code - font-size: $code-size - font-weight: $code-weight - padding: $code-padding - -hr - background-color: $hr-background-color - border: none - display: block - height: $hr-height - margin: $hr-margin - -img - height: auto - max-width: 100% - -input[type="checkbox"], -input[type="radio"] - vertical-align: baseline - -small - font-size: $small-font-size - -span - font-style: inherit - font-weight: inherit - -strong - color: $strong-color - font-weight: $strong-weight - -// Block - -fieldset - border: none - -pre - +overflow-touch - background-color: $pre-background - color: $pre - font-size: $pre-font-size - overflow-x: auto - padding: $pre-padding - white-space: pre - word-wrap: normal - code - background-color: transparent - color: currentColor - font-size: $pre-code-font-size - padding: 0 - -table - td, - th - vertical-align: top - &:not([align]) - text-align: inherit - th - color: $text-strong diff --git a/sass/base/generic.scss b/sass/base/generic.scss new file mode 100644 index 00000000..38c53848 --- /dev/null +++ b/sass/base/generic.scss @@ -0,0 +1,173 @@ +@import "../utilities/mixins"; + +$body-background-color: $scheme-main !default; +$body-size: 16px !default; +$body-min-width: 300px !default; +$body-rendering: optimizeLegibility !default; +$body-family: $family-primary !default; +$body-overflow-x: hidden !default; +$body-overflow-y: scroll !default; + +$body-color: $text !default; +$body-font-size: 1em !default; +$body-weight: $weight-normal !default; +$body-line-height: 1.5 !default; + +$code-family: $family-code !default; +$code-padding: 0.25em 0.5em 0.25em !default; +$code-weight: normal !default; +$code-size: 0.875em !default; + +$small-font-size: 0.875em !default; + +$hr-background-color: $background !default; +$hr-height: 2px !default; +$hr-margin: 1.5rem 0 !default; + +$strong-color: $text-strong !default; +$strong-weight: $weight-bold !default; + +$pre-font-size: 0.875em !default; +$pre-padding: 1.25rem 1.5rem !default; +$pre-code-font-size: 1em !default; + +html { + background-color: $body-background-color; + font-size: $body-size; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: $body-min-width; + overflow-x: $body-overflow-x; + overflow-y: $body-overflow-y; + text-rendering: $body-rendering; + text-size-adjust: 100%; +} + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} + +body, +button, +input, +optgroup, +select, +textarea { + font-family: $body-family; +} + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: $code-family; +} + +body { + color: $body-color; + font-size: $body-font-size; + font-weight: $body-weight; + line-height: $body-line-height; +} + +// Inline + +a { + color: $link; + cursor: pointer; + text-decoration: none; + + strong { + color: currentColor; + } + + &:hover { + color: $link-hover; + } +} + +code { + background-color: $code-background; + color: $code; + font-size: $code-size; + font-weight: $code-weight; + padding: $code-padding; +} + +hr { + background-color: $hr-background-color; + border: none; + display: block; + height: $hr-height; + margin: $hr-margin; +} + +img { + height: auto; + max-width: 100%; +} + +input[type="checkbox"], +input[type="radio"] { + vertical-align: baseline; +} + +small { + font-size: $small-font-size; +} + +span { + font-style: inherit; + font-weight: inherit; +} + +strong { + color: $strong-color; + font-weight: $strong-weight; +} + +// Block + +fieldset { + border: none; +} + +pre { + @include overflow-touch; + + background-color: $pre-background; + color: $pre; + font-size: $pre-font-size; + overflow-x: auto; + padding: $pre-padding; + white-space: pre; + word-wrap: normal; + + code { + background-color: transparent; + color: currentColor; + font-size: $pre-code-font-size; + padding: 0; + } +} + +table { + td, + th { + vertical-align: top; + + &:not([align]) { + text-align: inherit; + } + } + + th { + color: $text-strong; + } +} diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass deleted file mode 100644 index e356830f..00000000 --- a/sass/base/helpers.sass +++ /dev/null @@ -1 +0,0 @@ -@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead." diff --git a/sass/base/helpers.scss b/sass/base/helpers.scss new file mode 100644 index 00000000..7dc4840e --- /dev/null +++ b/sass/base/helpers.scss @@ -0,0 +1 @@ +@warn "The helpers.scss file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."; diff --git a/sass/base/minireset.sass b/sass/base/minireset.sass deleted file mode 100644 index aa2b6f3a..00000000 --- a/sass/base/minireset.sass +++ /dev/null @@ -1,79 +0,0 @@ -/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ -// Blocks -html, -body, -p, -ol, -ul, -li, -dl, -dt, -dd, -blockquote, -figure, -fieldset, -legend, -textarea, -pre, -iframe, -hr, -h1, -h2, -h3, -h4, -h5, -h6 - margin: 0 - padding: 0 - -// Headings -h1, -h2, -h3, -h4, -h5, -h6 - font-size: 100% - font-weight: normal - -// List -ul - list-style: none - -// Form -button, -input, -select, -textarea - margin: 0 - -// Box sizing -html - box-sizing: border-box - -* - &, - &::before, - &::after - box-sizing: inherit - -// Media -img, -video - height: auto - max-width: 100% - -// Iframe -iframe - border: 0 - -// Table -table - border-collapse: collapse - border-spacing: 0 - -td, -th - padding: 0 - &:not([align]) - text-align: inherit diff --git a/sass/base/minireset.scss b/sass/base/minireset.scss new file mode 100644 index 00000000..5b096938 --- /dev/null +++ b/sass/base/minireset.scss @@ -0,0 +1,92 @@ +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ +// Blocks +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; +} + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; +} + +// List +ul { + list-style: none; +} + +// Form +button, +input, +select, +textarea { + margin: 0; +} + +// Box sizing +html { + box-sizing: border-box; +} + +* { + &, + &::before, + &::after { + box-sizing: inherit; + } +} + +// Media +img, +video { + height: auto; + max-width: 100%; +} + +// Iframe +iframe { + border: 0; +} + +// Table +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; + + &:not([align]) { + text-align: inherit; + } +} diff --git a/sass/components/_all.sass b/sass/components/_all.sass deleted file mode 100644 index a7062ec1..00000000 --- a/sass/components/_all.sass +++ /dev/null @@ -1,15 +0,0 @@ -/* Bulma Components */ -@charset "utf-8" - -@import "breadcrumb" -@import "card" -@import "dropdown" -@import "level" -@import "media" -@import "menu" -@import "message" -@import "modal" -@import "navbar" -@import "pagination" -@import "panel" -@import "tabs" diff --git a/sass/components/_all.scss b/sass/components/_all.scss new file mode 100644 index 00000000..735385bc --- /dev/null +++ b/sass/components/_all.scss @@ -0,0 +1,15 @@ +/* Bulma Components */ +@charset "utf-8"; + +@import "breadcrumb"; +@import "card"; +@import "dropdown"; +@import "level"; +@import "media"; +@import "menu"; +@import "message"; +@import "modal"; +@import "navbar"; +@import "pagination"; +@import "panel"; +@import "tabs"; diff --git a/sass/components/breadcrumb.sass b/sass/components/breadcrumb.sass deleted file mode 100644 index 60bb17b0..00000000 --- a/sass/components/breadcrumb.sass +++ /dev/null @@ -1,77 +0,0 @@ -@import "../utilities/mixins" - -$breadcrumb-item-color: $link !default -$breadcrumb-item-hover-color: $link-hover !default -$breadcrumb-item-active-color: $text-strong !default - -$breadcrumb-item-padding-vertical: 0 !default -$breadcrumb-item-padding-horizontal: 0.75em !default - -$breadcrumb-item-separator-color: $border-hover !default - -.breadcrumb - @extend %block - @extend %unselectable - font-size: $size-normal - white-space: nowrap - a - align-items: center - color: $breadcrumb-item-color - display: flex - justify-content: center - padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal - &:hover - color: $breadcrumb-item-hover-color - li - align-items: center - display: flex - &:first-child a - +ltr-property("padding", 0, false) - &.is-active - a - color: $breadcrumb-item-active-color - cursor: default - pointer-events: none - & + li::before - color: $breadcrumb-item-separator-color - content: "\0002f" - ul, - ol - align-items: flex-start - display: flex - flex-wrap: wrap - justify-content: flex-start - .icon - &:first-child - +ltr-property("margin", 0.5em) - &:last-child - +ltr-property("margin", 0.5em, false) - // Alignment - &.is-centered - ol, - ul - justify-content: center - &.is-right - ol, - ul - justify-content: flex-end - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - // Styles - &.has-arrow-separator - li + li::before - content: "\02192" - &.has-bullet-separator - li + li::before - content: "\02022" - &.has-dot-separator - li + li::before - content: "\000b7" - &.has-succeeds-separator - li + li::before - content: "\0227B" diff --git a/sass/components/breadcrumb.scss b/sass/components/breadcrumb.scss new file mode 100644 index 00000000..e2493324 --- /dev/null +++ b/sass/components/breadcrumb.scss @@ -0,0 +1,124 @@ +@import "../utilities/mixins"; + +$breadcrumb-item-color: $link !default; +$breadcrumb-item-hover-color: $link-hover !default; +$breadcrumb-item-active-color: $text-strong !default; + +$breadcrumb-item-padding-vertical: 0 !default; +$breadcrumb-item-padding-horizontal: 0.75em !default; + +$breadcrumb-item-separator-color: $border-hover !default; + +.breadcrumb { + @extend %block; + + @extend %unselectable; + + font-size: $size-normal; + white-space: nowrap; + + a { + align-items: center; + color: $breadcrumb-item-color; + display: flex; + justify-content: center; + padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal; + + &:hover { + color: $breadcrumb-item-hover-color; + } + } + + li { + align-items: center; + display: flex; + + &:first-child a { + @include ltr-property("padding", 0, false); + } + + &.is-active { + a { + color: $breadcrumb-item-active-color; + cursor: default; + pointer-events: none; + } + } + + & + li::before { + color: $breadcrumb-item-separator-color; + content: "/"; + } + } + + ul, + ol { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + } + + .icon { + &:first-child { + @include ltr-property("margin", 0.5em); + } + + &:last-child { + @include ltr-property("margin", 0.5em, false); + } + } + + // Alignment + &.is-centered { + ol, + ul { + justify-content: center; + } + } + + &.is-right { + ol, + ul { + justify-content: flex-end; + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } + + // Styles + &.has-arrow-separator { + li + li::before { + content: "→"; + } + } + + &.has-bullet-separator { + li + li::before { + content: "•"; + } + } + + &.has-dot-separator { + li + li::before { + content: "·"; + } + } + + &.has-succeeds-separator { + li + li::before { + content: "≻"; + } + } +} diff --git a/sass/components/card.sass b/sass/components/card.sass deleted file mode 100644 index 73387f38..00000000 --- a/sass/components/card.sass +++ /dev/null @@ -1,103 +0,0 @@ -@import "../utilities/mixins" - -$card-color: $text !default -$card-background-color: $scheme-main !default -$card-shadow: $shadow !default -$card-radius: 0.25rem !default - -$card-header-background-color: transparent !default -$card-header-color: $text-strong !default -$card-header-padding: 0.75rem 1rem !default -$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default -$card-header-weight: $weight-bold !default - -$card-content-background-color: transparent !default -$card-content-padding: 1.5rem !default - -$card-footer-background-color: transparent !default -$card-footer-border-top: 1px solid $border-light !default -$card-footer-padding: 0.75rem !default - -$card-media-margin: $block-spacing !default - -.card - background-color: $card-background-color - border-radius: $card-radius - box-shadow: $card-shadow - color: $card-color - max-width: 100% - position: relative - -%card-item - &:first-child - border-top-left-radius: $card-radius - border-top-right-radius: $card-radius - &:last-child - border-bottom-left-radius: $card-radius - border-bottom-right-radius: $card-radius - -.card-header - @extend %card-item - background-color: $card-header-background-color - align-items: stretch - box-shadow: $card-header-shadow - display: flex - -.card-header-title - align-items: center - color: $card-header-color - display: flex - flex-grow: 1 - font-weight: $card-header-weight - padding: $card-header-padding - &.is-centered - justify-content: center - -.card-header-icon - +reset - align-items: center - cursor: pointer - display: flex - justify-content: center - padding: $card-header-padding - -.card-image - display: block - position: relative - &:first-child - img - border-top-left-radius: $card-radius - border-top-right-radius: $card-radius - &:last-child - img - border-bottom-left-radius: $card-radius - border-bottom-right-radius: $card-radius - -.card-content - @extend %card-item - background-color: $card-content-background-color - padding: $card-content-padding - -.card-footer - @extend %card-item - background-color: $card-footer-background-color - border-top: $card-footer-border-top - align-items: stretch - display: flex - -.card-footer-item - align-items: center - display: flex - flex-basis: 0 - flex-grow: 1 - flex-shrink: 0 - justify-content: center - padding: $card-footer-padding - &:not(:last-child) - +ltr-property("border", $card-footer-border-top) - -// Combinations - -.card - .media:not(:last-child) - margin-bottom: $card-media-margin diff --git a/sass/components/card.scss b/sass/components/card.scss new file mode 100644 index 00000000..45f491b7 --- /dev/null +++ b/sass/components/card.scss @@ -0,0 +1,131 @@ +@import "../utilities/mixins"; + +$card-color: $text !default; +$card-background-color: $scheme-main !default; +$card-shadow: $shadow !default; +$card-radius: 0.25rem !default; + +$card-header-background-color: transparent !default; +$card-header-color: $text-strong !default; +$card-header-padding: 0.75rem 1rem !default; +$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; +$card-header-weight: $weight-bold !default; + +$card-content-background-color: transparent !default; +$card-content-padding: 1.5rem !default; + +$card-footer-background-color: transparent !default; +$card-footer-border-top: 1px solid $border-light !default; +$card-footer-padding: 0.75rem !default; + +$card-media-margin: $block-spacing !default; + +.card { + background-color: $card-background-color; + border-radius: $card-radius; + box-shadow: $card-shadow; + color: $card-color; + max-width: 100%; + position: relative; +} + +%card-item { + &:first-child { + border-top-left-radius: $card-radius; + border-top-right-radius: $card-radius; + } + + &:last-child { + border-bottom-left-radius: $card-radius; + border-bottom-right-radius: $card-radius; + } +} + +.card-header { + @extend %card-item; + + background-color: $card-header-background-color; + align-items: stretch; + box-shadow: $card-header-shadow; + display: flex; +} + +.card-header-title { + align-items: center; + color: $card-header-color; + display: flex; + flex-grow: 1; + font-weight: $card-header-weight; + padding: $card-header-padding; + + &.is-centered { + justify-content: center; + } +} + +.card-header-icon { + @include reset; + + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + padding: $card-header-padding; +} + +.card-image { + display: block; + position: relative; + + &:first-child { + img { + border-top-left-radius: $card-radius; + border-top-right-radius: $card-radius; + } + } + + &:last-child { + img { + border-bottom-left-radius: $card-radius; + border-bottom-right-radius: $card-radius; + } + } +} + +.card-content { + @extend %card-item; + + background-color: $card-content-background-color; + padding: $card-content-padding; +} + +.card-footer { + @extend %card-item; + + background-color: $card-footer-background-color; + border-top: $card-footer-border-top; + align-items: stretch; + display: flex; +} + +.card-footer-item { + align-items: center; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; + padding: $card-footer-padding; + + &:not(:last-child) { + @include ltr-property("border", $card-footer-border-top); + } +} + +// Combinations + +.card { + .media:not(:last-child) { + margin-bottom: $card-media-margin; + } +} diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass deleted file mode 100644 index 3743cb77..00000000 --- a/sass/components/dropdown.sass +++ /dev/null @@ -1,83 +0,0 @@ -@import "../utilities/mixins" - -$dropdown-menu-min-width: 12rem !default - -$dropdown-content-background-color: $scheme-main !default -$dropdown-content-arrow: $link !default -$dropdown-content-offset: 4px !default -$dropdown-content-padding-bottom: 0.5rem !default -$dropdown-content-padding-top: 0.5rem !default -$dropdown-content-radius: $radius !default -$dropdown-content-shadow: $shadow !default -$dropdown-content-z: 20 !default - -$dropdown-item-color: $text !default -$dropdown-item-hover-color: $scheme-invert !default -$dropdown-item-hover-background-color: $background !default -$dropdown-item-active-color: $link-invert !default -$dropdown-item-active-background-color: $link !default - -$dropdown-divider-background-color: $border-light !default - -.dropdown - display: inline-flex - position: relative - vertical-align: top - &.is-active, - &.is-hoverable:hover - .dropdown-menu - display: block - &.is-right - .dropdown-menu - left: auto - right: 0 - &.is-up - .dropdown-menu - bottom: 100% - padding-bottom: $dropdown-content-offset - padding-top: initial - top: auto - -.dropdown-menu - display: none - +ltr-position(0, false) - min-width: $dropdown-menu-min-width - padding-top: $dropdown-content-offset - position: absolute - top: 100% - z-index: $dropdown-content-z - -.dropdown-content - background-color: $dropdown-content-background-color - border-radius: $dropdown-content-radius - box-shadow: $dropdown-content-shadow - padding-bottom: $dropdown-content-padding-bottom - padding-top: $dropdown-content-padding-top - -.dropdown-item - color: $dropdown-item-color - display: block - font-size: 0.875rem - line-height: 1.5 - padding: 0.375rem 1rem - position: relative - -a.dropdown-item, -button.dropdown-item - +ltr-property("padding", 3rem) - text-align: inherit - white-space: nowrap - width: 100% - &:hover - background-color: $dropdown-item-hover-background-color - color: $dropdown-item-hover-color - &.is-active - background-color: $dropdown-item-active-background-color - color: $dropdown-item-active-color - -.dropdown-divider - background-color: $dropdown-divider-background-color - border: none - display: block - height: 1px - margin: 0.5rem 0 diff --git a/sass/components/dropdown.scss b/sass/components/dropdown.scss new file mode 100644 index 00000000..779c47ba --- /dev/null +++ b/sass/components/dropdown.scss @@ -0,0 +1,105 @@ +@import "../utilities/mixins"; + +$dropdown-menu-min-width: 12rem !default; + +$dropdown-content-background-color: $scheme-main !default; +$dropdown-content-arrow: $link !default; +$dropdown-content-offset: 4px !default; +$dropdown-content-padding-bottom: 0.5rem !default; +$dropdown-content-padding-top: 0.5rem !default; +$dropdown-content-radius: $radius !default; +$dropdown-content-shadow: $shadow !default; +$dropdown-content-z: 20 !default; + +$dropdown-item-color: $text !default; +$dropdown-item-hover-color: $scheme-invert !default; +$dropdown-item-hover-background-color: $background !default; +$dropdown-item-active-color: $link-invert !default; +$dropdown-item-active-background-color: $link !default; + +$dropdown-divider-background-color: $border-light !default; + +.dropdown { + display: inline-flex; + position: relative; + vertical-align: top; + + &.is-active, + &.is-hoverable:hover { + .dropdown-menu { + display: block; + } + } + + &.is-right { + .dropdown-menu { + left: auto; + right: 0; + } + } + + &.is-up { + .dropdown-menu { + bottom: 100%; + padding-bottom: $dropdown-content-offset; + padding-top: initial; + top: auto; + } + } +} + +.dropdown-menu { + display: none; + + @include ltr-position(0, false); + + min-width: $dropdown-menu-min-width; + padding-top: $dropdown-content-offset; + position: absolute; + top: 100%; + z-index: $dropdown-content-z; +} + +.dropdown-content { + background-color: $dropdown-content-background-color; + border-radius: $dropdown-content-radius; + box-shadow: $dropdown-content-shadow; + padding-bottom: $dropdown-content-padding-bottom; + padding-top: $dropdown-content-padding-top; +} + +.dropdown-item { + color: $dropdown-item-color; + display: block; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.375rem 1rem; + position: relative; +} + +a.dropdown-item, +button.dropdown-item { + @include ltr-property("padding", 3rem); + + text-align: inherit; + white-space: nowrap; + width: 100%; + + &:hover { + background-color: $dropdown-item-hover-background-color; + color: $dropdown-item-hover-color; + } + + &.is-active { + background-color: $dropdown-item-active-background-color; + color: $dropdown-item-active-color; + } +} + +.dropdown-divider { + background-color: $dropdown-divider-background-color; + border: none; + display: block; + height: 1px; + margin: 0.5rem 0; +} diff --git a/sass/components/level.sass b/sass/components/level.sass deleted file mode 100644 index 6793ae06..00000000 --- a/sass/components/level.sass +++ /dev/null @@ -1,79 +0,0 @@ -@import "../utilities/mixins" - -$level-item-spacing: ($block-spacing * 0.5) !default - -.level - @extend %block - align-items: center - justify-content: space-between - code - border-radius: $radius - img - display: inline-block - vertical-align: top - // Modifiers - &.is-mobile - display: flex - .level-left, - .level-right - display: flex - .level-left + .level-right - margin-top: 0 - .level-item - &:not(:last-child) - margin-bottom: 0 - +ltr-property("margin", $level-item-spacing) - &:not(.is-narrow) - flex-grow: 1 - // Responsiveness - +tablet - display: flex - & > .level-item - &:not(.is-narrow) - flex-grow: 1 - -.level-item - align-items: center - display: flex - flex-basis: auto - flex-grow: 0 - flex-shrink: 0 - justify-content: center - .title, - .subtitle - margin-bottom: 0 - // Responsiveness - +mobile - &:not(:last-child) - margin-bottom: $level-item-spacing - -.level-left, -.level-right - flex-basis: auto - flex-grow: 0 - flex-shrink: 0 - .level-item - // Modifiers - &.is-flexible - flex-grow: 1 - // Responsiveness - +tablet - &:not(:last-child) - +ltr-property("margin", $level-item-spacing) - -.level-left - align-items: center - justify-content: flex-start - // Responsiveness - +mobile - & + .level-right - margin-top: 1.5rem - +tablet - display: flex - -.level-right - align-items: center - justify-content: flex-end - // Responsiveness - +tablet - display: flex diff --git a/sass/components/level.scss b/sass/components/level.scss new file mode 100644 index 00000000..f709058e --- /dev/null +++ b/sass/components/level.scss @@ -0,0 +1,125 @@ +@import "../utilities/mixins"; + +$level-item-spacing: $block-spacing * 0.5 !default; + +.level { + @extend %block; + + align-items: center; + justify-content: space-between; + + code { + border-radius: $radius; + } + + img { + display: inline-block; + vertical-align: top; + } + + // Modifiers + &.is-mobile { + display: flex; + + .level-left, + .level-right { + display: flex; + } + + .level-left + .level-right { + margin-top: 0; + } + + .level-item { + &:not(:last-child) { + margin-bottom: 0; + + @include ltr-property("margin", $level-item-spacing); + } + + &:not(.is-narrow) { + flex-grow: 1; + } + } + } + + // Responsiveness + @include tablet { + display: flex; + + & > .level-item { + &:not(.is-narrow) { + flex-grow: 1; + } + } + } +} + +.level-item { + align-items: center; + display: flex; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + + .title, + .subtitle { + margin-bottom: 0; + } + + // Responsiveness + @include mobile { + &:not(:last-child) { + margin-bottom: $level-item-spacing; + } + } +} + +.level-left, +.level-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + + .level-item { + // Modifiers + &.is-flexible { + flex-grow: 1; + } + + // Responsiveness + @include tablet { + &:not(:last-child) { + @include ltr-property("margin", $level-item-spacing); + } + } + } +} + +.level-left { + align-items: center; + justify-content: flex-start; + + // Responsiveness + @include mobile { + & + .level-right { + margin-top: 1.5rem; + } + } + + + @include tablet { + display: flex; + } +} + +.level-right { + align-items: center; + justify-content: flex-end; + + // Responsiveness + @include tablet { + display: flex; + } +} diff --git a/sass/components/media.sass b/sass/components/media.sass deleted file mode 100644 index fc3f7d16..00000000 --- a/sass/components/media.sass +++ /dev/null @@ -1,59 +0,0 @@ -@import "../utilities/mixins" - -$media-border-color: bulmaRgba($border, 0.5) !default -$media-border-size: 1px !default -$media-spacing: 1rem !default -$media-spacing-large: 1.5rem !default -$media-content-spacing: 0.75rem !default -$media-level-1-spacing: 0.75rem !default -$media-level-1-content-spacing: 0.5rem !default -$media-level-2-spacing: 0.5rem !default - -.media - align-items: flex-start - display: flex - text-align: inherit - .content:not(:last-child) - margin-bottom: $media-content-spacing - .media - border-top: $media-border-size solid $media-border-color - display: flex - padding-top: $media-level-1-spacing - .content:not(:last-child), - .control:not(:last-child) - margin-bottom: $media-level-1-content-spacing - .media - padding-top: $media-level-2-spacing - & + .media - margin-top: $media-level-2-spacing - & + .media - border-top: $media-border-size solid $media-border-color - margin-top: $media-spacing - padding-top: $media-spacing - // Sizes - &.is-large - & + .media - margin-top: $media-spacing-large - padding-top: $media-spacing-large - -.media-left, -.media-right - flex-basis: auto - flex-grow: 0 - flex-shrink: 0 - -.media-left - +ltr-property("margin", $media-spacing) - -.media-right - +ltr-property("margin", $media-spacing, false) - -.media-content - flex-basis: auto - flex-grow: 1 - flex-shrink: 1 - text-align: inherit - -+mobile - .media-content - overflow-x: auto diff --git a/sass/components/media.scss b/sass/components/media.scss new file mode 100644 index 00000000..b2f3fbb7 --- /dev/null +++ b/sass/components/media.scss @@ -0,0 +1,81 @@ +@import "../utilities/mixins"; + +$media-border-color: bulmaRgba($border, 0.5) !default; +$media-border-size: 1px !default; +$media-spacing: 1rem !default; +$media-spacing-large: 1.5rem !default; +$media-content-spacing: 0.75rem !default; +$media-level-1-spacing: 0.75rem !default; +$media-level-1-content-spacing: 0.5rem !default; +$media-level-2-spacing: 0.5rem !default; + +.media { + align-items: flex-start; + display: flex; + text-align: inherit; + + .content:not(:last-child) { + margin-bottom: $media-content-spacing; + } + + .media { + border-top: $media-border-size solid $media-border-color; + display: flex; + padding-top: $media-level-1-spacing; + + .content:not(:last-child), + .control:not(:last-child) { + margin-bottom: $media-level-1-content-spacing; + } + + .media { + padding-top: $media-level-2-spacing; + + & + .media { + margin-top: $media-level-2-spacing; + } + } + } + + & + .media { + border-top: $media-border-size solid $media-border-color; + margin-top: $media-spacing; + padding-top: $media-spacing; + } + + // Sizes + &.is-large { + & + .media { + margin-top: $media-spacing-large; + padding-top: $media-spacing-large; + } + } +} + +.media-left, +.media-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.media-left { + @include ltr-property("margin", $media-spacing); +} + +.media-right { + @include ltr-property("margin", $media-spacing, false); +} + +.media-content { + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + text-align: inherit; +} + +@include mobile { + .media-content { + overflow-x: auto; + } +} diff --git a/sass/components/menu.sass b/sass/components/menu.sass deleted file mode 100644 index 31dc56fd..00000000 --- a/sass/components/menu.sass +++ /dev/null @@ -1,59 +0,0 @@ -@import "../utilities/mixins" - -$menu-item-color: $text !default -$menu-item-radius: $radius-small !default -$menu-item-hover-color: $text-strong !default -$menu-item-hover-background-color: $background !default -$menu-item-active-color: $link-invert !default -$menu-item-active-background-color: $link !default - -$menu-list-border-left: 1px solid $border !default -$menu-list-line-height: 1.25 !default -$menu-list-link-padding: 0.5em 0.75em !default -$menu-nested-list-margin: 0.75em !default -$menu-nested-list-padding-left: 0.75em !default - -$menu-label-color: $text-light !default -$menu-label-font-size: 0.75em !default -$menu-label-letter-spacing: 0.1em !default -$menu-label-spacing: 1em !default - -.menu - font-size: $size-normal - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - -.menu-list - line-height: $menu-list-line-height - a - border-radius: $menu-item-radius - color: $menu-item-color - display: block - padding: $menu-list-link-padding - &:hover - background-color: $menu-item-hover-background-color - color: $menu-item-hover-color - // Modifiers - &.is-active - background-color: $menu-item-active-background-color - color: $menu-item-active-color - li - ul - +ltr-property("border", $menu-list-border-left, false) - margin: $menu-nested-list-margin - +ltr-property("padding", $menu-nested-list-padding-left, false) - -.menu-label - color: $menu-label-color - font-size: $menu-label-font-size - letter-spacing: $menu-label-letter-spacing - text-transform: uppercase - &:not(:first-child) - margin-top: $menu-label-spacing - &:not(:last-child) - margin-bottom: $menu-label-spacing diff --git a/sass/components/menu.scss b/sass/components/menu.scss new file mode 100644 index 00000000..558ca5e7 --- /dev/null +++ b/sass/components/menu.scss @@ -0,0 +1,83 @@ +@import "../utilities/mixins"; + +$menu-item-color: $text !default; +$menu-item-radius: $radius-small !default; +$menu-item-hover-color: $text-strong !default; +$menu-item-hover-background-color: $background !default; +$menu-item-active-color: $link-invert !default; +$menu-item-active-background-color: $link !default; + +$menu-list-border-left: 1px solid $border !default; +$menu-list-line-height: 1.25 !default; +$menu-list-link-padding: 0.5em 0.75em !default; +$menu-nested-list-margin: 0.75em !default; +$menu-nested-list-padding-left: 0.75em !default; + +$menu-label-color: $text-light !default; +$menu-label-font-size: 0.75em !default; +$menu-label-letter-spacing: 0.1em !default; +$menu-label-spacing: 1em !default; + +.menu { + font-size: $size-normal; + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} + +.menu-list { + line-height: $menu-list-line-height; + + a { + border-radius: $menu-item-radius; + color: $menu-item-color; + display: block; + padding: $menu-list-link-padding; + + &:hover { + background-color: $menu-item-hover-background-color; + color: $menu-item-hover-color; + } + + // Modifiers + &.is-active { + background-color: $menu-item-active-background-color; + color: $menu-item-active-color; + } + } + + li { + ul { + @include ltr-property("border", $menu-list-border-left, false); + + margin: $menu-nested-list-margin; + + @include ltr-property("padding", $menu-nested-list-padding-left, false); + } + } +} + +.menu-label { + color: $menu-label-color; + font-size: $menu-label-font-size; + letter-spacing: $menu-label-letter-spacing; + text-transform: uppercase; + + &:not(:first-child) { + margin-top: $menu-label-spacing; + } + + &:not(:last-child) { + margin-bottom: $menu-label-spacing; + } +} diff --git a/sass/components/message.sass b/sass/components/message.sass deleted file mode 100644 index ab837803..00000000 --- a/sass/components/message.sass +++ /dev/null @@ -1,101 +0,0 @@ -@import "../utilities/mixins" - -$message-background-color: $background !default -$message-radius: $radius !default - -$message-header-background-color: $text !default -$message-header-color: $text-invert !default -$message-header-weight: $weight-bold !default -$message-header-padding: 0.75em 1em !default -$message-header-radius: $radius !default - -$message-body-border-color: $border !default -$message-body-border-width: 0 0 0 4px !default -$message-body-color: $text !default -$message-body-padding: 1.25em 1.5em !default -$message-body-radius: $radius !default - -$message-body-pre-background-color: $scheme-main !default -$message-body-pre-code-background-color: transparent !default - -$message-header-body-border-width: 0 !default -$message-colors: $colors !default - -.message - @extend %block - background-color: $message-background-color - border-radius: $message-radius - font-size: $size-normal - strong - color: currentColor - a:not(.button):not(.tag):not(.dropdown-item) - color: currentColor - text-decoration: underline - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - // Colors - @each $name, $components in $message-colors - $color: nth($components, 1) - $color-invert: nth($components, 2) - $color-light: null - $color-dark: null - - @if length($components) >= 3 - $color-light: nth($components, 3) - @if length($components) >= 4 - $color-dark: nth($components, 4) - @else - $color-luminance: colorLuminance($color) - $darken-percentage: $color-luminance * 70% - $desaturate-percentage: $color-luminance * 30% - $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) - @else - $color-lightning: max((100% - lightness($color)) - 2%, 0%) - $color-light: lighten($color, $color-lightning) - - &.is-#{$name} - background-color: $color-light - .message-header - background-color: $color - color: $color-invert - .message-body - border-color: $color - color: $color-dark - -.message-header - align-items: center - background-color: $message-header-background-color - border-radius: $message-header-radius $message-header-radius 0 0 - color: $message-header-color - display: flex - font-weight: $message-header-weight - justify-content: space-between - line-height: 1.25 - padding: $message-header-padding - position: relative - .delete - flex-grow: 0 - flex-shrink: 0 - +ltr-property("margin", 0.75em, false) - & + .message-body - border-width: $message-header-body-border-width - border-top-left-radius: 0 - border-top-right-radius: 0 - -.message-body - border-color: $message-body-border-color - border-radius: $message-body-radius - border-style: solid - border-width: $message-body-border-width - color: $message-body-color - padding: $message-body-padding - code, - pre - background-color: $message-body-pre-background-color - pre code - background-color: $message-body-pre-code-background-color diff --git a/sass/components/message.scss b/sass/components/message.scss new file mode 100644 index 00000000..f5992257 --- /dev/null +++ b/sass/components/message.scss @@ -0,0 +1,136 @@ +@import "../utilities/mixins"; + +$message-background-color: $background !default; +$message-radius: $radius !default; + +$message-header-background-color: $text !default; +$message-header-color: $text-invert !default; +$message-header-weight: $weight-bold !default; +$message-header-padding: 0.75em 1em !default; +$message-header-radius: $radius !default; + +$message-body-border-color: $border !default; +$message-body-border-width: 0 0 0 4px !default; +$message-body-color: $text !default; +$message-body-padding: 1.25em 1.5em !default; +$message-body-radius: $radius !default; + +$message-body-pre-background-color: $scheme-main !default; +$message-body-pre-code-background-color: transparent !default; + +$message-header-body-border-width: 0 !default; +$message-colors: $colors !default; + +.message { + @extend %block; + + background-color: $message-background-color; + border-radius: $message-radius; + font-size: $size-normal; + + strong { + color: currentColor; + } + + a:not(.button):not(.tag):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } + + // Colors + @each $name, $components in $message-colors { + $color: nth($components, 1); + $color-invert: nth($components, 2); + $color-light: null; + $color-dark: null; + + @if length($components) >= 3 { + $color-light: nth($components, 3); + + @if length($components) >= 4 { + $color-dark: nth($components, 4); + } + @else { + $color-luminance: colorLuminance($color); + $darken-percentage: $color-luminance * 70%; + $desaturate-percentage: $color-luminance * 30%; + $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage); + } + } + @else { + $color-lightning: max(100% - lightness($color) - 2%, 0%); + $color-light: lighten($color, $color-lightning); + } + + &.is-#{$name} { + background-color: $color-light; + + .message-header { + background-color: $color; + color: $color-invert; + } + + .message-body { + border-color: $color; + color: $color-dark; + } + } + } +} + +.message-header { + align-items: center; + background-color: $message-header-background-color; + border-radius: $message-header-radius $message-header-radius 0 0; + color: $message-header-color; + display: flex; + font-weight: $message-header-weight; + justify-content: space-between; + line-height: 1.25; + padding: $message-header-padding; + position: relative; + + .delete { + flex-grow: 0; + flex-shrink: 0; + + @include ltr-property("margin", 0.75em, false); + } + + & + .message-body { + border-width: $message-header-body-border-width; + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +.message-body { + border-color: $message-body-border-color; + border-radius: $message-body-radius; + border-style: solid; + border-width: $message-body-border-width; + color: $message-body-color; + padding: $message-body-padding; + + code, + pre { + background-color: $message-body-pre-background-color; + } + + pre code { + background-color: $message-body-pre-code-background-color; + } +} diff --git a/sass/components/modal.sass b/sass/components/modal.sass deleted file mode 100644 index fdbddd6a..00000000 --- a/sass/components/modal.sass +++ /dev/null @@ -1,117 +0,0 @@ -@import "../utilities/mixins" - -$modal-z: 40 !default - -$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default - -$modal-content-width: 640px !default -$modal-content-margin-mobile: 20px !default -$modal-content-spacing-mobile: 160px !default -$modal-content-spacing-tablet: 40px !default - -$modal-close-dimensions: 40px !default -$modal-close-right: 20px !default -$modal-close-top: 20px !default - -$modal-card-spacing: 40px !default - -$modal-card-head-background-color: $background !default -$modal-card-head-border-bottom: 1px solid $border !default -$modal-card-head-padding: 20px !default -$modal-card-head-radius: $radius-large !default - -$modal-card-title-color: $text-strong !default -$modal-card-title-line-height: 1 !default -$modal-card-title-size: $size-4 !default - -$modal-card-foot-radius: $radius-large !default -$modal-card-foot-border-top: 1px solid $border !default - -$modal-card-body-background-color: $scheme-main !default -$modal-card-body-padding: 20px !default - -$modal-breakpoint: $tablet !default - -.modal - @extend %overlay - align-items: center - display: none - flex-direction: column - justify-content: center - overflow: hidden - position: fixed - z-index: $modal-z - // Modifiers - &.is-active - display: flex - -.modal-background - @extend %overlay - background-color: $modal-background-background-color - -.modal-content, -.modal-card - margin: 0 $modal-content-margin-mobile - max-height: calc(100vh - #{$modal-content-spacing-mobile}) - overflow: auto - position: relative - width: 100% - // Responsiveness - +from($modal-breakpoint) - margin: 0 auto - max-height: calc(100vh - #{$modal-content-spacing-tablet}) - width: $modal-content-width - -.modal-close - @extend %delete - background: none - height: $modal-close-dimensions - position: fixed - +ltr-position($modal-close-right) - top: $modal-close-top - width: $modal-close-dimensions - -.modal-card - display: flex - flex-direction: column - max-height: calc(100vh - #{$modal-card-spacing}) - overflow: hidden - -ms-overflow-y: visible - -.modal-card-head, -.modal-card-foot - align-items: center - background-color: $modal-card-head-background-color - display: flex - flex-shrink: 0 - justify-content: flex-start - padding: $modal-card-head-padding - position: relative - -.modal-card-head - border-bottom: $modal-card-head-border-bottom - border-top-left-radius: $modal-card-head-radius - border-top-right-radius: $modal-card-head-radius - -.modal-card-title - color: $modal-card-title-color - flex-grow: 1 - flex-shrink: 0 - font-size: $modal-card-title-size - line-height: $modal-card-title-line-height - -.modal-card-foot - border-bottom-left-radius: $modal-card-foot-radius - border-bottom-right-radius: $modal-card-foot-radius - border-top: $modal-card-foot-border-top - .button - &:not(:last-child) - +ltr-property("margin", 0.5em) - -.modal-card-body - +overflow-touch - background-color: $modal-card-body-background-color - flex-grow: 1 - flex-shrink: 1 - overflow: auto - padding: $modal-card-body-padding diff --git a/sass/components/modal.scss b/sass/components/modal.scss new file mode 100644 index 00000000..9fd23fa8 --- /dev/null +++ b/sass/components/modal.scss @@ -0,0 +1,140 @@ +@import "../utilities/mixins"; + +$modal-z: 40 !default; + +$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default; + +$modal-content-width: 640px !default; +$modal-content-margin-mobile: 20px !default; +$modal-content-spacing-mobile: 160px !default; +$modal-content-spacing-tablet: 40px !default; + +$modal-close-dimensions: 40px !default; +$modal-close-right: 20px !default; +$modal-close-top: 20px !default; + +$modal-card-spacing: 40px !default; + +$modal-card-head-background-color: $background !default; +$modal-card-head-border-bottom: 1px solid $border !default; +$modal-card-head-padding: 20px !default; +$modal-card-head-radius: $radius-large !default; + +$modal-card-title-color: $text-strong !default; +$modal-card-title-line-height: 1 !default; +$modal-card-title-size: $size-4 !default; + +$modal-card-foot-radius: $radius-large !default; +$modal-card-foot-border-top: 1px solid $border !default; + +$modal-card-body-background-color: $scheme-main !default; +$modal-card-body-padding: 20px !default; + +$modal-breakpoint: $tablet !default; + +.modal { + @extend %overlay; + + align-items: center; + display: none; + flex-direction: column; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: $modal-z; + + // Modifiers + &.is-active { + display: flex; + } +} + +.modal-background { + @extend %overlay; + + background-color: $modal-background-background-color; +} + +.modal-content, +.modal-card { + margin: 0 $modal-content-margin-mobile; + max-height: calc(100vh - #{$modal-content-spacing-mobile}); + overflow: auto; + position: relative; + width: 100%; + + // Responsiveness + @include from($modal-breakpoint) { + margin: 0 auto; + max-height: calc(100vh - #{$modal-content-spacing-tablet}); + width: $modal-content-width; + } +} + +.modal-close { + @extend %delete; + + background: none; + height: $modal-close-dimensions; + position: fixed; + + @include ltr-position($modal-close-right); + + top: $modal-close-top; + width: $modal-close-dimensions; +} + +.modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - #{$modal-card-spacing}); + overflow: hidden; + -ms-overflow-y: visible; +} + +.modal-card-head, +.modal-card-foot { + align-items: center; + background-color: $modal-card-head-background-color; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: $modal-card-head-padding; + position: relative; +} + +.modal-card-head { + border-bottom: $modal-card-head-border-bottom; + border-top-left-radius: $modal-card-head-radius; + border-top-right-radius: $modal-card-head-radius; +} + +.modal-card-title { + color: $modal-card-title-color; + flex-grow: 1; + flex-shrink: 0; + font-size: $modal-card-title-size; + line-height: $modal-card-title-line-height; +} + +.modal-card-foot { + border-bottom-left-radius: $modal-card-foot-radius; + border-bottom-right-radius: $modal-card-foot-radius; + border-top: $modal-card-foot-border-top; + + .button { + &:not(:last-child) { + @include ltr-property("margin", 0.5em); + } + } +} + +.modal-card-body { + @include overflow-touch; + + background-color: $modal-card-body-background-color; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: $modal-card-body-padding; +} diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass deleted file mode 100644 index f64c4880..00000000 --- a/sass/components/navbar.sass +++ /dev/null @@ -1,446 +0,0 @@ -@import "../utilities/mixins" - -$navbar-background-color: $scheme-main !default -$navbar-box-shadow-size: 0 2px 0 0 !default -$navbar-box-shadow-color: $background !default -$navbar-height: 3.25rem !default -$navbar-padding-vertical: 1rem !default -$navbar-padding-horizontal: 2rem !default -$navbar-z: 30 !default -$navbar-fixed-z: 30 !default - -$navbar-item-color: $text !default -$navbar-item-hover-color: $link !default -$navbar-item-hover-background-color: $scheme-main-bis !default -$navbar-item-active-color: $scheme-invert !default -$navbar-item-active-background-color: transparent !default -$navbar-item-img-max-height: 1.75rem !default - -$navbar-burger-color: $navbar-item-color !default - -$navbar-tab-hover-background-color: transparent !default -$navbar-tab-hover-border-bottom-color: $link !default -$navbar-tab-active-color: $link !default -$navbar-tab-active-background-color: transparent !default -$navbar-tab-active-border-bottom-color: $link !default -$navbar-tab-active-border-bottom-style: solid !default -$navbar-tab-active-border-bottom-width: 3px !default - -$navbar-dropdown-background-color: $scheme-main !default -$navbar-dropdown-border-top: 2px solid $border !default -$navbar-dropdown-offset: -4px !default -$navbar-dropdown-arrow: $link !default -$navbar-dropdown-radius: $radius-large !default -$navbar-dropdown-z: 20 !default - -$navbar-dropdown-boxed-radius: $radius-large !default -$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default - -$navbar-dropdown-item-hover-color: $scheme-invert !default -$navbar-dropdown-item-hover-background-color: $background !default -$navbar-dropdown-item-active-color: $link !default -$navbar-dropdown-item-active-background-color: $background !default - -$navbar-divider-background-color: $background !default -$navbar-divider-height: 2px !default - -$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default - -$navbar-breakpoint: $desktop !default - -$navbar-colors: $colors !default - -=navbar-fixed - left: 0 - position: fixed - right: 0 - z-index: $navbar-fixed-z - -.navbar - background-color: $navbar-background-color - min-height: $navbar-height - position: relative - z-index: $navbar-z - @each $name, $pair in $navbar-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - .navbar-brand - & > .navbar-item, - .navbar-link - color: $color-invert - & > a.navbar-item, - .navbar-link - &:focus, - &:hover, - &.is-active - background-color: bulmaDarken($color, 5%) - color: $color-invert - .navbar-link - &::after - border-color: $color-invert - .navbar-burger - color: $color-invert - +from($navbar-breakpoint) - .navbar-start, - .navbar-end - & > .navbar-item, - .navbar-link - color: $color-invert - & > a.navbar-item, - .navbar-link - &:focus, - &:hover, - &.is-active - background-color: bulmaDarken($color, 5%) - color: $color-invert - .navbar-link - &::after - border-color: $color-invert - .navbar-item.has-dropdown:focus .navbar-link, - .navbar-item.has-dropdown:hover .navbar-link, - .navbar-item.has-dropdown.is-active .navbar-link - background-color: bulmaDarken($color, 5%) - color: $color-invert - .navbar-dropdown - a.navbar-item - &.is-active - background-color: $color - color: $color-invert - & > .container - align-items: stretch - display: flex - min-height: $navbar-height - width: 100% - &.has-shadow - box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color - &.is-fixed-bottom, - &.is-fixed-top - +navbar-fixed - &.is-fixed-bottom - bottom: 0 - &.has-shadow - box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color - &.is-fixed-top - top: 0 - -html, -body - &.has-navbar-fixed-top - padding-top: $navbar-height - &.has-navbar-fixed-bottom - padding-bottom: $navbar-height - -.navbar-brand, -.navbar-tabs - align-items: stretch - display: flex - flex-shrink: 0 - min-height: $navbar-height - -.navbar-brand - a.navbar-item - &:focus, - &:hover - background-color: transparent - -.navbar-tabs - +overflow-touch - max-width: 100vw - overflow-x: auto - overflow-y: hidden - -.navbar-burger - @extend %reset - color: $navbar-burger-color - +hamburger($navbar-height) - +ltr-property("margin", auto, false) - -.navbar-menu - display: none - -.navbar-item, -.navbar-link - color: $navbar-item-color - display: block - line-height: 1.5 - padding: 0.5rem 0.75rem - position: relative - .icon - &:only-child - margin-left: -0.25rem - margin-right: -0.25rem - -a.navbar-item, -.navbar-link - cursor: pointer - &:focus, - &:focus-within, - &:hover, - &.is-active - background-color: $navbar-item-hover-background-color - color: $navbar-item-hover-color - -.navbar-item - flex-grow: 0 - flex-shrink: 0 - img - max-height: $navbar-item-img-max-height - &.has-dropdown - padding: 0 - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-tab - border-bottom: 1px solid transparent - min-height: $navbar-height - padding-bottom: calc(0.5rem - 1px) - &:focus, - &:hover - background-color: $navbar-tab-hover-background-color - border-bottom-color: $navbar-tab-hover-border-bottom-color - &.is-active - background-color: $navbar-tab-active-background-color - border-bottom-color: $navbar-tab-active-border-bottom-color - border-bottom-style: $navbar-tab-active-border-bottom-style - border-bottom-width: $navbar-tab-active-border-bottom-width - color: $navbar-tab-active-color - padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) - -.navbar-content - flex-grow: 1 - flex-shrink: 1 - -.navbar-link:not(.is-arrowless) - +ltr-property("padding", 2.5em) - &::after - @extend %arrow - border-color: $navbar-dropdown-arrow - margin-top: -0.375em - +ltr-position(1.125em) - -.navbar-dropdown - font-size: 0.875rem - padding-bottom: 0.5rem - padding-top: 0.5rem - .navbar-item - padding-left: 1.5rem - padding-right: 1.5rem - -.navbar-divider - background-color: $navbar-divider-background-color - border: none - display: none - height: $navbar-divider-height - margin: 0.5rem 0 - -+until($navbar-breakpoint) - .navbar > .container - display: block - .navbar-brand, - .navbar-tabs - .navbar-item - align-items: center - display: flex - .navbar-link - &::after - display: none - .navbar-menu - background-color: $navbar-background-color - box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1) - padding: 0.5rem 0 - &.is-active - display: block - // Fixed navbar - .navbar - &.is-fixed-bottom-touch, - &.is-fixed-top-touch - +navbar-fixed - &.is-fixed-bottom-touch - bottom: 0 - &.has-shadow - box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) - &.is-fixed-top-touch - top: 0 - &.is-fixed-top, - &.is-fixed-top-touch - .navbar-menu - +overflow-touch - max-height: calc(100vh - #{$navbar-height}) - overflow: auto - html, - body - &.has-navbar-fixed-top-touch - padding-top: $navbar-height - &.has-navbar-fixed-bottom-touch - padding-bottom: $navbar-height - -+from($navbar-breakpoint) - .navbar, - .navbar-menu, - .navbar-start, - .navbar-end - align-items: stretch - display: flex - .navbar - min-height: $navbar-height - &.is-spaced - padding: $navbar-padding-vertical $navbar-padding-horizontal - .navbar-start, - .navbar-end - align-items: center - a.navbar-item, - .navbar-link - border-radius: $radius - &.is-transparent - a.navbar-item, - .navbar-link - &:focus, - &:hover, - &.is-active - background-color: transparent !important - .navbar-item.has-dropdown - &.is-active, - &.is-hoverable:focus, - &.is-hoverable:focus-within, - &.is-hoverable:hover - .navbar-link - background-color: transparent !important - .navbar-dropdown - a.navbar-item - &:focus, - &:hover - background-color: $navbar-dropdown-item-hover-background-color - color: $navbar-dropdown-item-hover-color - &.is-active - background-color: $navbar-dropdown-item-active-background-color - color: $navbar-dropdown-item-active-color - .navbar-burger - display: none - .navbar-item, - .navbar-link - align-items: center - display: flex - .navbar-item - &.has-dropdown - align-items: stretch - &.has-dropdown-up - .navbar-link::after - transform: rotate(135deg) translate(0.25em, -0.25em) - .navbar-dropdown - border-bottom: $navbar-dropdown-border-top - border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 - border-top: none - bottom: 100% - box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1) - top: auto - &.is-active, - &.is-hoverable:focus, - &.is-hoverable:focus-within, - &.is-hoverable:hover - .navbar-dropdown - display: block - .navbar.is-spaced &, - &.is-boxed - opacity: 1 - pointer-events: auto - transform: translateY(0) - .navbar-menu - flex-grow: 1 - flex-shrink: 0 - .navbar-start - justify-content: flex-start - +ltr-property("margin", auto) - .navbar-end - justify-content: flex-end - +ltr-property("margin", auto, false) - .navbar-dropdown - background-color: $navbar-dropdown-background-color - border-bottom-left-radius: $navbar-dropdown-radius - border-bottom-right-radius: $navbar-dropdown-radius - border-top: $navbar-dropdown-border-top - box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1) - display: none - font-size: 0.875rem - +ltr-position(0, false) - min-width: 100% - position: absolute - top: 100% - z-index: $navbar-dropdown-z - .navbar-item - padding: 0.375rem 1rem - white-space: nowrap - a.navbar-item - +ltr-property("padding", 3rem) - &:focus, - &:hover - background-color: $navbar-dropdown-item-hover-background-color - color: $navbar-dropdown-item-hover-color - &.is-active - background-color: $navbar-dropdown-item-active-background-color - color: $navbar-dropdown-item-active-color - .navbar.is-spaced &, - &.is-boxed - border-radius: $navbar-dropdown-boxed-radius - border-top: none - box-shadow: $navbar-dropdown-boxed-shadow - display: block - opacity: 0 - pointer-events: none - top: calc(100% + (#{$navbar-dropdown-offset})) - transform: translateY(-5px) - transition-duration: $speed - transition-property: opacity, transform - &.is-right - left: auto - right: 0 - .navbar-divider - display: block - .navbar > .container, - .container > .navbar - .navbar-brand - +ltr-property("margin", -.75rem, false) - .navbar-menu - +ltr-property("margin", -.75rem) - // Fixed navbar - .navbar - &.is-fixed-bottom-desktop, - &.is-fixed-top-desktop - +navbar-fixed - &.is-fixed-bottom-desktop - bottom: 0 - &.has-shadow - box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) - &.is-fixed-top-desktop - top: 0 - html, - body - &.has-navbar-fixed-top-desktop - padding-top: $navbar-height - &.has-navbar-fixed-bottom-desktop - padding-bottom: $navbar-height - &.has-spaced-navbar-fixed-top - padding-top: $navbar-height + ($navbar-padding-vertical * 2) - &.has-spaced-navbar-fixed-bottom - padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) - // Hover/Active states - a.navbar-item, - .navbar-link - &.is-active - color: $navbar-item-active-color - &.is-active:not(:focus):not(:hover) - background-color: $navbar-item-active-background-color - .navbar-item.has-dropdown - &:focus, - &:hover, - &.is-active - .navbar-link - background-color: $navbar-item-hover-background-color - -// Combination - -.hero - &.is-fullheight-with-navbar - min-height: calc(100vh - #{$navbar-height}) diff --git a/sass/components/navbar.scss b/sass/components/navbar.scss new file mode 100644 index 00000000..7d13e59e --- /dev/null +++ b/sass/components/navbar.scss @@ -0,0 +1,668 @@ +@import "../utilities/mixins"; + +$navbar-background-color: $scheme-main !default; +$navbar-box-shadow-size: 0 2px 0 0 !default; +$navbar-box-shadow-color: $background !default; +$navbar-height: 3.25rem !default; +$navbar-padding-vertical: 1rem !default; +$navbar-padding-horizontal: 2rem !default; +$navbar-z: 30 !default; +$navbar-fixed-z: 30 !default; + +$navbar-item-color: $text !default; +$navbar-item-hover-color: $link !default; +$navbar-item-hover-background-color: $scheme-main-bis !default; +$navbar-item-active-color: $scheme-invert !default; +$navbar-item-active-background-color: transparent !default; +$navbar-item-img-max-height: 1.75rem !default; + +$navbar-burger-color: $navbar-item-color !default; + +$navbar-tab-hover-background-color: transparent !default; +$navbar-tab-hover-border-bottom-color: $link !default; +$navbar-tab-active-color: $link !default; +$navbar-tab-active-background-color: transparent !default; +$navbar-tab-active-border-bottom-color: $link !default; +$navbar-tab-active-border-bottom-style: solid !default; +$navbar-tab-active-border-bottom-width: 3px !default; + +$navbar-dropdown-background-color: $scheme-main !default; +$navbar-dropdown-border-top: 2px solid $border !default; +$navbar-dropdown-offset: -4px !default; +$navbar-dropdown-arrow: $link !default; +$navbar-dropdown-radius: $radius-large !default; +$navbar-dropdown-z: 20 !default; + +$navbar-dropdown-boxed-radius: $radius-large !default; +$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default; + +$navbar-dropdown-item-hover-color: $scheme-invert !default; +$navbar-dropdown-item-hover-background-color: $background !default; +$navbar-dropdown-item-active-color: $link !default; +$navbar-dropdown-item-active-background-color: $background !default; + +$navbar-divider-background-color: $background !default; +$navbar-divider-height: 2px !default; + +$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default; + +$navbar-breakpoint: $desktop !default; + +$navbar-colors: $colors !default; + +@mixin navbar-fixed { + left: 0; + position: fixed; + right: 0; + z-index: $navbar-fixed-z; +} + +.navbar { + background-color: $navbar-background-color; + min-height: $navbar-height; + position: relative; + z-index: $navbar-z; + + @each $name, $pair in $navbar-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + .navbar-brand { + & > .navbar-item, + .navbar-link { + color: $color-invert; + } + + & > a.navbar-item, + .navbar-link { + &:focus, + &:hover, + &.is-active { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + } + + .navbar-link { + &::after { + border-color: $color-invert; + } + } + } + + .navbar-burger { + color: $color-invert; + } + + @include from($navbar-breakpoint) { + .navbar-start, + .navbar-end { + & > .navbar-item, + .navbar-link { + color: $color-invert; + } + + & > a.navbar-item, + .navbar-link { + &:focus, + &:hover, + &.is-active { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + } + + .navbar-link { + &::after { + border-color: $color-invert; + } + } + } + + .navbar-item.has-dropdown:focus .navbar-link, + .navbar-item.has-dropdown:hover .navbar-link, + .navbar-item.has-dropdown.is-active .navbar-link { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + + .navbar-dropdown { + a.navbar-item { + &.is-active { + background-color: $color; + color: $color-invert; + } + } + } + } + } + } + + & > .container { + align-items: stretch; + display: flex; + min-height: $navbar-height; + width: 100%; + } + + &.has-shadow { + box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color; + } + + &.is-fixed-bottom, + &.is-fixed-top { + @include navbar-fixed; + } + + &.is-fixed-bottom { + bottom: 0; + + &.has-shadow { + box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color; + } + } + + &.is-fixed-top { + top: 0; + } +} + +html, +body { + &.has-navbar-fixed-top { + padding-top: $navbar-height; + } + + &.has-navbar-fixed-bottom { + padding-bottom: $navbar-height; + } +} + +.navbar-brand, +.navbar-tabs { + align-items: stretch; + display: flex; + flex-shrink: 0; + min-height: $navbar-height; +} + +.navbar-brand { + a.navbar-item { + &:focus, + &:hover { + background-color: transparent; + } + } +} + +.navbar-tabs { + @include overflow-touch; + + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; +} + +.navbar-burger { + @extend %reset; + + color: $navbar-burger-color; + + @include hamburger($navbar-height); + @include ltr-property("margin", auto, false); +} + +.navbar-menu { + display: none; +} + +.navbar-item, +.navbar-link { + color: $navbar-item-color; + display: block; + line-height: 1.5; + padding: 0.5rem 0.75rem; + position: relative; + + .icon { + &:only-child { + margin-left: -0.25rem; + margin-right: -0.25rem; + } + } +} + +a.navbar-item, +.navbar-link { + cursor: pointer; + + &:focus, + &:focus-within, + &:hover, + &.is-active { + background-color: $navbar-item-hover-background-color; + color: $navbar-item-hover-color; + } +} + +.navbar-item { + flex-grow: 0; + flex-shrink: 0; + + img { + max-height: $navbar-item-img-max-height; + } + + &.has-dropdown { + padding: 0; + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + + &.is-tab { + border-bottom: 1px solid transparent; + min-height: $navbar-height; + padding-bottom: calc(0.5rem - 1px); + + &:focus, + &:hover { + background-color: $navbar-tab-hover-background-color; + border-bottom-color: $navbar-tab-hover-border-bottom-color; + } + + &.is-active { + background-color: $navbar-tab-active-background-color; + border-bottom-color: $navbar-tab-active-border-bottom-color; + border-bottom-style: $navbar-tab-active-border-bottom-style; + border-bottom-width: $navbar-tab-active-border-bottom-width; + color: $navbar-tab-active-color; + padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}); + } + } +} + +.navbar-content { + flex-grow: 1; + flex-shrink: 1; +} + +.navbar-link:not(.is-arrowless) { + @include ltr-property("padding", 2.5em); + + &::after { + @extend %arrow; + + border-color: $navbar-dropdown-arrow; + margin-top: -0.375em; + + @include ltr-position(1.125em); + } +} + +.navbar-dropdown { + font-size: 0.875rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + + .navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +.navbar-divider { + background-color: $navbar-divider-background-color; + border: none; + display: none; + height: $navbar-divider-height; + margin: 0.5rem 0; +} + +@include until($navbar-breakpoint) { + .navbar > .container { + display: block; + } + + .navbar-brand, + .navbar-tabs { + .navbar-item { + align-items: center; + display: flex; + } + } + + .navbar-link { + &::after { + display: none; + } + } + + .navbar-menu { + background-color: $navbar-background-color; + box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1); + padding: 0.5rem 0; + + &.is-active { + display: block; + } + } + + // Fixed navbar + .navbar { + &.is-fixed-bottom-touch, + &.is-fixed-top-touch { + @include navbar-fixed; + } + + &.is-fixed-bottom-touch { + bottom: 0; + + &.has-shadow { + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1); + } + } + + &.is-fixed-top-touch { + top: 0; + } + + &.is-fixed-top, + &.is-fixed-top-touch { + .navbar-menu { + @include overflow-touch; + + max-height: calc(100vh - #{$navbar-height}); + overflow: auto; + } + } + } + + html, + body { + &.has-navbar-fixed-top-touch { + padding-top: $navbar-height; + } + + &.has-navbar-fixed-bottom-touch { + padding-bottom: $navbar-height; + } + } +} + + +@include from($navbar-breakpoint) { + .navbar, + .navbar-menu, + .navbar-start, + .navbar-end { + align-items: stretch; + display: flex; + } + + .navbar { + min-height: $navbar-height; + + &.is-spaced { + padding: $navbar-padding-vertical $navbar-padding-horizontal; + + .navbar-start, + .navbar-end { + align-items: center; + } + + a.navbar-item, + .navbar-link { + border-radius: $radius; + } + } + + &.is-transparent { + a.navbar-item, + .navbar-link { + &:focus, + &:hover, + &.is-active { + background-color: transparent !important; + } + } + + .navbar-item.has-dropdown { + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover { + .navbar-link { + background-color: transparent !important; + } + } + } + + .navbar-dropdown { + a.navbar-item { + &:focus, + &:hover { + background-color: $navbar-dropdown-item-hover-background-color; + color: $navbar-dropdown-item-hover-color; + } + + &.is-active { + background-color: $navbar-dropdown-item-active-background-color; + color: $navbar-dropdown-item-active-color; + } + } + } + } + } + + .navbar-burger { + display: none; + } + + .navbar-item, + .navbar-link { + align-items: center; + display: flex; + } + + .navbar-item { + &.has-dropdown { + align-items: stretch; + } + + &.has-dropdown-up { + .navbar-link::after { + transform: rotate(135deg) translate(0.25em, -0.25em); + } + + .navbar-dropdown { + border-bottom: $navbar-dropdown-border-top; + border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0; + border-top: none; + bottom: 100%; + box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1); + top: auto; + } + } + + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover { + .navbar-dropdown { + display: block; + + .navbar.is-spaced &, + &.is-boxed { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + } + } + } + + .navbar-menu { + flex-grow: 1; + flex-shrink: 0; + } + + .navbar-start { + justify-content: flex-start; + + @include ltr-property("margin", auto); + } + + .navbar-end { + justify-content: flex-end; + + @include ltr-property("margin", auto, false); + } + + .navbar-dropdown { + background-color: $navbar-dropdown-background-color; + border-bottom-left-radius: $navbar-dropdown-radius; + border-bottom-right-radius: $navbar-dropdown-radius; + border-top: $navbar-dropdown-border-top; + box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1); + display: none; + font-size: 0.875rem; + + @include ltr-position(0, false); + + min-width: 100%; + position: absolute; + top: 100%; + z-index: $navbar-dropdown-z; + + .navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; + } + + a.navbar-item { + @include ltr-property("padding", 3rem); + + &:focus, + &:hover { + background-color: $navbar-dropdown-item-hover-background-color; + color: $navbar-dropdown-item-hover-color; + } + + &.is-active { + background-color: $navbar-dropdown-item-active-background-color; + color: $navbar-dropdown-item-active-color; + } + } + + .navbar.is-spaced &, + &.is-boxed { + border-radius: $navbar-dropdown-boxed-radius; + border-top: none; + box-shadow: $navbar-dropdown-boxed-shadow; + display: block; + opacity: 0; + pointer-events: none; + top: calc(100% + (#{$navbar-dropdown-offset})); + transform: translateY(-5px); + transition-duration: $speed; + transition-property: opacity, transform; + } + + &.is-right { + left: auto; + right: 0; + } + } + + .navbar-divider { + display: block; + } + + .navbar > .container, + .container > .navbar { + .navbar-brand { + @include ltr-property("margin", -0.75rem, false); + } + + .navbar-menu { + @include ltr-property("margin", -0.75rem); + } + } + + // Fixed navbar + .navbar { + &.is-fixed-bottom-desktop, + &.is-fixed-top-desktop { + @include navbar-fixed; + } + + &.is-fixed-bottom-desktop { + bottom: 0; + + &.has-shadow { + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1); + } + } + + &.is-fixed-top-desktop { + top: 0; + } + } + + html, + body { + &.has-navbar-fixed-top-desktop { + padding-top: $navbar-height; + } + + &.has-navbar-fixed-bottom-desktop { + padding-bottom: $navbar-height; + } + + &.has-spaced-navbar-fixed-top { + padding-top: $navbar-height + $navbar-padding-vertical * 2; + } + + &.has-spaced-navbar-fixed-bottom { + padding-bottom: $navbar-height + $navbar-padding-vertical * 2; + } + } + + // Hover/Active states + a.navbar-item, + .navbar-link { + &.is-active { + color: $navbar-item-active-color; + } + + &.is-active:not(:focus):not(:hover) { + background-color: $navbar-item-active-background-color; + } + } + + .navbar-item.has-dropdown { + &:focus, + &:hover, + &.is-active { + .navbar-link { + background-color: $navbar-item-hover-background-color; + } + } + } +} + + +// Combination + +.hero { + &.is-fullheight-with-navbar { + min-height: calc(100vh - #{$navbar-height}); + } +} diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass deleted file mode 100644 index 950949d9..00000000 --- a/sass/components/pagination.sass +++ /dev/null @@ -1,167 +0,0 @@ -@import "../utilities/controls" -@import "../utilities/mixins" - -$pagination-color: $text-strong !default -$pagination-border-color: $border !default -$pagination-margin: -0.25rem !default -$pagination-min-width: $control-height !default - -$pagination-item-font-size: 1em !default -$pagination-item-margin: 0.25rem !default -$pagination-item-padding-left: 0.5em !default -$pagination-item-padding-right: 0.5em !default - -$pagination-nav-padding-left: 0.75em !default -$pagination-nav-padding-right: 0.75em !default - -$pagination-hover-color: $link-hover !default -$pagination-hover-border-color: $link-hover-border !default - -$pagination-focus-color: $link-focus !default -$pagination-focus-border-color: $link-focus-border !default - -$pagination-active-color: $link-active !default -$pagination-active-border-color: $link-active-border !default - -$pagination-disabled-color: $text-light !default -$pagination-disabled-background-color: $border !default -$pagination-disabled-border-color: $border !default - -$pagination-current-color: $link-invert !default -$pagination-current-background-color: $link !default -$pagination-current-border-color: $link !default - -$pagination-ellipsis-color: $grey-light !default - -$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default - -.pagination - @extend %block - font-size: $size-normal - margin: $pagination-margin - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - &.is-rounded - .pagination-previous, - .pagination-next - padding-left: 1em - padding-right: 1em - border-radius: $radius-rounded - .pagination-link - border-radius: $radius-rounded - -.pagination, -.pagination-list - align-items: center - display: flex - justify-content: center - text-align: center - -.pagination-previous, -.pagination-next, -.pagination-link, -.pagination-ellipsis - @extend %control - @extend %unselectable - font-size: $pagination-item-font-size - justify-content: center - margin: $pagination-item-margin - padding-left: $pagination-item-padding-left - padding-right: $pagination-item-padding-right - text-align: center - -.pagination-previous, -.pagination-next, -.pagination-link - border-color: $pagination-border-color - color: $pagination-color - min-width: $pagination-min-width - &:hover - border-color: $pagination-hover-border-color - color: $pagination-hover-color - &:focus - border-color: $pagination-focus-border-color - &:active - box-shadow: $pagination-shadow-inset - &[disabled], - &.is-disabled - background-color: $pagination-disabled-background-color - border-color: $pagination-disabled-border-color - box-shadow: none - color: $pagination-disabled-color - opacity: 0.5 - -.pagination-previous, -.pagination-next - padding-left: $pagination-nav-padding-left - padding-right: $pagination-nav-padding-right - white-space: nowrap - -.pagination-link - &.is-current - background-color: $pagination-current-background-color - border-color: $pagination-current-border-color - color: $pagination-current-color - -.pagination-ellipsis - color: $pagination-ellipsis-color - pointer-events: none - -.pagination-list - flex-wrap: wrap - li - list-style: none - -+mobile - .pagination - flex-wrap: wrap - .pagination-previous, - .pagination-next - flex-grow: 1 - flex-shrink: 1 - .pagination-list - li - flex-grow: 1 - flex-shrink: 1 - -+tablet - .pagination-list - flex-grow: 1 - flex-shrink: 1 - justify-content: flex-start - order: 1 - .pagination-previous, - .pagination-next, - .pagination-link, - .pagination-ellipsis - margin-bottom: 0 - margin-top: 0 - .pagination-previous - order: 2 - .pagination-next - order: 3 - .pagination - justify-content: space-between - margin-bottom: 0 - margin-top: 0 - &.is-centered - .pagination-previous - order: 1 - .pagination-list - justify-content: center - order: 2 - .pagination-next - order: 3 - &.is-right - .pagination-previous - order: 1 - .pagination-next - order: 2 - .pagination-list - justify-content: flex-end - order: 3 diff --git a/sass/components/pagination.scss b/sass/components/pagination.scss new file mode 100644 index 00000000..8821cc11 --- /dev/null +++ b/sass/components/pagination.scss @@ -0,0 +1,232 @@ +@import "../utilities/controls"; +@import "../utilities/mixins"; + +$pagination-color: $text-strong !default; +$pagination-border-color: $border !default; +$pagination-margin: -0.25rem !default; +$pagination-min-width: $control-height !default; + +$pagination-item-font-size: 1em !default; +$pagination-item-margin: 0.25rem !default; +$pagination-item-padding-left: 0.5em !default; +$pagination-item-padding-right: 0.5em !default; + +$pagination-nav-padding-left: 0.75em !default; +$pagination-nav-padding-right: 0.75em !default; + +$pagination-hover-color: $link-hover !default; +$pagination-hover-border-color: $link-hover-border !default; + +$pagination-focus-color: $link-focus !default; +$pagination-focus-border-color: $link-focus-border !default; + +$pagination-active-color: $link-active !default; +$pagination-active-border-color: $link-active-border !default; + +$pagination-disabled-color: $text-light !default; +$pagination-disabled-background-color: $border !default; +$pagination-disabled-border-color: $border !default; + +$pagination-current-color: $link-invert !default; +$pagination-current-background-color: $link !default; +$pagination-current-border-color: $link !default; + +$pagination-ellipsis-color: $grey-light !default; + +$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; + +.pagination { + @extend %block; + + font-size: $size-normal; + margin: $pagination-margin; + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } + + &.is-rounded { + .pagination-previous, + .pagination-next { + padding-left: 1em; + padding-right: 1em; + border-radius: $radius-rounded; + } + + .pagination-link { + border-radius: $radius-rounded; + } + } +} + +.pagination, +.pagination-list { + align-items: center; + display: flex; + justify-content: center; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + @extend %control; + + @extend %unselectable; + + font-size: $pagination-item-font-size; + justify-content: center; + margin: $pagination-item-margin; + padding-left: $pagination-item-padding-left; + padding-right: $pagination-item-padding-right; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link { + border-color: $pagination-border-color; + color: $pagination-color; + min-width: $pagination-min-width; + + &:hover { + border-color: $pagination-hover-border-color; + color: $pagination-hover-color; + } + + &:focus { + border-color: $pagination-focus-border-color; + } + + &:active { + box-shadow: $pagination-shadow-inset; + } + + &[disabled], + &.is-disabled { + background-color: $pagination-disabled-background-color; + border-color: $pagination-disabled-border-color; + box-shadow: none; + color: $pagination-disabled-color; + opacity: 0.5; + } +} + +.pagination-previous, +.pagination-next { + padding-left: $pagination-nav-padding-left; + padding-right: $pagination-nav-padding-right; + white-space: nowrap; +} + +.pagination-link { + &.is-current { + background-color: $pagination-current-background-color; + border-color: $pagination-current-border-color; + color: $pagination-current-color; + } +} + +.pagination-ellipsis { + color: $pagination-ellipsis-color; + pointer-events: none; +} + +.pagination-list { + flex-wrap: wrap; + + li { + list-style: none; + } +} + +@include mobile { + .pagination { + flex-wrap: wrap; + } + + .pagination-previous, + .pagination-next { + flex-grow: 1; + flex-shrink: 1; + } + + .pagination-list { + li { + flex-grow: 1; + flex-shrink: 1; + } + } +} + + +@include tablet { + .pagination-list { + flex-grow: 1; + flex-shrink: 1; + justify-content: flex-start; + order: 1; + } + + .pagination-previous, + .pagination-next, + .pagination-link, + .pagination-ellipsis { + margin-bottom: 0; + margin-top: 0; + } + + .pagination-previous { + order: 2; + } + + .pagination-next { + order: 3; + } + + .pagination { + justify-content: space-between; + margin-bottom: 0; + margin-top: 0; + + &.is-centered { + .pagination-previous { + order: 1; + } + + .pagination-list { + justify-content: center; + order: 2; + } + + .pagination-next { + order: 3; + } + } + + &.is-right { + .pagination-previous { + order: 1; + } + + .pagination-next { + order: 2; + } + + .pagination-list { + justify-content: flex-end; + order: 3; + } + } + } +} diff --git a/sass/components/panel.sass b/sass/components/panel.sass deleted file mode 100644 index afaffcd9..00000000 --- a/sass/components/panel.sass +++ /dev/null @@ -1,121 +0,0 @@ -@import "../utilities/mixins" - -$panel-margin: $block-spacing !default -$panel-item-border: 1px solid $border-light !default -$panel-radius: $radius-large !default -$panel-shadow: $shadow !default - -$panel-heading-background-color: $border-light !default -$panel-heading-color: $text-strong !default -$panel-heading-line-height: 1.25 !default -$panel-heading-padding: 0.75em 1em !default -$panel-heading-radius: $radius !default -$panel-heading-size: 1.25em !default -$panel-heading-weight: $weight-bold !default - -$panel-tabs-font-size: 0.875em !default -$panel-tab-border-bottom: 1px solid $border !default -$panel-tab-active-border-bottom-color: $link-active-border !default -$panel-tab-active-color: $link-active !default - -$panel-list-item-color: $text !default -$panel-list-item-hover-color: $link !default - -$panel-block-color: $text-strong !default -$panel-block-hover-background-color: $background !default -$panel-block-active-border-left-color: $link !default -$panel-block-active-color: $link-active !default -$panel-block-active-icon-color: $link !default - -$panel-icon-color: $text-light !default -$panel-colors: $colors !default - -.panel - border-radius: $panel-radius - box-shadow: $panel-shadow - font-size: $size-normal - &:not(:last-child) - margin-bottom: $panel-margin - // Colors - @each $name, $components in $panel-colors - $color: nth($components, 1) - $color-invert: nth($components, 2) - &.is-#{$name} - .panel-heading - background-color: $color - color: $color-invert - .panel-tabs a.is-active - border-bottom-color: $color - .panel-block.is-active .panel-icon - color: $color - -.panel-tabs, -.panel-block - &:not(:last-child) - border-bottom: $panel-item-border - -.panel-heading - background-color: $panel-heading-background-color - border-radius: $panel-radius $panel-radius 0 0 - color: $panel-heading-color - font-size: $panel-heading-size - font-weight: $panel-heading-weight - line-height: $panel-heading-line-height - padding: $panel-heading-padding - -.panel-tabs - align-items: flex-end - display: flex - font-size: $panel-tabs-font-size - justify-content: center - a - border-bottom: $panel-tab-border-bottom - margin-bottom: -1px - padding: 0.5em - // Modifiers - &.is-active - border-bottom-color: $panel-tab-active-border-bottom-color - color: $panel-tab-active-color - -.panel-list - a - color: $panel-list-item-color - &:hover - color: $panel-list-item-hover-color - -.panel-block - align-items: center - color: $panel-block-color - display: flex - justify-content: flex-start - padding: 0.5em 0.75em - input[type="checkbox"] - +ltr-property("margin", 0.75em) - & > .control - flex-grow: 1 - flex-shrink: 1 - width: 100% - &.is-wrapped - flex-wrap: wrap - &.is-active - border-left-color: $panel-block-active-border-left-color - color: $panel-block-active-color - .panel-icon - color: $panel-block-active-icon-color - &:last-child - border-bottom-left-radius: $panel-radius - border-bottom-right-radius: $panel-radius - -a.panel-block, -label.panel-block - cursor: pointer - &:hover - background-color: $panel-block-hover-background-color - -.panel-icon - +fa(14px, 1em) - color: $panel-icon-color - +ltr-property("margin", 0.75em) - .fa - font-size: inherit - line-height: inherit diff --git a/sass/components/panel.scss b/sass/components/panel.scss new file mode 100644 index 00000000..3a33431d --- /dev/null +++ b/sass/components/panel.scss @@ -0,0 +1,166 @@ +@import "../utilities/mixins"; + +$panel-margin: $block-spacing !default; +$panel-item-border: 1px solid $border-light !default; +$panel-radius: $radius-large !default; +$panel-shadow: $shadow !default; + +$panel-heading-background-color: $border-light !default; +$panel-heading-color: $text-strong !default; +$panel-heading-line-height: 1.25 !default; +$panel-heading-padding: 0.75em 1em !default; +$panel-heading-radius: $radius !default; +$panel-heading-size: 1.25em !default; +$panel-heading-weight: $weight-bold !default; + +$panel-tabs-font-size: 0.875em !default; +$panel-tab-border-bottom: 1px solid $border !default; +$panel-tab-active-border-bottom-color: $link-active-border !default; +$panel-tab-active-color: $link-active !default; + +$panel-list-item-color: $text !default; +$panel-list-item-hover-color: $link !default; + +$panel-block-color: $text-strong !default; +$panel-block-hover-background-color: $background !default; +$panel-block-active-border-left-color: $link !default; +$panel-block-active-color: $link-active !default; +$panel-block-active-icon-color: $link !default; + +$panel-icon-color: $text-light !default; +$panel-colors: $colors !default; + +.panel { + border-radius: $panel-radius; + box-shadow: $panel-shadow; + font-size: $size-normal; + + &:not(:last-child) { + margin-bottom: $panel-margin; + } + + // Colors + @each $name, $components in $panel-colors { + $color: nth($components, 1); + $color-invert: nth($components, 2); + + &.is-#{$name} { + .panel-heading { + background-color: $color; + color: $color-invert; + } + + .panel-tabs a.is-active { + border-bottom-color: $color; + } + + .panel-block.is-active .panel-icon { + color: $color; + } + } + } +} + +.panel-tabs, +.panel-block { + &:not(:last-child) { + border-bottom: $panel-item-border; + } +} + +.panel-heading { + background-color: $panel-heading-background-color; + border-radius: $panel-radius $panel-radius 0 0; + color: $panel-heading-color; + font-size: $panel-heading-size; + font-weight: $panel-heading-weight; + line-height: $panel-heading-line-height; + padding: $panel-heading-padding; +} + +.panel-tabs { + align-items: flex-end; + display: flex; + font-size: $panel-tabs-font-size; + justify-content: center; + + a { + border-bottom: $panel-tab-border-bottom; + margin-bottom: -1px; + padding: 0.5em; + + // Modifiers + &.is-active { + border-bottom-color: $panel-tab-active-border-bottom-color; + color: $panel-tab-active-color; + } + } +} + +.panel-list { + a { + color: $panel-list-item-color; + + &:hover { + color: $panel-list-item-hover-color; + } + } +} + +.panel-block { + align-items: center; + color: $panel-block-color; + display: flex; + justify-content: flex-start; + padding: 0.5em 0.75em; + + input[type="checkbox"] { + @include ltr-property("margin", 0.75em); + } + + & > .control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; + } + + &.is-wrapped { + flex-wrap: wrap; + } + + &.is-active { + border-left-color: $panel-block-active-border-left-color; + color: $panel-block-active-color; + + .panel-icon { + color: $panel-block-active-icon-color; + } + } + + &:last-child { + border-bottom-left-radius: $panel-radius; + border-bottom-right-radius: $panel-radius; + } +} + +a.panel-block, +label.panel-block { + cursor: pointer; + + &:hover { + background-color: $panel-block-hover-background-color; + } +} + +.panel-icon { + @include fa(14px, 1em); + + color: $panel-icon-color; + + @include ltr-property("margin", 0.75em); + + .fa { + font-size: inherit; + line-height: inherit; + } +} diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass deleted file mode 100644 index 2cb6a543..00000000 --- a/sass/components/tabs.sass +++ /dev/null @@ -1,176 +0,0 @@ -@import "../utilities/mixins" - -$tabs-border-bottom-color: $border !default -$tabs-border-bottom-style: solid !default -$tabs-border-bottom-width: 1px !default -$tabs-link-color: $text !default -$tabs-link-hover-border-bottom-color: $text-strong !default -$tabs-link-hover-color: $text-strong !default -$tabs-link-active-border-bottom-color: $link !default -$tabs-link-active-color: $link !default -$tabs-link-padding: 0.5em 1em !default - -$tabs-boxed-link-radius: $radius !default -$tabs-boxed-link-hover-background-color: $background !default -$tabs-boxed-link-hover-border-bottom-color: $border !default - -$tabs-boxed-link-active-background-color: $scheme-main !default -$tabs-boxed-link-active-border-color: $border !default -$tabs-boxed-link-active-border-bottom-color: transparent !default - -$tabs-toggle-link-border-color: $border !default -$tabs-toggle-link-border-style: solid !default -$tabs-toggle-link-border-width: 1px !default -$tabs-toggle-link-hover-background-color: $background !default -$tabs-toggle-link-hover-border-color: $border-hover !default -$tabs-toggle-link-radius: $radius !default -$tabs-toggle-link-active-background-color: $link !default -$tabs-toggle-link-active-border-color: $link !default -$tabs-toggle-link-active-color: $link-invert !default - -.tabs - @extend %block - +overflow-touch - @extend %unselectable - align-items: stretch - display: flex - font-size: $size-normal - justify-content: space-between - overflow: hidden - overflow-x: auto - white-space: nowrap - a - align-items: center - border-bottom-color: $tabs-border-bottom-color - border-bottom-style: $tabs-border-bottom-style - border-bottom-width: $tabs-border-bottom-width - color: $tabs-link-color - display: flex - justify-content: center - margin-bottom: -#{$tabs-border-bottom-width} - padding: $tabs-link-padding - vertical-align: top - &:hover - border-bottom-color: $tabs-link-hover-border-bottom-color - color: $tabs-link-hover-color - li - display: block - &.is-active - a - border-bottom-color: $tabs-link-active-border-bottom-color - color: $tabs-link-active-color - ul - align-items: center - border-bottom-color: $tabs-border-bottom-color - border-bottom-style: $tabs-border-bottom-style - border-bottom-width: $tabs-border-bottom-width - display: flex - flex-grow: 1 - flex-shrink: 0 - justify-content: flex-start - &.is-left - padding-right: 0.75em - &.is-center - flex: none - justify-content: center - padding-left: 0.75em - padding-right: 0.75em - &.is-right - justify-content: flex-end - padding-left: 0.75em - .icon - &:first-child - +ltr-property("margin", 0.5em) - &:last-child - +ltr-property("margin", 0.5em, false) - // Alignment - &.is-centered - ul - justify-content: center - &.is-right - ul - justify-content: flex-end - // Styles - &.is-boxed - a - border: 1px solid transparent - +ltr - border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 - +rtl - border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius - &:hover - background-color: $tabs-boxed-link-hover-background-color - border-bottom-color: $tabs-boxed-link-hover-border-bottom-color - li - &.is-active - a - background-color: $tabs-boxed-link-active-background-color - border-color: $tabs-boxed-link-active-border-color - border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important - &.is-fullwidth - li - flex-grow: 1 - flex-shrink: 0 - &.is-toggle - a - border-color: $tabs-toggle-link-border-color - border-style: $tabs-toggle-link-border-style - border-width: $tabs-toggle-link-border-width - margin-bottom: 0 - position: relative - &:hover - background-color: $tabs-toggle-link-hover-background-color - border-color: $tabs-toggle-link-hover-border-color - z-index: 2 - li - & + li - +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false) - &:first-child a - +ltr - border-top-left-radius: $tabs-toggle-link-radius - border-bottom-left-radius: $tabs-toggle-link-radius - +rtl - border-top-right-radius: $tabs-toggle-link-radius - border-bottom-right-radius: $tabs-toggle-link-radius - &:last-child a - +ltr - border-top-right-radius: $tabs-toggle-link-radius - border-bottom-right-radius: $tabs-toggle-link-radius - +rtl - border-top-left-radius: $tabs-toggle-link-radius - border-bottom-left-radius: $tabs-toggle-link-radius - &.is-active - a - background-color: $tabs-toggle-link-active-background-color - border-color: $tabs-toggle-link-active-border-color - color: $tabs-toggle-link-active-color - z-index: 1 - ul - border-bottom: none - &.is-toggle-rounded - li - &:first-child a - +ltr - border-bottom-left-radius: $radius-rounded - border-top-left-radius: $radius-rounded - padding-left: 1.25em - +rtl - border-bottom-right-radius: $radius-rounded - border-top-right-radius: $radius-rounded - padding-right: 1.25em - &:last-child a - +ltr - border-bottom-right-radius: $radius-rounded - border-top-right-radius: $radius-rounded - padding-right: 1.25em - +rtl - border-bottom-left-radius: $radius-rounded - border-top-left-radius: $radius-rounded - padding-left: 1.25em - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large diff --git a/sass/components/tabs.scss b/sass/components/tabs.scss new file mode 100644 index 00000000..441d2fd3 --- /dev/null +++ b/sass/components/tabs.scss @@ -0,0 +1,271 @@ +@import "../utilities/mixins"; + +$tabs-border-bottom-color: $border !default; +$tabs-border-bottom-style: solid !default; +$tabs-border-bottom-width: 1px !default; +$tabs-link-color: $text !default; +$tabs-link-hover-border-bottom-color: $text-strong !default; +$tabs-link-hover-color: $text-strong !default; +$tabs-link-active-border-bottom-color: $link !default; +$tabs-link-active-color: $link !default; +$tabs-link-padding: 0.5em 1em !default; + +$tabs-boxed-link-radius: $radius !default; +$tabs-boxed-link-hover-background-color: $background !default; +$tabs-boxed-link-hover-border-bottom-color: $border !default; + +$tabs-boxed-link-active-background-color: $scheme-main !default; +$tabs-boxed-link-active-border-color: $border !default; +$tabs-boxed-link-active-border-bottom-color: transparent !default; + +$tabs-toggle-link-border-color: $border !default; +$tabs-toggle-link-border-style: solid !default; +$tabs-toggle-link-border-width: 1px !default; +$tabs-toggle-link-hover-background-color: $background !default; +$tabs-toggle-link-hover-border-color: $border-hover !default; +$tabs-toggle-link-radius: $radius !default; +$tabs-toggle-link-active-background-color: $link !default; +$tabs-toggle-link-active-border-color: $link !default; +$tabs-toggle-link-active-color: $link-invert !default; + +.tabs { + @extend %block; + + @include overflow-touch; + + @extend %unselectable; + + align-items: stretch; + display: flex; + font-size: $size-normal; + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; + + a { + align-items: center; + border-bottom-color: $tabs-border-bottom-color; + border-bottom-style: $tabs-border-bottom-style; + border-bottom-width: $tabs-border-bottom-width; + color: $tabs-link-color; + display: flex; + justify-content: center; + margin-bottom: -#{$tabs-border-bottom-width}; + padding: $tabs-link-padding; + vertical-align: top; + + &:hover { + border-bottom-color: $tabs-link-hover-border-bottom-color; + color: $tabs-link-hover-color; + } + } + + li { + display: block; + + &.is-active { + a { + border-bottom-color: $tabs-link-active-border-bottom-color; + color: $tabs-link-active-color; + } + } + } + + ul { + align-items: center; + border-bottom-color: $tabs-border-bottom-color; + border-bottom-style: $tabs-border-bottom-style; + border-bottom-width: $tabs-border-bottom-width; + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; + + &.is-left { + padding-right: 0.75em; + } + + &.is-center { + flex: none; + justify-content: center; + padding-left: 0.75em; + padding-right: 0.75em; + } + + &.is-right { + justify-content: flex-end; + padding-left: 0.75em; + } + } + + .icon { + &:first-child { + @include ltr-property("margin", 0.5em); + } + + &:last-child { + @include ltr-property("margin", 0.5em, false); + } + } + + // Alignment + &.is-centered { + ul { + justify-content: center; + } + } + + &.is-right { + ul { + justify-content: flex-end; + } + } + + // Styles + &.is-boxed { + a { + border: 1px solid transparent; + + @include ltr { + border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0; + } + + + @include rtl { + border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius; + } + + + &:hover { + background-color: $tabs-boxed-link-hover-background-color; + border-bottom-color: $tabs-boxed-link-hover-border-bottom-color; + } + } + + li { + &.is-active { + a { + background-color: $tabs-boxed-link-active-background-color; + border-color: $tabs-boxed-link-active-border-color; + border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important; + } + } + } + } + + &.is-fullwidth { + li { + flex-grow: 1; + flex-shrink: 0; + } + } + + &.is-toggle { + a { + border-color: $tabs-toggle-link-border-color; + border-style: $tabs-toggle-link-border-style; + border-width: $tabs-toggle-link-border-width; + margin-bottom: 0; + position: relative; + + &:hover { + background-color: $tabs-toggle-link-hover-background-color; + border-color: $tabs-toggle-link-hover-border-color; + z-index: 2; + } + } + + li { + & + li { + @include ltr-property("margin", -#{$tabs-toggle-link-border-width}, false); + } + + &:first-child a { + @include ltr { + border-top-left-radius: $tabs-toggle-link-radius; + border-bottom-left-radius: $tabs-toggle-link-radius; + } + + + @include rtl { + border-top-right-radius: $tabs-toggle-link-radius; + border-bottom-right-radius: $tabs-toggle-link-radius; + } + } + + &:last-child a { + @include ltr { + border-top-right-radius: $tabs-toggle-link-radius; + border-bottom-right-radius: $tabs-toggle-link-radius; + } + + + @include rtl { + border-top-left-radius: $tabs-toggle-link-radius; + border-bottom-left-radius: $tabs-toggle-link-radius; + } + } + + &.is-active { + a { + background-color: $tabs-toggle-link-active-background-color; + border-color: $tabs-toggle-link-active-border-color; + color: $tabs-toggle-link-active-color; + z-index: 1; + } + } + } + + ul { + border-bottom: none; + } + + &.is-toggle-rounded { + li { + &:first-child a { + @include ltr { + border-bottom-left-radius: $radius-rounded; + border-top-left-radius: $radius-rounded; + padding-left: 1.25em; + } + + + @include rtl { + border-bottom-right-radius: $radius-rounded; + border-top-right-radius: $radius-rounded; + padding-right: 1.25em; + } + } + + &:last-child a { + @include ltr { + border-bottom-right-radius: $radius-rounded; + border-top-right-radius: $radius-rounded; + padding-right: 1.25em; + } + + + @include rtl { + border-bottom-left-radius: $radius-rounded; + border-top-left-radius: $radius-rounded; + padding-left: 1.25em; + } + } + } + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} diff --git a/sass/elements/_all.sass b/sass/elements/_all.sass deleted file mode 100644 index 511047aa..00000000 --- a/sass/elements/_all.sass +++ /dev/null @@ -1,16 +0,0 @@ -/* Bulma Elements */ -@charset "utf-8" - -@import "box" -@import "button" -@import "container" -@import "content" -@import "icon" -@import "image" -@import "notification" -@import "progress" -@import "table" -@import "tag" -@import "title" - -@import "other" diff --git a/sass/elements/_all.scss b/sass/elements/_all.scss new file mode 100644 index 00000000..83893d23 --- /dev/null +++ b/sass/elements/_all.scss @@ -0,0 +1,16 @@ +/* Bulma Elements */ +@charset "utf-8"; + +@import "box"; +@import "button"; +@import "container"; +@import "content"; +@import "icon"; +@import "image"; +@import "notification"; +@import "progress"; +@import "table"; +@import "tag"; +@import "title"; + +@import "other"; diff --git a/sass/elements/box.sass b/sass/elements/box.sass deleted file mode 100644 index 85524301..00000000 --- a/sass/elements/box.sass +++ /dev/null @@ -1,26 +0,0 @@ -@import "../utilities/mixins" - -$box-color: $text !default -$box-background-color: $scheme-main !default -$box-radius: $radius-large !default -$box-shadow: $shadow !default -$box-padding: 1.25rem !default - -$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default -$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default - -.box - @extend %block - background-color: $box-background-color - border-radius: $box-radius - box-shadow: $box-shadow - color: $box-color - display: block - padding: $box-padding - -a.box - &:hover, - &:focus - box-shadow: $box-link-hover-shadow - &:active - box-shadow: $box-link-active-shadow diff --git a/sass/elements/box.scss b/sass/elements/box.scss new file mode 100644 index 00000000..b2fe1b09 --- /dev/null +++ b/sass/elements/box.scss @@ -0,0 +1,32 @@ +@import "../utilities/mixins"; + +$box-color: $text !default; +$box-background-color: $scheme-main !default; +$box-radius: $radius-large !default; +$box-shadow: $shadow !default; +$box-padding: 1.25rem !default; + +$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default; +$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default; + +.box { + @extend %block; + + background-color: $box-background-color; + border-radius: $box-radius; + box-shadow: $box-shadow; + color: $box-color; + display: block; + padding: $box-padding; +} + +a.box { + &:hover, + &:focus { + box-shadow: $box-link-hover-shadow; + } + + &:active { + box-shadow: $box-link-active-shadow; + } +} diff --git a/sass/elements/button.sass b/sass/elements/button.sass deleted file mode 100644 index 63080640..00000000 --- a/sass/elements/button.sass +++ /dev/null @@ -1,357 +0,0 @@ -@import "../utilities/controls" -@import "../utilities/mixins" - -$button-color: $text-strong !default -$button-background-color: $scheme-main !default -$button-family: false !default - -$button-border-color: $border !default -$button-border-width: $control-border-width !default - -$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default -$button-padding-horizontal: 1em !default - -$button-hover-color: $link-hover !default -$button-hover-border-color: $link-hover-border !default - -$button-focus-color: $link-focus !default -$button-focus-border-color: $link-focus-border !default -$button-focus-box-shadow-size: 0 0 0 0.125em !default -$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default - -$button-active-color: $link-active !default -$button-active-border-color: $link-active-border !default - -$button-text-color: $text !default -$button-text-decoration: underline !default -$button-text-hover-background-color: $background !default -$button-text-hover-color: $text-strong !default - -$button-ghost-background: none !default -$button-ghost-border-color: transparent !default -$button-ghost-color: $link !default -$button-ghost-decoration: none !default -$button-ghost-hover-color: $link !default -$button-ghost-hover-decoration: underline !default - -$button-disabled-background-color: $scheme-main !default -$button-disabled-border-color: $border !default -$button-disabled-shadow: none !default -$button-disabled-opacity: 0.5 !default - -$button-static-color: $text-light !default -$button-static-background-color: $scheme-main-ter !default -$button-static-border-color: $border !default - -$button-colors: $colors !default -$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default - -// The button sizes use mixins so they can be used at different breakpoints -=button-small - &:not(.is-rounded) - border-radius: $radius-small - font-size: $size-small -=button-normal - font-size: $size-normal -=button-medium - font-size: $size-medium -=button-large - font-size: $size-large - -.button - @extend %control - @extend %unselectable - background-color: $button-background-color - border-color: $button-border-color - border-width: $button-border-width - color: $button-color - cursor: pointer - @if $button-family - font-family: $button-family - justify-content: center - padding-bottom: $button-padding-vertical - padding-left: $button-padding-horizontal - padding-right: $button-padding-horizontal - padding-top: $button-padding-vertical - text-align: center - white-space: nowrap - strong - color: inherit - .icon - &, - &.is-small, - &.is-medium, - &.is-large - height: 1.5em - width: 1.5em - &:first-child:not(:last-child) - +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false) - +ltr-property("margin", $button-padding-horizontal * 0.25) - &:last-child:not(:first-child) - +ltr-property("margin", $button-padding-horizontal * 0.25, false) - +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})) - &:first-child:last-child - margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}) - margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}) - // States - &:hover, - &.is-hovered - border-color: $button-hover-border-color - color: $button-hover-color - &:focus, - &.is-focused - border-color: $button-focus-border-color - color: $button-focus-color - &:not(:active) - box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color - &:active, - &.is-active - border-color: $button-active-border-color - color: $button-active-color - // Colors - &.is-text - background-color: transparent - border-color: transparent - color: $button-text-color - text-decoration: $button-text-decoration - &:hover, - &.is-hovered, - &:focus, - &.is-focused - background-color: $button-text-hover-background-color - color: $button-text-hover-color - &:active, - &.is-active - background-color: bulmaDarken($button-text-hover-background-color, 5%) - color: $button-text-hover-color - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: transparent - box-shadow: none - &.is-ghost - background: $button-ghost-background - border-color: $button-ghost-border-color - color: $button-ghost-color - text-decoration: $button-ghost-decoration - &:hover, - &.is-hovered - color: $button-ghost-hover-color - text-decoration: $button-ghost-hover-decoration - @each $name, $pair in $button-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - border-color: transparent - color: $color-invert - &:hover, - &.is-hovered - background-color: bulmaDarken($color, 2.5%) - border-color: transparent - color: $color-invert - &:focus, - &.is-focused - border-color: transparent - color: $color-invert - &:not(:active) - box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25) - &:active, - &.is-active - background-color: bulmaDarken($color, 5%) - border-color: transparent - color: $color-invert - &[disabled], - fieldset[disabled] & - background-color: $color - border-color: $color - box-shadow: none - &.is-inverted - background-color: $color-invert - color: $color - &:hover, - &.is-hovered - background-color: bulmaDarken($color-invert, 5%) - &[disabled], - fieldset[disabled] & - background-color: $color-invert - border-color: transparent - box-shadow: none - color: $color - &.is-loading - &::after - border-color: transparent transparent $color-invert $color-invert !important - &.is-outlined - background-color: transparent - border-color: $color - color: $color - &:hover, - &.is-hovered, - &:focus, - &.is-focused - background-color: $color - border-color: $color - color: $color-invert - &.is-loading - &::after - border-color: transparent transparent $color $color !important - &:hover, - &.is-hovered, - &:focus, - &.is-focused - &::after - border-color: transparent transparent $color-invert $color-invert !important - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: $color - box-shadow: none - color: $color - &.is-inverted.is-outlined - background-color: transparent - border-color: $color-invert - color: $color-invert - &:hover, - &.is-hovered, - &:focus, - &.is-focused - background-color: $color-invert - color: $color - &.is-loading - &:hover, - &.is-hovered, - &:focus, - &.is-focused - &::after - border-color: transparent transparent $color $color !important - &[disabled], - fieldset[disabled] & - background-color: transparent - border-color: $color-invert - box-shadow: none - color: $color-invert - // If light and dark colors are provided - @if length($pair) >= 4 - $color-light: nth($pair, 3) - $color-dark: nth($pair, 4) - &.is-light - background-color: $color-light - color: $color-dark - &:hover, - &.is-hovered - background-color: bulmaDarken($color-light, 2.5%) - border-color: transparent - color: $color-dark - &:active, - &.is-active - background-color: bulmaDarken($color-light, 5%) - border-color: transparent - color: $color-dark - // Sizes - &.is-small - +button-small - &.is-normal - +button-normal - &.is-medium - +button-medium - &.is-large - +button-large - // Modifiers - &[disabled], - fieldset[disabled] & - background-color: $button-disabled-background-color - border-color: $button-disabled-border-color - box-shadow: $button-disabled-shadow - opacity: $button-disabled-opacity - &.is-fullwidth - display: flex - width: 100% - &.is-loading - color: transparent !important - pointer-events: none - &::after - @extend %loader - +center(1em) - position: absolute !important - &.is-static - background-color: $button-static-background-color - border-color: $button-static-border-color - color: $button-static-color - box-shadow: none - pointer-events: none - &.is-rounded - border-radius: $radius-rounded - padding-left: calc(#{$button-padding-horizontal} + 0.25em) - padding-right: calc(#{$button-padding-horizontal} + 0.25em) - -.buttons - align-items: center - display: flex - flex-wrap: wrap - justify-content: flex-start - .button - margin-bottom: 0.5rem - &:not(:last-child):not(.is-fullwidth) - +ltr-property("margin", 0.5rem) - &:last-child - margin-bottom: -0.5rem - &:not(:last-child) - margin-bottom: 1rem - // Sizes - &.are-small - .button:not(.is-normal):not(.is-medium):not(.is-large) - +button-small - &.are-medium - .button:not(.is-small):not(.is-normal):not(.is-large) - +button-medium - &.are-large - .button:not(.is-small):not(.is-normal):not(.is-medium) - +button-large - &.has-addons - .button - &:not(:first-child) - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &:not(:last-child) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - +ltr-property("margin", -1px) - &:last-child - +ltr-property("margin", 0) - &:hover, - &.is-hovered - z-index: 2 - &:focus, - &.is-focused, - &:active, - &.is-active, - &.is-selected - z-index: 3 - &:hover - z-index: 4 - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-centered - justify-content: center - &:not(.has-addons) - .button:not(.is-fullwidth) - margin-left: 0.25rem - margin-right: 0.25rem - &.is-right - justify-content: flex-end - &:not(.has-addons) - .button:not(.is-fullwidth) - margin-left: 0.25rem - margin-right: 0.25rem - -@each $bp-name, $bp-sizes in $button-responsive-sizes - +breakpoint($bp-name) - @each $size, $value in $bp-sizes - @if $size != "normal" - .button.is-responsive.is-#{$size} - font-size: $value - @else - .button.is-responsive, - .button.is-responsive.is-normal - font-size: $value diff --git a/sass/elements/button.scss b/sass/elements/button.scss new file mode 100644 index 00000000..c4bd3bae --- /dev/null +++ b/sass/elements/button.scss @@ -0,0 +1,530 @@ +@import "../utilities/controls"; +@import "../utilities/mixins"; + +$button-color: $text-strong !default; +$button-background-color: $scheme-main !default; +$button-family: false !default; + +$button-border-color: $border !default; +$button-border-width: $control-border-width !default; + +$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default; +$button-padding-horizontal: 1em !default; + +$button-hover-color: $link-hover !default; +$button-hover-border-color: $link-hover-border !default; + +$button-focus-color: $link-focus !default; +$button-focus-border-color: $link-focus-border !default; +$button-focus-box-shadow-size: 0 0 0 0.125em !default; +$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default; + +$button-active-color: $link-active !default; +$button-active-border-color: $link-active-border !default; + +$button-text-color: $text !default; +$button-text-decoration: underline !default; +$button-text-hover-background-color: $background !default; +$button-text-hover-color: $text-strong !default; + +$button-ghost-background: none !default; +$button-ghost-border-color: transparent !default; +$button-ghost-color: $link !default; +$button-ghost-decoration: none !default; +$button-ghost-hover-color: $link !default; +$button-ghost-hover-decoration: underline !default; + +$button-disabled-background-color: $scheme-main !default; +$button-disabled-border-color: $border !default; +$button-disabled-shadow: none !default; +$button-disabled-opacity: 0.5 !default; + +$button-static-color: $text-light !default; +$button-static-background-color: $scheme-main-ter !default; +$button-static-border-color: $border !default; + +$button-colors: $colors !default; +$button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $size-small * 0.875, "medium": $size-small, "large": $size-normal), "tablet-only": ("small": $size-small * 0.875, "normal": $size-small, "medium": $size-normal, "large": $size-medium)) !default; + +// The button sizes use mixins so they can be used at different breakpoints +@mixin button-small { + &:not(.is-rounded) { + border-radius: $radius-small; + } + + font-size: $size-small; +} + +@mixin button-normal { + font-size: $size-normal; +} + +@mixin button-medium { + font-size: $size-medium; +} + +@mixin button-large { + font-size: $size-large; +} + +.button { + @extend %control; + + @extend %unselectable; + + background-color: $button-background-color; + border-color: $button-border-color; + border-width: $button-border-width; + color: $button-color; + cursor: pointer; + + @if $button-family { + font-family: $button-family; + } + + justify-content: center; + padding-bottom: $button-padding-vertical; + padding-left: $button-padding-horizontal; + padding-right: $button-padding-horizontal; + padding-top: $button-padding-vertical; + text-align: center; + white-space: nowrap; + + strong { + color: inherit; + } + + .icon { + &, + &.is-small, + &.is-medium, + &.is-large { + height: 1.5em; + width: 1.5em; + } + + &:first-child:not(:last-child) { + @include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false); + @include ltr-property("margin", $button-padding-horizontal * 0.25); + } + + &:last-child:not(:first-child) { + @include ltr-property("margin", $button-padding-horizontal * 0.25, false); + @include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})); + } + + &:first-child:last-child { + margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}); + margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}); + } + } + + // States + &:hover, + &.is-hovered { + border-color: $button-hover-border-color; + color: $button-hover-color; + } + + &:focus, + &.is-focused { + border-color: $button-focus-border-color; + color: $button-focus-color; + + &:not(:active) { + box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; + } + } + + &:active, + &.is-active { + border-color: $button-active-border-color; + color: $button-active-color; + } + + // Colors + &.is-text { + background-color: transparent; + border-color: transparent; + color: $button-text-color; + text-decoration: $button-text-decoration; + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + background-color: $button-text-hover-background-color; + color: $button-text-hover-color; + } + + &:active, + &.is-active { + background-color: bulmaDarken($button-text-hover-background-color, 5%); + color: $button-text-hover-color; + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + + &.is-ghost { + background: $button-ghost-background; + border-color: $button-ghost-border-color; + color: $button-ghost-color; + text-decoration: $button-ghost-decoration; + + &:hover, + &.is-hovered { + color: $button-ghost-hover-color; + text-decoration: $button-ghost-hover-decoration; + } + } + + @each $name, $pair in $button-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + border-color: transparent; + color: $color-invert; + + &:hover, + &.is-hovered { + background-color: bulmaDarken($color, 2.5%); + border-color: transparent; + color: $color-invert; + } + + &:focus, + &.is-focused { + border-color: transparent; + color: $color-invert; + + &:not(:active) { + box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25); + } + } + + &:active, + &.is-active { + background-color: bulmaDarken($color, 5%); + border-color: transparent; + color: $color-invert; + } + + &[disabled], + fieldset[disabled] & { + background-color: $color; + border-color: $color; + box-shadow: none; + } + + &.is-inverted { + background-color: $color-invert; + color: $color; + + &:hover, + &.is-hovered { + background-color: bulmaDarken($color-invert, 5%); + } + + &[disabled], + fieldset[disabled] & { + background-color: $color-invert; + border-color: transparent; + box-shadow: none; + color: $color; + } + } + + &.is-loading { + &::after { + border-color: transparent transparent $color-invert $color-invert !important; + } + } + + &.is-outlined { + background-color: transparent; + border-color: $color; + color: $color; + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + background-color: $color; + border-color: $color; + color: $color-invert; + } + + &.is-loading { + &::after { + border-color: transparent transparent $color $color !important; + } + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + &::after { + border-color: transparent transparent $color-invert $color-invert !important; + } + } + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: $color; + box-shadow: none; + color: $color; + } + } + + &.is-inverted.is-outlined { + background-color: transparent; + border-color: $color-invert; + color: $color-invert; + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + background-color: $color-invert; + color: $color; + } + + &.is-loading { + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + &::after { + border-color: transparent transparent $color $color !important; + } + } + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: $color-invert; + box-shadow: none; + color: $color-invert; + } + } + + // If light and dark colors are provided + @if length($pair) >= 4 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + &.is-light { + background-color: $color-light; + color: $color-dark; + + &:hover, + &.is-hovered { + background-color: bulmaDarken($color-light, 2.5%); + border-color: transparent; + color: $color-dark; + } + + &:active, + &.is-active { + background-color: bulmaDarken($color-light, 5%); + border-color: transparent; + color: $color-dark; + } + } + } + } + } + + // Sizes + &.is-small { + @include button-small; + } + + &.is-normal { + @include button-normal; + } + + &.is-medium { + @include button-medium; + } + + &.is-large { + @include button-large; + } + + // Modifiers + &[disabled], + fieldset[disabled] & { + background-color: $button-disabled-background-color; + border-color: $button-disabled-border-color; + box-shadow: $button-disabled-shadow; + opacity: $button-disabled-opacity; + } + + &.is-fullwidth { + display: flex; + width: 100%; + } + + &.is-loading { + color: transparent !important; + pointer-events: none; + + &::after { + @extend %loader; + + @include center(1em); + + position: absolute !important; + } + } + + &.is-static { + background-color: $button-static-background-color; + border-color: $button-static-border-color; + color: $button-static-color; + box-shadow: none; + pointer-events: none; + } + + &.is-rounded { + border-radius: $radius-rounded; + padding-left: calc(#{$button-padding-horizontal} + 0.25em); + padding-right: calc(#{$button-padding-horizontal} + 0.25em); + } +} + +.buttons { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .button { + margin-bottom: 0.5rem; + + &:not(:last-child):not(.is-fullwidth) { + @include ltr-property("margin", 0.5rem); + } + } + + &:last-child { + margin-bottom: -0.5rem; + } + + &:not(:last-child) { + margin-bottom: 1rem; + } + + // Sizes + &.are-small { + .button:not(.is-normal):not(.is-medium):not(.is-large) { + @include button-small; + } + } + + &.are-medium { + .button:not(.is-small):not(.is-normal):not(.is-large) { + @include button-medium; + } + } + + &.are-large { + .button:not(.is-small):not(.is-normal):not(.is-medium) { + @include button-large; + } + } + + &.has-addons { + .button { + &:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + + @include ltr-property("margin", -1px); + } + + &:last-child { + @include ltr-property("margin", 0); + } + + &:hover, + &.is-hovered { + z-index: 2; + } + + &:focus, + &.is-focused, + &:active, + &.is-active, + &.is-selected { + z-index: 3; + + &:hover { + z-index: 4; + } + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + } + + &.is-centered { + justify-content: center; + + &:not(.has-addons) { + .button:not(.is-fullwidth) { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + } + } + + &.is-right { + justify-content: flex-end; + + &:not(.has-addons) { + .button:not(.is-fullwidth) { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + } + } +} + +@each $bp-name, $bp-sizes in $button-responsive-sizes { + @include breakpoint($bp-name) { + @each $size, $value in $bp-sizes { + @if $size != "normal" { + .button.is-responsive.is-#{$size} { + font-size: $value; + } + } + @else { + .button.is-responsive, + .button.is-responsive.is-normal { + font-size: $value; + } + } + } + } +} diff --git a/sass/elements/container.sass b/sass/elements/container.sass deleted file mode 100644 index c13011e3..00000000 --- a/sass/elements/container.sass +++ /dev/null @@ -1,29 +0,0 @@ -@import "../utilities/mixins" - -$container-offset: (2 * $gap) !default -$container-max-width: $fullhd !default - -.container - flex-grow: 1 - margin: 0 auto - position: relative - width: auto - &.is-fluid - max-width: none !important - padding-left: $gap - padding-right: $gap - width: 100% - +desktop - max-width: $desktop - $container-offset - +until-widescreen - &.is-widescreen:not(.is-max-desktop) - max-width: min($widescreen, $container-max-width) - $container-offset - +until-fullhd - &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) - max-width: min($fullhd, $container-max-width) - $container-offset - +widescreen - &:not(.is-max-desktop) - max-width: min($widescreen, $container-max-width) - $container-offset - +fullhd - &:not(.is-max-desktop):not(.is-max-widescreen) - max-width: min($fullhd, $container-max-width) - $container-offset diff --git a/sass/elements/container.scss b/sass/elements/container.scss new file mode 100644 index 00000000..65ca1bd2 --- /dev/null +++ b/sass/elements/container.scss @@ -0,0 +1,50 @@ +@import "../utilities/mixins"; + +$container-offset: 2 * $gap !default; +$container-max-width: $fullhd !default; + +.container { + flex-grow: 1; + margin: 0 auto; + position: relative; + width: auto; + + &.is-fluid { + max-width: none !important; + padding-left: $gap; + padding-right: $gap; + width: 100%; + } + + @include desktop { + max-width: $desktop - $container-offset; + } + + + @include until-widescreen { + &.is-widescreen:not(.is-max-desktop) { + max-width: min($widescreen, $container-max-width) - $container-offset; + } + } + + + @include until-fullhd { + &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) { + max-width: min($fullhd, $container-max-width) - $container-offset; + } + } + + + @include widescreen { + &:not(.is-max-desktop) { + max-width: min($widescreen, $container-max-width) - $container-offset; + } + } + + + @include fullhd { + &:not(.is-max-desktop):not(.is-max-widescreen) { + max-width: min($fullhd, $container-max-width) - $container-offset; + } + } +} diff --git a/sass/elements/content.sass b/sass/elements/content.sass deleted file mode 100644 index 3f709ad7..00000000 --- a/sass/elements/content.sass +++ /dev/null @@ -1,162 +0,0 @@ -@import "../utilities/mixins" - -$content-heading-color: $text-strong !default -$content-heading-weight: $weight-semibold !default -$content-heading-line-height: 1.125 !default - -$content-block-margin-bottom: 1em !default - -$content-blockquote-background-color: $background !default -$content-blockquote-border-left: 5px solid $border !default -$content-blockquote-padding: 1.25em 1.5em !default - -$content-pre-padding: 1.25em 1.5em !default - -$content-table-cell-border: 1px solid $border !default -$content-table-cell-border-width: 0 0 1px !default -$content-table-cell-padding: 0.5em 0.75em !default -$content-table-cell-heading-color: $text-strong !default -$content-table-head-cell-border-width: 0 0 2px !default -$content-table-head-cell-color: $text-strong !default -$content-table-body-last-row-cell-border-bottom-width: 0 !default -$content-table-foot-cell-border-width: 2px 0 0 !default -$content-table-foot-cell-color: $text-strong !default - -.content - @extend %block - // Inline - li + li - margin-top: 0.25em - // Block - p, - dl, - ol, - ul, - blockquote, - pre, - table - &:not(:last-child) - margin-bottom: $content-block-margin-bottom - h1, - h2, - h3, - h4, - h5, - h6 - color: $content-heading-color - font-weight: $content-heading-weight - line-height: $content-heading-line-height - h1 - font-size: 2em - margin-bottom: 0.5em - &:not(:first-child) - margin-top: 1em - h2 - font-size: 1.75em - margin-bottom: 0.5714em - &:not(:first-child) - margin-top: 1.1428em - h3 - font-size: 1.5em - margin-bottom: 0.6666em - &:not(:first-child) - margin-top: 1.3333em - h4 - font-size: 1.25em - margin-bottom: 0.8em - h5 - font-size: 1.125em - margin-bottom: 0.8888em - h6 - font-size: 1em - margin-bottom: 1em - blockquote - background-color: $content-blockquote-background-color - +ltr-property("border", $content-blockquote-border-left, false) - padding: $content-blockquote-padding - ol - list-style-position: outside - +ltr-property("margin", 2em, false) - margin-top: 1em - &:not([type]) - list-style-type: decimal - &.is-lower-alpha - list-style-type: lower-alpha - &.is-lower-roman - list-style-type: lower-roman - &.is-upper-alpha - list-style-type: upper-alpha - &.is-upper-roman - list-style-type: upper-roman - ul - list-style: disc outside - +ltr-property("margin", 2em, false) - margin-top: 1em - ul - list-style-type: circle - margin-top: 0.5em - ul - list-style-type: square - dd - +ltr-property("margin", 2em, false) - figure - margin-left: 2em - margin-right: 2em - text-align: center - &:not(:first-child) - margin-top: 2em - &:not(:last-child) - margin-bottom: 2em - img - display: inline-block - figcaption - font-style: italic - pre - +overflow-touch - overflow-x: auto - padding: $content-pre-padding - white-space: pre - word-wrap: normal - sup, - sub - font-size: 75% - table - width: 100% - td, - th - border: $content-table-cell-border - border-width: $content-table-cell-border-width - padding: $content-table-cell-padding - vertical-align: top - th - color: $content-table-cell-heading-color - &:not([align]) - text-align: inherit - thead - td, - th - border-width: $content-table-head-cell-border-width - color: $content-table-head-cell-color - tfoot - td, - th - border-width: $content-table-foot-cell-border-width - color: $content-table-foot-cell-color - tbody - tr - &:last-child - td, - th - border-bottom-width: $content-table-body-last-row-cell-border-bottom-width - .tabs - li + li - margin-top: 0 - // Sizes - &.is-small - font-size: $size-small - &.is-normal - font-size: $size-normal - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large diff --git a/sass/elements/content.scss b/sass/elements/content.scss new file mode 100644 index 00000000..6cb610cb --- /dev/null +++ b/sass/elements/content.scss @@ -0,0 +1,261 @@ +@import "../utilities/mixins"; + +$content-heading-color: $text-strong !default; +$content-heading-weight: $weight-semibold !default; +$content-heading-line-height: 1.125 !default; + +$content-block-margin-bottom: 1em !default; + +$content-blockquote-background-color: $background !default; +$content-blockquote-border-left: 5px solid $border !default; +$content-blockquote-padding: 1.25em 1.5em !default; + +$content-pre-padding: 1.25em 1.5em !default; + +$content-table-cell-border: 1px solid $border !default; +$content-table-cell-border-width: 0 0 1px !default; +$content-table-cell-padding: 0.5em 0.75em !default; +$content-table-cell-heading-color: $text-strong !default; +$content-table-head-cell-border-width: 0 0 2px !default; +$content-table-head-cell-color: $text-strong !default; +$content-table-body-last-row-cell-border-bottom-width: 0 !default; +$content-table-foot-cell-border-width: 2px 0 0 !default; +$content-table-foot-cell-color: $text-strong !default; + +.content { + @extend %block; + + // Inline + li + li { + margin-top: 0.25em; + } + + // Block + p, + dl, + ol, + ul, + blockquote, + pre, + table { + &:not(:last-child) { + margin-bottom: $content-block-margin-bottom; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $content-heading-color; + font-weight: $content-heading-weight; + line-height: $content-heading-line-height; + } + + h1 { + font-size: 2em; + margin-bottom: 0.5em; + + &:not(:first-child) { + margin-top: 1em; + } + } + + h2 { + font-size: 1.75em; + margin-bottom: 0.5714em; + + &:not(:first-child) { + margin-top: 1.1428em; + } + } + + h3 { + font-size: 1.5em; + margin-bottom: 0.6666em; + + &:not(:first-child) { + margin-top: 1.3333em; + } + } + + h4 { + font-size: 1.25em; + margin-bottom: 0.8em; + } + + h5 { + font-size: 1.125em; + margin-bottom: 0.8888em; + } + + h6 { + font-size: 1em; + margin-bottom: 1em; + } + + blockquote { + background-color: $content-blockquote-background-color; + + @include ltr-property("border", $content-blockquote-border-left, false); + + padding: $content-blockquote-padding; + } + + ol { + list-style-position: outside; + + @include ltr-property("margin", 2em, false); + + margin-top: 1em; + + &:not([type]) { + list-style-type: decimal; + + &.is-lower-alpha { + list-style-type: lower-alpha; + } + + &.is-lower-roman { + list-style-type: lower-roman; + } + + &.is-upper-alpha { + list-style-type: upper-alpha; + } + + &.is-upper-roman { + list-style-type: upper-roman; + } + } + } + + ul { + list-style: disc outside; + + @include ltr-property("margin", 2em, false); + + margin-top: 1em; + + ul { + list-style-type: circle; + margin-top: 0.5em; + + ul { + list-style-type: square; + } + } + } + + dd { + @include ltr-property("margin", 2em, false); + } + + figure { + margin-left: 2em; + margin-right: 2em; + text-align: center; + + &:not(:first-child) { + margin-top: 2em; + } + + &:not(:last-child) { + margin-bottom: 2em; + } + + img { + display: inline-block; + } + + figcaption { + font-style: italic; + } + } + + pre { + @include overflow-touch; + + overflow-x: auto; + padding: $content-pre-padding; + white-space: pre; + word-wrap: normal; + } + + sup, + sub { + font-size: 75%; + } + + table { + width: 100%; + + td, + th { + border: $content-table-cell-border; + border-width: $content-table-cell-border-width; + padding: $content-table-cell-padding; + vertical-align: top; + } + + th { + color: $content-table-cell-heading-color; + + &:not([align]) { + text-align: inherit; + } + } + + thead { + td, + th { + border-width: $content-table-head-cell-border-width; + color: $content-table-head-cell-color; + } + } + + tfoot { + td, + th { + border-width: $content-table-foot-cell-border-width; + color: $content-table-foot-cell-color; + } + } + + tbody { + tr { + &:last-child { + td, + th { + border-bottom-width: $content-table-body-last-row-cell-border-bottom-width; + } + } + } + } + } + + .tabs { + li + li { + margin-top: 0; + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-normal { + font-size: $size-normal; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} diff --git a/sass/elements/form.sass b/sass/elements/form.sass deleted file mode 100644 index 3122dc4c..00000000 --- a/sass/elements/form.sass +++ /dev/null @@ -1 +0,0 @@ -@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." diff --git a/sass/elements/form.scss b/sass/elements/form.scss new file mode 100644 index 00000000..03842a45 --- /dev/null +++ b/sass/elements/form.scss @@ -0,0 +1 @@ +@warn "The form.scss file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."; diff --git a/sass/elements/icon.sass b/sass/elements/icon.sass deleted file mode 100644 index 0befe2b1..00000000 --- a/sass/elements/icon.sass +++ /dev/null @@ -1,46 +0,0 @@ -$icon-dimensions: 1.5rem !default -$icon-dimensions-small: 1rem !default -$icon-dimensions-medium: 2rem !default -$icon-dimensions-large: 3rem !default -$icon-text-spacing: 0.25em !default - -.icon - align-items: center - display: inline-flex - justify-content: center - height: $icon-dimensions - width: $icon-dimensions - // Sizes - &.is-small - height: $icon-dimensions-small - width: $icon-dimensions-small - &.is-medium - height: $icon-dimensions-medium - width: $icon-dimensions-medium - &.is-large - height: $icon-dimensions-large - width: $icon-dimensions-large - -.icon-text - align-items: flex-start - color: inherit - display: inline-flex - flex-wrap: wrap - line-height: $icon-dimensions - vertical-align: top - .icon - flex-grow: 0 - flex-shrink: 0 - &:not(:last-child) - +ltr - margin-right: $icon-text-spacing - +rtl - margin-left: $icon-text-spacing - &:not(:first-child) - +ltr - margin-left: $icon-text-spacing - +rtl - margin-right: $icon-text-spacing - -div.icon-text - display: flex diff --git a/sass/elements/icon.scss b/sass/elements/icon.scss new file mode 100644 index 00000000..bcdccc53 --- /dev/null +++ b/sass/elements/icon.scss @@ -0,0 +1,69 @@ +$icon-dimensions: 1.5rem !default; +$icon-dimensions-small: 1rem !default; +$icon-dimensions-medium: 2rem !default; +$icon-dimensions-large: 3rem !default; +$icon-text-spacing: 0.25em !default; + +.icon { + align-items: center; + display: inline-flex; + justify-content: center; + height: $icon-dimensions; + width: $icon-dimensions; + + // Sizes + &.is-small { + height: $icon-dimensions-small; + width: $icon-dimensions-small; + } + + &.is-medium { + height: $icon-dimensions-medium; + width: $icon-dimensions-medium; + } + + &.is-large { + height: $icon-dimensions-large; + width: $icon-dimensions-large; + } +} + +.icon-text { + align-items: flex-start; + color: inherit; + display: inline-flex; + flex-wrap: wrap; + line-height: $icon-dimensions; + vertical-align: top; + + .icon { + flex-grow: 0; + flex-shrink: 0; + + &:not(:last-child) { + @include ltr { + margin-right: $icon-text-spacing; + } + + + @include rtl { + margin-left: $icon-text-spacing; + } + } + + &:not(:first-child) { + @include ltr { + margin-left: $icon-text-spacing; + } + + + @include rtl { + margin-right: $icon-text-spacing; + } + } + } +} + +div.icon-text { + display: flex; +} diff --git a/sass/elements/image.sass b/sass/elements/image.sass deleted file mode 100644 index fc46541f..00000000 --- a/sass/elements/image.sass +++ /dev/null @@ -1,73 +0,0 @@ -@import "../utilities/mixins" - -$dimensions: 16 24 32 48 64 96 128 !default - -.image - display: block - position: relative - img - display: block - height: auto - width: 100% - &.is-rounded - border-radius: $radius-rounded - &.is-fullwidth - width: 100% - // Ratio - &.is-square, - &.is-1by1, - &.is-5by4, - &.is-4by3, - &.is-3by2, - &.is-5by3, - &.is-16by9, - &.is-2by1, - &.is-3by1, - &.is-4by5, - &.is-3by4, - &.is-2by3, - &.is-3by5, - &.is-9by16, - &.is-1by2, - &.is-1by3 - img, - .has-ratio - @extend %overlay - height: 100% - width: 100% - &.is-square, - &.is-1by1 - padding-top: 100% - &.is-5by4 - padding-top: 80% - &.is-4by3 - padding-top: 75% - &.is-3by2 - padding-top: 66.6666% - &.is-5by3 - padding-top: 60% - &.is-16by9 - padding-top: 56.25% - &.is-2by1 - padding-top: 50% - &.is-3by1 - padding-top: 33.3333% - &.is-4by5 - padding-top: 125% - &.is-3by4 - padding-top: 133.3333% - &.is-2by3 - padding-top: 150% - &.is-3by5 - padding-top: 166.6666% - &.is-9by16 - padding-top: 177.7777% - &.is-1by2 - padding-top: 200% - &.is-1by3 - padding-top: 300% - // Sizes - @each $dimension in $dimensions - &.is-#{$dimension}x#{$dimension} - height: $dimension * 1px - width: $dimension * 1px diff --git a/sass/elements/image.scss b/sass/elements/image.scss new file mode 100644 index 00000000..a6287006 --- /dev/null +++ b/sass/elements/image.scss @@ -0,0 +1,117 @@ +@import "../utilities/mixins"; + +$dimensions: 16 24 32 48 64 96 128 !default; + +.image { + display: block; + position: relative; + + img { + display: block; + height: auto; + width: 100%; + + &.is-rounded { + border-radius: $radius-rounded; + } + } + + &.is-fullwidth { + width: 100%; + } + + // Ratio + &.is-square, + &.is-1by1, + &.is-5by4, + &.is-4by3, + &.is-3by2, + &.is-5by3, + &.is-16by9, + &.is-2by1, + &.is-3by1, + &.is-4by5, + &.is-3by4, + &.is-2by3, + &.is-3by5, + &.is-9by16, + &.is-1by2, + &.is-1by3 { + img, + .has-ratio { + @extend %overlay; + + height: 100%; + width: 100%; + } + } + + &.is-square, + &.is-1by1 { + padding-top: 100%; + } + + &.is-5by4 { + padding-top: 80%; + } + + &.is-4by3 { + padding-top: 75%; + } + + &.is-3by2 { + padding-top: 66.6666%; + } + + &.is-5by3 { + padding-top: 60%; + } + + &.is-16by9 { + padding-top: 56.25%; + } + + &.is-2by1 { + padding-top: 50%; + } + + &.is-3by1 { + padding-top: 33.3333%; + } + + &.is-4by5 { + padding-top: 125%; + } + + &.is-3by4 { + padding-top: 133.3333%; + } + + &.is-2by3 { + padding-top: 150%; + } + + &.is-3by5 { + padding-top: 166.6666%; + } + + &.is-9by16 { + padding-top: 177.7777%; + } + + &.is-1by2 { + padding-top: 200%; + } + + &.is-1by3 { + padding-top: 300%; + } + + // Sizes + @each $dimension in $dimensions { + &.is-#{$dimension}x#{$dimension} { + height: $dimension * 1px; + width: $dimension * 1px; + } + } +} diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass deleted file mode 100644 index f5c60216..00000000 --- a/sass/elements/notification.sass +++ /dev/null @@ -1,52 +0,0 @@ -@import "../utilities/mixins" - -$notification-background-color: $background !default -$notification-code-background-color: $scheme-main !default -$notification-radius: $radius !default -$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default -$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default -$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default - -$notification-colors: $colors !default - -.notification - @extend %block - background-color: $notification-background-color - border-radius: $notification-radius - position: relative - +ltr - padding: $notification-padding-ltr - +rtl - padding: $notification-padding-rtl - a:not(.button):not(.dropdown-item) - color: currentColor - text-decoration: underline - strong - color: currentColor - code, - pre - background: $notification-code-background-color - pre code - background: transparent - & > .delete - +ltr-position(0.5rem) - position: absolute - top: 0.5rem - .title, - .subtitle, - .content - color: currentColor - // Colors - @each $name, $pair in $notification-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - // If light and dark colors are provided - @if length($pair) >= 4 - $color-light: nth($pair, 3) - $color-dark: nth($pair, 4) - &.is-light - background-color: $color-light - color: $color-dark diff --git a/sass/elements/notification.scss b/sass/elements/notification.scss new file mode 100644 index 00000000..d6ca1dcd --- /dev/null +++ b/sass/elements/notification.scss @@ -0,0 +1,81 @@ +@import "../utilities/mixins"; + +$notification-background-color: $background !default; +$notification-code-background-color: $scheme-main !default; +$notification-radius: $radius !default; +$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default; +$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default; +$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default; + +$notification-colors: $colors !default; + +.notification { + @extend %block; + + background-color: $notification-background-color; + border-radius: $notification-radius; + position: relative; + + @include ltr { + padding: $notification-padding-ltr; + } + + + @include rtl { + padding: $notification-padding-rtl; + } + + + a:not(.button):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; + } + + strong { + color: currentColor; + } + + code, + pre { + background: $notification-code-background-color; + } + + pre code { + background: transparent; + } + + & > .delete { + @include ltr-position(0.5rem); + + position: absolute; + top: 0.5rem; + } + + .title, + .subtitle, + .content { + color: currentColor; + } + + // Colors + @each $name, $pair in $notification-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + // If light and dark colors are provided + @if length($pair) >= 4 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + &.is-light { + background-color: $color-light; + color: $color-dark; + } + } + } + } +} diff --git a/sass/elements/other.sass b/sass/elements/other.sass deleted file mode 100644 index e83f3613..00000000 --- a/sass/elements/other.sass +++ /dev/null @@ -1,31 +0,0 @@ -@import "../utilities/mixins" - -.block - @extend %block - -.delete - @extend %delete - -.heading - display: block - font-size: 11px - letter-spacing: 1px - margin-bottom: 5px - text-transform: uppercase - -.loader - @extend %loader - -.number - align-items: center - background-color: $background - border-radius: $radius-rounded - display: inline-flex - font-size: $size-medium - height: 2em - justify-content: center - margin-right: 1.5rem - min-width: 2.5em - padding: 0.25rem 0.5rem - text-align: center - vertical-align: top diff --git a/sass/elements/other.scss b/sass/elements/other.scss new file mode 100644 index 00000000..7e60fb49 --- /dev/null +++ b/sass/elements/other.scss @@ -0,0 +1,36 @@ +@import "../utilities/mixins"; + +.block { + @extend %block; +} + +.delete { + @extend %delete; +} + +.heading { + display: block; + font-size: 11px; + letter-spacing: 1px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.loader { + @extend %loader; +} + +.number { + align-items: center; + background-color: $background; + border-radius: $radius-rounded; + display: inline-flex; + font-size: $size-medium; + height: 2em; + justify-content: center; + margin-right: 1.5rem; + min-width: 2.5em; + padding: 0.25rem 0.5rem; + text-align: center; + vertical-align: top; +} diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass deleted file mode 100644 index 4daeb807..00000000 --- a/sass/elements/progress.sass +++ /dev/null @@ -1,73 +0,0 @@ -@import "../utilities/mixins" - -$progress-bar-background-color: $border-light !default -$progress-value-background-color: $text !default -$progress-border-radius: $radius-rounded !default - -$progress-indeterminate-duration: 1.5s !default - -$progress-colors: $colors !default - -.progress - @extend %block - -moz-appearance: none - -webkit-appearance: none - border: none - border-radius: $progress-border-radius - display: block - height: $size-normal - overflow: hidden - padding: 0 - width: 100% - &::-webkit-progress-bar - background-color: $progress-bar-background-color - &::-webkit-progress-value - background-color: $progress-value-background-color - &::-moz-progress-bar - background-color: $progress-value-background-color - &::-ms-fill - background-color: $progress-value-background-color - border: none - // Colors - @each $name, $pair in $progress-colors - $color: nth($pair, 1) - &.is-#{$name} - &::-webkit-progress-value - background-color: $color - &::-moz-progress-bar - background-color: $color - &::-ms-fill - background-color: $color - &:indeterminate - background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) - - &:indeterminate - animation-duration: $progress-indeterminate-duration - animation-iteration-count: infinite - animation-name: moveIndeterminate - animation-timing-function: linear - background-color: $progress-bar-background-color - background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) - background-position: top left - background-repeat: no-repeat - background-size: 150% 150% - &::-webkit-progress-bar - background-color: transparent - &::-moz-progress-bar - background-color: transparent - &::-ms-fill - animation-name: none - - // Sizes - &.is-small - height: $size-small - &.is-medium - height: $size-medium - &.is-large - height: $size-large - -@keyframes moveIndeterminate - from - background-position: 200% 0 - to - background-position: -200% 0 diff --git a/sass/elements/progress.scss b/sass/elements/progress.scss new file mode 100644 index 00000000..b620b43e --- /dev/null +++ b/sass/elements/progress.scss @@ -0,0 +1,110 @@ +@import "../utilities/mixins"; + +$progress-bar-background-color: $border-light !default; +$progress-value-background-color: $text !default; +$progress-border-radius: $radius-rounded !default; + +$progress-indeterminate-duration: 1.5s !default; + +$progress-colors: $colors !default; + +.progress { + @extend %block; + + -moz-appearance: none; + -webkit-appearance: none; + border: none; + border-radius: $progress-border-radius; + display: block; + height: $size-normal; + overflow: hidden; + padding: 0; + width: 100%; + + &::-webkit-progress-bar { + background-color: $progress-bar-background-color; + } + + &::-webkit-progress-value { + background-color: $progress-value-background-color; + } + + &::-moz-progress-bar { + background-color: $progress-value-background-color; + } + + &::-ms-fill { + background-color: $progress-value-background-color; + border: none; + } + + // Colors + @each $name, $pair in $progress-colors { + $color: nth($pair, 1); + + &.is-#{$name} { + &::-webkit-progress-value { + background-color: $color; + } + + &::-moz-progress-bar { + background-color: $color; + } + + &::-ms-fill { + background-color: $color; + } + + &:indeterminate { + background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%); + } + } + } + + &:indeterminate { + animation-duration: $progress-indeterminate-duration; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; + background-color: $progress-bar-background-color; + background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%); + background-position: top left; + background-repeat: no-repeat; + background-size: 150% 150%; + + &::-webkit-progress-bar { + background-color: transparent; + } + + &::-moz-progress-bar { + background-color: transparent; + } + + &::-ms-fill { + animation-name: none; + } + } + + // Sizes + &.is-small { + height: $size-small; + } + + &.is-medium { + height: $size-medium; + } + + &.is-large { + height: $size-large; + } +} + +@keyframes moveIndeterminate { + from { + background-position: 200% 0; + } + + to { + background-position: (-200%) 0; + } +} diff --git a/sass/elements/table.sass b/sass/elements/table.sass deleted file mode 100644 index f47d2123..00000000 --- a/sass/elements/table.sass +++ /dev/null @@ -1,134 +0,0 @@ -@import "../utilities/mixins" - -$table-color: $text-strong !default -$table-background-color: $scheme-main !default - -$table-cell-border: 1px solid $border !default -$table-cell-border-width: 0 0 1px !default -$table-cell-padding: 0.5em 0.75em !default -$table-cell-heading-color: $text-strong !default -$table-cell-text-align: left !default - -$table-head-cell-border-width: 0 0 2px !default -$table-head-cell-color: $text-strong !default -$table-foot-cell-border-width: 2px 0 0 !default -$table-foot-cell-color: $text-strong !default - -$table-head-background-color: transparent !default -$table-body-background-color: transparent !default -$table-foot-background-color: transparent !default - -$table-row-hover-background-color: $scheme-main-bis !default - -$table-row-active-background-color: $primary !default -$table-row-active-color: $primary-invert !default - -$table-striped-row-even-background-color: $scheme-main-bis !default -$table-striped-row-even-hover-background-color: $scheme-main-ter !default - -$table-colors: $colors !default - -.table - @extend %block - background-color: $table-background-color - color: $table-color - td, - th - border: $table-cell-border - border-width: $table-cell-border-width - padding: $table-cell-padding - vertical-align: top - // Colors - @each $name, $pair in $table-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - border-color: $color - color: $color-invert - // Modifiers - &.is-narrow - white-space: nowrap - width: 1% - &.is-selected - background-color: $table-row-active-background-color - color: $table-row-active-color - a, - strong - color: currentColor - &.is-vcentered - vertical-align: middle - th - color: $table-cell-heading-color - &:not([align]) - text-align: $table-cell-text-align - tr - &.is-selected - background-color: $table-row-active-background-color - color: $table-row-active-color - a, - strong - color: currentColor - td, - th - border-color: $table-row-active-color - color: currentColor - thead - background-color: $table-head-background-color - td, - th - border-width: $table-head-cell-border-width - color: $table-head-cell-color - tfoot - background-color: $table-foot-background-color - td, - th - border-width: $table-foot-cell-border-width - color: $table-foot-cell-color - tbody - background-color: $table-body-background-color - tr - &:last-child - td, - th - border-bottom-width: 0 - // Modifiers - &.is-bordered - td, - th - border-width: 1px - tr - &:last-child - td, - th - border-bottom-width: 1px - &.is-fullwidth - width: 100% - &.is-hoverable - tbody - tr:not(.is-selected) - &:hover - background-color: $table-row-hover-background-color - &.is-striped - tbody - tr:not(.is-selected) - &:hover - background-color: $table-row-hover-background-color - &:nth-child(even) - background-color: $table-striped-row-even-hover-background-color - &.is-narrow - td, - th - padding: 0.25em 0.5em - &.is-striped - tbody - tr:not(.is-selected) - &:nth-child(even) - background-color: $table-striped-row-even-background-color - -.table-container - @extend %block - +overflow-touch - overflow: auto - overflow-y: hidden - max-width: 100% diff --git a/sass/elements/table.scss b/sass/elements/table.scss new file mode 100644 index 00000000..5bd463c2 --- /dev/null +++ b/sass/elements/table.scss @@ -0,0 +1,207 @@ +@import "../utilities/mixins"; + +$table-color: $text-strong !default; +$table-background-color: $scheme-main !default; + +$table-cell-border: 1px solid $border !default; +$table-cell-border-width: 0 0 1px !default; +$table-cell-padding: 0.5em 0.75em !default; +$table-cell-heading-color: $text-strong !default; +$table-cell-text-align: left !default; + +$table-head-cell-border-width: 0 0 2px !default; +$table-head-cell-color: $text-strong !default; +$table-foot-cell-border-width: 2px 0 0 !default; +$table-foot-cell-color: $text-strong !default; + +$table-head-background-color: transparent !default; +$table-body-background-color: transparent !default; +$table-foot-background-color: transparent !default; + +$table-row-hover-background-color: $scheme-main-bis !default; + +$table-row-active-background-color: $primary !default; +$table-row-active-color: $primary-invert !default; + +$table-striped-row-even-background-color: $scheme-main-bis !default; +$table-striped-row-even-hover-background-color: $scheme-main-ter !default; + +$table-colors: $colors !default; + +.table { + @extend %block; + + background-color: $table-background-color; + color: $table-color; + + td, + th { + border: $table-cell-border; + border-width: $table-cell-border-width; + padding: $table-cell-padding; + vertical-align: top; + + // Colors + @each $name, $pair in $table-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + border-color: $color; + color: $color-invert; + } + } + + // Modifiers + &.is-narrow { + white-space: nowrap; + width: 1%; + } + + &.is-selected { + background-color: $table-row-active-background-color; + color: $table-row-active-color; + + a, + strong { + color: currentColor; + } + } + + &.is-vcentered { + vertical-align: middle; + } + } + + th { + color: $table-cell-heading-color; + + &:not([align]) { + text-align: $table-cell-text-align; + } + } + + tr { + &.is-selected { + background-color: $table-row-active-background-color; + color: $table-row-active-color; + + a, + strong { + color: currentColor; + } + + td, + th { + border-color: $table-row-active-color; + color: currentColor; + } + } + } + + thead { + background-color: $table-head-background-color; + + td, + th { + border-width: $table-head-cell-border-width; + color: $table-head-cell-color; + } + } + + tfoot { + background-color: $table-foot-background-color; + + td, + th { + border-width: $table-foot-cell-border-width; + color: $table-foot-cell-color; + } + } + + tbody { + background-color: $table-body-background-color; + + tr { + &:last-child { + td, + th { + border-bottom-width: 0; + } + } + } + } + + // Modifiers + &.is-bordered { + td, + th { + border-width: 1px; + } + + tr { + &:last-child { + td, + th { + border-bottom-width: 1px; + } + } + } + } + + &.is-fullwidth { + width: 100%; + } + + &.is-hoverable { + tbody { + tr:not(.is-selected) { + &:hover { + background-color: $table-row-hover-background-color; + } + } + } + + &.is-striped { + tbody { + tr:not(.is-selected) { + &:hover { + background-color: $table-row-hover-background-color; + + &:nth-child(even) { + background-color: $table-striped-row-even-hover-background-color; + } + } + } + } + } + } + + &.is-narrow { + td, + th { + padding: 0.25em 0.5em; + } + } + + &.is-striped { + tbody { + tr:not(.is-selected) { + &:nth-child(even) { + background-color: $table-striped-row-even-background-color; + } + } + } + } +} + +.table-container { + @extend %block; + + @include overflow-touch; + + overflow: auto; + overflow-y: hidden; + max-width: 100%; +} diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass deleted file mode 100644 index 392daee6..00000000 --- a/sass/elements/tag.sass +++ /dev/null @@ -1,140 +0,0 @@ -@import "../utilities/mixins" - -$tag-background-color: $background !default -$tag-color: $text !default -$tag-radius: $radius !default -$tag-delete-margin: 1px !default - -$tag-colors: $colors !default - -.tags - align-items: center - display: flex - flex-wrap: wrap - justify-content: flex-start - .tag - margin-bottom: 0.5rem - &:not(:last-child) - +ltr-property("margin", 0.5rem) - &:last-child - margin-bottom: -0.5rem - &:not(:last-child) - margin-bottom: 1rem - // Sizes - &.are-medium - .tag:not(.is-normal):not(.is-large) - font-size: $size-normal - &.are-large - .tag:not(.is-normal):not(.is-medium) - font-size: $size-medium - &.is-centered - justify-content: center - .tag - margin-right: 0.25rem - margin-left: 0.25rem - &.is-right - justify-content: flex-end - .tag - &:not(:first-child) - margin-left: 0.5rem - &:not(:last-child) - margin-right: 0 - &.has-addons - .tag - +ltr-property("margin", 0) - &:not(:first-child) - +ltr-property("margin", 0, false) - +ltr - border-top-left-radius: 0 - border-bottom-left-radius: 0 - +rtl - border-top-right-radius: 0 - border-bottom-right-radius: 0 - &:not(:last-child) - +ltr - border-top-right-radius: 0 - border-bottom-right-radius: 0 - +rtl - border-top-left-radius: 0 - border-bottom-left-radius: 0 - -.tag:not(body) - align-items: center - background-color: $tag-background-color - border-radius: $tag-radius - color: $tag-color - display: inline-flex - font-size: $size-small - height: 2em - justify-content: center - line-height: 1.5 - padding-left: 0.75em - padding-right: 0.75em - white-space: nowrap - .delete - +ltr-property("margin", 0.25rem, false) - +ltr-property("margin", -0.375rem) - // Colors - @each $name, $pair in $tag-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - // If a light and dark colors are provided - @if length($pair) > 3 - $color-light: nth($pair, 3) - $color-dark: nth($pair, 4) - &.is-light - background-color: $color-light - color: $color-dark - // Sizes - &.is-normal - font-size: $size-small - &.is-medium - font-size: $size-normal - &.is-large - font-size: $size-medium - .icon - &:first-child:not(:last-child) - +ltr-property("margin", -0.375em, false) - +ltr-property("margin", 0.1875em) - &:last-child:not(:first-child) - +ltr-property("margin", 0.1875em, false) - +ltr-property("margin", -0.375em) - &:first-child:last-child - +ltr-property("margin", -0.375em, false) - +ltr-property("margin", -0.375em) - // Modifiers - &.is-delete - +ltr-property("margin", $tag-delete-margin, false) - padding: 0 - position: relative - width: 2em - &::before, - &::after - background-color: currentColor - content: "" - display: block - left: 50% - position: absolute - top: 50% - transform: translateX(-50%) translateY(-50%) rotate(45deg) - transform-origin: center center - &::before - height: 1px - width: 50% - &::after - height: 50% - width: 1px - &:hover, - &:focus - background-color: darken($tag-background-color, 5%) - &:active - background-color: darken($tag-background-color, 10%) - &.is-rounded - border-radius: $radius-rounded - -a.tag - &:hover - text-decoration: underline diff --git a/sass/elements/tag.scss b/sass/elements/tag.scss new file mode 100644 index 00000000..cb39fd25 --- /dev/null +++ b/sass/elements/tag.scss @@ -0,0 +1,222 @@ +@import "../utilities/mixins"; + +$tag-background-color: $background !default; +$tag-color: $text !default; +$tag-radius: $radius !default; +$tag-delete-margin: 1px !default; + +$tag-colors: $colors !default; + +.tags { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .tag { + margin-bottom: 0.5rem; + + &:not(:last-child) { + @include ltr-property("margin", 0.5rem); + } + } + + &:last-child { + margin-bottom: -0.5rem; + } + + &:not(:last-child) { + margin-bottom: 1rem; + } + + // Sizes + &.are-medium { + .tag:not(.is-normal):not(.is-large) { + font-size: $size-normal; + } + } + + &.are-large { + .tag:not(.is-normal):not(.is-medium) { + font-size: $size-medium; + } + } + + &.is-centered { + justify-content: center; + + .tag { + margin-right: 0.25rem; + margin-left: 0.25rem; + } + } + + &.is-right { + justify-content: flex-end; + + .tag { + &:not(:first-child) { + margin-left: 0.5rem; + } + + &:not(:last-child) { + margin-right: 0; + } + } + } + + &.has-addons { + .tag { + @include ltr-property("margin", 0); + + &:not(:first-child) { + @include ltr-property("margin", 0, false); + @include ltr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + + @include rtl { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + &:not(:last-child) { + @include ltr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + + @include rtl { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + } + } +} + +.tag:not(body) { + align-items: center; + background-color: $tag-background-color; + border-radius: $tag-radius; + color: $tag-color; + display: inline-flex; + font-size: $size-small; + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; + + .delete { + @include ltr-property("margin", 0.25rem, false); + @include ltr-property("margin", -0.375rem); + } + + // Colors + @each $name, $pair in $tag-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + // If a light and dark colors are provided + @if length($pair) > 3 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + &.is-light { + background-color: $color-light; + color: $color-dark; + } + } + } + } + + // Sizes + &.is-normal { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-normal; + } + + &.is-large { + font-size: $size-medium; + } + + .icon { + &:first-child:not(:last-child) { + @include ltr-property("margin", -0.375em, false); + @include ltr-property("margin", 0.1875em); + } + + &:last-child:not(:first-child) { + @include ltr-property("margin", 0.1875em, false); + @include ltr-property("margin", -0.375em); + } + + &:first-child:last-child { + @include ltr-property("margin", -0.375em, false); + @include ltr-property("margin", -0.375em); + } + } + + // Modifiers + &.is-delete { + @include ltr-property("margin", $tag-delete-margin, false); + + padding: 0; + position: relative; + width: 2em; + + &::before, + &::after { + background-color: currentColor; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; + } + + &::before { + height: 1px; + width: 50%; + } + + &::after { + height: 50%; + width: 1px; + } + + &:hover, + &:focus { + background-color: darken($tag-background-color, 5%); + } + + &:active { + background-color: darken($tag-background-color, 10%); + } + } + + &.is-rounded { + border-radius: $radius-rounded; + } +} + +a.tag { + &:hover { + text-decoration: underline; + } +} diff --git a/sass/elements/title.sass b/sass/elements/title.sass deleted file mode 100644 index 022420c2..00000000 --- a/sass/elements/title.sass +++ /dev/null @@ -1,70 +0,0 @@ -@import "../utilities/mixins" - -$title-color: $text-strong !default -$title-family: false !default -$title-size: $size-3 !default -$title-weight: $weight-semibold !default -$title-line-height: 1.125 !default -$title-strong-color: inherit !default -$title-strong-weight: inherit !default -$title-sub-size: 0.75em !default -$title-sup-size: 0.75em !default - -$subtitle-color: $text !default -$subtitle-family: false !default -$subtitle-size: $size-5 !default -$subtitle-weight: $weight-normal !default -$subtitle-line-height: 1.25 !default -$subtitle-strong-color: $text-strong !default -$subtitle-strong-weight: $weight-semibold !default -$subtitle-negative-margin: -1.25rem !default - -.title, -.subtitle - @extend %block - word-break: break-word - em, - span - font-weight: inherit - sub - font-size: $title-sub-size - sup - font-size: $title-sup-size - .tag - vertical-align: middle - -.title - color: $title-color - @if $title-family - font-family: $title-family - font-size: $title-size - font-weight: $title-weight - line-height: $title-line-height - strong - color: $title-strong-color - font-weight: $title-strong-weight - &:not(.is-spaced) + .subtitle - margin-top: $subtitle-negative-margin - // Sizes - @each $size in $sizes - $i: index($sizes, $size) - &.is-#{$i} - font-size: $size - -.subtitle - color: $subtitle-color - @if $subtitle-family - font-family: $subtitle-family - font-size: $subtitle-size - font-weight: $subtitle-weight - line-height: $subtitle-line-height - strong - color: $subtitle-strong-color - font-weight: $subtitle-strong-weight - &:not(.is-spaced) + .title - margin-top: $subtitle-negative-margin - // Sizes - @each $size in $sizes - $i: index($sizes, $size) - &.is-#{$i} - font-size: $size diff --git a/sass/elements/title.scss b/sass/elements/title.scss new file mode 100644 index 00000000..fbb1baad --- /dev/null +++ b/sass/elements/title.scss @@ -0,0 +1,104 @@ +@import "../utilities/mixins"; + +$title-color: $text-strong !default; +$title-family: false !default; +$title-size: $size-3 !default; +$title-weight: $weight-semibold !default; +$title-line-height: 1.125 !default; +$title-strong-color: inherit !default; +$title-strong-weight: inherit !default; +$title-sub-size: 0.75em !default; +$title-sup-size: 0.75em !default; + +$subtitle-color: $text !default; +$subtitle-family: false !default; +$subtitle-size: $size-5 !default; +$subtitle-weight: $weight-normal !default; +$subtitle-line-height: 1.25 !default; +$subtitle-strong-color: $text-strong !default; +$subtitle-strong-weight: $weight-semibold !default; +$subtitle-negative-margin: -1.25rem !default; + +.title, +.subtitle { + @extend %block; + + word-break: break-word; + + em, + span { + font-weight: inherit; + } + + sub { + font-size: $title-sub-size; + } + + sup { + font-size: $title-sup-size; + } + + .tag { + vertical-align: middle; + } +} + +.title { + color: $title-color; + + @if $title-family { + font-family: $title-family; + } + + font-size: $title-size; + font-weight: $title-weight; + line-height: $title-line-height; + + strong { + color: $title-strong-color; + font-weight: $title-strong-weight; + } + + &:not(.is-spaced) + .subtitle { + margin-top: $subtitle-negative-margin; + } + + // Sizes + @each $size in $sizes { + $i: index($sizes, $size); + + &.is-#{$i} { + font-size: $size; + } + } +} + +.subtitle { + color: $subtitle-color; + + @if $subtitle-family { + font-family: $subtitle-family; + } + + font-size: $subtitle-size; + font-weight: $subtitle-weight; + line-height: $subtitle-line-height; + + strong { + color: $subtitle-strong-color; + font-weight: $subtitle-strong-weight; + } + + &:not(.is-spaced) + .title { + margin-top: $subtitle-negative-margin; + } + + // Sizes + @each $size in $sizes { + $i: index($sizes, $size); + + &.is-#{$i} { + font-size: $size; + } + } +} diff --git a/sass/form/_all.sass b/sass/form/_all.sass deleted file mode 100644 index 0a15f80a..00000000 --- a/sass/form/_all.sass +++ /dev/null @@ -1,9 +0,0 @@ -/* Bulma Form */ -@charset "utf-8" - -@import "shared" -@import "input-textarea" -@import "checkbox-radio" -@import "select" -@import "file" -@import "tools" diff --git a/sass/form/_all.scss b/sass/form/_all.scss new file mode 100644 index 00000000..ab71ea71 --- /dev/null +++ b/sass/form/_all.scss @@ -0,0 +1,9 @@ +/* Bulma Form */ +@charset "utf-8"; + +@import "shared"; +@import "input-textarea"; +@import "checkbox-radio"; +@import "select"; +@import "file"; +@import "tools"; diff --git a/sass/form/checkbox-radio.sass b/sass/form/checkbox-radio.sass deleted file mode 100644 index f033d113..00000000 --- a/sass/form/checkbox-radio.sass +++ /dev/null @@ -1,22 +0,0 @@ -%checkbox-radio - cursor: pointer - display: inline-block - line-height: 1.25 - position: relative - input - cursor: pointer - &:hover - color: $input-hover-color - &[disabled], - fieldset[disabled] &, - input[disabled] - color: $input-disabled-color - cursor: not-allowed - -.checkbox - @extend %checkbox-radio - -.radio - @extend %checkbox-radio - & + .radio - +ltr-property("margin", 0.5em, false) diff --git a/sass/form/checkbox-radio.scss b/sass/form/checkbox-radio.scss new file mode 100644 index 00000000..4e115ced --- /dev/null +++ b/sass/form/checkbox-radio.scss @@ -0,0 +1,33 @@ +%checkbox-radio { + cursor: pointer; + display: inline-block; + line-height: 1.25; + position: relative; + + input { + cursor: pointer; + } + + &:hover { + color: $input-hover-color; + } + + &[disabled], + fieldset[disabled] &, + input[disabled] { + color: $input-disabled-color; + cursor: not-allowed; + } +} + +.checkbox { + @extend %checkbox-radio; +} + +.radio { + @extend %checkbox-radio; + + & + .radio { + @include ltr-property("margin", 0.5em, false); + } +} diff --git a/sass/form/file.sass b/sass/form/file.sass deleted file mode 100644 index 9b84c848..00000000 --- a/sass/form/file.sass +++ /dev/null @@ -1,184 +0,0 @@ -$file-border-color: $border !default -$file-radius: $radius !default - -$file-cta-background-color: $scheme-main-ter !default -$file-cta-color: $text !default -$file-cta-hover-color: $text-strong !default -$file-cta-active-color: $text-strong !default - -$file-name-border-color: $border !default -$file-name-border-style: solid !default -$file-name-border-width: 1px 1px 1px 0 !default -$file-name-max-width: 16em !default - -$file-colors: $form-colors !default - -.file - @extend %unselectable - align-items: stretch - display: flex - justify-content: flex-start - position: relative - // Colors - @each $name, $pair in $file-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - .file-cta - background-color: $color - border-color: transparent - color: $color-invert - &:hover, - &.is-hovered - .file-cta - background-color: bulmaDarken($color, 2.5%) - border-color: transparent - color: $color-invert - &:focus, - &.is-focused - .file-cta - border-color: transparent - box-shadow: 0 0 0.5em bulmaRgba($color, 0.25) - color: $color-invert - &:active, - &.is-active - .file-cta - background-color: bulmaDarken($color, 5%) - border-color: transparent - color: $color-invert - // Sizes - &.is-small - font-size: $size-small - &.is-normal - font-size: $size-normal - &.is-medium - font-size: $size-medium - .file-icon - .fa - font-size: 21px - &.is-large - font-size: $size-large - .file-icon - .fa - font-size: 28px - // Modifiers - &.has-name - .file-cta - border-bottom-right-radius: 0 - border-top-right-radius: 0 - .file-name - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &.is-empty - .file-cta - border-radius: $file-radius - .file-name - display: none - &.is-boxed - .file-label - flex-direction: column - .file-cta - flex-direction: column - height: auto - padding: 1em 3em - .file-name - border-width: 0 1px 1px - .file-icon - height: 1.5em - width: 1.5em - .fa - font-size: 21px - &.is-small - .file-icon .fa - font-size: 14px - &.is-medium - .file-icon .fa - font-size: 28px - &.is-large - .file-icon .fa - font-size: 35px - &.has-name - .file-cta - border-radius: $file-radius $file-radius 0 0 - .file-name - border-radius: 0 0 $file-radius $file-radius - border-width: 0 1px 1px - &.is-centered - justify-content: center - &.is-fullwidth - .file-label - width: 100% - .file-name - flex-grow: 1 - max-width: none - &.is-right - justify-content: flex-end - .file-cta - border-radius: 0 $file-radius $file-radius 0 - .file-name - border-radius: $file-radius 0 0 $file-radius - border-width: 1px 0 1px 1px - order: -1 - -.file-label - align-items: stretch - display: flex - cursor: pointer - justify-content: flex-start - overflow: hidden - position: relative - &:hover - .file-cta - background-color: bulmaDarken($file-cta-background-color, 2.5%) - color: $file-cta-hover-color - .file-name - border-color: bulmaDarken($file-name-border-color, 2.5%) - &:active - .file-cta - background-color: bulmaDarken($file-cta-background-color, 5%) - color: $file-cta-active-color - .file-name - border-color: bulmaDarken($file-name-border-color, 5%) - -.file-input - height: 100% - left: 0 - opacity: 0 - outline: none - position: absolute - top: 0 - width: 100% - -.file-cta, -.file-name - @extend %control - border-color: $file-border-color - border-radius: $file-radius - font-size: 1em - padding-left: 1em - padding-right: 1em - white-space: nowrap - -.file-cta - background-color: $file-cta-background-color - color: $file-cta-color - -.file-name - border-color: $file-name-border-color - border-style: $file-name-border-style - border-width: $file-name-border-width - display: block - max-width: $file-name-max-width - overflow: hidden - text-align: inherit - text-overflow: ellipsis - -.file-icon - align-items: center - display: flex - height: 1em - justify-content: center - +ltr-property("margin", 0.5em) - width: 1em - .fa - font-size: 14px diff --git a/sass/form/file.scss b/sass/form/file.scss new file mode 100644 index 00000000..55e9654a --- /dev/null +++ b/sass/form/file.scss @@ -0,0 +1,283 @@ +$file-border-color: $border !default; +$file-radius: $radius !default; + +$file-cta-background-color: $scheme-main-ter !default; +$file-cta-color: $text !default; +$file-cta-hover-color: $text-strong !default; +$file-cta-active-color: $text-strong !default; + +$file-name-border-color: $border !default; +$file-name-border-style: solid !default; +$file-name-border-width: 1px 1px 1px 0 !default; +$file-name-max-width: 16em !default; + +$file-colors: $form-colors !default; + +.file { + @extend %unselectable; + + align-items: stretch; + display: flex; + justify-content: flex-start; + position: relative; + + // Colors + @each $name, $pair in $file-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + .file-cta { + background-color: $color; + border-color: transparent; + color: $color-invert; + } + + &:hover, + &.is-hovered { + .file-cta { + background-color: bulmaDarken($color, 2.5%); + border-color: transparent; + color: $color-invert; + } + } + + &:focus, + &.is-focused { + .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em bulmaRgba($color, 0.25); + color: $color-invert; + } + } + + &:active, + &.is-active { + .file-cta { + background-color: bulmaDarken($color, 5%); + border-color: transparent; + color: $color-invert; + } + } + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-normal { + font-size: $size-normal; + } + + &.is-medium { + font-size: $size-medium; + + .file-icon { + .fa { + font-size: 21px; + } + } + } + + &.is-large { + font-size: $size-large; + + .file-icon { + .fa { + font-size: 28px; + } + } + } + + // Modifiers + &.has-name { + .file-cta { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .file-name { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &.is-empty { + .file-cta { + border-radius: $file-radius; + } + + .file-name { + display: none; + } + } + } + + &.is-boxed { + .file-label { + flex-direction: column; + } + + .file-cta { + flex-direction: column; + height: auto; + padding: 1em 3em; + } + + .file-name { + border-width: 0 1px 1px; + } + + .file-icon { + height: 1.5em; + width: 1.5em; + + .fa { + font-size: 21px; + } + } + + &.is-small { + .file-icon .fa { + font-size: 14px; + } + } + + &.is-medium { + .file-icon .fa { + font-size: 28px; + } + } + + &.is-large { + .file-icon .fa { + font-size: 35px; + } + } + + &.has-name { + .file-cta { + border-radius: $file-radius $file-radius 0 0; + } + + .file-name { + border-radius: 0 0 $file-radius $file-radius; + border-width: 0 1px 1px; + } + } + } + + &.is-centered { + justify-content: center; + } + + &.is-fullwidth { + .file-label { + width: 100%; + } + + .file-name { + flex-grow: 1; + max-width: none; + } + } + + &.is-right { + justify-content: flex-end; + + .file-cta { + border-radius: 0 $file-radius $file-radius 0; + } + + .file-name { + border-radius: $file-radius 0 0 $file-radius; + border-width: 1px 0 1px 1px; + order: -1; + } + } +} + +.file-label { + align-items: stretch; + display: flex; + cursor: pointer; + justify-content: flex-start; + overflow: hidden; + position: relative; + + &:hover { + .file-cta { + background-color: bulmaDarken($file-cta-background-color, 2.5%); + color: $file-cta-hover-color; + } + + .file-name { + border-color: bulmaDarken($file-name-border-color, 2.5%); + } + } + + &:active { + .file-cta { + background-color: bulmaDarken($file-cta-background-color, 5%); + color: $file-cta-active-color; + } + + .file-name { + border-color: bulmaDarken($file-name-border-color, 5%); + } + } +} + +.file-input { + height: 100%; + left: 0; + opacity: 0; + outline: none; + position: absolute; + top: 0; + width: 100%; +} + +.file-cta, +.file-name { + @extend %control; + + border-color: $file-border-color; + border-radius: $file-radius; + font-size: 1em; + padding-left: 1em; + padding-right: 1em; + white-space: nowrap; +} + +.file-cta { + background-color: $file-cta-background-color; + color: $file-cta-color; +} + +.file-name { + border-color: $file-name-border-color; + border-style: $file-name-border-style; + border-width: $file-name-border-width; + display: block; + max-width: $file-name-max-width; + overflow: hidden; + text-align: inherit; + text-overflow: ellipsis; +} + +.file-icon { + align-items: center; + display: flex; + height: 1em; + justify-content: center; + + @include ltr-property("margin", 0.5em); + + width: 1em; + + .fa { + font-size: 14px; + } +} diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass deleted file mode 100644 index 8d842a04..00000000 --- a/sass/form/input-textarea.sass +++ /dev/null @@ -1,66 +0,0 @@ -$textarea-padding: $control-padding-horizontal !default -$textarea-max-height: 40em !default -$textarea-min-height: 8em !default - -$textarea-colors: $form-colors !default - -%input-textarea - @extend %input - box-shadow: $input-shadow - max-width: 100% - width: 100% - &[readonly] - box-shadow: none - // Colors - @each $name, $pair in $textarea-colors - $color: nth($pair, 1) - &.is-#{$name} - border-color: $color - &:focus, - &.is-focused, - &:active, - &.is-active - box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25) - // Sizes - &.is-small - +control-small - &.is-medium - +control-medium - &.is-large - +control-large - // Modifiers - &.is-fullwidth - display: block - width: 100% - &.is-inline - display: inline - width: auto - -.input - @extend %input-textarea - &.is-rounded - border-radius: $radius-rounded - padding-left: calc(#{$control-padding-horizontal} + 0.375em) - padding-right: calc(#{$control-padding-horizontal} + 0.375em) - &.is-static - background-color: transparent - border-color: transparent - box-shadow: none - padding-left: 0 - padding-right: 0 - -.textarea - @extend %input-textarea - display: block - max-width: 100% - min-width: 100% - padding: $textarea-padding - resize: vertical - &:not([rows]) - max-height: $textarea-max-height - min-height: $textarea-min-height - &[rows] - height: initial - // Modifiers - &.has-fixed-size - resize: none diff --git a/sass/form/input-textarea.scss b/sass/form/input-textarea.scss new file mode 100644 index 00000000..c518a3ee --- /dev/null +++ b/sass/form/input-textarea.scss @@ -0,0 +1,99 @@ +$textarea-padding: $control-padding-horizontal !default; +$textarea-max-height: 40em !default; +$textarea-min-height: 8em !default; + +$textarea-colors: $form-colors !default; + +%input-textarea { + @extend %input; + + box-shadow: $input-shadow; + max-width: 100%; + width: 100%; + + &[readonly] { + box-shadow: none; + } + + // Colors + @each $name, $pair in $textarea-colors { + $color: nth($pair, 1); + + &.is-#{$name} { + border-color: $color; + + &:focus, + &.is-focused, + &:active, + &.is-active { + box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25); + } + } + } + + // Sizes + &.is-small { + @include control-small; + } + + &.is-medium { + @include control-medium; + } + + &.is-large { + @include control-large; + } + + // Modifiers + &.is-fullwidth { + display: block; + width: 100%; + } + + &.is-inline { + display: inline; + width: auto; + } +} + +.input { + @extend %input-textarea; + + &.is-rounded { + border-radius: $radius-rounded; + padding-left: calc(#{$control-padding-horizontal} + 0.375em); + padding-right: calc(#{$control-padding-horizontal} + 0.375em); + } + + &.is-static { + background-color: transparent; + border-color: transparent; + box-shadow: none; + padding-left: 0; + padding-right: 0; + } +} + +.textarea { + @extend %input-textarea; + + display: block; + max-width: 100%; + min-width: 100%; + padding: $textarea-padding; + resize: vertical; + + &:not([rows]) { + max-height: $textarea-max-height; + min-height: $textarea-min-height; + } + + &[rows] { + height: initial; + } + + // Modifiers + &.has-fixed-size { + resize: none; + } +} diff --git a/sass/form/select.sass b/sass/form/select.sass deleted file mode 100644 index 951b735f..00000000 --- a/sass/form/select.sass +++ /dev/null @@ -1,88 +0,0 @@ -$select-colors: $form-colors !default - -.select - display: inline-block - max-width: 100% - position: relative - vertical-align: top - &:not(.is-multiple) - height: $input-height - &:not(.is-multiple):not(.is-loading) - &::after - @extend %arrow - border-color: $input-arrow - +ltr-position(1.125em) - z-index: 4 - &.is-rounded - select - border-radius: $radius-rounded - +ltr-property("padding", 1em, false) - select - @extend %input - cursor: pointer - display: block - font-size: 1em - max-width: 100% - outline: none - &::-ms-expand - display: none - &[disabled]:hover, - fieldset[disabled] &:hover - border-color: $input-disabled-border-color - &:not([multiple]) - +ltr-property("padding", 2.5em) - &[multiple] - height: auto - padding: 0 - option - padding: 0.5em 1em - // States - &:not(.is-multiple):not(.is-loading):hover - &::after - border-color: $input-hover-color - // Colors - @each $name, $pair in $select-colors - $color: nth($pair, 1) - &.is-#{$name} - &:not(:hover)::after - border-color: $color - select - border-color: $color - &:hover, - &.is-hovered - border-color: bulmaDarken($color, 5%) - &:focus, - &.is-focused, - &:active, - &.is-active - box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25) - // Sizes - &.is-small - +control-small - &.is-medium - +control-medium - &.is-large - +control-large - // Modifiers - &.is-disabled - &::after - border-color: $input-disabled-color !important - opacity: 0.5 - &.is-fullwidth - width: 100% - select - width: 100% - &.is-loading - &::after - @extend %loader - margin-top: 0 - position: absolute - +ltr-position(0.625em) - top: 0.625em - transform: none - &.is-small:after - font-size: $size-small - &.is-medium:after - font-size: $size-medium - &.is-large:after - font-size: $size-large diff --git a/sass/form/select.scss b/sass/form/select.scss new file mode 100644 index 00000000..844a27ad --- /dev/null +++ b/sass/form/select.scss @@ -0,0 +1,153 @@ +$select-colors: $form-colors !default; + +.select { + display: inline-block; + max-width: 100%; + position: relative; + vertical-align: top; + + &:not(.is-multiple) { + height: $input-height; + } + + &:not(.is-multiple):not(.is-loading) { + &::after { + @extend %arrow; + + border-color: $input-arrow; + + @include ltr-position(1.125em); + + z-index: 4; + } + } + + &.is-rounded { + select { + border-radius: $radius-rounded; + + @include ltr-property("padding", 1em, false); + } + } + + select { + @extend %input; + + cursor: pointer; + display: block; + font-size: 1em; + max-width: 100%; + outline: none; + + &::-ms-expand { + display: none; + } + + &[disabled]:hover, + fieldset[disabled] &:hover { + border-color: $input-disabled-border-color; + } + + &:not([multiple]) { + @include ltr-property("padding", 2.5em); + } + + &[multiple] { + height: auto; + padding: 0; + + option { + padding: 0.5em 1em; + } + } + } + + // States + &:not(.is-multiple):not(.is-loading):hover { + &::after { + border-color: $input-hover-color; + } + } + + // Colors + @each $name, $pair in $select-colors { + $color: nth($pair, 1); + + &.is-#{$name} { + &:not(:hover)::after { + border-color: $color; + } + + select { + border-color: $color; + + &:hover, + &.is-hovered { + border-color: bulmaDarken($color, 5%); + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25); + } + } + } + } + + // Sizes + &.is-small { + @include control-small; + } + + &.is-medium { + @include control-medium; + } + + &.is-large { + @include control-large; + } + + // Modifiers + &.is-disabled { + &::after { + border-color: $input-disabled-color !important; + opacity: 0.5; + } + } + + &.is-fullwidth { + width: 100%; + + select { + width: 100%; + } + } + + &.is-loading { + &::after { + @extend %loader; + + margin-top: 0; + position: absolute; + + @include ltr-position(0.625em); + + top: 0.625em; + transform: none; + } + + &.is-small:after { + font-size: $size-small; + } + + &.is-medium:after { + font-size: $size-medium; + } + + &.is-large:after { + font-size: $size-large; + } + } +} diff --git a/sass/form/shared.sass b/sass/form/shared.sass deleted file mode 100644 index 422d7aa3..00000000 --- a/sass/form/shared.sass +++ /dev/null @@ -1,60 +0,0 @@ -@import "../utilities/controls" -@import "../utilities/mixins" - -$form-colors: $colors !default - -$input-color: $text-strong !default -$input-background-color: $scheme-main !default -$input-border-color: $border !default -$input-height: $control-height !default -$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default -$input-placeholder-color: bulmaRgba($input-color, 0.3) !default - -$input-hover-color: $text-strong !default -$input-hover-border-color: $border-hover !default - -$input-focus-color: $text-strong !default -$input-focus-border-color: $link !default -$input-focus-box-shadow-size: 0 0 0 0.125em !default -$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default - -$input-disabled-color: $text-light !default -$input-disabled-background-color: $background !default -$input-disabled-border-color: $background !default -$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default - -$input-arrow: $link !default - -$input-icon-color: $border !default -$input-icon-active-color: $text !default - -$input-radius: $radius !default - -=input - @extend %control - background-color: $input-background-color - border-color: $input-border-color - border-radius: $input-radius - color: $input-color - +placeholder - color: $input-placeholder-color - &:hover, - &.is-hovered - border-color: $input-hover-border-color - &:focus, - &.is-focused, - &:active, - &.is-active - border-color: $input-focus-border-color - box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color - &[disabled], - fieldset[disabled] & - background-color: $input-disabled-background-color - border-color: $input-disabled-border-color - box-shadow: none - color: $input-disabled-color - +placeholder - color: $input-disabled-placeholder-color - -%input - +input diff --git a/sass/form/shared.scss b/sass/form/shared.scss new file mode 100644 index 00000000..4f224acb --- /dev/null +++ b/sass/form/shared.scss @@ -0,0 +1,74 @@ +@import "../utilities/controls"; +@import "../utilities/mixins"; + +$form-colors: $colors !default; + +$input-color: $text-strong !default; +$input-background-color: $scheme-main !default; +$input-border-color: $border !default; +$input-height: $control-height !default; +$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default; +$input-placeholder-color: bulmaRgba($input-color, 0.3) !default; + +$input-hover-color: $text-strong !default; +$input-hover-border-color: $border-hover !default; + +$input-focus-color: $text-strong !default; +$input-focus-border-color: $link !default; +$input-focus-box-shadow-size: 0 0 0 0.125em !default; +$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default; + +$input-disabled-color: $text-light !default; +$input-disabled-background-color: $background !default; +$input-disabled-border-color: $background !default; +$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default; + +$input-arrow: $link !default; + +$input-icon-color: $border !default; +$input-icon-active-color: $text !default; + +$input-radius: $radius !default; + +@mixin input { + @extend %control; + + background-color: $input-background-color; + border-color: $input-border-color; + border-radius: $input-radius; + color: $input-color; + + @include placeholder { + color: $input-placeholder-color; + } + + + &:hover, + &.is-hovered { + border-color: $input-hover-border-color; + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + border-color: $input-focus-border-color; + box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color; + } + + &[disabled], + fieldset[disabled] & { + background-color: $input-disabled-background-color; + border-color: $input-disabled-border-color; + box-shadow: none; + color: $input-disabled-color; + + @include placeholder { + color: $input-disabled-placeholder-color; + } + } +} + +%input { + @include input; +} diff --git a/sass/form/tools.sass b/sass/form/tools.sass deleted file mode 100644 index 73b09b64..00000000 --- a/sass/form/tools.sass +++ /dev/null @@ -1,215 +0,0 @@ -$label-color: $text-strong !default -$label-weight: $weight-bold !default - -$help-size: $size-small !default - -$label-colors: $form-colors !default - -.label - color: $label-color - display: block - font-size: $size-normal - font-weight: $label-weight - &:not(:last-child) - margin-bottom: 0.5em - // Sizes - &.is-small - font-size: $size-small - &.is-medium - font-size: $size-medium - &.is-large - font-size: $size-large - -.help - display: block - font-size: $help-size - margin-top: 0.25rem - @each $name, $pair in $label-colors - $color: nth($pair, 1) - &.is-#{$name} - color: $color - -// Containers - -.field - &:not(:last-child) - margin-bottom: 0.75rem - // Modifiers - &.has-addons - display: flex - justify-content: flex-start - .control - &:not(:last-child) - +ltr-property("margin", -1px) - &:not(:first-child):not(:last-child) - .button, - .input, - .select select - border-radius: 0 - &:first-child:not(:only-child) - .button, - .input, - .select select - +ltr - border-bottom-right-radius: 0 - border-top-right-radius: 0 - +rtl - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &:last-child:not(:only-child) - .button, - .input, - .select select - +ltr - border-bottom-left-radius: 0 - border-top-left-radius: 0 - +rtl - border-bottom-right-radius: 0 - border-top-right-radius: 0 - .button, - .input, - .select select - &:not([disabled]) - &:hover, - &.is-hovered - z-index: 2 - &:focus, - &.is-focused, - &:active, - &.is-active - z-index: 3 - &:hover - z-index: 4 - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.has-addons-centered - justify-content: center - &.has-addons-right - justify-content: flex-end - &.has-addons-fullwidth - .control - flex-grow: 1 - flex-shrink: 0 - &.is-grouped - display: flex - justify-content: flex-start - & > .control - flex-shrink: 0 - &:not(:last-child) - margin-bottom: 0 - +ltr-property("margin", 0.75rem) - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-grouped-centered - justify-content: center - &.is-grouped-right - justify-content: flex-end - &.is-grouped-multiline - flex-wrap: wrap - & > .control - &:last-child, - &:not(:last-child) - margin-bottom: 0.75rem - &:last-child - margin-bottom: -0.75rem - &:not(:last-child) - margin-bottom: 0 - &.is-horizontal - +tablet - display: flex - -.field-label - .label - font-size: inherit - +mobile - margin-bottom: 0.5rem - +tablet - flex-basis: 0 - flex-grow: 1 - flex-shrink: 0 - +ltr-property("margin", 1.5rem) - text-align: right - &.is-small - font-size: $size-small - padding-top: 0.375em - &.is-normal - padding-top: 0.375em - &.is-medium - font-size: $size-medium - padding-top: 0.375em - &.is-large - font-size: $size-large - padding-top: 0.375em - -.field-body - .field .field - margin-bottom: 0 - +tablet - display: flex - flex-basis: 0 - flex-grow: 5 - flex-shrink: 1 - .field - margin-bottom: 0 - & > .field - flex-shrink: 1 - &:not(.is-narrow) - flex-grow: 1 - &:not(:last-child) - +ltr-property("margin", 0.75rem) - -.control - box-sizing: border-box - clear: both - font-size: $size-normal - position: relative - text-align: inherit - // Modifiers - &.has-icons-left, - &.has-icons-right - .input, - .select - &:focus - & ~ .icon - color: $input-icon-active-color - &.is-small ~ .icon - font-size: $size-small - &.is-medium ~ .icon - font-size: $size-medium - &.is-large ~ .icon - font-size: $size-large - .icon - color: $input-icon-color - height: $input-height - pointer-events: none - position: absolute - top: 0 - width: $input-height - z-index: 4 - &.has-icons-left - .input, - .select select - padding-left: $input-height - .icon.is-left - left: 0 - &.has-icons-right - .input, - .select select - padding-right: $input-height - .icon.is-right - right: 0 - &.is-loading - &::after - @extend %loader - position: absolute !important - +ltr-position(0.625em) - top: 0.625em - z-index: 4 - &.is-small:after - font-size: $size-small - &.is-medium:after - font-size: $size-medium - &.is-large:after - font-size: $size-large diff --git a/sass/form/tools.scss b/sass/form/tools.scss new file mode 100644 index 00000000..85f8edbb --- /dev/null +++ b/sass/form/tools.scss @@ -0,0 +1,360 @@ +$label-color: $text-strong !default; +$label-weight: $weight-bold !default; + +$help-size: $size-small !default; + +$label-colors: $form-colors !default; + +.label { + color: $label-color; + display: block; + font-size: $size-normal; + font-weight: $label-weight; + + &:not(:last-child) { + margin-bottom: 0.5em; + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} + +.help { + display: block; + font-size: $help-size; + margin-top: 0.25rem; + + @each $name, $pair in $label-colors { + $color: nth($pair, 1); + + &.is-#{$name} { + color: $color; + } + } +} + +// Containers + +.field { + &:not(:last-child) { + margin-bottom: 0.75rem; + } + + // Modifiers + &.has-addons { + display: flex; + justify-content: flex-start; + + .control { + &:not(:last-child) { + @include ltr-property("margin", -1px); + } + + &:not(:first-child):not(:last-child) { + .button, + .input, + .select select { + border-radius: 0; + } + } + + &:first-child:not(:only-child) { + .button, + .input, + .select select { + @include ltr { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + + @include rtl { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } + } + + &:last-child:not(:only-child) { + .button, + .input, + .select select { + @include ltr { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + + @include rtl { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + + .button, + .input, + .select select { + &:not([disabled]) { + &:hover, + &.is-hovered { + z-index: 2; + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + z-index: 3; + + &:hover { + z-index: 4; + } + } + } + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + + &.has-addons-centered { + justify-content: center; + } + + &.has-addons-right { + justify-content: flex-end; + } + + &.has-addons-fullwidth { + .control { + flex-grow: 1; + flex-shrink: 0; + } + } + } + + &.is-grouped { + display: flex; + justify-content: flex-start; + + & > .control { + flex-shrink: 0; + + &:not(:last-child) { + margin-bottom: 0; + + @include ltr-property("margin", 0.75rem); + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + + &.is-grouped-centered { + justify-content: center; + } + + &.is-grouped-right { + justify-content: flex-end; + } + + &.is-grouped-multiline { + flex-wrap: wrap; + + & > .control { + &:last-child, + &:not(:last-child) { + margin-bottom: 0.75rem; + } + } + + &:last-child { + margin-bottom: -0.75rem; + } + + &:not(:last-child) { + margin-bottom: 0; + } + } + } + + &.is-horizontal { + @include tablet { + display: flex; + } + } +} + +.field-label { + .label { + font-size: inherit; + } + + @include mobile { + margin-bottom: 0.5rem; + } + + + @include tablet { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + + @include ltr-property("margin", 1.5rem); + + text-align: right; + + &.is-small { + font-size: $size-small; + padding-top: 0.375em; + } + + &.is-normal { + padding-top: 0.375em; + } + + &.is-medium { + font-size: $size-medium; + padding-top: 0.375em; + } + + &.is-large { + font-size: $size-large; + padding-top: 0.375em; + } + } +} + +.field-body { + .field .field { + margin-bottom: 0; + } + + @include tablet { + display: flex; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; + + .field { + margin-bottom: 0; + } + + & > .field { + flex-shrink: 1; + + &:not(.is-narrow) { + flex-grow: 1; + } + + &:not(:last-child) { + @include ltr-property("margin", 0.75rem); + } + } + } +} + +.control { + box-sizing: border-box; + clear: both; + font-size: $size-normal; + position: relative; + text-align: inherit; + + // Modifiers + &.has-icons-left, + &.has-icons-right { + .input, + .select { + &:focus { + & ~ .icon { + color: $input-icon-active-color; + } + } + + &.is-small ~ .icon { + font-size: $size-small; + } + + &.is-medium ~ .icon { + font-size: $size-medium; + } + + &.is-large ~ .icon { + font-size: $size-large; + } + } + + .icon { + color: $input-icon-color; + height: $input-height; + pointer-events: none; + position: absolute; + top: 0; + width: $input-height; + z-index: 4; + } + } + + &.has-icons-left { + .input, + .select select { + padding-left: $input-height; + } + + .icon.is-left { + left: 0; + } + } + + &.has-icons-right { + .input, + .select select { + padding-right: $input-height; + } + + .icon.is-right { + right: 0; + } + } + + &.is-loading { + &::after { + @extend %loader; + + position: absolute !important; + + @include ltr-position(0.625em); + + top: 0.625em; + z-index: 4; + } + + &.is-small:after { + font-size: $size-small; + } + + &.is-medium:after { + font-size: $size-medium; + } + + &.is-large:after { + font-size: $size-large; + } + } +} diff --git a/sass/grid/_all.sass b/sass/grid/_all.sass deleted file mode 100644 index 0b5ed310..00000000 --- a/sass/grid/_all.sass +++ /dev/null @@ -1,5 +0,0 @@ -/* Bulma Grid */ -@charset "utf-8" - -@import "columns" -@import "tiles" diff --git a/sass/grid/_all.scss b/sass/grid/_all.scss new file mode 100644 index 00000000..4e829d75 --- /dev/null +++ b/sass/grid/_all.scss @@ -0,0 +1,5 @@ +/* Bulma Grid */ +@charset "utf-8"; + +@import "columns"; +@import "tiles"; diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass deleted file mode 100644 index e66112b5..00000000 --- a/sass/grid/columns.sass +++ /dev/null @@ -1,513 +0,0 @@ -@import "../utilities/mixins" - -$column-gap: 0.75rem !default - -.column - display: block - flex-basis: 0 - flex-grow: 1 - flex-shrink: 1 - padding: $column-gap - .columns.is-mobile > &.is-narrow - flex: none - width: unset - .columns.is-mobile > &.is-full - flex: none - width: 100% - .columns.is-mobile > &.is-three-quarters - flex: none - width: 75% - .columns.is-mobile > &.is-two-thirds - flex: none - width: 66.6666% - .columns.is-mobile > &.is-half - flex: none - width: 50% - .columns.is-mobile > &.is-one-third - flex: none - width: 33.3333% - .columns.is-mobile > &.is-one-quarter - flex: none - width: 25% - .columns.is-mobile > &.is-one-fifth - flex: none - width: 20% - .columns.is-mobile > &.is-two-fifths - flex: none - width: 40% - .columns.is-mobile > &.is-three-fifths - flex: none - width: 60% - .columns.is-mobile > &.is-four-fifths - flex: none - width: 80% - .columns.is-mobile > &.is-offset-three-quarters - +ltr-property("margin", 75%, false) - .columns.is-mobile > &.is-offset-two-thirds - +ltr-property("margin", 66.6666%, false) - .columns.is-mobile > &.is-offset-half - +ltr-property("margin", 50%, false) - .columns.is-mobile > &.is-offset-one-third - +ltr-property("margin", 33.3333%, false) - .columns.is-mobile > &.is-offset-one-quarter - +ltr-property("margin", 25%, false) - .columns.is-mobile > &.is-offset-one-fifth - +ltr-property("margin", 20%, false) - .columns.is-mobile > &.is-offset-two-fifths - +ltr-property("margin", 40%, false) - .columns.is-mobile > &.is-offset-three-fifths - +ltr-property("margin", 60%, false) - .columns.is-mobile > &.is-offset-four-fifths - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - .columns.is-mobile > &.is-#{$i} - flex: none - width: percentage(divide($i, 12)) - .columns.is-mobile > &.is-offset-#{$i} - +ltr-property("margin", percentage(divide($i, 12)), false) - +mobile - &.is-narrow-mobile - flex: none - width: unset - &.is-full-mobile - flex: none - width: 100% - &.is-three-quarters-mobile - flex: none - width: 75% - &.is-two-thirds-mobile - flex: none - width: 66.6666% - &.is-half-mobile - flex: none - width: 50% - &.is-one-third-mobile - flex: none - width: 33.3333% - &.is-one-quarter-mobile - flex: none - width: 25% - &.is-one-fifth-mobile - flex: none - width: 20% - &.is-two-fifths-mobile - flex: none - width: 40% - &.is-three-fifths-mobile - flex: none - width: 60% - &.is-four-fifths-mobile - flex: none - width: 80% - &.is-offset-three-quarters-mobile - +ltr-property("margin", 75%, false) - &.is-offset-two-thirds-mobile - +ltr-property("margin", 66.6666%, false) - &.is-offset-half-mobile - +ltr-property("margin", 50%, false) - &.is-offset-one-third-mobile - +ltr-property("margin", 33.3333%, false) - &.is-offset-one-quarter-mobile - +ltr-property("margin", 25%, false) - &.is-offset-one-fifth-mobile - +ltr-property("margin", 20%, false) - &.is-offset-two-fifths-mobile - +ltr-property("margin", 40%, false) - &.is-offset-three-fifths-mobile - +ltr-property("margin", 60%, false) - &.is-offset-four-fifths-mobile - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - &.is-#{$i}-mobile - flex: none - width: percentage(divide($i, 12)) - &.is-offset-#{$i}-mobile - +ltr-property("margin", percentage(divide($i, 12)), false) - +tablet - &.is-narrow, - &.is-narrow-tablet - flex: none - width: unset - &.is-full, - &.is-full-tablet - flex: none - width: 100% - &.is-three-quarters, - &.is-three-quarters-tablet - flex: none - width: 75% - &.is-two-thirds, - &.is-two-thirds-tablet - flex: none - width: 66.6666% - &.is-half, - &.is-half-tablet - flex: none - width: 50% - &.is-one-third, - &.is-one-third-tablet - flex: none - width: 33.3333% - &.is-one-quarter, - &.is-one-quarter-tablet - flex: none - width: 25% - &.is-one-fifth, - &.is-one-fifth-tablet - flex: none - width: 20% - &.is-two-fifths, - &.is-two-fifths-tablet - flex: none - width: 40% - &.is-three-fifths, - &.is-three-fifths-tablet - flex: none - width: 60% - &.is-four-fifths, - &.is-four-fifths-tablet - flex: none - width: 80% - &.is-offset-three-quarters, - &.is-offset-three-quarters-tablet - +ltr-property("margin", 75%, false) - &.is-offset-two-thirds, - &.is-offset-two-thirds-tablet - +ltr-property("margin", 66.6666%, false) - &.is-offset-half, - &.is-offset-half-tablet - +ltr-property("margin", 50%, false) - &.is-offset-one-third, - &.is-offset-one-third-tablet - +ltr-property("margin", 33.3333%, false) - &.is-offset-one-quarter, - &.is-offset-one-quarter-tablet - +ltr-property("margin", 25%, false) - &.is-offset-one-fifth, - &.is-offset-one-fifth-tablet - +ltr-property("margin", 20%, false) - &.is-offset-two-fifths, - &.is-offset-two-fifths-tablet - +ltr-property("margin", 40%, false) - &.is-offset-three-fifths, - &.is-offset-three-fifths-tablet - +ltr-property("margin", 60%, false) - &.is-offset-four-fifths, - &.is-offset-four-fifths-tablet - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - &.is-#{$i}, - &.is-#{$i}-tablet - flex: none - width: percentage(divide($i, 12)) - &.is-offset-#{$i}, - &.is-offset-#{$i}-tablet - +ltr-property("margin", percentage(divide($i, 12)), false) - +touch - &.is-narrow-touch - flex: none - width: unset - &.is-full-touch - flex: none - width: 100% - &.is-three-quarters-touch - flex: none - width: 75% - &.is-two-thirds-touch - flex: none - width: 66.6666% - &.is-half-touch - flex: none - width: 50% - &.is-one-third-touch - flex: none - width: 33.3333% - &.is-one-quarter-touch - flex: none - width: 25% - &.is-one-fifth-touch - flex: none - width: 20% - &.is-two-fifths-touch - flex: none - width: 40% - &.is-three-fifths-touch - flex: none - width: 60% - &.is-four-fifths-touch - flex: none - width: 80% - &.is-offset-three-quarters-touch - +ltr-property("margin", 75%, false) - &.is-offset-two-thirds-touch - +ltr-property("margin", 66.6666%, false) - &.is-offset-half-touch - +ltr-property("margin", 50%, false) - &.is-offset-one-third-touch - +ltr-property("margin", 33.3333%, false) - &.is-offset-one-quarter-touch - +ltr-property("margin", 25%, false) - &.is-offset-one-fifth-touch - +ltr-property("margin", 20%, false) - &.is-offset-two-fifths-touch - +ltr-property("margin", 40%, false) - &.is-offset-three-fifths-touch - +ltr-property("margin", 60%, false) - &.is-offset-four-fifths-touch - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - &.is-#{$i}-touch - flex: none - width: percentage(divide($i, 12)) - &.is-offset-#{$i}-touch - +ltr-property("margin", percentage(divide($i, 12)), false) - +desktop - &.is-narrow-desktop - flex: none - width: unset - &.is-full-desktop - flex: none - width: 100% - &.is-three-quarters-desktop - flex: none - width: 75% - &.is-two-thirds-desktop - flex: none - width: 66.6666% - &.is-half-desktop - flex: none - width: 50% - &.is-one-third-desktop - flex: none - width: 33.3333% - &.is-one-quarter-desktop - flex: none - width: 25% - &.is-one-fifth-desktop - flex: none - width: 20% - &.is-two-fifths-desktop - flex: none - width: 40% - &.is-three-fifths-desktop - flex: none - width: 60% - &.is-four-fifths-desktop - flex: none - width: 80% - &.is-offset-three-quarters-desktop - +ltr-property("margin", 75%, false) - &.is-offset-two-thirds-desktop - +ltr-property("margin", 66.6666%, false) - &.is-offset-half-desktop - +ltr-property("margin", 50%, false) - &.is-offset-one-third-desktop - +ltr-property("margin", 33.3333%, false) - &.is-offset-one-quarter-desktop - +ltr-property("margin", 25%, false) - &.is-offset-one-fifth-desktop - +ltr-property("margin", 20%, false) - &.is-offset-two-fifths-desktop - +ltr-property("margin", 40%, false) - &.is-offset-three-fifths-desktop - +ltr-property("margin", 60%, false) - &.is-offset-four-fifths-desktop - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - &.is-#{$i}-desktop - flex: none - width: percentage(divide($i, 12)) - &.is-offset-#{$i}-desktop - +ltr-property("margin", percentage(divide($i, 12)), false) - +widescreen - &.is-narrow-widescreen - flex: none - width: unset - &.is-full-widescreen - flex: none - width: 100% - &.is-three-quarters-widescreen - flex: none - width: 75% - &.is-two-thirds-widescreen - flex: none - width: 66.6666% - &.is-half-widescreen - flex: none - width: 50% - &.is-one-third-widescreen - flex: none - width: 33.3333% - &.is-one-quarter-widescreen - flex: none - width: 25% - &.is-one-fifth-widescreen - flex: none - width: 20% - &.is-two-fifths-widescreen - flex: none - width: 40% - &.is-three-fifths-widescreen - flex: none - width: 60% - &.is-four-fifths-widescreen - flex: none - width: 80% - &.is-offset-three-quarters-widescreen - +ltr-property("margin", 75%, false) - &.is-offset-two-thirds-widescreen - +ltr-property("margin", 66.6666%, false) - &.is-offset-half-widescreen - +ltr-property("margin", 50%, false) - &.is-offset-one-third-widescreen - +ltr-property("margin", 33.3333%, false) - &.is-offset-one-quarter-widescreen - +ltr-property("margin", 25%, false) - &.is-offset-one-fifth-widescreen - +ltr-property("margin", 20%, false) - &.is-offset-two-fifths-widescreen - +ltr-property("margin", 40%, false) - &.is-offset-three-fifths-widescreen - +ltr-property("margin", 60%, false) - &.is-offset-four-fifths-widescreen - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - &.is-#{$i}-widescreen - flex: none - width: percentage(divide($i, 12)) - &.is-offset-#{$i}-widescreen - +ltr-property("margin", percentage(divide($i, 12)), false) - +fullhd - &.is-narrow-fullhd - flex: none - width: unset - &.is-full-fullhd - flex: none - width: 100% - &.is-three-quarters-fullhd - flex: none - width: 75% - &.is-two-thirds-fullhd - flex: none - width: 66.6666% - &.is-half-fullhd - flex: none - width: 50% - &.is-one-third-fullhd - flex: none - width: 33.3333% - &.is-one-quarter-fullhd - flex: none - width: 25% - &.is-one-fifth-fullhd - flex: none - width: 20% - &.is-two-fifths-fullhd - flex: none - width: 40% - &.is-three-fifths-fullhd - flex: none - width: 60% - &.is-four-fifths-fullhd - flex: none - width: 80% - &.is-offset-three-quarters-fullhd - +ltr-property("margin", 75%, false) - &.is-offset-two-thirds-fullhd - +ltr-property("margin", 66.6666%, false) - &.is-offset-half-fullhd - +ltr-property("margin", 50%, false) - &.is-offset-one-third-fullhd - +ltr-property("margin", 33.3333%, false) - &.is-offset-one-quarter-fullhd - +ltr-property("margin", 25%, false) - &.is-offset-one-fifth-fullhd - +ltr-property("margin", 20%, false) - &.is-offset-two-fifths-fullhd - +ltr-property("margin", 40%, false) - &.is-offset-three-fifths-fullhd - +ltr-property("margin", 60%, false) - &.is-offset-four-fifths-fullhd - +ltr-property("margin", 80%, false) - @for $i from 0 through 12 - &.is-#{$i}-fullhd - flex: none - width: percentage(divide($i, 12)) - &.is-offset-#{$i}-fullhd - +ltr-property("margin", percentage(divide($i, 12)), false) - -.columns - +ltr-property("margin", (-$column-gap), false) - +ltr-property("margin", (-$column-gap)) - margin-top: (-$column-gap) - &:last-child - margin-bottom: (-$column-gap) - &:not(:last-child) - margin-bottom: calc(1.5rem - #{$column-gap}) - // Modifiers - &.is-centered - justify-content: center - &.is-gapless - +ltr-property("margin", 0, false) - +ltr-property("margin", 0) - margin-top: 0 - & > .column - margin: 0 - padding: 0 !important - &:not(:last-child) - margin-bottom: 1.5rem - &:last-child - margin-bottom: 0 - &.is-mobile - display: flex - &.is-multiline - flex-wrap: wrap - &.is-vcentered - align-items: center - // Responsiveness - +tablet - &:not(.is-desktop) - display: flex - +desktop - // Modifiers - &.is-desktop - display: flex - -@if $variable-columns - .columns.is-variable - --columnGap: 0.75rem - +ltr-property("margin", calc(-1 * var(--columnGap)), false) - +ltr-property("margin", calc(-1 * var(--columnGap))) - > .column - padding-left: var(--columnGap) - padding-right: var(--columnGap) - @for $i from 0 through 8 - &.is-#{$i} - --columnGap: #{$i * 0.25rem} - +mobile - &.is-#{$i}-mobile - --columnGap: #{$i * 0.25rem} - +tablet - &.is-#{$i}-tablet - --columnGap: #{$i * 0.25rem} - +tablet-only - &.is-#{$i}-tablet-only - --columnGap: #{$i * 0.25rem} - +touch - &.is-#{$i}-touch - --columnGap: #{$i * 0.25rem} - +desktop - &.is-#{$i}-desktop - --columnGap: #{$i * 0.25rem} - +desktop-only - &.is-#{$i}-desktop-only - --columnGap: #{$i * 0.25rem} - +widescreen - &.is-#{$i}-widescreen - --columnGap: #{$i * 0.25rem} - +widescreen-only - &.is-#{$i}-widescreen-only - --columnGap: #{$i * 0.25rem} - +fullhd - &.is-#{$i}-fullhd - --columnGap: #{$i * 0.25rem} diff --git a/sass/grid/columns.scss b/sass/grid/columns.scss new file mode 100644 index 00000000..1182fd27 --- /dev/null +++ b/sass/grid/columns.scss @@ -0,0 +1,913 @@ +@import "../utilities/mixins"; + +$column-gap: 0.75rem !default; + +.column { + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + padding: $column-gap; + + .columns.is-mobile > &.is-narrow { + flex: none; + width: unset; + } + + .columns.is-mobile > &.is-full { + flex: none; + width: 100%; + } + + .columns.is-mobile > &.is-three-quarters { + flex: none; + width: 75%; + } + + .columns.is-mobile > &.is-two-thirds { + flex: none; + width: 66.6666%; + } + + .columns.is-mobile > &.is-half { + flex: none; + width: 50%; + } + + .columns.is-mobile > &.is-one-third { + flex: none; + width: 33.3333%; + } + + .columns.is-mobile > &.is-one-quarter { + flex: none; + width: 25%; + } + + .columns.is-mobile > &.is-one-fifth { + flex: none; + width: 20%; + } + + .columns.is-mobile > &.is-two-fifths { + flex: none; + width: 40%; + } + + .columns.is-mobile > &.is-three-fifths { + flex: none; + width: 60%; + } + + .columns.is-mobile > &.is-four-fifths { + flex: none; + width: 80%; + } + + .columns.is-mobile > &.is-offset-three-quarters { + @include ltr-property("margin", 75%, false); + } + + .columns.is-mobile > &.is-offset-two-thirds { + @include ltr-property("margin", 66.6666%, false); + } + + .columns.is-mobile > &.is-offset-half { + @include ltr-property("margin", 50%, false); + } + + .columns.is-mobile > &.is-offset-one-third { + @include ltr-property("margin", 33.3333%, false); + } + + .columns.is-mobile > &.is-offset-one-quarter { + @include ltr-property("margin", 25%, false); + } + + .columns.is-mobile > &.is-offset-one-fifth { + @include ltr-property("margin", 20%, false); + } + + .columns.is-mobile > &.is-offset-two-fifths { + @include ltr-property("margin", 40%, false); + } + + .columns.is-mobile > &.is-offset-three-fifths { + @include ltr-property("margin", 60%, false); + } + + .columns.is-mobile > &.is-offset-four-fifths { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + .columns.is-mobile > &.is-#{$i} { + flex: none; + width: percentage(divide($i, 12)); + } + + .columns.is-mobile > &.is-offset-#{$i} { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + + @include mobile { + &.is-narrow-mobile { + flex: none; + width: unset; + } + + &.is-full-mobile { + flex: none; + width: 100%; + } + + &.is-three-quarters-mobile { + flex: none; + width: 75%; + } + + &.is-two-thirds-mobile { + flex: none; + width: 66.6666%; + } + + &.is-half-mobile { + flex: none; + width: 50%; + } + + &.is-one-third-mobile { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-mobile { + flex: none; + width: 25%; + } + + &.is-one-fifth-mobile { + flex: none; + width: 20%; + } + + &.is-two-fifths-mobile { + flex: none; + width: 40%; + } + + &.is-three-fifths-mobile { + flex: none; + width: 60%; + } + + &.is-four-fifths-mobile { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-mobile { + @include ltr-property("margin", 75%, false); + } + + &.is-offset-two-thirds-mobile { + @include ltr-property("margin", 66.6666%, false); + } + + &.is-offset-half-mobile { + @include ltr-property("margin", 50%, false); + } + + &.is-offset-one-third-mobile { + @include ltr-property("margin", 33.3333%, false); + } + + &.is-offset-one-quarter-mobile { + @include ltr-property("margin", 25%, false); + } + + &.is-offset-one-fifth-mobile { + @include ltr-property("margin", 20%, false); + } + + &.is-offset-two-fifths-mobile { + @include ltr-property("margin", 40%, false); + } + + &.is-offset-three-fifths-mobile { + @include ltr-property("margin", 60%, false); + } + + &.is-offset-four-fifths-mobile { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + &.is-#{$i}-mobile { + flex: none; + width: percentage(divide($i, 12)); + } + + &.is-offset-#{$i}-mobile { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + } + + + @include tablet { + &.is-narrow, + &.is-narrow-tablet { + flex: none; + width: unset; + } + + &.is-full, + &.is-full-tablet { + flex: none; + width: 100%; + } + + &.is-three-quarters, + &.is-three-quarters-tablet { + flex: none; + width: 75%; + } + + &.is-two-thirds, + &.is-two-thirds-tablet { + flex: none; + width: 66.6666%; + } + + &.is-half, + &.is-half-tablet { + flex: none; + width: 50%; + } + + &.is-one-third, + &.is-one-third-tablet { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter, + &.is-one-quarter-tablet { + flex: none; + width: 25%; + } + + &.is-one-fifth, + &.is-one-fifth-tablet { + flex: none; + width: 20%; + } + + &.is-two-fifths, + &.is-two-fifths-tablet { + flex: none; + width: 40%; + } + + &.is-three-fifths, + &.is-three-fifths-tablet { + flex: none; + width: 60%; + } + + &.is-four-fifths, + &.is-four-fifths-tablet { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters, + &.is-offset-three-quarters-tablet { + @include ltr-property("margin", 75%, false); + } + + &.is-offset-two-thirds, + &.is-offset-two-thirds-tablet { + @include ltr-property("margin", 66.6666%, false); + } + + &.is-offset-half, + &.is-offset-half-tablet { + @include ltr-property("margin", 50%, false); + } + + &.is-offset-one-third, + &.is-offset-one-third-tablet { + @include ltr-property("margin", 33.3333%, false); + } + + &.is-offset-one-quarter, + &.is-offset-one-quarter-tablet { + @include ltr-property("margin", 25%, false); + } + + &.is-offset-one-fifth, + &.is-offset-one-fifth-tablet { + @include ltr-property("margin", 20%, false); + } + + &.is-offset-two-fifths, + &.is-offset-two-fifths-tablet { + @include ltr-property("margin", 40%, false); + } + + &.is-offset-three-fifths, + &.is-offset-three-fifths-tablet { + @include ltr-property("margin", 60%, false); + } + + &.is-offset-four-fifths, + &.is-offset-four-fifths-tablet { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + &.is-#{$i}, + &.is-#{$i}-tablet { + flex: none; + width: percentage(divide($i, 12)); + } + + &.is-offset-#{$i}, + &.is-offset-#{$i}-tablet { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + } + + + @include touch { + &.is-narrow-touch { + flex: none; + width: unset; + } + + &.is-full-touch { + flex: none; + width: 100%; + } + + &.is-three-quarters-touch { + flex: none; + width: 75%; + } + + &.is-two-thirds-touch { + flex: none; + width: 66.6666%; + } + + &.is-half-touch { + flex: none; + width: 50%; + } + + &.is-one-third-touch { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-touch { + flex: none; + width: 25%; + } + + &.is-one-fifth-touch { + flex: none; + width: 20%; + } + + &.is-two-fifths-touch { + flex: none; + width: 40%; + } + + &.is-three-fifths-touch { + flex: none; + width: 60%; + } + + &.is-four-fifths-touch { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-touch { + @include ltr-property("margin", 75%, false); + } + + &.is-offset-two-thirds-touch { + @include ltr-property("margin", 66.6666%, false); + } + + &.is-offset-half-touch { + @include ltr-property("margin", 50%, false); + } + + &.is-offset-one-third-touch { + @include ltr-property("margin", 33.3333%, false); + } + + &.is-offset-one-quarter-touch { + @include ltr-property("margin", 25%, false); + } + + &.is-offset-one-fifth-touch { + @include ltr-property("margin", 20%, false); + } + + &.is-offset-two-fifths-touch { + @include ltr-property("margin", 40%, false); + } + + &.is-offset-three-fifths-touch { + @include ltr-property("margin", 60%, false); + } + + &.is-offset-four-fifths-touch { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + &.is-#{$i}-touch { + flex: none; + width: percentage(divide($i, 12)); + } + + &.is-offset-#{$i}-touch { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + } + + + @include desktop { + &.is-narrow-desktop { + flex: none; + width: unset; + } + + &.is-full-desktop { + flex: none; + width: 100%; + } + + &.is-three-quarters-desktop { + flex: none; + width: 75%; + } + + &.is-two-thirds-desktop { + flex: none; + width: 66.6666%; + } + + &.is-half-desktop { + flex: none; + width: 50%; + } + + &.is-one-third-desktop { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-desktop { + flex: none; + width: 25%; + } + + &.is-one-fifth-desktop { + flex: none; + width: 20%; + } + + &.is-two-fifths-desktop { + flex: none; + width: 40%; + } + + &.is-three-fifths-desktop { + flex: none; + width: 60%; + } + + &.is-four-fifths-desktop { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-desktop { + @include ltr-property("margin", 75%, false); + } + + &.is-offset-two-thirds-desktop { + @include ltr-property("margin", 66.6666%, false); + } + + &.is-offset-half-desktop { + @include ltr-property("margin", 50%, false); + } + + &.is-offset-one-third-desktop { + @include ltr-property("margin", 33.3333%, false); + } + + &.is-offset-one-quarter-desktop { + @include ltr-property("margin", 25%, false); + } + + &.is-offset-one-fifth-desktop { + @include ltr-property("margin", 20%, false); + } + + &.is-offset-two-fifths-desktop { + @include ltr-property("margin", 40%, false); + } + + &.is-offset-three-fifths-desktop { + @include ltr-property("margin", 60%, false); + } + + &.is-offset-four-fifths-desktop { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + &.is-#{$i}-desktop { + flex: none; + width: percentage(divide($i, 12)); + } + + &.is-offset-#{$i}-desktop { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + } + + + @include widescreen { + &.is-narrow-widescreen { + flex: none; + width: unset; + } + + &.is-full-widescreen { + flex: none; + width: 100%; + } + + &.is-three-quarters-widescreen { + flex: none; + width: 75%; + } + + &.is-two-thirds-widescreen { + flex: none; + width: 66.6666%; + } + + &.is-half-widescreen { + flex: none; + width: 50%; + } + + &.is-one-third-widescreen { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-widescreen { + flex: none; + width: 25%; + } + + &.is-one-fifth-widescreen { + flex: none; + width: 20%; + } + + &.is-two-fifths-widescreen { + flex: none; + width: 40%; + } + + &.is-three-fifths-widescreen { + flex: none; + width: 60%; + } + + &.is-four-fifths-widescreen { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-widescreen { + @include ltr-property("margin", 75%, false); + } + + &.is-offset-two-thirds-widescreen { + @include ltr-property("margin", 66.6666%, false); + } + + &.is-offset-half-widescreen { + @include ltr-property("margin", 50%, false); + } + + &.is-offset-one-third-widescreen { + @include ltr-property("margin", 33.3333%, false); + } + + &.is-offset-one-quarter-widescreen { + @include ltr-property("margin", 25%, false); + } + + &.is-offset-one-fifth-widescreen { + @include ltr-property("margin", 20%, false); + } + + &.is-offset-two-fifths-widescreen { + @include ltr-property("margin", 40%, false); + } + + &.is-offset-three-fifths-widescreen { + @include ltr-property("margin", 60%, false); + } + + &.is-offset-four-fifths-widescreen { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + &.is-#{$i}-widescreen { + flex: none; + width: percentage(divide($i, 12)); + } + + &.is-offset-#{$i}-widescreen { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + } + + + @include fullhd { + &.is-narrow-fullhd { + flex: none; + width: unset; + } + + &.is-full-fullhd { + flex: none; + width: 100%; + } + + &.is-three-quarters-fullhd { + flex: none; + width: 75%; + } + + &.is-two-thirds-fullhd { + flex: none; + width: 66.6666%; + } + + &.is-half-fullhd { + flex: none; + width: 50%; + } + + &.is-one-third-fullhd { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-fullhd { + flex: none; + width: 25%; + } + + &.is-one-fifth-fullhd { + flex: none; + width: 20%; + } + + &.is-two-fifths-fullhd { + flex: none; + width: 40%; + } + + &.is-three-fifths-fullhd { + flex: none; + width: 60%; + } + + &.is-four-fifths-fullhd { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-fullhd { + @include ltr-property("margin", 75%, false); + } + + &.is-offset-two-thirds-fullhd { + @include ltr-property("margin", 66.6666%, false); + } + + &.is-offset-half-fullhd { + @include ltr-property("margin", 50%, false); + } + + &.is-offset-one-third-fullhd { + @include ltr-property("margin", 33.3333%, false); + } + + &.is-offset-one-quarter-fullhd { + @include ltr-property("margin", 25%, false); + } + + &.is-offset-one-fifth-fullhd { + @include ltr-property("margin", 20%, false); + } + + &.is-offset-two-fifths-fullhd { + @include ltr-property("margin", 40%, false); + } + + &.is-offset-three-fifths-fullhd { + @include ltr-property("margin", 60%, false); + } + + &.is-offset-four-fifths-fullhd { + @include ltr-property("margin", 80%, false); + } + + @for $i from 0 through 12 { + &.is-#{$i}-fullhd { + flex: none; + width: percentage(divide($i, 12)); + } + + &.is-offset-#{$i}-fullhd { + @include ltr-property("margin", percentage(divide($i, 12)), false); + } + } + } +} + +.columns { + @include ltr-property("margin", -$column-gap, false); + @include ltr-property("margin", -$column-gap); + + margin-top: -$column-gap; + + &:last-child { + margin-bottom: -$column-gap; + } + + &:not(:last-child) { + margin-bottom: calc(1.5rem - #{$column-gap}); + } + + // Modifiers + &.is-centered { + justify-content: center; + } + + &.is-gapless { + @include ltr-property("margin", 0, false); + @include ltr-property("margin", 0); + + margin-top: 0; + + & > .column { + margin: 0; + padding: 0 !important; + } + + &:not(:last-child) { + margin-bottom: 1.5rem; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.is-mobile { + display: flex; + } + + &.is-multiline { + flex-wrap: wrap; + } + + &.is-vcentered { + align-items: center; + } + + // Responsiveness + @include tablet { + &:not(.is-desktop) { + display: flex; + } + } + + + @include desktop { + // Modifiers + &.is-desktop { + display: flex; + } + } +} + +@if $variable-columns { + .columns.is-variable { + --columnGap: 0.75rem; + + @include ltr-property("margin", calc(-1 * var(--columnGap)), false); + @include ltr-property("margin", calc(-1 * var(--columnGap))); + + > .column { + padding-left: var(--columnGap); + padding-right: var(--columnGap); + } + + @for $i from 0 through 8 { + &.is-#{$i} { + --columnGap: #{$i * 0.25rem}; + } + + @include mobile { + &.is-#{$i}-mobile { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include tablet { + &.is-#{$i}-tablet { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include tablet-only { + &.is-#{$i}-tablet-only { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include touch { + &.is-#{$i}-touch { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include desktop { + &.is-#{$i}-desktop { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include desktop-only { + &.is-#{$i}-desktop-only { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include widescreen { + &.is-#{$i}-widescreen { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include widescreen-only { + &.is-#{$i}-widescreen-only { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include fullhd { + &.is-#{$i}-fullhd { + --columnGap: #{$i * 0.25rem}; + } + } + } + } +} diff --git a/sass/grid/tiles.sass b/sass/grid/tiles.sass deleted file mode 100644 index d22d738d..00000000 --- a/sass/grid/tiles.sass +++ /dev/null @@ -1,36 +0,0 @@ -@import "../utilities/mixins" - -$tile-spacing: 0.75rem !default - -.tile - align-items: stretch - display: block - flex-basis: 0 - flex-grow: 1 - flex-shrink: 1 - min-height: min-content - // Modifiers - &.is-ancestor - margin-left: $tile-spacing * -1 - margin-right: $tile-spacing * -1 - margin-top: $tile-spacing * -1 - &:last-child - margin-bottom: $tile-spacing * -1 - &:not(:last-child) - margin-bottom: $tile-spacing - &.is-child - margin: 0 !important - &.is-parent - padding: $tile-spacing - &.is-vertical - flex-direction: column - & > .tile.is-child:not(:last-child) - margin-bottom: 1.5rem !important - // Responsiveness - +tablet - &:not(.is-child) - display: flex - @for $i from 1 through 12 - &.is-#{$i} - flex: none - width: (divide($i, 12)) * 100% diff --git a/sass/grid/tiles.scss b/sass/grid/tiles.scss new file mode 100644 index 00000000..2b8c7097 --- /dev/null +++ b/sass/grid/tiles.scss @@ -0,0 +1,57 @@ +@import "../utilities/mixins"; + +$tile-spacing: 0.75rem !default; + +.tile { + align-items: stretch; + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + min-height: min-content; + + // Modifiers + &.is-ancestor { + margin-left: $tile-spacing * -1; + margin-right: $tile-spacing * -1; + margin-top: $tile-spacing * -1; + + &:last-child { + margin-bottom: $tile-spacing * -1; + } + + &:not(:last-child) { + margin-bottom: $tile-spacing; + } + } + + &.is-child { + margin: 0 !important; + } + + &.is-parent { + padding: $tile-spacing; + } + + &.is-vertical { + flex-direction: column; + + & > .tile.is-child:not(:last-child) { + margin-bottom: 1.5rem !important; + } + } + + // Responsiveness + @include tablet { + &:not(.is-child) { + display: flex; + } + + @for $i from 1 through 12 { + &.is-#{$i} { + flex: none; + width: divide($i, 12) * 100%; + } + } + } +} diff --git a/sass/helpers/_all.sass b/sass/helpers/_all.sass deleted file mode 100644 index d673da68..00000000 --- a/sass/helpers/_all.sass +++ /dev/null @@ -1,12 +0,0 @@ -/* Bulma Helpers */ -@charset "utf-8" - -@import "color" -@import "flexbox" -@import "float" -@import "other" -@import "overflow" -@import "position" -@import "spacing" -@import "typography" -@import "visibility" diff --git a/sass/helpers/_all.scss b/sass/helpers/_all.scss new file mode 100644 index 00000000..b247c3f3 --- /dev/null +++ b/sass/helpers/_all.scss @@ -0,0 +1,12 @@ +/* Bulma Helpers */ +@charset "utf-8"; + +@import "color"; +@import "flexbox"; +@import "float"; +@import "other"; +@import "overflow"; +@import "position"; +@import "spacing"; +@import "typography"; +@import "visibility"; diff --git a/sass/helpers/color.sass b/sass/helpers/color.sass deleted file mode 100644 index b7a8a503..00000000 --- a/sass/helpers/color.sass +++ /dev/null @@ -1,39 +0,0 @@ -@import "../utilities/derived-variables" - -@each $name, $pair in $colors - $color: nth($pair, 1) - .has-text-#{$name} - color: $color !important - a.has-text-#{$name} - &:hover, - &:focus - color: bulmaDarken($color, 10%) !important - .has-background-#{$name} - background-color: $color !important - @if length($pair) >= 4 - $color-light: nth($pair, 3) - $color-dark: nth($pair, 4) - // Light - .has-text-#{$name}-light - color: $color-light !important - a.has-text-#{$name}-light - &:hover, - &:focus - color: bulmaDarken($color-light, 10%) !important - .has-background-#{$name}-light - background-color: $color-light !important - // Dark - .has-text-#{$name}-dark - color: $color-dark !important - a.has-text-#{$name}-dark - &:hover, - &:focus - color: bulmaLighten($color-dark, 10%) !important - .has-background-#{$name}-dark - background-color: $color-dark !important - -@each $name, $shade in $shades - .has-text-#{$name} - color: $shade !important - .has-background-#{$name} - background-color: $shade !important diff --git a/sass/helpers/color.scss b/sass/helpers/color.scss new file mode 100644 index 00000000..91214cce --- /dev/null +++ b/sass/helpers/color.scss @@ -0,0 +1,67 @@ +@import "../utilities/derived-variables"; + +@each $name, $pair in $colors { + $color: nth($pair, 1); + + .has-text-#{$name} { + color: $color !important; + } + + a.has-text-#{$name} { + &:hover, + &:focus { + color: bulmaDarken($color, 10%) !important; + } + } + + .has-background-#{$name} { + background-color: $color !important; + } + + @if length($pair) >= 4 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + // Light + .has-text-#{$name}-light { + color: $color-light !important; + } + + a.has-text-#{$name}-light { + &:hover, + &:focus { + color: bulmaDarken($color-light, 10%) !important; + } + } + + .has-background-#{$name}-light { + background-color: $color-light !important; + } + + // Dark + .has-text-#{$name}-dark { + color: $color-dark !important; + } + + a.has-text-#{$name}-dark { + &:hover, + &:focus { + color: bulmaLighten($color-dark, 10%) !important; + } + } + + .has-background-#{$name}-dark { + background-color: $color-dark !important; + } + } +} + +@each $name, $shade in $shades { + .has-text-#{$name} { + color: $shade !important; + } + + .has-background-#{$name} { + background-color: $shade !important; + } +} diff --git a/sass/helpers/flexbox.sass b/sass/helpers/flexbox.sass deleted file mode 100644 index 2538a2db..00000000 --- a/sass/helpers/flexbox.sass +++ /dev/null @@ -1,35 +0,0 @@ -$flex-direction-values: row, row-reverse, column, column-reverse -@each $value in $flex-direction-values - .is-flex-direction-#{$value} - flex-direction: $value !important - -$flex-wrap-values: nowrap, wrap, wrap-reverse -@each $value in $flex-wrap-values - .is-flex-wrap-#{$value} - flex-wrap: $value !important - -$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right -@each $value in $justify-content-values - .is-justify-content-#{$value} - justify-content: $value !important - -$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline -@each $value in $align-content-values - .is-align-content-#{$value} - align-content: $value !important - -$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end -@each $value in $align-items-values - .is-align-items-#{$value} - align-items: $value !important - -$align-self-values: auto, flex-start, flex-end, center, baseline, stretch -@each $value in $align-self-values - .is-align-self-#{$value} - align-self: $value !important - -$flex-operators: grow, shrink -@each $operator in $flex-operators - @for $i from 0 through 5 - .is-flex-#{$operator}-#{$i} - flex-#{$operator}: $i !important diff --git a/sass/helpers/flexbox.scss b/sass/helpers/flexbox.scss new file mode 100644 index 00000000..b7b4d9b2 --- /dev/null +++ b/sass/helpers/flexbox.scss @@ -0,0 +1,57 @@ +$flex-direction-values: row, row-reverse, column, column-reverse; + +@each $value in $flex-direction-values { + .is-flex-direction-#{$value} { + flex-direction: $value !important; + } +} + +$flex-wrap-values: nowrap, wrap, wrap-reverse; + +@each $value in $flex-wrap-values { + .is-flex-wrap-#{$value} { + flex-wrap: $value !important; + } +} + +$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right; + +@each $value in $justify-content-values { + .is-justify-content-#{$value} { + justify-content: $value !important; + } +} + +$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline; + +@each $value in $align-content-values { + .is-align-content-#{$value} { + align-content: $value !important; + } +} + +$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end; + +@each $value in $align-items-values { + .is-align-items-#{$value} { + align-items: $value !important; + } +} + +$align-self-values: auto, flex-start, flex-end, center, baseline, stretch; + +@each $value in $align-self-values { + .is-align-self-#{$value} { + align-self: $value !important; + } +} + +$flex-operators: grow, shrink; + +@each $operator in $flex-operators { + @for $i from 0 through 5 { + .is-flex-#{$operator}-#{$i} { + flex-#{$operator}: $i !important; + } + } +} diff --git a/sass/helpers/float.sass b/sass/helpers/float.sass deleted file mode 100644 index f62f24e0..00000000 --- a/sass/helpers/float.sass +++ /dev/null @@ -1,10 +0,0 @@ -@import "../utilities/mixins" - -.is-clearfix - +clearfix - -.is-pulled-left - float: left !important - -.is-pulled-right - float: right !important diff --git a/sass/helpers/float.scss b/sass/helpers/float.scss new file mode 100644 index 00000000..193dac1e --- /dev/null +++ b/sass/helpers/float.scss @@ -0,0 +1,13 @@ +@import "../utilities/mixins"; + +.is-clearfix { + @include clearfix; +} + +.is-pulled-left { + float: left !important; +} + +.is-pulled-right { + float: right !important; +} diff --git a/sass/helpers/other.sass b/sass/helpers/other.sass deleted file mode 100644 index 6e2e63ce..00000000 --- a/sass/helpers/other.sass +++ /dev/null @@ -1,14 +0,0 @@ -@import "../utilities/mixins" - -.is-radiusless - border-radius: 0 !important - -.is-shadowless - box-shadow: none !important - -.is-clickable - cursor: pointer !important - pointer-events: all !important - -.is-unselectable - @extend %unselectable diff --git a/sass/helpers/other.scss b/sass/helpers/other.scss new file mode 100644 index 00000000..a2d4cfed --- /dev/null +++ b/sass/helpers/other.scss @@ -0,0 +1,18 @@ +@import "../utilities/mixins"; + +.is-radiusless { + border-radius: 0 !important; +} + +.is-shadowless { + box-shadow: none !important; +} + +.is-clickable { + cursor: pointer !important; + pointer-events: all !important; +} + +.is-unselectable { + @extend %unselectable; +} diff --git a/sass/helpers/overflow.sass b/sass/helpers/overflow.sass deleted file mode 100644 index ef1e3ef0..00000000 --- a/sass/helpers/overflow.sass +++ /dev/null @@ -1,2 +0,0 @@ -.is-clipped - overflow: hidden !important diff --git a/sass/helpers/overflow.scss b/sass/helpers/overflow.scss new file mode 100644 index 00000000..e8984804 --- /dev/null +++ b/sass/helpers/overflow.scss @@ -0,0 +1,3 @@ +.is-clipped { + overflow: hidden !important; +} diff --git a/sass/helpers/position.sass b/sass/helpers/position.sass deleted file mode 100644 index 4b8fda47..00000000 --- a/sass/helpers/position.sass +++ /dev/null @@ -1,7 +0,0 @@ -@import "../utilities/mixins" - -.is-overlay - @extend %overlay - -.is-relative - position: relative !important diff --git a/sass/helpers/position.scss b/sass/helpers/position.scss new file mode 100644 index 00000000..dc881146 --- /dev/null +++ b/sass/helpers/position.scss @@ -0,0 +1,9 @@ +@import "../utilities/mixins"; + +.is-overlay { + @extend %overlay; +} + +.is-relative { + position: relative !important; +} diff --git a/sass/helpers/spacing.sass b/sass/helpers/spacing.sass deleted file mode 100644 index 0237c738..00000000 --- a/sass/helpers/spacing.sass +++ /dev/null @@ -1,31 +0,0 @@ -.is-marginless - margin: 0 !important - -.is-paddingless - padding: 0 !important - -$spacing-shortcuts: ("margin": "m", "padding": "p") !default -$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default -$spacing-horizontal: "x" !default -$spacing-vertical: "y" !default -$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default - -@each $property, $shortcut in $spacing-shortcuts - @each $name, $value in $spacing-values - // All directions - .#{$shortcut}-#{$name} - #{$property}: $value !important - // Cardinal directions - @each $direction, $suffix in $spacing-directions - .#{$shortcut}#{$suffix}-#{$name} - #{$property}-#{$direction}: $value !important - // Horizontal axis - @if $spacing-horizontal != null - .#{$shortcut}#{$spacing-horizontal}-#{$name} - #{$property}-left: $value !important - #{$property}-right: $value !important - // Vertical axis - @if $spacing-vertical != null - .#{$shortcut}#{$spacing-vertical}-#{$name} - #{$property}-top: $value !important - #{$property}-bottom: $value !important diff --git a/sass/helpers/spacing.scss b/sass/helpers/spacing.scss new file mode 100644 index 00000000..1377f4db --- /dev/null +++ b/sass/helpers/spacing.scss @@ -0,0 +1,45 @@ +.is-marginless { + margin: 0 !important; +} + +.is-paddingless { + padding: 0 !important; +} + +$spacing-shortcuts: ("margin": "m", "padding": "p") !default; +$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default; +$spacing-horizontal: "x" !default; +$spacing-vertical: "y" !default; +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; + +@each $property, $shortcut in $spacing-shortcuts { + @each $name, $value in $spacing-values { + // All directions + .#{$shortcut}-#{$name} { + #{$property}: $value !important; + } + + // Cardinal directions + @each $direction, $suffix in $spacing-directions { + .#{$shortcut}#{$suffix}-#{$name} { + #{$property}-#{$direction}: $value !important; + } + } + + // Horizontal axis + @if $spacing-horizontal != null { + .#{$shortcut}#{$spacing-horizontal}-#{$name} { + #{$property}-left: $value !important; + #{$property}-right: $value !important; + } + } + + // Vertical axis + @if $spacing-vertical != null { + .#{$shortcut}#{$spacing-vertical}-#{$name} { + #{$property}-top: $value !important; + #{$property}-bottom: $value !important; + } + } + } +} diff --git a/sass/helpers/typography.sass b/sass/helpers/typography.sass deleted file mode 100644 index dceca77a..00000000 --- a/sass/helpers/typography.sass +++ /dev/null @@ -1,103 +0,0 @@ -@import "../utilities/mixins" - -=typography-size($target:'') - @each $size in $sizes - $i: index($sizes, $size) - .is-size-#{$i}#{if($target == '', '', '-' + $target)} - font-size: $size !important - -+typography-size() - -+mobile - +typography-size('mobile') - -+tablet - +typography-size('tablet') - -+touch - +typography-size('touch') - -+desktop - +typography-size('desktop') - -+widescreen - +typography-size('widescreen') - -+fullhd - +typography-size('fullhd') - -$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') - -@each $alignment, $text-align in $alignments - .has-text-#{$alignment} - text-align: #{$text-align} !important - -@each $alignment, $text-align in $alignments - +mobile - .has-text-#{$alignment}-mobile - text-align: #{$text-align} !important - +tablet - .has-text-#{$alignment}-tablet - text-align: #{$text-align} !important - +tablet-only - .has-text-#{$alignment}-tablet-only - text-align: #{$text-align} !important - +touch - .has-text-#{$alignment}-touch - text-align: #{$text-align} !important - +desktop - .has-text-#{$alignment}-desktop - text-align: #{$text-align} !important - +desktop-only - .has-text-#{$alignment}-desktop-only - text-align: #{$text-align} !important - +widescreen - .has-text-#{$alignment}-widescreen - text-align: #{$text-align} !important - +widescreen-only - .has-text-#{$alignment}-widescreen-only - text-align: #{$text-align} !important - +fullhd - .has-text-#{$alignment}-fullhd - text-align: #{$text-align} !important - -.is-capitalized - text-transform: capitalize !important - -.is-lowercase - text-transform: lowercase !important - -.is-uppercase - text-transform: uppercase !important - -.is-italic - font-style: italic !important - -.is-underlined - text-decoration: underline !important - -.has-text-weight-light - font-weight: $weight-light !important -.has-text-weight-normal - font-weight: $weight-normal !important -.has-text-weight-medium - font-weight: $weight-medium !important -.has-text-weight-semibold - font-weight: $weight-semibold !important -.has-text-weight-bold - font-weight: $weight-bold !important - -.is-family-primary - font-family: $family-primary !important - -.is-family-secondary - font-family: $family-secondary !important - -.is-family-sans-serif - font-family: $family-sans-serif !important - -.is-family-monospace - font-family: $family-monospace !important - -.is-family-code - font-family: $family-code !important diff --git a/sass/helpers/typography.scss b/sass/helpers/typography.scss new file mode 100644 index 00000000..2620efe1 --- /dev/null +++ b/sass/helpers/typography.scss @@ -0,0 +1,175 @@ +@import "../utilities/mixins"; + +@mixin typography-size($target: "") { + @each $size in $sizes { + $i: index($sizes, $size); + + .is-size-#{$i}#{if($target == "", "", "-" + $target)} { + font-size: $size !important; + } + } +} + +@include typography-size; + +@include mobile { + @include typography-size("mobile"); +} + + +@include tablet { + @include typography-size("tablet"); +} + + +@include touch { + @include typography-size("touch"); +} + + +@include desktop { + @include typography-size("desktop"); +} + + +@include widescreen { + @include typography-size("widescreen"); +} + + +@include fullhd { + @include typography-size("fullhd"); +} + + +$alignments: ("centered": "center", "justified": "justify", "left": "left", "right": "right"); + +@each $alignment, $text-align in $alignments { + .has-text-#{$alignment} { + text-align: #{$text-align} !important; + } +} + +@each $alignment, $text-align in $alignments { + @include mobile { + .has-text-#{$alignment}-mobile { + text-align: #{$text-align} !important; + } + } + + + @include tablet { + .has-text-#{$alignment}-tablet { + text-align: #{$text-align} !important; + } + } + + + @include tablet-only { + .has-text-#{$alignment}-tablet-only { + text-align: #{$text-align} !important; + } + } + + + @include touch { + .has-text-#{$alignment}-touch { + text-align: #{$text-align} !important; + } + } + + + @include desktop { + .has-text-#{$alignment}-desktop { + text-align: #{$text-align} !important; + } + } + + + @include desktop-only { + .has-text-#{$alignment}-desktop-only { + text-align: #{$text-align} !important; + } + } + + + @include widescreen { + .has-text-#{$alignment}-widescreen { + text-align: #{$text-align} !important; + } + } + + + @include widescreen-only { + .has-text-#{$alignment}-widescreen-only { + text-align: #{$text-align} !important; + } + } + + + @include fullhd { + .has-text-#{$alignment}-fullhd { + text-align: #{$text-align} !important; + } + } +} + +.is-capitalized { + text-transform: capitalize !important; +} + +.is-lowercase { + text-transform: lowercase !important; +} + +.is-uppercase { + text-transform: uppercase !important; +} + +.is-italic { + font-style: italic !important; +} + +.is-underlined { + text-decoration: underline !important; +} + +.has-text-weight-light { + font-weight: $weight-light !important; +} + +.has-text-weight-normal { + font-weight: $weight-normal !important; +} + +.has-text-weight-medium { + font-weight: $weight-medium !important; +} + +.has-text-weight-semibold { + font-weight: $weight-semibold !important; +} + +.has-text-weight-bold { + font-weight: $weight-bold !important; +} + +.is-family-primary { + font-family: $family-primary !important; +} + +.is-family-secondary { + font-family: $family-secondary !important; +} + +.is-family-sans-serif { + font-family: $family-sans-serif !important; +} + +.is-family-monospace { + font-family: $family-monospace !important; +} + +.is-family-code { + font-family: $family-code !important; +} diff --git a/sass/helpers/visibility.sass b/sass/helpers/visibility.sass deleted file mode 100644 index a1bb0d56..00000000 --- a/sass/helpers/visibility.sass +++ /dev/null @@ -1,122 +0,0 @@ -@import "../utilities/mixins" - -$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' - -@each $display in $displays - .is-#{$display} - display: #{$display} !important - +mobile - .is-#{$display}-mobile - display: #{$display} !important - +tablet - .is-#{$display}-tablet - display: #{$display} !important - +tablet-only - .is-#{$display}-tablet-only - display: #{$display} !important - +touch - .is-#{$display}-touch - display: #{$display} !important - +desktop - .is-#{$display}-desktop - display: #{$display} !important - +desktop-only - .is-#{$display}-desktop-only - display: #{$display} !important - +widescreen - .is-#{$display}-widescreen - display: #{$display} !important - +widescreen-only - .is-#{$display}-widescreen-only - display: #{$display} !important - +fullhd - .is-#{$display}-fullhd - display: #{$display} !important - -.is-hidden - display: none !important - -.is-sr-only - border: none !important - clip: rect(0, 0, 0, 0) !important - height: 0.01em !important - overflow: hidden !important - padding: 0 !important - position: absolute !important - white-space: nowrap !important - width: 0.01em !important - -+mobile - .is-hidden-mobile - display: none !important - -+tablet - .is-hidden-tablet - display: none !important - -+tablet-only - .is-hidden-tablet-only - display: none !important - -+touch - .is-hidden-touch - display: none !important - -+desktop - .is-hidden-desktop - display: none !important - -+desktop-only - .is-hidden-desktop-only - display: none !important - -+widescreen - .is-hidden-widescreen - display: none !important - -+widescreen-only - .is-hidden-widescreen-only - display: none !important - -+fullhd - .is-hidden-fullhd - display: none !important - -.is-invisible - visibility: hidden !important - -+mobile - .is-invisible-mobile - visibility: hidden !important - -+tablet - .is-invisible-tablet - visibility: hidden !important - -+tablet-only - .is-invisible-tablet-only - visibility: hidden !important - -+touch - .is-invisible-touch - visibility: hidden !important - -+desktop - .is-invisible-desktop - visibility: hidden !important - -+desktop-only - .is-invisible-desktop-only - visibility: hidden !important - -+widescreen - .is-invisible-widescreen - visibility: hidden !important - -+widescreen-only - .is-invisible-widescreen-only - visibility: hidden !important - -+fullhd - .is-invisible-fullhd - visibility: hidden !important diff --git a/sass/helpers/visibility.scss b/sass/helpers/visibility.scss new file mode 100644 index 00000000..36c545e9 --- /dev/null +++ b/sass/helpers/visibility.scss @@ -0,0 +1,215 @@ +@import "../utilities/mixins"; + +$displays: "block" "flex" "inline" "inline-block" "inline-flex"; + +@each $display in $displays { + .is-#{$display} { + display: #{$display} !important; + } + + @include mobile { + .is-#{$display}-mobile { + display: #{$display} !important; + } + } + + + @include tablet { + .is-#{$display}-tablet { + display: #{$display} !important; + } + } + + + @include tablet-only { + .is-#{$display}-tablet-only { + display: #{$display} !important; + } + } + + + @include touch { + .is-#{$display}-touch { + display: #{$display} !important; + } + } + + + @include desktop { + .is-#{$display}-desktop { + display: #{$display} !important; + } + } + + + @include desktop-only { + .is-#{$display}-desktop-only { + display: #{$display} !important; + } + } + + + @include widescreen { + .is-#{$display}-widescreen { + display: #{$display} !important; + } + } + + + @include widescreen-only { + .is-#{$display}-widescreen-only { + display: #{$display} !important; + } + } + + + @include fullhd { + .is-#{$display}-fullhd { + display: #{$display} !important; + } + } +} + +.is-hidden { + display: none !important; +} + +.is-sr-only { + border: none !important; + clip: rect(0, 0, 0, 0) !important; + height: 0.01em !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 0.01em !important; +} + +@include mobile { + .is-hidden-mobile { + display: none !important; + } +} + + +@include tablet { + .is-hidden-tablet { + display: none !important; + } +} + + +@include tablet-only { + .is-hidden-tablet-only { + display: none !important; + } +} + + +@include touch { + .is-hidden-touch { + display: none !important; + } +} + + +@include desktop { + .is-hidden-desktop { + display: none !important; + } +} + + +@include desktop-only { + .is-hidden-desktop-only { + display: none !important; + } +} + + +@include widescreen { + .is-hidden-widescreen { + display: none !important; + } +} + + +@include widescreen-only { + .is-hidden-widescreen-only { + display: none !important; + } +} + + +@include fullhd { + .is-hidden-fullhd { + display: none !important; + } +} + + +.is-invisible { + visibility: hidden !important; +} + +@include mobile { + .is-invisible-mobile { + visibility: hidden !important; + } +} + + +@include tablet { + .is-invisible-tablet { + visibility: hidden !important; + } +} + + +@include tablet-only { + .is-invisible-tablet-only { + visibility: hidden !important; + } +} + + +@include touch { + .is-invisible-touch { + visibility: hidden !important; + } +} + + +@include desktop { + .is-invisible-desktop { + visibility: hidden !important; + } +} + + +@include desktop-only { + .is-invisible-desktop-only { + visibility: hidden !important; + } +} + + +@include widescreen { + .is-invisible-widescreen { + visibility: hidden !important; + } +} + + +@include widescreen-only { + .is-invisible-widescreen-only { + visibility: hidden !important; + } +} + + +@include fullhd { + .is-invisible-fullhd { + visibility: hidden !important; + } +} diff --git a/sass/layout/_all.sass b/sass/layout/_all.sass deleted file mode 100644 index 4d1df5b7..00000000 --- a/sass/layout/_all.sass +++ /dev/null @@ -1,6 +0,0 @@ -/* Bulma Layout */ -@charset "utf-8" - -@import "hero" -@import "section" -@import "footer" diff --git a/sass/layout/_all.scss b/sass/layout/_all.scss new file mode 100644 index 00000000..56b36769 --- /dev/null +++ b/sass/layout/_all.scss @@ -0,0 +1,6 @@ +/* Bulma Layout */ +@charset "utf-8"; + +@import "hero"; +@import "section"; +@import "footer"; diff --git a/sass/layout/footer.sass b/sass/layout/footer.sass deleted file mode 100644 index 4e9187e1..00000000 --- a/sass/layout/footer.sass +++ /dev/null @@ -1,11 +0,0 @@ -@import "../utilities/derived-variables" - -$footer-background-color: $scheme-main-bis !default -$footer-color: false !default -$footer-padding: 3rem 1.5rem 6rem !default - -.footer - background-color: $footer-background-color - padding: $footer-padding - @if $footer-color - color: $footer-color diff --git a/sass/layout/footer.scss b/sass/layout/footer.scss new file mode 100644 index 00000000..28a817b7 --- /dev/null +++ b/sass/layout/footer.scss @@ -0,0 +1,14 @@ +@import "../utilities/derived-variables"; + +$footer-background-color: $scheme-main-bis !default; +$footer-color: false !default; +$footer-padding: 3rem 1.5rem 6rem !default; + +.footer { + background-color: $footer-background-color; + padding: $footer-padding; + + @if $footer-color { + color: $footer-color; + } +} diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass deleted file mode 100644 index bd2312c9..00000000 --- a/sass/layout/hero.sass +++ /dev/null @@ -1,153 +0,0 @@ -@import "../utilities/mixins" - -$hero-body-padding: 3rem 1.5rem !default -$hero-body-padding-tablet: 3rem 3rem !default -$hero-body-padding-small: 1.5rem !default -$hero-body-padding-medium: 9rem 4.5rem !default -$hero-body-padding-large: 18rem 6rem !default - -$hero-colors: $colors !default - -// Main container -.hero - align-items: stretch - display: flex - flex-direction: column - justify-content: space-between - .navbar - background: none - .tabs - ul - border-bottom: none - // Colors - @each $name, $pair in $hero-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - &.is-#{$name} - background-color: $color - color: $color-invert - a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), - strong - color: inherit - .title - color: $color-invert - .subtitle - color: bulmaRgba($color-invert, 0.9) - a:not(.button), - strong - color: $color-invert - .navbar-menu - +touch - background-color: $color - .navbar-item, - .navbar-link - color: bulmaRgba($color-invert, 0.7) - a.navbar-item, - .navbar-link - &:hover, - &.is-active - background-color: bulmaDarken($color, 5%) - color: $color-invert - .tabs - a - color: $color-invert - opacity: 0.9 - &:hover - opacity: 1 - li - &.is-active a - color: $color !important - opacity: 1 - &.is-boxed, - &.is-toggle - a - color: $color-invert - &:hover - background-color: bulmaRgba($scheme-invert, 0.1) - li.is-active a - &, - &:hover - background-color: $color-invert - border-color: $color-invert - color: $color - // Modifiers - @if type-of($color) == 'color' - &.is-bold - $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) - $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) - background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) - +mobile - .navbar-menu - background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) - // Sizes - &.is-small - .hero-body - padding: $hero-body-padding-small - &.is-medium - +tablet - .hero-body - padding: $hero-body-padding-medium - &.is-large - +tablet - .hero-body - padding: $hero-body-padding-large - &.is-halfheight, - &.is-fullheight, - &.is-fullheight-with-navbar - .hero-body - align-items: center - display: flex - & > .container - flex-grow: 1 - flex-shrink: 1 - &.is-halfheight - min-height: 50vh - &.is-fullheight - min-height: 100vh - -// Components - -.hero-video - @extend %overlay - overflow: hidden - video - left: 50% - min-height: 100% - min-width: 100% - position: absolute - top: 50% - transform: translate3d(-50%, -50%, 0) - // Modifiers - &.is-transparent - opacity: 0.3 - // Responsiveness - +mobile - display: none - -.hero-buttons - margin-top: 1.5rem - // Responsiveness - +mobile - .button - display: flex - &:not(:last-child) - margin-bottom: 0.75rem - +tablet - display: flex - justify-content: center - .button:not(:last-child) - +ltr-property("margin", 1.5rem) - -// Containers - -.hero-head, -.hero-foot - flex-grow: 0 - flex-shrink: 0 - -.hero-body - flex-grow: 1 - flex-shrink: 0 - padding: $hero-body-padding - +tablet - padding: $hero-body-padding-tablet diff --git a/sass/layout/hero.scss b/sass/layout/hero.scss new file mode 100644 index 00000000..56707de4 --- /dev/null +++ b/sass/layout/hero.scss @@ -0,0 +1,245 @@ +@import "../utilities/mixins"; + +$hero-body-padding: 3rem 1.5rem !default; +$hero-body-padding-tablet: 3rem 3rem !default; +$hero-body-padding-small: 1.5rem !default; +$hero-body-padding-medium: 9rem 4.5rem !default; +$hero-body-padding-large: 18rem 6rem !default; + +$hero-colors: $colors !default; + +// Main container +.hero { + align-items: stretch; + display: flex; + flex-direction: column; + justify-content: space-between; + + .navbar { + background: none; + } + + .tabs { + ul { + border-bottom: none; + } + } + + // Colors + @each $name, $pair in $hero-colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), + strong { + color: inherit; + } + + .title { + color: $color-invert; + } + + .subtitle { + color: bulmaRgba($color-invert, 0.9); + + a:not(.button), + strong { + color: $color-invert; + } + } + + .navbar-menu { + @include touch { + background-color: $color; + } + } + + .navbar-item, + .navbar-link { + color: bulmaRgba($color-invert, 0.7); + } + + a.navbar-item, + .navbar-link { + &:hover, + &.is-active { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + } + + .tabs { + a { + color: $color-invert; + opacity: 0.9; + + &:hover { + opacity: 1; + } + } + + li { + &.is-active a { + color: $color !important; + opacity: 1; + } + } + + &.is-boxed, + &.is-toggle { + a { + color: $color-invert; + + &:hover { + background-color: bulmaRgba($scheme-invert, 0.1); + } + } + + li.is-active a { + &, + &:hover { + background-color: $color-invert; + border-color: $color-invert; + color: $color; + } + } + } + } + + // Modifiers + @if type-of($color) == "color" { + &.is-bold { + $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%); + $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%); + + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%); + + @include mobile { + .navbar-menu { + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%); + } + } + } + } + } + } + + // Sizes + &.is-small { + .hero-body { + padding: $hero-body-padding-small; + } + } + + &.is-medium { + @include tablet { + .hero-body { + padding: $hero-body-padding-medium; + } + } + } + + &.is-large { + @include tablet { + .hero-body { + padding: $hero-body-padding-large; + } + } + } + + &.is-halfheight, + &.is-fullheight, + &.is-fullheight-with-navbar { + .hero-body { + align-items: center; + display: flex; + + & > .container { + flex-grow: 1; + flex-shrink: 1; + } + } + } + + &.is-halfheight { + min-height: 50vh; + } + + &.is-fullheight { + min-height: 100vh; + } +} + +// Components + +.hero-video { + @extend %overlay; + + overflow: hidden; + + video { + left: 50%; + min-height: 100%; + min-width: 100%; + position: absolute; + top: 50%; + transform: translate3d(-50%, -50%, 0); + } + + // Modifiers + &.is-transparent { + opacity: 0.3; + } + + // Responsiveness + @include mobile { + display: none; + } +} + +.hero-buttons { + margin-top: 1.5rem; + + // Responsiveness + @include mobile { + .button { + display: flex; + + &:not(:last-child) { + margin-bottom: 0.75rem; + } + } + } + + + @include tablet { + display: flex; + justify-content: center; + + .button:not(:last-child) { + @include ltr-property("margin", 1.5rem); + } + } +} + +// Containers + +.hero-head, +.hero-foot { + flex-grow: 0; + flex-shrink: 0; +} + +.hero-body { + flex-grow: 1; + flex-shrink: 0; + padding: $hero-body-padding; + + @include tablet { + padding: $hero-body-padding-tablet; + } +} diff --git a/sass/layout/section.sass b/sass/layout/section.sass deleted file mode 100644 index 9c5a9f48..00000000 --- a/sass/layout/section.sass +++ /dev/null @@ -1,17 +0,0 @@ -@import "../utilities/mixins" - -$section-padding: 3rem 1.5rem !default -$section-padding-desktop: 3rem 3rem !default -$section-padding-medium: 9rem 4.5rem !default -$section-padding-large: 18rem 6rem !default - -.section - padding: $section-padding - // Responsiveness - +desktop - padding: $section-padding-desktop - // Sizes - &.is-medium - padding: $section-padding-medium - &.is-large - padding: $section-padding-large diff --git a/sass/layout/section.scss b/sass/layout/section.scss new file mode 100644 index 00000000..6ea3276b --- /dev/null +++ b/sass/layout/section.scss @@ -0,0 +1,24 @@ +@import "../utilities/mixins"; + +$section-padding: 3rem 1.5rem !default; +$section-padding-desktop: 3rem 3rem !default; +$section-padding-medium: 9rem 4.5rem !default; +$section-padding-large: 18rem 6rem !default; + +.section { + padding: $section-padding; + + // Responsiveness + @include desktop { + padding: $section-padding-desktop; + + // Sizes + &.is-medium { + padding: $section-padding-medium; + } + + &.is-large { + padding: $section-padding-large; + } + } +} diff --git a/sass/utilities/_all.sass b/sass/utilities/_all.sass deleted file mode 100644 index 51cf348a..00000000 --- a/sass/utilities/_all.sass +++ /dev/null @@ -1,9 +0,0 @@ -/* Bulma Utilities */ -@charset "utf-8" - -@import "initial-variables" -@import "functions" -@import "derived-variables" -@import "mixins" -@import "controls" -@import "extends" diff --git a/sass/utilities/_all.scss b/sass/utilities/_all.scss new file mode 100644 index 00000000..d421c96d --- /dev/null +++ b/sass/utilities/_all.scss @@ -0,0 +1,9 @@ +/* Bulma Utilities */ +@charset "utf-8"; + +@import "initial-variables"; +@import "functions"; +@import "derived-variables"; +@import "mixins"; +@import "controls"; +@import "extends"; diff --git a/sass/utilities/animations.sass b/sass/utilities/animations.sass deleted file mode 100644 index 1872e08c..00000000 --- a/sass/utilities/animations.sass +++ /dev/null @@ -1 +0,0 @@ -@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead." diff --git a/sass/utilities/animations.scss b/sass/utilities/animations.scss new file mode 100644 index 00000000..1fc25611 --- /dev/null +++ b/sass/utilities/animations.scss @@ -0,0 +1 @@ +@warn "The animations.scss file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."; diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass deleted file mode 100644 index 4c738c7f..00000000 --- a/sass/utilities/controls.sass +++ /dev/null @@ -1,49 +0,0 @@ -@import "derived-variables" - -$control-radius: $radius !default -$control-radius-small: $radius-small !default - -$control-border-width: 1px !default - -$control-height: 2.5em !default -$control-line-height: 1.5 !default - -$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default -$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default - -=control - -moz-appearance: none - -webkit-appearance: none - align-items: center - border: $control-border-width solid transparent - border-radius: $control-radius - box-shadow: none - display: inline-flex - font-size: $size-normal - height: $control-height - justify-content: flex-start - line-height: $control-line-height - padding-bottom: $control-padding-vertical - padding-left: $control-padding-horizontal - padding-right: $control-padding-horizontal - padding-top: $control-padding-vertical - position: relative - vertical-align: top - // States - &:focus, - &.is-focused, - &:active, - &.is-active - outline: none - &[disabled], - fieldset[disabled] & - cursor: not-allowed - -// The controls sizes use mixins so they can be used at different breakpoints -=control-small - border-radius: $control-radius-small - font-size: $size-small -=control-medium - font-size: $size-medium -=control-large - font-size: $size-large diff --git a/sass/utilities/controls.scss b/sass/utilities/controls.scss new file mode 100644 index 00000000..078b7ca8 --- /dev/null +++ b/sass/utilities/controls.scss @@ -0,0 +1,59 @@ +@import "derived-variables"; + +$control-radius: $radius !default; +$control-radius-small: $radius-small !default; + +$control-border-width: 1px !default; + +$control-height: 2.5em !default; +$control-line-height: 1.5 !default; + +$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default; +$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default; + +@mixin control { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: $control-border-width solid transparent; + border-radius: $control-radius; + box-shadow: none; + display: inline-flex; + font-size: $size-normal; + height: $control-height; + justify-content: flex-start; + line-height: $control-line-height; + padding-bottom: $control-padding-vertical; + padding-left: $control-padding-horizontal; + padding-right: $control-padding-horizontal; + padding-top: $control-padding-vertical; + position: relative; + vertical-align: top; + + // States + &:focus, + &.is-focused, + &:active, + &.is-active { + outline: none; + } + + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } +} + +// The controls sizes use mixins so they can be used at different breakpoints +@mixin control-small { + border-radius: $control-radius-small; + font-size: $size-small; +} + +@mixin control-medium { + font-size: $size-medium; +} + +@mixin control-large { + font-size: $size-large; +} diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass deleted file mode 100644 index cefc8f1d..00000000 --- a/sass/utilities/derived-variables.sass +++ /dev/null @@ -1,114 +0,0 @@ -@import "initial-variables" -@import "functions" - -$primary: $turquoise !default - -$info: $cyan !default -$success: $green !default -$warning: $yellow !default -$danger: $red !default - -$light: $white-ter !default -$dark: $grey-darker !default - -// Invert colors - -$orange-invert: findColorInvert($orange) !default -$yellow-invert: findColorInvert($yellow) !default -$green-invert: findColorInvert($green) !default -$turquoise-invert: findColorInvert($turquoise) !default -$cyan-invert: findColorInvert($cyan) !default -$blue-invert: findColorInvert($blue) !default -$purple-invert: findColorInvert($purple) !default -$red-invert: findColorInvert($red) !default - -$primary-invert: findColorInvert($primary) !default -$primary-light: findLightColor($primary) !default -$primary-dark: findDarkColor($primary) !default -$info-invert: findColorInvert($info) !default -$info-light: findLightColor($info) !default -$info-dark: findDarkColor($info) !default -$success-invert: findColorInvert($success) !default -$success-light: findLightColor($success) !default -$success-dark: findDarkColor($success) !default -$warning-invert: findColorInvert($warning) !default -$warning-light: findLightColor($warning) !default -$warning-dark: findDarkColor($warning) !default -$danger-invert: findColorInvert($danger) !default -$danger-light: findLightColor($danger) !default -$danger-dark: findDarkColor($danger) !default -$light-invert: findColorInvert($light) !default -$dark-invert: findColorInvert($dark) !default - -// General colors - -$scheme-main: $white !default -$scheme-main-bis: $white-bis !default -$scheme-main-ter: $white-ter !default -$scheme-invert: $black !default -$scheme-invert-bis: $black-bis !default -$scheme-invert-ter: $black-ter !default - -$background: $white-ter !default - -$border: $grey-lighter !default -$border-hover: $grey-light !default -$border-light: $grey-lightest !default -$border-light-hover: $grey-light !default - -// Text colors - -$text: $grey-dark !default -$text-invert: findColorInvert($text) !default -$text-light: $grey !default -$text-strong: $grey-darker !default - -// Code colors - -$code: darken($red, 15%) !default -$code-background: $background !default - -$pre: $text !default -$pre-background: $background !default - -// Link colors - -$link: $blue !default -$link-invert: findColorInvert($link) !default -$link-light: findLightColor($link) !default -$link-dark: findDarkColor($link) !default -$link-visited: $purple !default - -$link-hover: $grey-darker !default -$link-hover-border: $grey-light !default - -$link-focus: $grey-darker !default -$link-focus-border: $blue !default - -$link-active: $grey-darker !default -$link-active-border: $grey-dark !default - -// Typography - -$family-primary: $family-sans-serif !default -$family-secondary: $family-sans-serif !default -$family-code: $family-monospace !default - -$size-small: $size-7 !default -$size-normal: $size-6 !default -$size-medium: $size-5 !default -$size-large: $size-4 !default - -// Effects - -$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default - -// Lists and maps -$custom-colors: null !default -$custom-shades: null !default - -$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default - -$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default - -$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss new file mode 100644 index 00000000..08e05366 --- /dev/null +++ b/sass/utilities/derived-variables.scss @@ -0,0 +1,114 @@ +@import "initial-variables"; +@import "functions"; + +$primary: $turquoise !default; + +$info: $cyan !default; +$success: $green !default; +$warning: $yellow !default; +$danger: $red !default; + +$light: $white-ter !default; +$dark: $grey-darker !default; + +// Invert colors + +$orange-invert: findColorInvert($orange) !default; +$yellow-invert: findColorInvert($yellow) !default; +$green-invert: findColorInvert($green) !default; +$turquoise-invert: findColorInvert($turquoise) !default; +$cyan-invert: findColorInvert($cyan) !default; +$blue-invert: findColorInvert($blue) !default; +$purple-invert: findColorInvert($purple) !default; +$red-invert: findColorInvert($red) !default; + +$primary-invert: findColorInvert($primary) !default; +$primary-light: findLightColor($primary) !default; +$primary-dark: findDarkColor($primary) !default; +$info-invert: findColorInvert($info) !default; +$info-light: findLightColor($info) !default; +$info-dark: findDarkColor($info) !default; +$success-invert: findColorInvert($success) !default; +$success-light: findLightColor($success) !default; +$success-dark: findDarkColor($success) !default; +$warning-invert: findColorInvert($warning) !default; +$warning-light: findLightColor($warning) !default; +$warning-dark: findDarkColor($warning) !default; +$danger-invert: findColorInvert($danger) !default; +$danger-light: findLightColor($danger) !default; +$danger-dark: findDarkColor($danger) !default; +$light-invert: findColorInvert($light) !default; +$dark-invert: findColorInvert($dark) !default; + +// General colors + +$scheme-main: $white !default; +$scheme-main-bis: $white-bis !default; +$scheme-main-ter: $white-ter !default; +$scheme-invert: $black !default; +$scheme-invert-bis: $black-bis !default; +$scheme-invert-ter: $black-ter !default; + +$background: $white-ter !default; + +$border: $grey-lighter !default; +$border-hover: $grey-light !default; +$border-light: $grey-lightest !default; +$border-light-hover: $grey-light !default; + +// Text colors + +$text: $grey-dark !default; +$text-invert: findColorInvert($text) !default; +$text-light: $grey !default; +$text-strong: $grey-darker !default; + +// Code colors + +$code: darken($red, 15%) !default; +$code-background: $background !default; + +$pre: $text !default; +$pre-background: $background !default; + +// Link colors + +$link: $blue !default; +$link-invert: findColorInvert($link) !default; +$link-light: findLightColor($link) !default; +$link-dark: findDarkColor($link) !default; +$link-visited: $purple !default; + +$link-hover: $grey-darker !default; +$link-hover-border: $grey-light !default; + +$link-focus: $grey-darker !default; +$link-focus-border: $blue !default; + +$link-active: $grey-darker !default; +$link-active-border: $grey-dark !default; + +// Typography + +$family-primary: $family-sans-serif !default; +$family-secondary: $family-sans-serif !default; +$family-code: $family-monospace !default; + +$size-small: $size-7 !default; +$size-normal: $size-6 !default; +$size-medium: $size-5 !default; +$size-large: $size-4 !default; + +// Effects + +$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; + +// Lists and maps +$custom-colors: null !default; +$custom-shades: null !default; + +$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default; + +$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default; + +$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default; diff --git a/sass/utilities/extends.sass b/sass/utilities/extends.sass deleted file mode 100644 index c994fc1a..00000000 --- a/sass/utilities/extends.sass +++ /dev/null @@ -1,25 +0,0 @@ -@import "mixins" - -%control - +control - -%unselectable - +unselectable - -%arrow - +arrow - -%block - +block - -%delete - +delete - -%loader - +loader - -%overlay - +overlay - -%reset - +reset diff --git a/sass/utilities/extends.scss b/sass/utilities/extends.scss new file mode 100644 index 00000000..99be6365 --- /dev/null +++ b/sass/utilities/extends.scss @@ -0,0 +1,33 @@ +@import "mixins"; + +%control { + @include control; +} + +%unselectable { + @include unselectable; +} + +%arrow { + @include arrow; +} + +%block { + @include block; +} + +%delete { + @include delete; +} + +%loader { + @include loader; +} + +%overlay { + @include overlay; +} + +%reset { + @include reset; +} diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass deleted file mode 100644 index eeea6f21..00000000 --- a/sass/utilities/functions.sass +++ /dev/null @@ -1,135 +0,0 @@ -@function mergeColorMaps($bulma-colors, $custom-colors) - // We return at least Bulma's hard-coded colors - $merged-colors: $bulma-colors - - // We want a map as input - @if type-of($custom-colors) == 'map' - @each $name, $components in $custom-colors - // The color name should be a string - // and the components either a single color - // or a colors list with at least one element - @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 - $color-base: null - $color-invert: null - $color-light: null - $color-dark: null - $value: null - - // The param can either be a single color - // or a list of 2 colors - @if type-of($components) == 'color' - $color-base: $components - $color-invert: findColorInvert($color-base) - $color-light: findLightColor($color-base) - $color-dark: findDarkColor($color-base) - @else if type-of($components) == 'list' - $color-base: nth($components, 1) - // If Invert, Light and Dark are provided - @if length($components) > 3 - $color-invert: nth($components, 2) - $color-light: nth($components, 3) - $color-dark: nth($components, 4) - // If only Invert and Light are provided - @else if length($components) > 2 - $color-invert: nth($components, 2) - $color-light: nth($components, 3) - $color-dark: findDarkColor($color-base) - // If only Invert is provided - @else - $color-invert: nth($components, 2) - $color-light: findLightColor($color-base) - $color-dark: findDarkColor($color-base) - - $value: ($color-base, $color-invert, $color-light, $color-dark) - - // We only want to merge the map if the color base is an actual color - @if type-of($color-base) == 'color' - // We merge this colors elements as map with Bulma's colors map - // (we can override them this way, no multiple definition for the same name) - // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) - $merged-colors: map_merge($merged-colors, ($name: $value)) - - @return $merged-colors - -@function powerNumber($number, $exp) - $value: 1 - @if $exp > 0 - @for $i from 1 through $exp - $value: $value * $number - @else if $exp < 0 - @for $i from 1 through -$exp - $value: divide($value, $number) - @return $value - -@function colorLuminance($color) - @if type-of($color) != 'color' - @return 0.55 - $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) - @each $name, $value in $color-rgb - $adjusted: 0 - $value: divide($value, 255) - @if $value < 0.03928 - $value: divide($value, 12.92) - @else - $value: divide(($value + .055), 1.055) - $value: powerNumber($value, 2) - $color-rgb: map-merge($color-rgb, ($name: $value)) - @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) - -@function findColorInvert($color) - @if (colorLuminance($color) > 0.55) - @return rgba(#000, 0.7) - @else - @return #fff - -@function findLightColor($color, $l: 96%) - @if type-of($color) == 'color' - $l: 96% - @if lightness($color) > 96% - $l: lightness($color) - @return change-color($color, $lightness: $l) - @return $background - -@function findDarkColor($color, $base-l: 29%) - @if type-of($color) == 'color' - $luminance: colorLuminance($color) - $luminance-delta: (0.53 - $luminance) - $target-l: round($base-l + ($luminance-delta * 53)) - @return change-color($color, $lightness: max($base-l, $target-l)) - @return $text-strong - -@function bulmaRgba($color, $alpha) - @if type-of($color) != 'color' - @return $color - @return rgba($color, $alpha) - -@function bulmaDarken($color, $amount) - @if type-of($color) != 'color' - @return $color - @return darken($color, $amount) - -@function bulmaLighten($color, $amount) - @if type-of($color) != 'color' - @return $color - @return lighten($color, $amount) - -// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245 -// Replaces old slash division deprecated in Dart Sass -@function divide($dividend, $divisor, $precision: 10) - $sign: if($dividend > 0 and $divisor > 0, 1, -1) - $dividend: abs($dividend) - $divisor: abs($divisor) - $quotient: 0 - $remainder: $dividend - @if $dividend == 0 - @return 0 - @if $divisor == 0 - @error "Cannot divide by 0" - @if $divisor == 1 - @return $dividend - @while $remainder >= $divisor - $quotient: $quotient + 1 - $remainder: $remainder - $divisor - @if $remainder > 0 and $precision > 0 - $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1 - @return ($quotient + $remainder) * $sign diff --git a/sass/utilities/functions.scss b/sass/utilities/functions.scss new file mode 100644 index 00000000..c7a7580d --- /dev/null +++ b/sass/utilities/functions.scss @@ -0,0 +1,199 @@ +@function mergeColorMaps($bulma-colors, $custom-colors) { + // We return at least Bulma's hard-coded colors + $merged-colors: $bulma-colors; + + // We want a map as input + @if type-of($custom-colors) == "map" { + @each $name, $components in $custom-colors { + // The color name should be a string + // and the components either a single color + // or a colors list with at least one element + @if type-of($name) == "string" and (type-of($components) == "list" or type-of($components) == "color") and length($components) >= 1 { + $color-base: null; + $color-invert: null; + $color-light: null; + $color-dark: null; + $value: null; + + // The param can either be a single color + // or a list of 2 colors + @if type-of($components) == "color" { + $color-base: $components; + $color-invert: findColorInvert($color-base); + $color-light: findLightColor($color-base); + $color-dark: findDarkColor($color-base); + } + @else if type-of($components) == "list" { + $color-base: nth($components, 1); + + // If Invert, Light and Dark are provided + @if length($components) > 3 { + $color-invert: nth($components, 2); + $color-light: nth($components, 3); + $color-dark: nth($components, 4); + + // If only Invert and Light are provided + } + @else if length($components) > 2 { + $color-invert: nth($components, 2); + $color-light: nth($components, 3); + $color-dark: findDarkColor($color-base); + + // If only Invert is provided + } + @else { + $color-invert: nth($components, 2); + $color-light: findLightColor($color-base); + $color-dark: findDarkColor($color-base); + } + } + + $value: $color-base, $color-invert, $color-light, $color-dark; + + // We only want to merge the map if the color base is an actual color + @if type-of($color-base) == "color" { + // We merge this colors elements as map with Bulma's colors map + // (we can override them this way, no multiple definition for the same name) + // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) + $merged-colors: map_merge($merged-colors, ($name: $value)); + } + } + } + } + + @return $merged-colors; +} + +@function powerNumber($number, $exp) { + $value: 1; + + @if $exp > 0 { + @for $i from 1 through $exp { + $value: $value * $number; + } + } + @else if $exp < 0 { + @for $i from 1 through -$exp { + $value: divide($value, $number); + } + } + + @return $value; +} + +@function colorLuminance($color) { + @if type-of($color) != "color" { + @return 0.55; + } + + $color-rgb: ("red": red($color), "green": green($color), "blue": blue($color)); + + @each $name, $value in $color-rgb { + $adjusted: 0; + $value: divide($value, 255); + + @if $value < 0.03928 { + $value: divide($value, 12.92); + } + @else { + $value: divide($value + 0.055, 1.055); + $value: powerNumber($value, 2); + } + + $color-rgb: map-merge($color-rgb, ($name: $value)); + } + + @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722; +} + +@function findColorInvert($color) { + @if colorLuminance($color) > 0.55 { + @return rgba(#000, 0.7); + } + @else { + @return #fff; + } +} + +@function findLightColor($color, $l: 96%) { + @if type-of($color) == "color" { + $l: 96%; + + @if lightness($color) > 96% { + $l: lightness($color); + } + + @return change-color($color, $lightness: $l); + } + + @return $background; +} + +@function findDarkColor($color, $base-l: 29%) { + @if type-of($color) == "color" { + $luminance: colorLuminance($color); + $luminance-delta: 0.53 - $luminance; + $target-l: round($base-l + $luminance-delta * 53); + + @return change-color($color, $lightness: max($base-l, $target-l)); + } + + @return $text-strong; +} + +@function bulmaRgba($color, $alpha) { + @if type-of($color) != "color" { + @return $color; + } + + @return rgba($color, $alpha); +} + +@function bulmaDarken($color, $amount) { + @if type-of($color) != "color" { + @return $color; + } + + @return darken($color, $amount); +} + +@function bulmaLighten($color, $amount) { + @if type-of($color) != "color" { + @return $color; + } + + @return lighten($color, $amount); +} + +// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245 +// Replaces old slash division deprecated in Dart Sass +@function divide($dividend, $divisor, $precision: 10) { + $sign: if($dividend > 0 and $divisor > 0, 1, -1); + $dividend: abs($dividend); + $divisor: abs($divisor); + $quotient: 0; + $remainder: $dividend; + + @if $dividend == 0 { + @return 0; + } + + @if $divisor == 0 { + @error "Cannot divide by 0"; + } + + @if $divisor == 1 { + @return $dividend; + } + + @while $remainder >= $divisor { + $quotient: $quotient + 1; + $remainder: $remainder - $divisor; + } + + @if $remainder > 0 and $precision > 0 { + $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1; + } + + @return ($quotient + $remainder) * $sign; +} diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass deleted file mode 100644 index 3c2d2827..00000000 --- a/sass/utilities/initial-variables.sass +++ /dev/null @@ -1,79 +0,0 @@ -// Colors - -$black: hsl(0, 0%, 4%) !default -$black-bis: hsl(0, 0%, 7%) !default -$black-ter: hsl(0, 0%, 14%) !default - -$grey-darker: hsl(0, 0%, 21%) !default -$grey-dark: hsl(0, 0%, 29%) !default -$grey: hsl(0, 0%, 48%) !default -$grey-light: hsl(0, 0%, 71%) !default -$grey-lighter: hsl(0, 0%, 86%) !default -$grey-lightest: hsl(0, 0%, 93%) !default - -$white-ter: hsl(0, 0%, 96%) !default -$white-bis: hsl(0, 0%, 98%) !default -$white: hsl(0, 0%, 100%) !default - -$orange: hsl(14, 100%, 53%) !default -$yellow: hsl(44, 100%, 77%) !default -$green: hsl(153, 53%, 53%) !default -$turquoise: hsl(171, 100%, 41%) !default -$cyan: hsl(207, 61%, 53%) !default -$blue: hsl(229, 53%, 53%) !default -$purple: hsl(271, 100%, 71%) !default -$red: hsl(348, 86%, 61%) !default - -// Typography - -$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default -$family-monospace: monospace !default -$render-mode: optimizeLegibility !default - -$size-1: 3rem !default -$size-2: 2.5rem !default -$size-3: 2rem !default -$size-4: 1.5rem !default -$size-5: 1.25rem !default -$size-6: 1rem !default -$size-7: 0.75rem !default - -$weight-light: 300 !default -$weight-normal: 400 !default -$weight-medium: 500 !default -$weight-semibold: 600 !default -$weight-bold: 700 !default - -// Spacing - -$block-spacing: 1.5rem !default - -// Responsiveness - -// The container horizontal gap, which acts as the offset for breakpoints -$gap: 32px !default -// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 -$tablet: 769px !default -// 960px container + 4rem -$desktop: 960px + (2 * $gap) !default -// 1152px container + 4rem -$widescreen: 1152px + (2 * $gap) !default -$widescreen-enabled: true !default -// 1344px container + 4rem -$fullhd: 1344px + (2 * $gap) !default -$fullhd-enabled: true !default -$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default - -// Miscellaneous - -$easing: ease-out !default -$radius-small: 2px !default -$radius: 4px !default -$radius-large: 6px !default -$radius-rounded: 9999px !default -$speed: 86ms !default - -// Flags - -$variable-columns: true !default -$rtl: false !default diff --git a/sass/utilities/initial-variables.scss b/sass/utilities/initial-variables.scss new file mode 100644 index 00000000..32503f10 --- /dev/null +++ b/sass/utilities/initial-variables.scss @@ -0,0 +1,83 @@ +// Colors + +$black: hsl(0, 0%, 4%) !default; +$black-bis: hsl(0, 0%, 7%) !default; +$black-ter: hsl(0, 0%, 14%) !default; + +$grey-darker: hsl(0, 0%, 21%) !default; +$grey-dark: hsl(0, 0%, 29%) !default; +$grey: hsl(0, 0%, 48%) !default; +$grey-light: hsl(0, 0%, 71%) !default; +$grey-lighter: hsl(0, 0%, 86%) !default; +$grey-lightest: hsl(0, 0%, 93%) !default; + +$white-ter: hsl(0, 0%, 96%) !default; +$white-bis: hsl(0, 0%, 98%) !default; +$white: hsl(0, 0%, 100%) !default; + +$orange: hsl(14, 100%, 53%) !default; +$yellow: hsl(44, 100%, 77%) !default; +$green: hsl(153, 53%, 53%) !default; +$turquoise: hsl(171, 100%, 41%) !default; +$cyan: hsl(207, 61%, 53%) !default; +$blue: hsl(229, 53%, 53%) !default; +$purple: hsl(271, 100%, 71%) !default; +$red: hsl(348, 86%, 61%) !default; + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; +$family-monospace: monospace !default; +$render-mode: optimizeLegibility !default; + +$size-1: 3rem !default; +$size-2: 2.5rem !default; +$size-3: 2rem !default; +$size-4: 1.5rem !default; +$size-5: 1.25rem !default; +$size-6: 1rem !default; +$size-7: 0.75rem !default; + +$weight-light: 300 !default; +$weight-normal: 400 !default; +$weight-medium: 500 !default; +$weight-semibold: 600 !default; +$weight-bold: 700 !default; + +// Spacing + +$block-spacing: 1.5rem !default; + +// Responsiveness + +// The container horizontal gap, which acts as the offset for breakpoints +$gap: 32px !default; + +// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 +$tablet: 769px !default; + +// 960px container + 4rem +$desktop: 960px + 2 * $gap !default; + +// 1152px container + 4rem +$widescreen: 1152px + 2 * $gap !default; +$widescreen-enabled: true !default; + +// 1344px container + 4rem +$fullhd: 1344px + 2 * $gap !default; +$fullhd-enabled: true !default; +$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default; + +// Miscellaneous + +$easing: ease-out !default; +$radius-small: 2px !default; +$radius: 4px !default; +$radius-large: 6px !default; +$radius-rounded: 9999px !default; +$speed: 86ms !default; + +// Flags + +$variable-columns: true !default; +$rtl: false !default; diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass deleted file mode 100644 index 10cbae30..00000000 --- a/sass/utilities/mixins.sass +++ /dev/null @@ -1,303 +0,0 @@ -@import "derived-variables" - -=clearfix - &::after - clear: both - content: " " - display: table - -=center($width, $height: 0) - position: absolute - @if $height != 0 - left: calc(50% - (#{$width} * 0.5)) - top: calc(50% - (#{$height} * 0.5)) - @else - left: calc(50% - (#{$width} * 0.5)) - top: calc(50% - (#{$width} * 0.5)) - -=fa($size, $dimensions) - display: inline-block - font-size: $size - height: $dimensions - line-height: $dimensions - text-align: center - vertical-align: top - width: $dimensions - -=hamburger($dimensions) - -moz-appearance: none - -webkit-appearance: none - appearance: none - background: none - border: none - cursor: pointer - display: block - height: $dimensions - position: relative - width: $dimensions - span - background-color: currentColor - display: block - height: 1px - left: calc(50% - 8px) - position: absolute - transform-origin: center - transition-duration: $speed - transition-property: background-color, opacity, transform - transition-timing-function: $easing - width: 16px - &:nth-child(1) - top: calc(50% - 6px) - &:nth-child(2) - top: calc(50% - 1px) - &:nth-child(3) - top: calc(50% + 4px) - &:hover - background-color: bulmaRgba(black, 0.05) - // Modifers - &.is-active - span - &:nth-child(1) - transform: translateY(5px) rotate(45deg) - &:nth-child(2) - opacity: 0 - &:nth-child(3) - transform: translateY(-5px) rotate(-45deg) - -=overflow-touch - -webkit-overflow-scrolling: touch - -=placeholder - $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' - @each $placeholder in $placeholders - &:#{$placeholder}-placeholder - @content - -=reset - -moz-appearance: none - -webkit-appearance: none - appearance: none - background: none - border: none - color: currentColor - font-family: inherit - font-size: 1em - margin: 0 - padding: 0 - -// Responsiveness - -=from($device) - @media screen and (min-width: $device) - @content - -=until($device) - @media screen and (max-width: $device - 1px) - @content - -=between($from, $until) - @media screen and (min-width: $from) and (max-width: $until - 1px) - @content - -=mobile - @media screen and (max-width: $tablet - 1px) - @content - -=tablet - @media screen and (min-width: $tablet), print - @content - -=tablet-only - @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) - @content - -=touch - @media screen and (max-width: $desktop - 1px) - @content - -=desktop - @media screen and (min-width: $desktop) - @content - -=desktop-only - @if $widescreen-enabled - @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) - @content - -=until-widescreen - @if $widescreen-enabled - @media screen and (max-width: $widescreen - 1px) - @content - -=widescreen - @if $widescreen-enabled - @media screen and (min-width: $widescreen) - @content - -=widescreen-only - @if $widescreen-enabled and $fullhd-enabled - @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) - @content - -=until-fullhd - @if $fullhd-enabled - @media screen and (max-width: $fullhd - 1px) - @content - -=fullhd - @if $fullhd-enabled - @media screen and (min-width: $fullhd) - @content - -=breakpoint($name) - $breakpoint: map-get($breakpoints, $name) - @if $breakpoint - $from: map-get($breakpoint, "from") - $until: map-get($breakpoint, "until") - @if $from and $until - +between($from, $until) - @content - @else if $from - +from($from) - @content - @else if $until - +until($until) - @content - -=ltr - @if not $rtl - @content - -=rtl - @if $rtl - @content - -=ltr-property($property, $spacing, $right: true) - $normal: if($right, "right", "left") - $opposite: if($right, "left", "right") - @if $rtl - #{$property}-#{$opposite}: $spacing - @else - #{$property}-#{$normal}: $spacing - -=ltr-position($spacing, $right: true) - $normal: if($right, "right", "left") - $opposite: if($right, "left", "right") - @if $rtl - #{$opposite}: $spacing - @else - #{$normal}: $spacing - -// Placeholders - -=unselectable - -webkit-touch-callout: none - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - -=arrow($color: transparent) - border: 3px solid $color - border-radius: 2px - border-right: 0 - border-top: 0 - content: " " - display: block - height: 0.625em - margin-top: -0.4375em - pointer-events: none - position: absolute - top: 50% - transform: rotate(-45deg) - transform-origin: center - width: 0.625em - -=block($spacing: $block-spacing) - &:not(:last-child) - margin-bottom: $spacing - -=delete - +unselectable - -moz-appearance: none - -webkit-appearance: none - background-color: bulmaRgba($scheme-invert, 0.2) - border: none - border-radius: $radius-rounded - cursor: pointer - pointer-events: auto - display: inline-block - flex-grow: 0 - flex-shrink: 0 - font-size: 0 - height: 20px - max-height: 20px - max-width: 20px - min-height: 20px - min-width: 20px - outline: none - position: relative - vertical-align: top - width: 20px - &::before, - &::after - background-color: $scheme-main - content: "" - display: block - left: 50% - position: absolute - top: 50% - transform: translateX(-50%) translateY(-50%) rotate(45deg) - transform-origin: center center - &::before - height: 2px - width: 50% - &::after - height: 50% - width: 2px - &:hover, - &:focus - background-color: bulmaRgba($scheme-invert, 0.3) - &:active - background-color: bulmaRgba($scheme-invert, 0.4) - // Sizes - &.is-small - height: 16px - max-height: 16px - max-width: 16px - min-height: 16px - min-width: 16px - width: 16px - &.is-medium - height: 24px - max-height: 24px - max-width: 24px - min-height: 24px - min-width: 24px - width: 24px - &.is-large - height: 32px - max-height: 32px - max-width: 32px - min-height: 32px - min-width: 32px - width: 32px - -=loader - animation: spinAround 500ms infinite linear - border: 2px solid $grey-lighter - border-radius: $radius-rounded - border-right-color: transparent - border-top-color: transparent - content: "" - display: block - height: 1em - position: relative - width: 1em - -=overlay($offset: 0) - bottom: $offset - left: $offset - position: absolute - right: $offset - top: $offset diff --git a/sass/utilities/mixins.scss b/sass/utilities/mixins.scss new file mode 100644 index 00000000..4aab21d7 --- /dev/null +++ b/sass/utilities/mixins.scss @@ -0,0 +1,415 @@ +@import "derived-variables"; + +@mixin clearfix { + &::after { + clear: both; + content: " "; + display: table; + } +} + +@mixin center($width, $height: 0) { + position: absolute; + + @if $height != 0 { + left: calc(50% - (#{$width} * 0.5)); + top: calc(50% - (#{$height} * 0.5)); + } + @else { + left: calc(50% - (#{$width} * 0.5)); + top: calc(50% - (#{$width} * 0.5)); + } +} + +@mixin fa($size, $dimensions) { + display: inline-block; + font-size: $size; + height: $dimensions; + line-height: $dimensions; + text-align: center; + vertical-align: top; + width: $dimensions; +} + +@mixin hamburger($dimensions) { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + cursor: pointer; + display: block; + height: $dimensions; + position: relative; + width: $dimensions; + + span { + background-color: currentColor; + display: block; + height: 1px; + left: calc(50% - 8px); + position: absolute; + transform-origin: center; + transition-duration: $speed; + transition-property: background-color, opacity, transform; + transition-timing-function: $easing; + width: 16px; + + &:nth-child(1) { + top: calc(50% - 6px); + } + + &:nth-child(2) { + top: calc(50% - 1px); + } + + &:nth-child(3) { + top: calc(50% + 4px); + } + } + + &:hover { + background-color: bulmaRgba(black, 0.05); + } + + // Modifers + &.is-active { + span { + &:nth-child(1) { + transform: translateY(5px) rotate(45deg); + } + + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(3) { + transform: translateY(-5px) rotate(-45deg); + } + } + } +} + +@mixin overflow-touch { + -webkit-overflow-scrolling: touch; +} + +@mixin placeholder { + $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input"; + + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} + +@mixin reset { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + +// Responsiveness + +@mixin from($device) { + @media screen and (min-width: $device) { + @content; + } +} + +@mixin until($device) { + @media screen and (max-width: $device - 1px) { + @content; + } +} + +@mixin between($from, $until) { + @media screen and (min-width: $from) and (max-width: $until - 1px) { + @content; + } +} + +@mixin mobile { + @media screen and (max-width: $tablet - 1px) { + @content; + } +} + +@mixin tablet { + @media screen and (min-width: $tablet), print { + @content; + } +} + +@mixin tablet-only { + @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { + @content; + } +} + +@mixin touch { + @media screen and (max-width: $desktop - 1px) { + @content; + } +} + +@mixin desktop { + @media screen and (min-width: $desktop) { + @content; + } +} + +@mixin desktop-only { + @if $widescreen-enabled { + @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) { + @content; + } + } +} + +@mixin until-widescreen { + @if $widescreen-enabled { + @media screen and (max-width: $widescreen - 1px) { + @content; + } + } +} + +@mixin widescreen { + @if $widescreen-enabled { + @media screen and (min-width: $widescreen) { + @content; + } + } +} + +@mixin widescreen-only { + @if $widescreen-enabled and $fullhd-enabled { + @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) { + @content; + } + } +} + +@mixin until-fullhd { + @if $fullhd-enabled { + @media screen and (max-width: $fullhd - 1px) { + @content; + } + } +} + +@mixin fullhd { + @if $fullhd-enabled { + @media screen and (min-width: $fullhd) { + @content; + } + } +} + +@mixin breakpoint($name) { + $breakpoint: map-get($breakpoints, $name); + + @if $breakpoint { + $from: map-get($breakpoint, "from"); + $until: map-get($breakpoint, "until"); + + @if $from and $until { + @include between($from, $until) { + @content; + } + } + @else if $from { + @include from($from) { + @content; + } + } + @else if $until { + @include until($until) { + @content; + } + } + } +} + +@mixin ltr { + @if not $rtl { + @content; + } +} + +@mixin rtl { + @if $rtl { + @content; + } +} + +@mixin ltr-property($property, $spacing, $right: true) { + $normal: if($right, "right", "left"); + $opposite: if($right, "left", "right"); + + @if $rtl { + #{$property}-#{$opposite}: $spacing; + } + @else { + #{$property}-#{$normal}: $spacing; + } +} + +@mixin ltr-position($spacing, $right: true) { + $normal: if($right, "right", "left"); + $opposite: if($right, "left", "right"); + + @if $rtl { + #{$opposite}: $spacing; + } + @else { + #{$normal}: $spacing; + } +} + +// Placeholders + +@mixin unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@mixin arrow($color: transparent) { + border: 3px solid $color; + border-radius: 2px; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.625em; + margin-top: -0.4375em; + pointer-events: none; + position: absolute; + top: 50%; + transform: rotate(-45deg); + transform-origin: center; + width: 0.625em; +} + +@mixin block($spacing: $block-spacing) { + &:not(:last-child) { + margin-bottom: $spacing; + } +} + +@mixin delete { + @include unselectable; + + -moz-appearance: none; + -webkit-appearance: none; + background-color: bulmaRgba($scheme-invert, 0.2); + border: none; + border-radius: $radius-rounded; + cursor: pointer; + pointer-events: auto; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + outline: none; + position: relative; + vertical-align: top; + width: 20px; + + &::before, + &::after { + background-color: $scheme-main; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; + } + + &::before { + height: 2px; + width: 50%; + } + + &::after { + height: 50%; + width: 2px; + } + + &:hover, + &:focus { + background-color: bulmaRgba($scheme-invert, 0.3); + } + + &:active { + background-color: bulmaRgba($scheme-invert, 0.4); + } + + // Sizes + &.is-small { + height: 16px; + max-height: 16px; + max-width: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; + } + + &.is-medium { + height: 24px; + max-height: 24px; + max-width: 24px; + min-height: 24px; + min-width: 24px; + width: 24px; + } + + &.is-large { + height: 32px; + max-height: 32px; + max-width: 32px; + min-height: 32px; + min-width: 32px; + width: 32px; + } +} + +@mixin loader { + animation: spinAround 500ms infinite linear; + border: 2px solid $grey-lighter; + border-radius: $radius-rounded; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} + +@mixin overlay($offset: 0) { + bottom: $offset; + left: $offset; + position: absolute; + right: $offset; + top: $offset; +} diff --git a/test/dart-sass/dart-sass.js b/test/dart-sass/dart-sass.js index 09e2f2cc..6ee29415 100644 --- a/test/dart-sass/dart-sass.js +++ b/test/dart-sass/dart-sass.js @@ -1,26 +1,26 @@ -const fs = require('fs'); -const path = require('path'); -const sass = require('sass'); -const utils = require('../utils'); +const fs = require("fs"); +const path = require("path"); +const sass = require("sass"); +const utils = require("../utils"); -const DART_BASE_PATH = 'test/dart-sass/build/'; +const DART_BASE_PATH = "test/dart-sass/build/"; fs.mkdir(DART_BASE_PATH, { recursive: true }, (err) => { if (err) throw err; }); const exportDartCSS = (filepath, options) => { - utils.exportCSS(sass, fs, DART_BASE_PATH, filepath, options) -} + utils.exportCSS(sass, fs, DART_BASE_PATH, filepath, options); +}; // Full import -exportDartCSS('bulma', { - file: './bulma.sass', +exportDartCSS("bulma", { + file: "./bulma.scss", }); -exportDartCSS('bulma-rtl', { - file: './bulma-rtl.sass', +exportDartCSS("bulma-rtl", { + file: "./bulma-rtl.scss", }); // Custom import @@ -29,8 +29,8 @@ fs.mkdir(`${DART_BASE_PATH}custom`, { recursive: true }, (err) => { if (err) throw err; }); -utils.exportCSS(sass, fs, DART_BASE_PATH, 'custom/navbar', { - data: '@use "./sass/components/navbar.sass" with ( $scheme-main: red );', +utils.exportCSS(sass, fs, DART_BASE_PATH, "custom/navbar", { + data: '@use "./sass/components/navbar.scss" with ( $scheme-main: red );', }); // Single imports diff --git a/test/node-sass/node-sass.js b/test/node-sass/node-sass.js index d5511281..2ae7bf6e 100644 --- a/test/node-sass/node-sass.js +++ b/test/node-sass/node-sass.js @@ -1,26 +1,26 @@ -const fs = require('fs'); -const path = require('path'); -const sass = require('node-sass'); -const utils = require('../utils'); +const fs = require("fs"); +const path = require("path"); +const sass = require("node-sass"); +const utils = require("../utils"); -const NODE_SASS_BASE_PATH = 'test/node-sass/build/'; +const NODE_SASS_BASE_PATH = "test/node-sass/build/"; fs.mkdir(NODE_SASS_BASE_PATH, { recursive: true }, (err) => { if (err) throw err; }); const exportNodeSassCSS = (filepath, options) => { - utils.exportCSS(sass, fs, NODE_SASS_BASE_PATH, filepath, options) -} + utils.exportCSS(sass, fs, NODE_SASS_BASE_PATH, filepath, options); +}; // Full import -exportNodeSassCSS('bulma', { - file: './bulma.sass', +exportNodeSassCSS("bulma", { + file: "./bulma.scss", }); -exportNodeSassCSS('bulma-rtl', { - file: './bulma-rtl.sass', +exportNodeSassCSS("bulma-rtl", { + file: "./bulma-rtl.scss", }); // Single imports @@ -30,9 +30,13 @@ const BULMA_IMPORT_PATH = `./sass/`; utils.SOURCES.forEach((source) => { const parsed = path.parse(source); - fs.mkdir(`${NODE_SASS_BASE_PATH}${parsed.dir}`, { recursive: true }, (err) => { - if (err) throw err; - }); + fs.mkdir( + `${NODE_SASS_BASE_PATH}${parsed.dir}`, + { recursive: true }, + (err) => { + if (err) throw err; + } + ); exportNodeSassCSS(`${parsed.dir}/${parsed.name}`, { data: `@import "${BULMA_IMPORT_PATH}${source}";`, diff --git a/test/ruby-sass/sass/customize.scss b/test/ruby-sass/sass/customize.scss index bb4047d6..0c1af5bf 100644 --- a/test/ruby-sass/sass/customize.scss +++ b/test/ruby-sass/sass/customize.scss @@ -1,14 +1,14 @@ @charset "utf-8"; // Import a Google Font -@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); +@import url("https://fonts.googleapis.com/css?family=Nunito:400,700"); // Set your brand colors -$purple: #8A4D76; -$pink: #FA7C91; +$purple: #8a4d76; +$pink: #fa7c91; $brown: #757763; -$beige-light: #D0D1CD; -$beige-lighter: #EFF0EB; +$beige-light: #d0d1cd; +$beige-lighter: #eff0eb; // Update Bulma's global variables $family-sans-serif: "Nunito", sans-serif; @@ -26,12 +26,12 @@ $input-border-color: transparent; $input-shadow: none; // Import only what you need from Bulma -@import "../../../sass/utilities/_all.sass"; -@import "../../../sass/base/_all.sass"; -@import "../../../sass/elements/button.sass"; -@import "../../../sass/elements/container.sass"; -@import "../../../sass/elements/title.sass"; -@import "../../../sass/form/_all.sass"; -@import "../../../sass/components/navbar.sass"; -@import "../../../sass/layout/hero.sass"; -@import "../../../sass/layout/section.sass"; +@import "../../../sass/utilities/_all"; +@import "../../../sass/base/_all"; +@import "../../../sass/elements/button"; +@import "../../../sass/elements/container"; +@import "../../../sass/elements/title"; +@import "../../../sass/form/_all"; +@import "../../../sass/components/navbar"; +@import "../../../sass/layout/hero"; +@import "../../../sass/layout/section"; diff --git a/test/ruby-sass/sass/override.scss b/test/ruby-sass/sass/override.scss index 637c5800..c9d92a71 100644 --- a/test/ruby-sass/sass/override.scss +++ b/test/ruby-sass/sass/override.scss @@ -1,15 +1,15 @@ @charset "utf-8"; // Import the variables -@import "../../../sass/utilities/initial-variables.sass"; +@import "../../../sass/utilities/initial-variables"; $blue: #00f; -$purple: #8A4D76; -$pink: #FA7C91; +$purple: #8a4d76; +$pink: #fa7c91; $brown: #757763; -$beige-light: #D0D1CD; -$beige-lighter: #EFF0EB; +$beige-light: #d0d1cd; +$beige-lighter: #eff0eb; $grey-dark: $brown; $grey-light: $beige-light; @@ -26,16 +26,36 @@ $lavender-light: hsl(240, 56%, 98%); $lavender-dark: hsl(240, 31%, 24%); $custom-colors: ( - "lime": (lime), - "tomato": (tomato, white), - "orange": ($orange, $orange-invert, $orange-light), - "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark) + "lime": ( + lime + ), + "tomato": ( + tomato, + white + ), + "orange": ( + $orange, + $orange-invert, + $orange-light + ), + "lavender": ( + $lavender, + $lavender-invert, + $lavender-light, + $lavender-dark + ) ); -$spacing-shortcuts: ("margin": "mg"); +$spacing-shortcuts: ( + "margin": "mg" +); $spacing-horizontal: "h"; $spacing-vertical: null; -$spacing-values: ("small": 10px, "medium": 30px, "large": 60px); +$spacing-values: ( + "small": 10px, + "medium": 30px, + "large": 60px +); // Import the rest of Bulma @import "../../../bulma";