diff --git a/README.md b/README.md index 8a5550b..859e627 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ This is a port of the [Bulma](https://bulma.io/) project SASS files to the SCSS syntax. -Currently, these files are based on Bulma version 0.8.2, and will be updated +Currently, these files are based on Bulma version 0.9.0, and will be updated with later releases. The files are converted to SCSS with [this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164). diff --git a/base/_all.scss b/base/_all.scss index ebb3590..6b8ca73 100644 --- a/base/_all.scss +++ b/base/_all.scss @@ -1,3 +1,2 @@ @import "minireset"; @import "generic"; -@import "helpers"; diff --git a/base/_generic.scss b/base/_generic.scss index 103780a..a48619d 100644 --- a/base/_generic.scss +++ b/base/_generic.scss @@ -160,7 +160,7 @@ table { vertical-align: top; &:not([align]) { - text-align: left; + text-align: inherit; } } diff --git a/base/_helpers.scss b/base/_helpers.scss index 420d10a..d4cdf40 100644 --- a/base/_helpers.scss +++ b/base/_helpers.scss @@ -1,469 +1 @@ -// Float - -.is-clearfix { - @include clearfix; -} - -.is-pulled-left { - float: left !important; -} - -.is-pulled-right { - float: right !important; -} - -// Overflow - -.is-clipped { - overflow: hidden !important; -} - -// Overlay - -.is-overlay { - @extend %overlay; -} - -// Typography - -@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; -} - -@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; - } -} - -@each $name, $shade in $shades { - .has-text-#{$name} { - color: $shade !important; - } - - .has-background-#{$name} { - background-color: $shade !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; -} - -// Visibility - -$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; - } -} - - -// Other - -.is-marginless { - margin: 0 !important; -} - -.is-paddingless { - padding: 0 !important; -} - -.is-radiusless { - border-radius: 0 !important; -} - -.is-shadowless { - box-shadow: none !important; -} - -.is-unselectable { - @extend %unselectable; -} - -.is-relative { - position: relative !important; -} +@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."; diff --git a/base/_minireset.scss b/base/_minireset.scss index a29a1e2..5b09693 100644 --- a/base/_minireset.scss +++ b/base/_minireset.scss @@ -87,6 +87,6 @@ th { padding: 0; &:not([align]) { - text-align: left; + text-align: inherit; } } diff --git a/bulma.scss b/bulma.scss index b207cca..14ae29a 100644 --- a/bulma.scss +++ b/bulma.scss @@ -1,8 +1,9 @@ -/*! bulma.io v0.8.2 | MIT License | github.com/jgthms/bulma */ +/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */ @import "utilities/_all"; @import "base/_all"; @import "elements/_all"; @import "form/_all"; @import "components/_all"; @import "grid/_all"; +@import "helpers/_all"; @import "layout/_all"; diff --git a/components/_all.scss b/components/_all.scss index 595d237..049cd91 100644 --- a/components/_all.scss +++ b/components/_all.scss @@ -2,7 +2,6 @@ @import "card"; @import "dropdown"; @import "level"; -@import "list"; @import "media"; @import "menu"; @import "message"; diff --git a/components/_breadcrumb.scss b/components/_breadcrumb.scss index 6d23b67..3435f0c 100644 --- a/components/_breadcrumb.scss +++ b/components/_breadcrumb.scss @@ -32,7 +32,7 @@ $breadcrumb-item-separator-color: $border-hover !default; display: flex; &:first-child a { - padding-left: 0; + @include ltr-property("padding", 0, false); } &.is-active { @@ -59,11 +59,11 @@ $breadcrumb-item-separator-color: $border-hover !default; .icon { &:first-child { - margin-right: 0.5em; + @include ltr-property("margin", 0.5em); } &:last-child { - margin-left: 0.5em; + @include ltr-property("margin", 0.5em, false); } } diff --git a/components/_card.scss b/components/_card.scss index 983856e..bd68232 100644 --- a/components/_card.scss +++ b/components/_card.scss @@ -80,7 +80,7 @@ $card-media-margin: $block-spacing !default; padding: $card-footer-padding; &:not(:last-child) { - border-right: $card-footer-border-top; + @include ltr-property("border", $card-footer-border-top); } } diff --git a/components/_dropdown.scss b/components/_dropdown.scss index 4ff5d5e..c58d78e 100644 --- a/components/_dropdown.scss +++ b/components/_dropdown.scss @@ -48,7 +48,9 @@ $dropdown-divider-background-color: $border-light !default; .dropdown-menu { display: none; - left: 0; + + @include ltr-position(0, false); + min-width: $dropdown-menu-min-width; padding-top: $dropdown-content-offset; position: absolute; @@ -75,8 +77,9 @@ $dropdown-divider-background-color: $border-light !default; a.dropdown-item, button.dropdown-item { - padding-right: 3rem; - text-align: left; + @include ltr-property("padding", 3rem); + + text-align: inherit; white-space: nowrap; width: 100%; diff --git a/components/_level.scss b/components/_level.scss index f484d6b..6a822f1 100644 --- a/components/_level.scss +++ b/components/_level.scss @@ -31,7 +31,8 @@ $level-item-spacing: $block-spacing / 2 !default; .level-item { &:not(:last-child) { margin-bottom: 0; - margin-right: $level-item-spacing; + + @include ltr-property("margin", $level-item-spacing); } &:not(.is-narrow) { @@ -88,7 +89,7 @@ $level-item-spacing: $block-spacing / 2 !default; // Responsiveness @include tablet { &:not(:last-child) { - margin-right: $level-item-spacing; + @include ltr-property("margin", $level-item-spacing); } } } diff --git a/components/_media.scss b/components/_media.scss index cfe9b92..0b9dfe8 100644 --- a/components/_media.scss +++ b/components/_media.scss @@ -1,9 +1,11 @@ $media-border-color: bulmaRgba($border, 0.5) !default; +$media-spacing: 1rem; +$media-spacing-large: 1.5rem; .media { align-items: flex-start; display: flex; - text-align: left; + text-align: inherit; .content:not(:last-child) { margin-bottom: 0.75rem; @@ -30,15 +32,15 @@ $media-border-color: bulmaRgba($border, 0.5) !default; & + .media { border-top: 1px solid $media-border-color; - margin-top: 1rem; - padding-top: 1rem; + margin-top: $media-spacing; + padding-top: $media-spacing; } // Sizes &.is-large { & + .media { - margin-top: 1.5rem; - padding-top: 1.5rem; + margin-top: $media-spacing-large; + padding-top: $media-spacing-large; } } } @@ -51,18 +53,18 @@ $media-border-color: bulmaRgba($border, 0.5) !default; } .media-left { - margin-right: 1rem; + @include ltr-property("margin", $media-spacing); } .media-right { - margin-left: 1rem; + @include ltr-property("margin", $media-spacing, false); } .media-content { flex-basis: auto; flex-grow: 1; flex-shrink: 1; - text-align: left; + text-align: inherit; } @include mobile { diff --git a/components/_menu.scss b/components/_menu.scss index bfb2296..8e0a186 100644 --- a/components/_menu.scss +++ b/components/_menu.scss @@ -56,9 +56,11 @@ $menu-label-spacing: 1em !default; li { ul { - border-left: $menu-list-border-left; + @include ltr-property("border", $menu-list-border-left, false); + margin: $menu-nested-list-margin; - padding-left: $menu-nested-list-padding-left; + + @include ltr-property("padding", $menu-nested-list-padding-left, false); } } } diff --git a/components/_message.scss b/components/_message.scss index bdfbf87..36dfc0d 100644 --- a/components/_message.scss +++ b/components/_message.scss @@ -104,7 +104,8 @@ $message-colors: $colors !default; .delete { flex-grow: 0; flex-shrink: 0; - margin-left: 0.75em; + + @include ltr-property("margin", 0.75em, false); } & + .message-body { diff --git a/components/_modal.scss b/components/_modal.scss index 8d2854e..1e6a006 100644 --- a/components/_modal.scss +++ b/components/_modal.scss @@ -73,7 +73,9 @@ $modal-card-body-padding: 20px !default; background: none; height: $modal-close-dimensions; position: fixed; - right: $modal-close-right; + + @include ltr-position($modal-close-right); + top: $modal-close-top; width: $modal-close-dimensions; } @@ -118,7 +120,7 @@ $modal-card-body-padding: 20px !default; .button { &:not(:last-child) { - margin-right: 0.5em; + @include ltr-property("margin", 0.5em); } } } diff --git a/components/_navbar.scss b/components/_navbar.scss index 3d3b893..8805a5c 100644 --- a/components/_navbar.scss +++ b/components/_navbar.scss @@ -207,8 +207,7 @@ body { color: $navbar-burger-color; @include hamburger($navbar-height); - - margin-left: auto; + @include ltr-property("margin", auto, false); } .navbar-menu { @@ -289,14 +288,15 @@ a.navbar-item, } .navbar-link:not(.is-arrowless) { - padding-right: 2.5em; + @include ltr-property("padding", 2.5em); &::after { @extend %arrow; border-color: $navbar-dropdown-arrow; margin-top: -0.375em; - right: 1.125em; + + @include ltr-position(1.125em); } } @@ -509,12 +509,14 @@ a.navbar-item, .navbar-start { justify-content: flex-start; - margin-right: auto; + + @include ltr-property("margin", auto); } .navbar-end { justify-content: flex-end; - margin-left: auto; + + @include ltr-property("margin", auto, false); } .navbar-dropdown { @@ -525,7 +527,9 @@ a.navbar-item, box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1); display: none; font-size: 0.875rem; - left: 0; + + @include ltr-position(0, false); + min-width: 100%; position: absolute; top: 100%; @@ -537,7 +541,7 @@ a.navbar-item, } a.navbar-item { - padding-right: 3rem; + @include ltr-property("padding", 3rem); &:focus, &:hover { @@ -578,11 +582,11 @@ a.navbar-item, .navbar > .container, .container > .navbar { .navbar-brand { - margin-left: -0.75rem; + @include ltr-property("margin", -0.75rem, false); } .navbar-menu { - margin-right: -0.75rem; + @include ltr-property("margin", -0.75rem); } } diff --git a/components/_panel.scss b/components/_panel.scss index cefd9c8..1b8ba15 100644 --- a/components/_panel.scss +++ b/components/_panel.scss @@ -113,7 +113,7 @@ $panel-colors: $colors !default; padding: 0.5em 0.75em; input[type="checkbox"] { - margin-right: 0.75em; + @include ltr-property("margin", 0.75em); } & > .control { @@ -154,7 +154,8 @@ label.panel-block { @include fa(14px, 1em); color: $panel-icon-color; - margin-right: 0.75em; + + @include ltr-property("margin", 0.75em); .fa { font-size: inherit; diff --git a/components/_tabs.scss b/components/_tabs.scss index cac0aed..640bdce 100644 --- a/components/_tabs.scss +++ b/components/_tabs.scss @@ -99,11 +99,11 @@ $tabs-toggle-link-active-color: $link-invert !default; .icon { &:first-child { - margin-right: 0.5em; + @include ltr-property("margin", 0.5em); } &:last-child { - margin-left: 0.5em; + @include ltr-property("margin", 0.5em, false); } } @@ -124,7 +124,16 @@ $tabs-toggle-link-active-color: $link-invert !default; &.is-boxed { a { border: 1px solid transparent; - border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0; + + @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; @@ -167,15 +176,33 @@ $tabs-toggle-link-active-color: $link-invert !default; li { & + li { - margin-left: -#{$tabs-toggle-link-border-width}; + @include ltr-property("margin", -#{$tabs-toggle-link-border-width}, false); } &:first-child a { - border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius; + @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 { - border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0; + @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 { @@ -195,15 +222,33 @@ $tabs-toggle-link-active-color: $link-invert !default; &.is-toggle-rounded { li { &:first-child a { - border-bottom-left-radius: $radius-rounded; - border-top-left-radius: $radius-rounded; - padding-left: 1.25em; + @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 { - border-bottom-right-radius: $radius-rounded; - border-top-right-radius: $radius-rounded; - padding-right: 1.25em; + @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; + } } } } diff --git a/elements/_button.scss b/elements/_button.scss index 0f06219..aaf16cf 100644 --- a/elements/_button.scss +++ b/elements/_button.scss @@ -88,13 +88,13 @@ $button-static-border-color: $border !default; } &:first-child:not(:last-child) { - margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}); - margin-right: $button-padding-horizontal / 4; + @include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false); + @include ltr-property("margin", $button-padding-horizontal / 4); } &:last-child:not(:first-child) { - margin-left: $button-padding-horizontal / 4; - margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}); + @include ltr-property("margin", $button-padding-horizontal / 4, false); + @include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})); } &:first-child:last-child { @@ -386,7 +386,7 @@ $button-static-border-color: $border !default; margin-bottom: 0.5rem; &:not(:last-child):not(.is-fullwidth) { - margin-right: 0.5rem; + @include ltr-property("margin", 0.5rem); } } @@ -427,11 +427,12 @@ $button-static-border-color: $border !default; &:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; - margin-right: -1px; + + @include ltr-property("margin", -1px); } &:last-child { - margin-right: 0; + @include ltr-property("margin", 0); } &:hover, diff --git a/elements/_content.scss b/elements/_content.scss index f77062c..851c43f 100644 --- a/elements/_content.scss +++ b/elements/_content.scss @@ -93,13 +93,17 @@ $content-table-foot-cell-color: $text-strong !default; blockquote { background-color: $content-blockquote-background-color; - border-left: $content-blockquote-border-left; + + @include ltr-property("border", $content-blockquote-border-left, false); + padding: $content-blockquote-padding; } ol { list-style-position: outside; - margin-left: 2em; + + @include ltr-property("margin", 2em, false); + margin-top: 1em; &:not([type]) { @@ -125,7 +129,9 @@ $content-table-foot-cell-color: $text-strong !default; ul { list-style: disc outside; - margin-left: 2em; + + @include ltr-property("margin", 2em, false); + margin-top: 1em; ul { @@ -139,7 +145,7 @@ $content-table-foot-cell-color: $text-strong !default; } dd { - margin-left: 2em; + @include ltr-property("margin", 2em, false); } figure { @@ -193,7 +199,7 @@ $content-table-foot-cell-color: $text-strong !default; color: $content-table-cell-heading-color; &:not([align]) { - text-align: left; + text-align: inherit; } } diff --git a/elements/_notification.scss b/elements/_notification.scss index 1577357..c6702c9 100644 --- a/elements/_notification.scss +++ b/elements/_notification.scss @@ -2,15 +2,26 @@ $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 { @extend %block; background-color: $notification-background-color; border-radius: $notification-radius; - padding: $notification-padding; 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; @@ -30,8 +41,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default; } & > .delete { + @include ltr-position(0.5rem); + position: absolute; - right: 0.5rem; top: 0.5rem; } diff --git a/elements/_table.scss b/elements/_table.scss index 7b4a393..0aa2d2a 100644 --- a/elements/_table.scss +++ b/elements/_table.scss @@ -63,13 +63,17 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default; color: currentColor; } } + + &.is-vcentered { + vertical-align: middle; + } } th { color: $table-cell-heading-color; &:not([align]) { - text-align: left; + text-align: inherit; } } diff --git a/elements/_tag.scss b/elements/_tag.scss index e2c70f0..0eb9ea8 100644 --- a/elements/_tag.scss +++ b/elements/_tag.scss @@ -13,7 +13,7 @@ $tag-delete-margin: 1px !default; margin-bottom: 0.5rem; &:not(:last-child) { - margin-right: 0.5rem; + @include ltr-property("margin", 0.5rem); } } @@ -63,17 +63,33 @@ $tag-delete-margin: 1px !default; &.has-addons { .tag { - margin-right: 0; + @include ltr-property("margin", 0); &:not(:first-child) { - margin-left: 0; - border-bottom-left-radius: 0; - border-top-left-radius: 0; + @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) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; + @include ltr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + + @include rtl { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } } } } @@ -94,8 +110,8 @@ $tag-delete-margin: 1px !default; white-space: nowrap; .delete { - margin-left: 0.25rem; - margin-right: -0.375rem; + @include ltr-property("margin", 0.25rem, false); + @include ltr-property("margin", -0.375rem); } // Colors @@ -135,24 +151,25 @@ $tag-delete-margin: 1px !default; .icon { &:first-child:not(:last-child) { - margin-left: -0.375em; - margin-right: 0.1875em; + @include ltr-property("margin", -0.375em, false); + @include ltr-property("margin", 0.1875em); } &:last-child:not(:first-child) { - margin-left: 0.1875em; - margin-right: -0.375em; + @include ltr-property("margin", 0.1875em, false); + @include ltr-property("margin", -0.375em); } &:first-child:last-child { - margin-left: -0.375em; - margin-right: -0.375em; + @include ltr-property("margin", -0.375em, false); + @include ltr-property("margin", -0.375em); } } // Modifiers &.is-delete { - margin-left: $tag-delete-margin; + @include ltr-property("margin", $tag-delete-margin, false); + padding: 0; position: relative; width: 2em; diff --git a/form/_checkbox-radio.scss b/form/_checkbox-radio.scss index 1524e51..6ae1b5b 100644 --- a/form/_checkbox-radio.scss +++ b/form/_checkbox-radio.scss @@ -27,6 +27,6 @@ @extend %checkbox-radio; & + .radio { - margin-left: 0.5em; + @include ltr-property("margin", 0.5em, false); } } diff --git a/form/_file.scss b/form/_file.scss index 1ef7b95..1e6dc33 100644 --- a/form/_file.scss +++ b/form/_file.scss @@ -257,7 +257,7 @@ $file-name-max-width: 16em !default; display: block; max-width: $file-name-max-width; overflow: hidden; - text-align: left; + text-align: inherit; text-overflow: ellipsis; } @@ -266,7 +266,9 @@ $file-name-max-width: 16em !default; display: flex; height: 1em; justify-content: center; - margin-right: 0.5em; + + @include ltr-property("margin", 0.5em); + width: 1em; .fa { diff --git a/form/_select.scss b/form/_select.scss index 99182ea..105580b 100644 --- a/form/_select.scss +++ b/form/_select.scss @@ -13,7 +13,9 @@ @extend %arrow; border-color: $input-arrow; - right: 1.125em; + + @include ltr-position(1.125em); + z-index: 4; } } @@ -21,7 +23,8 @@ &.is-rounded { select { border-radius: $radius-rounded; - padding-left: 1em; + + @include ltr-property("padding", 1em, false); } } @@ -44,7 +47,7 @@ } &:not([multiple]) { - padding-right: 2.5em; + @include ltr-property("padding", 2.5em); } &[multiple] { @@ -125,7 +128,9 @@ margin-top: 0; position: absolute; - right: 0.625em; + + @include ltr-position(0.625em); + top: 0.625em; transform: none; } diff --git a/form/_tools.scss b/form/_tools.scss index bf77028..fb4abaf 100644 --- a/form/_tools.scss +++ b/form/_tools.scss @@ -55,7 +55,7 @@ $help-size: $size-small !default; .control { &:not(:last-child) { - margin-right: -1px; + @include ltr-property("margin", -1px); } &:not(:first-child):not(:last-child) { @@ -70,8 +70,16 @@ $help-size: $size-small !default; .button, .input, .select select { - border-bottom-right-radius: 0; - border-top-right-radius: 0; + @include ltr { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + + @include rtl { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } } } @@ -79,8 +87,16 @@ $help-size: $size-small !default; .button, .input, .select select { - border-bottom-left-radius: 0; - border-top-left-radius: 0; + @include ltr { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + + @include rtl { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } } } @@ -137,7 +153,8 @@ $help-size: $size-small !default; &:not(:last-child) { margin-bottom: 0; - margin-right: 0.75rem; + + @include ltr-property("margin", 0.75rem); } &.is-expanded { @@ -195,7 +212,9 @@ $help-size: $size-small !default; flex-basis: 0; flex-grow: 1; flex-shrink: 0; - margin-right: 1.5rem; + + @include ltr-property("margin", 1.5rem); + text-align: right; &.is-small { @@ -242,7 +261,7 @@ $help-size: $size-small !default; } &:not(:last-child) { - margin-right: 0.75rem; + @include ltr-property("margin", 0.75rem); } } } @@ -253,7 +272,7 @@ $help-size: $size-small !default; clear: both; font-size: $size-normal; position: relative; - text-align: left; + text-align: inherit; // Modifiers &.has-icons-left, @@ -317,7 +336,9 @@ $help-size: $size-small !default; @extend %loader; position: absolute !important; - right: 0.625em; + + @include ltr-position(0.625em); + top: 0.625em; z-index: 4; } diff --git a/helpers/_all.scss b/helpers/_all.scss new file mode 100644 index 0000000..0dbd7a3 --- /dev/null +++ b/helpers/_all.scss @@ -0,0 +1,10 @@ +@charset "utf-8"; + +@import "color.sass"; +@import "float.sass"; +@import "other.sass"; +@import "overflow.sass"; +@import "position.sass"; +@import "spacing.sass"; +@import "typography.sass"; +@import "visibility.sass"; diff --git a/helpers/_color.scss b/helpers/_color.scss new file mode 100644 index 0000000..5571197 --- /dev/null +++ b/helpers/_color.scss @@ -0,0 +1,65 @@ +@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/helpers/_float.scss b/helpers/_float.scss new file mode 100644 index 0000000..878262a --- /dev/null +++ b/helpers/_float.scss @@ -0,0 +1,11 @@ +.is-clearfix { + @include clearfix; +} + +.is-pulled-left { + float: left !important; +} + +.is-pulled-right { + float: right !important; +} diff --git a/helpers/_other.scss b/helpers/_other.scss new file mode 100644 index 0000000..94e4222 --- /dev/null +++ b/helpers/_other.scss @@ -0,0 +1,11 @@ +.is-radiusless { + border-radius: 0 !important; +} + +.is-shadowless { + box-shadow: none !important; +} + +.is-unselectable { + @extend %unselectable; +} diff --git a/helpers/_overflow.scss b/helpers/_overflow.scss new file mode 100644 index 0000000..e898480 --- /dev/null +++ b/helpers/_overflow.scss @@ -0,0 +1,3 @@ +.is-clipped { + overflow: hidden !important; +} diff --git a/helpers/_position.scss b/helpers/_position.scss new file mode 100644 index 0000000..608f4f8 --- /dev/null +++ b/helpers/_position.scss @@ -0,0 +1,7 @@ +.is-overlay { + @extend %overlay; +} + +.is-relative { + position: relative !important; +} diff --git a/helpers/_spacing.scss b/helpers/_spacing.scss new file mode 100644 index 0000000..e5819bc --- /dev/null +++ b/helpers/_spacing.scss @@ -0,0 +1,40 @@ +.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) !default; + +@each $property, $shortcut in $spacing-shortcuts { + @each $name, $value in $spacing-values { + // 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/helpers/_typography.scss b/helpers/_typography.scss new file mode 100644 index 0000000..49cc0e2 --- /dev/null +++ b/helpers/_typography.scss @@ -0,0 +1,169 @@ +@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; +} + +.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/helpers/_visibility.scss b/helpers/_visibility.scss new file mode 100644 index 0000000..4b3f912 --- /dev/null +++ b/helpers/_visibility.scss @@ -0,0 +1,213 @@ +$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/layout/_hero.scss b/layout/_hero.scss index 31cb3a3..05dc084 100644 --- a/layout/_hero.scss +++ b/layout/_hero.scss @@ -215,7 +215,7 @@ $hero-body-padding-large: 18rem 1.5rem !default; justify-content: center; .button:not(:last-child) { - margin-right: 1.5rem; + @include ltr-property("margin", 1.5rem); } } } diff --git a/package.json b/package.json index b98f070..4c3a9f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-scss", - "version": "0.8.2", + "version": "0.9.0", "description": "The Bulma CSS Framework files converted to SCSS syntax", "main": "bulma.scss", "scripts": { diff --git a/utilities/_all.scss b/utilities/_all.scss index 6085e24..5e3b143 100644 --- a/utilities/_all.scss +++ b/utilities/_all.scss @@ -1,6 +1,6 @@ @import "initial-variables"; @import "functions"; -@import "derived-variables"; +@import "derived-variables.scss"; @import "animations"; @import "mixins"; @import "controls"; diff --git a/utilities/_derived-variables.scss b/utilities/_derived-variables.scss index 6e95cb5..54a0358 100644 --- a/utilities/_derived-variables.scss +++ b/utilities/_derived-variables.scss @@ -1,106 +1,132 @@ $primary: $turquoise !default; -$info: $cyan !default; +$info : $cyan !default; $success: $green !default; $warning: $yellow !default; -$danger: $red !default; +$danger : $red !default; -$light: $white-ter !default; -$dark: $grey-darker !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; +$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; +$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; +$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; +$background : $white-ter !default; -$border: $grey-lighter !default; -$border-hover: $grey-light !default; -$border-light: $grey-lightest !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 : $grey-dark !default; $text-invert: findColorInvert($text) !default; -$text-light: $grey !default; +$text-light : $grey !default; $text-strong: $grey-darker !default; // Code colors -$code: $red !default; +$code : $red !default; $code-background: $background !default; -$pre: $text !default; -$pre-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 : $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-hover : $grey-darker !default; +$link-hover-border : $grey-light !default; -$link-focus: $grey-darker !default; -$link-focus-border: $blue !default; +$link-focus : $grey-darker !default; +$link-focus-border : $blue !default; -$link-active: $grey-darker !default; +$link-active : $grey-darker !default; $link-active-border: $grey-dark !default; // Typography -$family-primary: $family-sans-serif !default; +$family-primary : $family-sans-serif !default; $family-secondary: $family-sans-serif !default; -$family-code: $family-monospace !default; +$family-code : $family-monospace !default; -$size-small: $size-7 !default; +$size-small : $size-7 !default; $size-normal: $size-6 !default; $size-medium: $size-5 !default; -$size-large: $size-4 !default; +$size-large : $size-4 !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; +$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/utilities/_functions.scss b/utilities/_functions.scss index bd9623e..3724df3 100644 --- a/utilities/_functions.scss +++ b/utilities/_functions.scss @@ -157,3 +157,11 @@ @return darken($color, $amount); } + +@function bulmaLighten($color, $amount) { + @if type-of($color) != "color" { + @return $color; + } + + @return lighten($color, $amount); +} diff --git a/utilities/_initial-variables.scss b/utilities/_initial-variables.scss index fa15643..9af866a 100644 --- a/utilities/_initial-variables.scss +++ b/utilities/_initial-variables.scss @@ -79,3 +79,4 @@ $speed: 86ms !default; // Flags $variable-columns: true !default; +$rtl: false !default; diff --git a/utilities/_mixins.scss b/utilities/_mixins.scss index 294f524..b1bca0b 100644 --- a/utilities/_mixins.scss +++ b/utilities/_mixins.scss @@ -191,6 +191,42 @@ } } +@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 {