Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -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/components/dropdown.sass
View File

@@ -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

32
sass/components/media.sass
View File

@@ -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

2
sass/components/message.sass
View File

@@ -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

4
sass/components/panel.sass
View File

@@ -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

41
sass/components/tabs.sass
View File

@@ -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