Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

RTL init

Browse Source
This commit is contained in:
Jeremy Thomas
2020-01-20 20:39:09 +01:00
parent 358c10bebf
commit f5545ac723
15 changed files with 149 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/base/generic.sass
View File

@@ -137,6 +137,6 @@ table
th th
vertical-align: top vertical-align: top
&:not([align]) &:not([align])
text-align: left text-align: inherit
th th
color: $text-strong color: $text-strong

2
sass/base/minireset.sass
View File

@@ -76,4 +76,4 @@ td,
th th
padding: 0 padding: 0
&:not([align]) &:not([align])
text-align: left text-align: inherit

2
sass/components/dropdown.sass
View File

@@ -63,7 +63,7 @@ $dropdown-divider-background-color: $border-light !default
a.dropdown-item, a.dropdown-item,
button.dropdown-item button.dropdown-item
padding-right: 3rem padding-right: 3rem
text-align: left text-align: inherit
white-space: nowrap white-space: nowrap
width: 100% width: 100%
&:hover &:hover

32
sass/components/media.sass
View File

@@ -1,9 +1,11 @@
$media-border-color: bulmaRgba($border, 0.5) !default $media-border-color: bulmaRgba($border, 0.5) !default
$media-spacing: 1rem
$media-spacing-large: 1.5rem
.media .media
align-items: flex-start align-items: flex-start
display: flex display: flex
text-align: left text-align: inherit
.content:not(:last-child) .content:not(:last-child)
margin-bottom: 0.75rem margin-bottom: 0.75rem
.media .media
@@ -19,13 +21,13 @@ $media-border-color: bulmaRgba($border, 0.5) !default
margin-top: 0.5rem margin-top: 0.5rem
& + .media & + .media
border-top: 1px solid $media-border-color border-top: 1px solid $media-border-color
margin-top: 1rem margin-top: $media-spacing
padding-top: 1rem padding-top: $media-spacing
// Sizes // Sizes
&.is-large &.is-large
& + .media & + .media
margin-top: 1.5rem margin-top: $media-spacing-large
padding-top: 1.5rem padding-top: $media-spacing-large
.media-left, .media-left,
.media-right .media-right
@@ -33,18 +35,24 @@ $media-border-color: bulmaRgba($border, 0.5) !default
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
.media-left
margin-right: 1rem
.media-right
margin-left: 1rem
.media-content .media-content
flex-basis: auto flex-basis: auto
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
text-align: left text-align: inherit
+mobile +mobile
.media-content .media-content
overflow-x: auto 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

2
sass/components/message.sass
View File

@@ -79,7 +79,7 @@ $message-colors: $colors !default
.delete .delete
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
margin-left: 0.75em +margin-left(0.75em)
& + .message-body & + .message-body
border-width: $message-header-body-border-width border-width: $message-header-body-border-width
border-top-left-radius: 0 border-top-left-radius: 0

4
sass/components/panel.sass
View File

@@ -88,7 +88,7 @@ $panel-colors: $colors !default
justify-content: flex-start justify-content: flex-start
padding: 0.5em 0.75em padding: 0.5em 0.75em
input[type="checkbox"] input[type="checkbox"]
margin-right: 0.75em +margin-right(0.75em)
& > .control & > .control
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
@@ -113,7 +113,7 @@ label.panel-block
.panel-icon .panel-icon
+fa(14px, 1em) +fa(14px, 1em)
color: $panel-icon-color color: $panel-icon-color
margin-right: 0.75em +margin-right(0.75em)
.fa .fa
font-size: inherit font-size: inherit
line-height: inherit line-height: inherit

41
sass/components/tabs.sass
View File

