library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2983 from jgthms/rtl-support

Browse Source 
RTL support
This commit is contained in:
Jeremy Thomas 2020-06-07 12:07:48 +01:00 committed by GitHub
commit 5198384d02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 11086 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bulma-rtl.sass Normal file
View File

@ -0,0 +1,3 @@
@charset "utf-8"
$rtl: true
@import "bulma"

10862
css/bulma-rtl.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
css/bulma-rtl.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
css/bulma-rtl.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

41
css/bulma.css vendored
View File

@ -308,7 +308,7 @@ th {
td:not([align]), td:not([align]),
th:not([align]) { th:not([align]) {
text-align: left; text-align: inherit;
} }
html { html {
@ -441,7 +441,7 @@ table th {
table td:not([align]), table td:not([align]),
table th:not([align]) { table th:not([align]) {
text-align: left; text-align: inherit;
} }
table th { table th {
@ -3172,7 +3172,7 @@ fieldset[disabled] .button {
} }
.content table th:not([align]) { .content table th:not([align]) {
text-align: left; text-align: inherit;
} }
.content table thead td, .content table thead td,
@ -3369,8 +3369,8 @@ fieldset[disabled] .button {
.notification { .notification {
background-color: whitesmoke; background-color: whitesmoke;
border-radius: 4px; border-radius: 4px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
position: relative; position: relative;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
} }
.notification a:not(.button):not(.dropdown-item) { .notification a:not(.button):not(.dropdown-item) {
@ -3392,8 +3392,8 @@ fieldset[disabled] .button {
} }
.notification > .delete { .notification > .delete {
position: absolute;
right: 0.5rem; right: 0.5rem;
position: absolute;
top: 0.5rem; top: 0.5rem;
} }
@ -3828,12 +3828,17 @@ fieldset[disabled] .button {
color: currentColor; color: currentColor;
} }
.table td.is-vcentered,
.table th.is-vcentered {
vertical-align: middle;
}
.table th { .table th {
color: #363636; color: #363636;
} }
.table th:not([align]) { .table th:not([align]) {
text-align: left; text-align: inherit;
} }
.table tr.is-selected { .table tr.is-selected {
@ -3981,13 +3986,13 @@ fieldset[disabled] .button {
.tags.has-addons .tag:not(:first-child) { .tags.has-addons .tag:not(:first-child) {
margin-left: 0; margin-left: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
.tags.has-addons .tag:not(:last-child) { .tags.has-addons .tag:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
.tag:not(body) { .tag:not(body) {
@ -5240,7 +5245,7 @@ fieldset[disabled] .select select:hover {
display: block; display: block;
max-width: 16em; max-width: 16em;
overflow: hidden; overflow: hidden;
text-align: left; text-align: inherit;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -5523,7 +5528,7 @@ fieldset[disabled] .select select:hover {
clear: both; clear: both;
font-size: 1rem; font-size: 1rem;
position: relative; position: relative;
text-align: left; text-align: inherit;
} }
.control.has-icons-left .input:focus ~ .icon, .control.has-icons-left .input:focus ~ .icon,
@ -5811,7 +5816,7 @@ fieldset[disabled] .select select:hover {
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%;
} }
@ -5990,7 +5995,7 @@ a.list-item {
.media { .media {
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
text-align: left; text-align: inherit;
} }
.media .content:not(:last-child) { .media .content:not(:last-child) {
@ -6046,7 +6051,7 @@ a.list-item {
flex-basis: auto; flex-basis: auto;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
text-align: left; text-align: inherit;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -7439,11 +7444,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
} }
.navbar > .container .navbar-brand, .navbar > .container .navbar-brand,
.container > .navbar .navbar-brand { .container > .navbar .navbar-brand {
margin-left: -.75rem; margin-left: -0.75rem;
} }
.navbar > .container .navbar-menu, .navbar > .container .navbar-menu,
.container > .navbar .navbar-menu { .container > .navbar .navbar-menu {
margin-right: -.75rem; margin-right: -0.75rem;
} }
.navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop { .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop {
left: 0; left: 0;
@ -8018,11 +8023,13 @@ label.panel-block:hover {
} }
.tabs.is-toggle li:first-child a { .tabs.is-toggle li:first-child a {
border-radius: 4px 0 0 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
} }
.tabs.is-toggle li:last-child a { .tabs.is-toggle li:last-child a {
border-radius: 0 4px 4px 0; border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
} }
.tabs.is-toggle li.is-active a { .tabs.is-toggle li.is-active a {

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
docs/_data/expo.json
View File

@ -391,16 +391,7 @@
"lists": { "lists": {
"home": ["getbedtimestories", "divjoy", "counternetwork", "Gustav"], "home": ["getbedtimestories", "divjoy", "counternetwork", "Gustav"],
"expo": [ "expo": [
"romes",
"vinetos",
"infinitysearch",
"pentos",
"vivohostel",
"oneprofile",
"formalfounder",
"klimchuk",
"pagespeed",
"rydesignsstuff",
"divjoy", "divjoy",
"spike", "spike",
"ftwcoin", "ftwcoin",

17
docs/css/bulma-docs.css
View File

@ -14560,6 +14560,23 @@ svg {
position: relative; position: relative;
} }
.bd-partner-sponsor.is-text .bd-sponsor-item {
display: inline;
}
.bd-partner-sponsor.is-text .bd-sponsor-item:before {
display: none;
}
.bd-sponsor-item {
flex-grow: 1;
position: relative;
}
.bd-sponsor-item img {
position: relative;
}
.bd-partnrs { .bd-partnrs {
background-color: #fafafa; background-color: #fafafa;
} }

BIN
docs/images/expo/klimchuk-1344x840.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

BIN
docs/images/expo/klimchuk-2688x1680.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 186 KiB

BIN
docs/images/expo/klimchuk-672x420.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

10
package.json
View File

@ -34,12 +34,16 @@
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
}, },
"scripts": { "scripts": {
"build": "npm run build-clean && npm run build-sass && npm run build-autoprefix && npm run build-cleancss", "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-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-cleancss": "cleancss -o css/bulma.min.css css/bulma.css",
"build-clean": "rimraf 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.sass css/bulma.css",
"deploy": "npm run build", "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-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",
"start": "npm run build-sass -- --watch" "start": "npm run build-sass -- --watch"
}, },
"files": [ "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

6
sass/components/breadcrumb.sass
View File

@ -24,7 +24,7 @@ $breadcrumb-item-separator-color: $border-hover !default
align-items: center align-items: center
display: flex display: flex
&:first-child a &:first-child a
padding-left: 0 +ltr-property("padding", 0, false)
&.is-active &.is-active
a a
color: $breadcrumb-item-active-color color: $breadcrumb-item-active-color
@ -41,9 +41,9 @@ $breadcrumb-item-separator-color: $border-hover !default
justify-content: flex-start justify-content: flex-start
.icon .icon
&:first-child &:first-child
margin-right: 0.5em +ltr-property("margin", 0.5em)
&:last-child &:last-child
margin-left: 0.5em +ltr-property("margin", 0.5em, false)
// Alignment // Alignment
&.is-centered &.is-centered
ol, ol,

2
sass/components/card.sass
View File

@ -70,7 +70,7 @@ $card-media-margin: $block-spacing !default
justify-content: center justify-content: center
padding: $card-footer-padding padding: $card-footer-padding
&:not(:last-child) &:not(:last-child)
border-right: $card-footer-border-top +ltr-property("border", $card-footer-border-top)
// Combinations // Combinations

6
sass/components/dropdown.sass
View File

@ -38,7 +38,7 @@ $dropdown-divider-background-color: $border-light !default
.dropdown-menu .dropdown-menu
display: none display: none
left: 0 +ltr-position(0, false)
min-width: $dropdown-menu-min-width min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset padding-top: $dropdown-content-offset
position: absolute position: absolute
@ -62,8 +62,8 @@ $dropdown-divider-background-color: $border-light !default
a.dropdown-item, a.dropdown-item,
button.dropdown-item button.dropdown-item
padding-right: 3rem +ltr-property("padding", 3rem)
text-align: left text-align: inherit
white-space: nowrap white-space: nowrap
width: 100% width: 100%
&:hover &:hover

4
sass/components/level.sass
View File

@ -20,7 +20,7 @@ $level-item-spacing: ($block-spacing / 2) !default
.level-item .level-item
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
margin-right: $level-item-spacing +ltr-property("margin", $level-item-spacing)
&:not(.is-narrow) &:not(.is-narrow)
flex-grow: 1 flex-grow: 1
// Responsiveness // Responsiveness
@ -57,7 +57,7 @@ $level-item-spacing: ($block-spacing / 2) !default
// Responsiveness // Responsiveness
+tablet +tablet
&:not(:last-child) &:not(:last-child)
margin-right: $level-item-spacing +ltr-property("margin", $level-item-spacing)
.level-left .level-left
align-items: center align-items: center

18
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
@ -34,16 +36,16 @@ $media-border-color: bulmaRgba($border, 0.5) !default
flex-shrink: 0 flex-shrink: 0
.media-left .media-left
margin-right: 1rem +ltr-property("margin", $media-spacing)
.media-right .media-right
margin-left: 1rem +ltr-property("margin", $media-spacing, false)
.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

4
sass/components/menu.sass
View File

@ -42,9 +42,9 @@ $menu-label-spacing: 1em !default
color: $menu-item-active-color color: $menu-item-active-color
li li
ul ul
border-left: $menu-list-border-left +ltr-property("border", $menu-list-border-left, false)
margin: $menu-nested-list-margin margin: $menu-nested-list-margin
padding-left: $menu-nested-list-padding-left +ltr-property("padding", $menu-nested-list-padding-left, false)
.menu-label .menu-label
color: $menu-label-color color: $menu-label-color

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 +ltr-property("margin", 0.75em, false)
& + .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/modal.sass
View File

@ -63,7 +63,7 @@ $modal-card-body-padding: 20px !default
background: none background: none
height: $modal-close-dimensions height: $modal-close-dimensions
position: fixed position: fixed
right: $modal-close-right +ltr-position($modal-close-right)
top: $modal-close-top top: $modal-close-top
width: $modal-close-dimensions width: $modal-close-dimensions
@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
border-top: $modal-card-foot-border-top border-top: $modal-card-foot-border-top
.button .button
&:not(:last-child) &:not(:last-child)
margin-right: 0.5em +ltr-property("margin", 0.5em)
.modal-card-body .modal-card-body
+overflow-touch +overflow-touch

18
sass/components/navbar.sass
View File

@ -151,7 +151,7 @@ body
.navbar-burger .navbar-burger
color: $navbar-burger-color color: $navbar-burger-color
+hamburger($navbar-height) +hamburger($navbar-height)
margin-left: auto +ltr-property("margin", auto, false)
.navbar-menu .navbar-menu
display: none display: none
@ -209,12 +209,12 @@ a.navbar-item,
flex-shrink: 1 flex-shrink: 1
.navbar-link:not(.is-arrowless) .navbar-link:not(.is-arrowless)
padding-right: 2.5em +ltr-property("padding", 2.5em)
&::after &::after
@extend %arrow @extend %arrow
border-color: $navbar-dropdown-arrow border-color: $navbar-dropdown-arrow
margin-top: -0.375em margin-top: -0.375em
right: 1.125em +ltr-position(1.125em)
.navbar-dropdown .navbar-dropdown
font-size: 0.875rem font-size: 0.875rem
@ -347,10 +347,10 @@ a.navbar-item,
flex-shrink: 0 flex-shrink: 0
.navbar-start .navbar-start
justify-content: flex-start justify-content: flex-start
margin-right: auto +ltr-property("margin", auto)
.navbar-end .navbar-end
justify-content: flex-end justify-content: flex-end
margin-left: auto +ltr-property("margin", auto, false)
.navbar-dropdown .navbar-dropdown
background-color: $navbar-dropdown-background-color background-color: $navbar-dropdown-background-color
border-bottom-left-radius: $navbar-dropdown-radius border-bottom-left-radius: $navbar-dropdown-radius
@ -359,7 +359,7 @@ a.navbar-item,
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1) box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
display: none display: none
font-size: 0.875rem font-size: 0.875rem
left: 0 +ltr-position(0, false)
min-width: 100% min-width: 100%
position: absolute position: absolute
top: 100% top: 100%
@ -368,7 +368,7 @@ a.navbar-item,
padding: 0.375rem 1rem padding: 0.375rem 1rem
white-space: nowrap white-space: nowrap
a.navbar-item a.navbar-item
padding-right: 3rem +ltr-property("padding", 3rem)
&:focus, &:focus,
&:hover &:hover
background-color: $navbar-dropdown-item-hover-background-color background-color: $navbar-dropdown-item-hover-background-color
@ -396,9 +396,9 @@ a.navbar-item,
.navbar > .container, .navbar > .container,
.container > .navbar .container > .navbar
.navbar-brand .navbar-brand
margin-left: -.75rem +ltr-property("margin", -.75rem, false)
.navbar-menu .navbar-menu
margin-right: -.75rem +ltr-property("margin", -.75rem)
// Fixed navbar // Fixed navbar
.navbar .navbar
&.is-fixed-bottom-desktop, &.is-fixed-bottom-desktop,

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 +ltr-property("margin", 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 +ltr-property("margin", 0.75em)
.fa .fa
font-size: inherit font-size: inherit
line-height: inherit line-height: inherit

33
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 +ltr-property("margin", 0.5em)
&:last-child &:last-child
margin-left: 0.5em +ltr-property("margin", 0.5em, false)
// 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
+ltr
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 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
@ -119,13 +122,21 @@ $tabs-toggle-link-active-color: $link-invert !default
z-index: 2 z-index: 2
li li
& + li & + li
margin-left: -#{$tabs-toggle-link-border-width} +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
&:first-child a &:first-child a
+ltr
border-top-left-radius: $tabs-toggle-link-radius border-top-left-radius: $tabs-toggle-link-radius
border-bottom-left-radius: $tabs-toggle-link-radius border-bottom-left-radius: $tabs-toggle-link-radius
&:last-child a +rtl
border-bottom-right-radius: $tabs-toggle-link-radius
border-top-right-radius: $tabs-toggle-link-radius 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 &.is-active
a a
background-color: $tabs-toggle-link-active-background-color background-color: $tabs-toggle-link-active-background-color
@ -137,13 +148,23 @@ $tabs-toggle-link-active-color: $link-invert !default
&.is-toggle-rounded &.is-toggle-rounded
li li
&:first-child a &:first-child a
+ltr
border-bottom-left-radius: $radius-rounded border-bottom-left-radius: $radius-rounded
border-top-left-radius: $radius-rounded border-top-left-radius: $radius-rounded
padding-left: 1.25em padding-left: 1.25em
&:last-child a +rtl
border-bottom-right-radius: $radius-rounded border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded border-top-right-radius: $radius-rounded
padding-right: 1.25em 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 // Sizes
&.is-small &.is-small
font-size: $size-small font-size: $size-small

14
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}) +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
margin-right: $button-padding-horizontal / 4 +ltr-property("margin", $button-padding-horizontal / 4)
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: $button-padding-horizontal / 4 +ltr-property("margin", $button-padding-horizontal / 4, false)
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) +ltr-property("margin", 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 +ltr-property("margin", 0.5rem)
&:last-child &:last-child
margin-bottom: -0.5rem margin-bottom: -0.5rem
&:not(:last-child) &:not(:last-child)
@ -292,9 +292,9 @@ $button-static-border-color: $border !default
&:not(:last-child) &:not(:last-child)
border-bottom-right-radius: 0 border-bottom-right-radius: 0
border-top-right-radius: 0 border-top-right-radius: 0
margin-right: -1px +ltr-property("margin", -1px)
&:last-child &:last-child
margin-right: 0 +ltr-property("margin", 0)
&:hover, &:hover,
&.is-hovered &.is-hovered
z-index: 2 z-index: 2

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 +ltr-property("border", $content-blockquote-border-left, false)
padding: $content-blockquote-padding padding: $content-blockquote-padding
ol ol
list-style-position: outside list-style-position: outside
margin-left: 2em +ltr-property("margin", 2em, false)
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 +ltr-property("margin", 2em, false)
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 +ltr-property("margin", 2em, false)
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
+ltr-position(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

@ -56,7 +56,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

38
sass/elements/tag.sass
View File

@ -11,7 +11,7 @@ $tag-delete-margin: 1px !default
.tag .tag
margin-bottom: 0.5rem margin-bottom: 0.5rem
&:not(:last-child) &:not(:last-child)
margin-right: 0.5rem +ltr-property("margin", 0.5rem)
&:last-child &:last-child
margin-bottom: -0.5rem margin-bottom: -0.5rem
&:not(:last-child) &:not(:last-child)
@ -37,14 +37,22 @@ $tag-delete-margin: 1px !default
margin-right: 0 margin-right: 0
&.has-addons &.has-addons
.tag .tag
margin-right: 0 +ltr-property("margin", 0)
&:not(:first-child) &:not(:first-child)
margin-left: 0 +ltr-property("margin", 0, false)
border-bottom-left-radius: 0 +ltr
border-top-left-radius: 0 border-top-left-radius: 0
&:not(:last-child) border-bottom-left-radius: 0
border-bottom-right-radius: 0 +rtl
border-top-right-radius: 0 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) .tag:not(body)
align-items: center align-items: center
@ -60,8 +68,8 @@ $tag-delete-margin: 1px !default
padding-right: 0.75em padding-right: 0.75em
white-space: nowrap white-space: nowrap
.delete .delete
margin-left: 0.25rem +ltr-property("margin", 0.25rem, false)
margin-right: -0.375rem +ltr-property("margin", -0.375rem)
// Colors // Colors
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
@ -85,17 +93,17 @@ $tag-delete-margin: 1px !default
font-size: $size-medium font-size: $size-medium
.icon .icon
&:first-child:not(:last-child) &:first-child:not(:last-child)
margin-left: -0.375em +ltr-property("margin", -0.375em, false)
margin-right: 0.1875em +ltr-property("margin", 0.1875em)
&:last-child:not(:first-child) &:last-child:not(:first-child)
margin-left: 0.1875em +ltr-property("margin", 0.1875em, false)
margin-right: -0.375em +ltr-property("margin", -0.375em)
&:first-child:last-child &:first-child:last-child
margin-left: -0.375em +ltr-property("margin", -0.375em, false)
margin-right: -0.375em +ltr-property("margin", -0.375em)
// Modifiers // Modifiers
&.is-delete &.is-delete
margin-left: $tag-delete-margin +ltr-property("margin", $tag-delete-margin, false)
padding: 0 padding: 0
position: relative position: relative
width: 2em width: 2em

2
sass/form/checkbox-radio.sass
View File

@ -18,4 +18,4 @@
.radio .radio
@extend %checkbox-radio @extend %checkbox-radio
& + .radio & + .radio
margin-left: 0.5em +ltr-property("margin", 0.5em, false)

4
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
@ -174,7 +174,7 @@ $file-name-max-width: 16em !default
display: flex display: flex
height: 1em height: 1em
justify-content: center justify-content: center
margin-right: 0.5em +ltr-property("margin", 0.5em)
width: 1em width: 1em
.fa .fa
font-size: 14px font-size: 14px

8
sass/form/select.sass
View File

@ -9,12 +9,12 @@
&::after &::after
@extend %arrow @extend %arrow
border-color: $input-arrow border-color: $input-arrow
right: 1.125em +ltr-position(1.125em)
z-index: 4 z-index: 4
&.is-rounded &.is-rounded
select select
border-radius: $radius-rounded border-radius: $radius-rounded
padding-left: 1em +ltr-property("padding", 1em, false)
select select
@extend %input @extend %input
cursor: pointer cursor: pointer
@ -28,7 +28,7 @@
fieldset[disabled] &:hover fieldset[disabled] &:hover
border-color: $input-disabled-border-color border-color: $input-disabled-border-color
&:not([multiple]) &:not([multiple])
padding-right: 2.5em +ltr-property("padding", 2.5em)
&[multiple] &[multiple]
height: auto height: auto
padding: 0 padding: 0
@ -74,7 +74,7 @@
@extend %loader @extend %loader
margin-top: 0 margin-top: 0
position: absolute position: absolute
right: 0.625em +ltr-position(0.625em)
top: 0.625em top: 0.625em
transform: none transform: none
&.is-small:after &.is-small:after

20
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 +ltr-property("margin", -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
+ltr
border-bottom-right-radius: 0 border-bottom-right-radius: 0
border-top-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
+ltr
border-bottom-left-radius: 0 border-bottom-left-radius: 0
border-top-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 +ltr-property("margin", 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 +ltr-property("margin", 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 +ltr-property("margin", 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 +ltr-position(0.625em)
top: 0.625em top: 0.625em
z-index: 4 z-index: 4
&.is-small:after &.is-small:after

2
sass/layout/hero.sass
View File

@ -130,7 +130,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
display: flex display: flex
justify-content: center justify-content: center
.button:not(:last-child) .button:not(:last-child)
margin-right: 1.5rem +ltr-property("margin", 1.5rem)
// Containers // Containers

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

24
sass/utilities/mixins.sass
View File

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