th
vertical-align: top
&:not([align])
- text-align: left
+ text-align: inherit
th
color: $text-strong
th
padding: 0
&:not([align])
- text-align: left
+ text-align: inherit
a.dropdown-item,
button.dropdown-item
padding-right: 3rem
- text-align: left
+ text-align: inherit
white-space: nowrap
width: 100%
&:hover
$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
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
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
.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
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
.panel-icon
+fa(14px, 1em)
color: $panel-icon-color
- margin-right: 0.75em
+ +margin-right(0.75em)
.fa
font-size: inherit
line-height: inherit
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
&.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
& + 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
&.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
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})
.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)
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
list-style-type: upper-roman
ul
list-style: disc outside
- margin-left: 2em
+ +margin-left(2em)
margin-top: 1em
ul
list-style-type: circle
ul
list-style-type: square
dd
- margin-left: 2em
+ +margin-left(2em)
figure
margin-left: 2em
margin-right: 2em
th
color: $content-table-cell-heading-color
&:not([align])
- text-align: left
+ text-align: inherit
thead
td,
th
$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
pre code
background: transparent
& > .delete
+ +right(0.5rem)
position: absolute
- right: 0.5rem
top: 0.5rem
.title,
.subtitle,
th
color: $table-cell-heading-color
&:not([align])
- text-align: left
+ text-align: inherit
tr
&.is-selected
background-color: $table-row-active-background-color
display: block
max-width: $file-name-max-width
overflow: hidden
- text-align: left
+ text-align: inherit
text-overflow: ellipsis
.file-icon
justify-content: flex-start
.control
&:not(:last-child)
- margin-right: -1px
+ +margin-right(-1px)
&:not(:first-child):not(:last-child)
.button,
.input,
.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
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
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
&: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
&::after
@extend %loader
position: absolute !important
- right: 0.625em
+ +right(0.625em)
top: 0.625em
z-index: 4
&.is-small:after
// Flags
$variable-columns: true !default
+$rtl: false !default
@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