@@ -78,9 +78,9 @@ $tabs-toggle-link-active-color: $link-invert !default
padding-left: 0.75em padding-left: 0.75em
.icon .icon
&:first-child &:first-child
margin-right: 0.5em +margin-right(0.5em)
&:last-child &:last-child
margin-left: 0.5em +margin-left(0.5em)
// Alignment // Alignment
&.is-centered &.is-centered
ul ul
@@ -92,7 +92,10 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-boxed &.is-boxed
a a
border: 1px solid transparent 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 &:hover
background-color: $tabs-boxed-link-hover-background-color background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@@ -121,9 +124,15 @@ $tabs-toggle-link-active-color: $link-invert !default
& + li & + li
margin-left: -#{$tabs-toggle-link-border-width} margin-left: -#{$tabs-toggle-link-border-width}
&:first-child a &: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 &: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 &.is-active
a a
background-color: $tabs-toggle-link-active-background-color background-color: $tabs-toggle-link-active-background-color
@@ -135,13 +144,23 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-toggle-rounded &.is-toggle-rounded
li li
&:first-child a &:first-child a
border-bottom-left-radius: $radius-rounded +ltr
border-top-left-radius: $radius-rounded border-bottom-left-radius: $radius-rounded
padding-left: 1.25em 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 &:last-child a
border-bottom-right-radius: $radius-rounded +ltr
border-top-right-radius: $radius-rounded border-bottom-right-radius: $radius-rounded
padding-right: 1.25em 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 // Sizes
&.is-small &.is-small
font-size: $size-small font-size: $size-small

10
sass/elements/button.sass
View File

