diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 31eedfe9..75d6efd8 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -137,6 +137,6 @@ table th vertical-align: top &:not([align]) - text-align: left + text-align: inherit th color: $text-strong diff --git a/sass/base/minireset.sass b/sass/base/minireset.sass index c5657ebd..aa2b6f3a 100644 --- a/sass/base/minireset.sass +++ b/sass/base/minireset.sass @@ -76,4 +76,4 @@ td, th padding: 0 &:not([align]) - text-align: left + text-align: inherit diff --git a/sass/components/dropdown.sass b/sass/components/dropdown.sass index d62a6d88..bf26f3ff 100644 --- a/sass/components/dropdown.sass +++ b/sass/components/dropdown.sass @@ -63,7 +63,7 @@ $dropdown-divider-background-color: $border-light !default a.dropdown-item, button.dropdown-item padding-right: 3rem - text-align: left + text-align: inherit white-space: nowrap width: 100% &:hover diff --git a/sass/components/media.sass b/sass/components/media.sass index a9ad114a..1f391911 100644 --- a/sass/components/media.sass +++ b/sass/components/media.sass @@ -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 .media @@ -19,13 +21,13 @@ $media-border-color: bulmaRgba($border, 0.5) !default margin-top: 0.5rem & + .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 .media-left, .media-right @@ -33,18 +35,24 @@ $media-border-color: bulmaRgba($border, 0.5) !default flex-grow: 0 flex-shrink: 0 -.media-left - margin-right: 1rem - -.media-right - margin-left: 1rem - .media-content flex-basis: auto flex-grow: 1 flex-shrink: 1 - text-align: left + text-align: inherit +mobile .media-content overflow-x: auto + ++ltr + .media-left + margin-right: $media-spacing + .media-right + margin-left: $media-spacing + ++rtl + .media-left + margin-left: $media-spacing + .media-right + margin-right: $media-spacing diff --git a/sass/components/message.sass b/sass/components/message.sass index 89e4cc9a..f37bca38 100644 --- a/sass/components/message.sass +++ b/sass/components/message.sass @@ -79,7 +79,7 @@ $message-colors: $colors !default .delete flex-grow: 0 flex-shrink: 0 - margin-left: 0.75em + +margin-left(0.75em) & + .message-body border-width: $message-header-body-border-width border-top-left-radius: 0 diff --git a/sass/components/panel.sass b/sass/components/panel.sass index c7b14877..1748ccdf 100644 --- a/sass/components/panel.sass +++ b/sass/components/panel.sass @@ -88,7 +88,7 @@ $panel-colors: $colors !default justify-content: flex-start padding: 0.5em 0.75em input[type="checkbox"] - margin-right: 0.75em + +margin-right(0.75em) & > .control flex-grow: 1 flex-shrink: 1 @@ -113,7 +113,7 @@ label.panel-block .panel-icon +fa(14px, 1em) color: $panel-icon-color - margin-right: 0.75em + +margin-right(0.75em) .fa font-size: inherit line-height: inherit diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 8c28c257..93722475 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -78,9 +78,9 @@ $tabs-toggle-link-active-color: $link-invert !default padding-left: 0.75em .icon &:first-child - margin-right: 0.5em + +margin-right(0.5em) &:last-child - margin-left: 0.5em + +margin-left(0.5em) // Alignment &.is-centered ul @@ -92,7 +92,10 @@ $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 + +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 @@ -121,9 +124,15 @@ $tabs-toggle-link-active-color: $link-invert !default & + li margin-left: -#{$tabs-toggle-link-border-width} &:first-child a - border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius + +ltr + border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius + +rtl + border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 &:last-child a - border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 + +ltr + border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 + +rtl + border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius &.is-active a background-color: $tabs-toggle-link-active-background-color @@ -135,13 +144,23 @@ $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 + +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 - border-bottom-right-radius: $radius-rounded - border-top-right-radius: $radius-rounded - padding-right: 1.25em + +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 diff --git a/sass/elements/button.sass b/sass/elements/button.sass index df5417c8..59a6d769 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -71,11 +71,11 @@ $button-static-border-color: $border !default height: 1.5em width: 1.5em &:first-child:not(:last-child) - margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) - margin-right: $button-padding-horizontal / 4 + +margin-left(calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})) + +margin-right($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}) + +margin-left($button-padding-horizontal / 4) + +margin-right(calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})) &:first-child:last-child margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) @@ -269,7 +269,7 @@ $button-static-border-color: $border !default .button margin-bottom: 0.5rem &:not(:last-child):not(.is-fullwidth) - margin-right: 0.5rem + +margin-right(0.5rem) &:last-child margin-bottom: -0.5rem &:not(:last-child) diff --git a/sass/elements/content.sass b/sass/elements/content.sass index 001419ab..d11bdda3 100644 --- a/sass/elements/content.sass +++ b/sass/elements/content.sass @@ -67,11 +67,11 @@ $content-table-foot-cell-color: $text-strong !default margin-bottom: 1em blockquote background-color: $content-blockquote-background-color - border-left: $content-blockquote-border-left + +border-left($content-blockquote-border-left) padding: $content-blockquote-padding ol list-style-position: outside - margin-left: 2em + +margin-left(2em) margin-top: 1em &:not([type]) list-style-type: decimal @@ -85,7 +85,7 @@ $content-table-foot-cell-color: $text-strong !default list-style-type: upper-roman ul list-style: disc outside - margin-left: 2em + +margin-left(2em) margin-top: 1em ul list-style-type: circle @@ -93,7 +93,7 @@ $content-table-foot-cell-color: $text-strong !default ul list-style-type: square dd - margin-left: 2em + +margin-left(2em) figure margin-left: 2em margin-right: 2em @@ -126,7 +126,7 @@ $content-table-foot-cell-color: $text-strong !default th color: $content-table-cell-heading-color &:not([align]) - text-align: left + text-align: inherit thead td, th diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass index 32a0ee13..8e3125ea 100644 --- a/sass/elements/notification.sass +++ b/sass/elements/notification.sass @@ -2,13 +2,18 @@ $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 + +ltr + padding: $notification-padding-ltr + +rtl + padding: $notification-padding-rtl a:not(.button):not(.dropdown-item) color: currentColor text-decoration: underline @@ -20,8 +25,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default pre code background: transparent & > .delete + +right(0.5rem) position: absolute - right: 0.5rem top: 0.5rem .title, .subtitle, diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 2e6036ad..31a8536c 100644 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -54,7 +54,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default th color: $table-cell-heading-color &:not([align]) - text-align: left + text-align: inherit tr &.is-selected background-color: $table-row-active-background-color diff --git a/sass/form/file.sass b/sass/form/file.sass index 41cc0215..c1071495 100644 --- a/sass/form/file.sass +++ b/sass/form/file.sass @@ -166,7 +166,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 .file-icon diff --git a/sass/form/tools.sass b/sass/form/tools.sass index ff2f8e20..ddb8c2a2 100644 --- a/sass/form/tools.sass +++ b/sass/form/tools.sass @@ -38,7 +38,7 @@ $help-size: $size-small !default justify-content: flex-start .control &:not(:last-child) - margin-right: -1px + +margin-right(-1px) &:not(:first-child):not(:last-child) .button, .input, @@ -48,14 +48,22 @@ $help-size: $size-small !default .button, .input, .select select - border-bottom-right-radius: 0 - border-top-right-radius: 0 + +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 - border-bottom-left-radius: 0 - border-top-left-radius: 0 + +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 @@ -88,7 +96,7 @@ $help-size: $size-small !default flex-shrink: 0 &:not(:last-child) margin-bottom: 0 - margin-right: 0.75rem + +margin-right(0.75rem) &.is-expanded flex-grow: 1 flex-shrink: 1 @@ -119,7 +127,7 @@ $help-size: $size-small !default flex-basis: 0 flex-grow: 1 flex-shrink: 0 - margin-right: 1.5rem + +margin-right(1.5rem) text-align: right &.is-small font-size: $size-small @@ -148,14 +156,14 @@ $help-size: $size-small !default &:not(.is-narrow) flex-grow: 1 &:not(:last-child) - margin-right: 0.75rem + +margin-right(0.75rem) .control box-sizing: border-box clear: both font-size: $size-normal position: relative - text-align: left + text-align: inherit // Modifiers &.has-icons-left, &.has-icons-right @@ -194,7 +202,7 @@ $help-size: $size-small !default &::after @extend %loader position: absolute !important - right: 0.625em + +right(0.625em) top: 0.625em z-index: 4 &.is-small:after diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass index 03bbc128..a1d688b6 100644 --- a/sass/utilities/initial-variables.sass +++ b/sass/utilities/initial-variables.sass @@ -75,3 +75,4 @@ $speed: 86ms !default // Flags $variable-columns: true !default +$rtl: false !default diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 27d74673..4a462337 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -128,6 +128,61 @@ @media screen and (min-width: $fullhd) @content +=ltr + @if not $rtl + @content + +=rtl + @if $rtl + @content + +// $directions: ("left": "right", "right": "left") + +=border-right($spacing) + @if $rtl + border-left: $spacing + @else + border-right: $spacing + +=border-left($spacing) + @if $rtl + border-right: $spacing + @else + border-left: $spacing + +=margin-right($spacing) + @if $rtl + margin-left: $spacing + @else + margin-right: $spacing + +=right($spacing) + @if $rtl + left: $spacing + @else + right: $spacing + +=left($spacing) + @if $rtl + right: $spacing + @else + left: $spacing + +=margin-left($spacing) + @if $rtl + margin-right: $spacing + @else + margin-left: $spacing + +// =directioner($spacing) +// @supports (margin-inline-end: 1px) +// margin-inline-end: $spacing +// @supports +// @if $rtl +// margin-left: $spacing +// @else +// margin-right: $spacing + // Placeholders =unselectable