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

Add logical properties

Browse Source
This commit is contained in:
Jeremy Thomas 2020-03-23 13:10:29 +00:00
parent 4af9686eb0
commit 0f6af6105c
21 changed files with 109 additions and 73 deletions
Show Stats 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
vertical-align: top
&:not([align])
text-align: left
text-align: inherit
th
color: $text-strong

2
sass/base/minireset.sass
View File

@ -76,4 +76,4 @@ td,
th
padding: 0
&: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
display: flex
&:first-child a
padding-left: 0
padding-inline-start: 0
&.is-active
a
color: $breadcrumb-item-active-color
@ -41,9 +41,9 @@ $breadcrumb-item-separator-color: $border-hover !default
justify-content: flex-start
.icon
&:first-child
margin-right: 0.5em
margin-inline-end: 0.5em
&:last-child
margin-left: 0.5em
margin-inline-start: 0.5em
// Alignment
&.is-centered
ol,

2
sass/components/card.sass
View File

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

6
sass/components/dropdown.sass
View File

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

4
sass/components/level.sass
View File

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

16
sass/components/media.sass
View File

@ -1,4 +1,6 @@
$media-border-color: bulmaRgba($border, 0.5) !default
$media-spacing: 1rem
$media-spacing-large: 1.5rem
.media
align-items: flex-start
@ -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
@ -34,16 +36,16 @@ $media-border-color: bulmaRgba($border, 0.5) !default
flex-shrink: 0
.media-left
margin-right: 1rem
margin-inline-end: 1rem
.media-right
margin-left: 1rem
margin-inline-start: 1rem
.media-content
flex-basis: auto
flex-grow: 1
flex-shrink: 1
text-align: left
text-align: inherit
+mobile
.media-content

4
sass/components/menu.sass
View File

@ -42,9 +42,9 @@ $menu-label-spacing: 1em !default
color: $menu-item-active-color
li
ul
border-left: $menu-list-border-left
border-inline-start: $menu-list-border-left
margin: $menu-nested-list-margin
padding-left: $menu-nested-list-padding-left
padding-inline-start: $menu-nested-list-padding-left
.menu-label
color: $menu-label-color

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-inline-start: 0.75em
& + .message-body
border-width: $message-header-body-border-width
border-top-left-radius: 0

4
sass/components/modal.sass
View File

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

12
sass/components/navbar.sass
View File

@ -151,7 +151,7 @@ body
.navbar-burger
color: $navbar-burger-color
+hamburger($navbar-height)
margin-left: auto
margin-inline-start: auto
.navbar-menu
display: none
@ -348,10 +348,10 @@ a.navbar-item,
flex-shrink: 0
.navbar-start
justify-content: flex-start
margin-right: auto
margin-inline-end: auto
.navbar-end
justify-content: flex-end
margin-left: auto
margin-inline-start: auto
.navbar-dropdown
background-color: $navbar-dropdown-background-color
border-bottom-left-radius: $navbar-dropdown-radius
@ -360,7 +360,7 @@ a.navbar-item,
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
+inset-inline-start(0)
min-width: 100%
position: absolute
top: 100%
@ -397,9 +397,9 @@ a.navbar-item,
.navbar > .container,
.container > .navbar
.navbar-brand
margin-left: -.75rem
margin-inline-start: -.75rem
.navbar-menu
margin-right: -.75rem
margin-inline-end: -.75rem
// Fixed navbar
.navbar
&.is-fixed-bottom-desktop,

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-inline-end: 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-inline-end: 0.75em
.fa
font-size: inherit
line-height: inherit

27
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-inline-end: 0.5em
&:last-child
margin-left: 0.5em
margin-inline-start: 0.5em
// Alignment
&.is-centered
ul
@ -92,7 +92,8 @@ $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
border-start-start-radius: $tabs-boxed-link-radius
border-start-end-radius: $tabs-boxed-link-radius
&:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
@ -119,11 +120,13 @@ $tabs-toggle-link-active-color: $link-invert !default
z-index: 2
li
& + li
margin-left: -#{$tabs-toggle-link-border-width}
margin-inline-start: -#{$tabs-toggle-link-border-width}
&:first-child a
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
border-start-start-radius: $tabs-toggle-link-radius
border-end-start-radius: $tabs-toggle-link-radius
&:last-child a
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
border-start-end-radius: $tabs-toggle-link-radius
border-end-end-radius: $tabs-toggle-link-radius
&.is-active
a
background-color: $tabs-toggle-link-active-background-color
@ -135,13 +138,13 @@ $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
border-end-start-radius: $radius-rounded
border-start-start-radius: $radius-rounded
padding-inline-start: 1.25em
&:last-child a
border-bottom-right-radius: $radius-rounded
border-top-right-radius: $radius-rounded
padding-right: 1.25em
border-end-end-radius: $radius-rounded
border-start-end-radius: $radius-rounded
padding-inline-end: 1.25em
// Sizes
&.is-small
font-size: $size-small

22
sass/elements/button.sass
View File

@ -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-inline-start: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-inline-end: $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-inline-start: $button-padding-horizontal / 4
margin-inline-end: 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-inline-end: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
@ -287,14 +287,14 @@ $button-static-border-color: $border !default
&.has-addons
.button
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
border-end-start-radius: 0
border-start-start-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
margin-right: -1px
border-end-end-radius: 0
border-start-end-radius: 0
margin-inline-end: -1px
&:last-child
margin-right: 0
margin-inline-end: 0
&:hover,
&.is-hovered
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
blockquote
background-color: $content-blockquote-background-color
border-left: $content-blockquote-border-left
border-inline-start: $content-blockquote-border-left
padding: $content-blockquote-padding
ol
list-style-position: outside
margin-left: 2em
margin-inline-start: 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-inline-start: 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-inline-start: 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

6
sass/elements/notification.sass
View File

@ -1,13 +1,15 @@
$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: 1.25rem 1.5rem !default
$notification-padding-start: 2.5rem !default
.notification
@extend %block
background-color: $notification-background-color
border-radius: $notification-radius
padding: $notification-padding
padding-inline-start: $notification-padding-start
position: relative
a:not(.button):not(.dropdown-item)
color: currentColor
@ -21,7 +23,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
background: transparent
& > .delete
position: absolute
right: 0.5rem
+inset-inline-end(0.5rem)
top: 0.5rem
.title,
.subtitle,

2
sass/elements/table.sass
View File

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

2
sass/form/file.sass
View File

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

28
sass/form/tools.sass
View File

@ -38,7 +38,7 @@ $help-size: $size-small !default
justify-content: flex-start
.control
&:not(:last-child)
margin-right: -1px
margin-inline-end: -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-inline-end: 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-inline-end: 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-inline-end: 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
+inset-inline-end(0.625em)
top: 0.625em
z-index: 4
&.is-small:after

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

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

20
sass/utilities/mixins.sass
View File

@ -128,6 +128,26 @@
@media screen and (min-width: $fullhd)
@content
=ltr
@if not $rtl
@content
=rtl
@if $rtl
@content
=inset-inline-start($spacing)
@if $rtl
right: $spacing
@else
left: $spacing
=inset-inline-end($spacing)
@if $rtl
left: $spacing
@else
right: $spacing
// Placeholders
=unselectable