@@ -71,11 +71,11 @@ $button-static-border-color: $border !default
height: 1.5em height: 1.5em
width: 1.5em width: 1.5em
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) +margin-left(calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
margin-right: $button-padding-horizontal / 4 +margin-right($button-padding-horizontal / 4)
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: $button-padding-horizontal / 4 +margin-left($button-padding-horizontal / 4)
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) +margin-right(calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
&:first-child:last-child &:first-child:last-child
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-right: 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 .button
margin-bottom: 0.5rem margin-bottom: 0.5rem
&:not(:last-child):not(.is-fullwidth) &:not(:last-child):not(.is-fullwidth)
margin-right: 0.5rem +margin-right(0.5rem)
&:last-child &:last-child
margin-bottom: -0.5rem margin-bottom: -0.5rem
&:not(:last-child) &:not(:last-child)

10
sass/elements/content.sass
View File

@@ -67,11 +67,11 @@ $content-table-foot-cell-color: $text-strong !default
margin-bottom: 1em margin-bottom: 1em
blockquote blockquote
background-color: $content-blockquote-background-color background-color: $content-blockquote-background-color
border-left: $content-blockquote-border-left +border-left($content-blockquote-border-left)
padding: $content-blockquote-padding padding: $content-blockquote-padding
ol ol
list-style-position: outside list-style-position: outside
margin-left: 2em +margin-left(2em)
margin-top: 1em margin-top: 1em
&:not([type]) &:not([type])
list-style-type: decimal list-style-type: decimal
@@ -85,7 +85,7 @@ $content-table-foot-cell-color: $text-strong !default
list-style-type: upper-roman list-style-type: upper-roman
ul ul
list-style: disc outside list-style: disc outside
margin-left: 2em +margin-left(2em)
margin-top: 1em margin-top: 1em
ul ul
list-style-type: circle list-style-type: circle
@@ -93,7 +93,7 @@ $content-table-foot-cell-color: $text-strong !default
ul ul
list-style-type: square list-style-type: square
dd dd
margin-left: 2em +margin-left(2em)
figure figure
margin-left: 2em margin-left: 2em
margin-right: 2em margin-right: 2em
@@ -126,7 +126,7 @@ $content-table-foot-cell-color: $text-strong !default
th th
color: $content-table-cell-heading-color color: $content-table-cell-heading-color
&:not([align]) &:not([align])
text-align: left text-align: inherit
thead thead
td, td,
th th

9
sass/elements/notification.sass
View File

@@ -2,13 +2,18 @@ $notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default $notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default $notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !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 .notification
@extend %block @extend %block
background-color: $notification-background-color background-color: $notification-background-color
border-radius: $notification-radius border-radius: $notification-radius
padding: $notification-padding
position: relative position: relative
+ltr
padding: $notification-padding-ltr
+rtl
padding: $notification-padding-rtl
a:not(.button):not(.dropdown-item) a:not(.button):not(.dropdown-item)
color: currentColor color: currentColor
text-decoration: underline text-decoration: underline
@@ -20,8 +25,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
pre code pre code
background: transparent background: transparent
& > .delete & > .delete
+right(0.5rem)
position: absolute position: absolute
right: 0.5rem
top: 0.5rem top: 0.5rem
.title, .title,
.subtitle, .subtitle,

2
sass/elements/table.sass
View File

@@ -54,7 +54,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
th th
color: $table-cell-heading-color color: $table-cell-heading-color
&:not([align]) &:not([align])
text-align: left text-align: inherit
tr tr
&.is-selected &.is-selected
background-color: $table-row-active-background-color background-color: $table-row-active-background-color

2
sass/form/file.sass
View File

@@ -166,7 +166,7 @@ $file-name-max-width: 16em !default
display: block display: block
max-width: $file-name-max-width max-width: $file-name-max-width
overflow: hidden overflow: hidden
text-align: left text-align: inherit
text-overflow: ellipsis text-overflow: ellipsis
.file-icon .file-icon

28
sass/form/tools.sass
View File

@@ -38,7 +38,7 @@ $help-size: $size-small !default
justify-content: flex-start justify-content: flex-start
.control .control
&:not(:last-child) &:not(:last-child)
margin-right: -1px +margin-right(-1px)
&:not(:first-child):not(:last-child) &:not(:first-child):not(:last-child)
.button, .button,
.input, .input,
@@ -48,14 +48,22 @@ $help-size: $size-small !default
.button, .button,
.input, .input,
.select select .select select
border-bottom-right-radius: 0 +ltr
border-top-right-radius: 0 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) &:last-child:not(:only-child)
.button, .button,
.input, .input,
.select select .select select
border-bottom-left-radius: 0 +ltr
border-top-left-radius: 0 border-bottom-left-radius: 0
border-top-left-radius: 0
+rtl
border-bottom-right-radius: 0
border-top-right-radius: 0
.button, .button,
.input, .input,
.select select .select select
@@ -88,7 +96,7 @@ $help-size: $size-small !default
flex-shrink: 0 flex-shrink: 0
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
margin-right: 0.75rem +margin-right(0.75rem)
&.is-expanded &.is-expanded
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
@@ -119,7 +127,7 @@ $help-size: $size-small !default
flex-basis: 0 flex-basis: 0
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
margin-right: 1.5rem +margin-right(1.5rem)
text-align: right text-align: right
&.is-small &.is-small
font-size: $size-small font-size: $size-small
@@ -148,14 +156,14 @@ $help-size: $size-small !default
&:not(.is-narrow) &:not(.is-narrow)
flex-grow: 1 flex-grow: 1
&:not(:last-child) &:not(:last-child)
margin-right: 0.75rem +margin-right(0.75rem)
.control .control
box-sizing: border-box box-sizing: border-box
clear: both clear: both
font-size: $size-normal font-size: $size-normal
position: relative position: relative
text-align: left text-align: inherit
// Modifiers // Modifiers
&.has-icons-left, &.has-icons-left,
&.has-icons-right &.has-icons-right
@@ -194,7 +202,7 @@ $help-size: $size-small !default
&::after &::after
@extend %loader @extend %loader
position: absolute !important position: absolute !important
right: 0.625em +right(0.625em)
top: 0.625em top: 0.625em
z-index: 4 z-index: 4
&.is-small:after &.is-small:after

1
sass/utilities/initial-variables.sass
View File

@@ -75,3 +75,4 @@ $speed: 86ms !default
// Flags // Flags
$variable-columns: true !default $variable-columns: true !default
$rtl: false !default

55
sass/utilities/mixins.sass
View File

@@ -128,6 +128,61 @@
@media screen and (min-width: $fullhd) @media screen and (min-width: $fullhd)
@content @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 // Placeholders
=unselectable =unselectable