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

Fix navbar rtl

Browse Source
This commit is contained in:
Jeremy Thomas 2020-05-17 19:38:47 +01:00
parent ff70b7f858
commit 9663e2503c
14 changed files with 107 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
css/bulma-rtl.css
View File

@ -1,4 +1,4 @@
/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */ /*! bulma.io v0.8.2 | MIT License | github.com/jgthms/bulma */
@-webkit-keyframes spinAround { @-webkit-keyframes spinAround {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
@ -2916,11 +2916,11 @@ fieldset[disabled] .button {
.buttons.has-addons .button:not(:last-child) { .buttons.has-addons .button: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; margin-left: -1px;
} }
.buttons.has-addons .button:last-child { .buttons.has-addons .button:last-child {
margin-right: 0; margin-left: 0;
} }
.buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { .buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered {
@ -3828,6 +3828,11 @@ 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;
} }
@ -3935,7 +3940,7 @@ fieldset[disabled] .button {
} }
.tags .tag:not(:last-child) { .tags .tag:not(:last-child) {
margin-right: 0.5rem; margin-left: 0.5rem;
} }
.tags:last-child { .tags:last-child {
@ -3976,18 +3981,18 @@ fieldset[disabled] .button {
} }
.tags.has-addons .tag { .tags.has-addons .tag {
margin-right: 0; margin-left: 0;
} }
.tags.has-addons .tag:not(:first-child) { .tags.has-addons .tag:not(:first-child) {
margin-left: 0; margin-right: 0;
border-bottom-left-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-bottom-right-radius: 0;
} }
.tags.has-addons .tag:not(:last-child) { .tags.has-addons .tag:not(:last-child) {
border-bottom-right-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-bottom-left-radius: 0;
} }
.tag:not(body) { .tag:not(body) {
@ -4006,8 +4011,8 @@ fieldset[disabled] .button {
} }
.tag:not(body) .delete { .tag:not(body) .delete {
margin-left: 0.25rem; margin-right: 0.25rem;
margin-right: -0.375rem; margin-left: -0.375rem;
} }
.tag:not(body).is-white { .tag:not(body).is-white {
@ -4103,22 +4108,22 @@ fieldset[disabled] .button {
} }
.tag:not(body) .icon:first-child:not(:last-child) { .tag:not(body) .icon:first-child:not(:last-child) {
margin-left: -0.375em; margin-right: -0.375em;
margin-right: 0.1875em; margin-left: 0.1875em;
} }
.tag:not(body) .icon:last-child:not(:first-child) { .tag:not(body) .icon:last-child:not(:first-child) {
margin-left: 0.1875em; margin-right: 0.1875em;
margin-right: -0.375em; margin-left: -0.375em;
} }
.tag:not(body) .icon:first-child:last-child { .tag:not(body) .icon:first-child:last-child {
margin-left: -0.375em;
margin-right: -0.375em; margin-right: -0.375em;
margin-left: -0.375em;
} }
.tag:not(body).is-delete { .tag:not(body).is-delete {
margin-left: 1px; margin-right: 1px;
padding: 0; padding: 0;
position: relative; position: relative;
width: 2em; width: 2em;
@ -4319,23 +4324,23 @@ a.tag:hover {
background-color: white; background-color: white;
border-color: #dbdbdb; border-color: #dbdbdb;
border-radius: 4px; border-radius: 4px;
color: inherit; color: #363636;
} }
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered { .input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered {
@ -4561,7 +4566,7 @@ fieldset[disabled] .radio {
} }
.radio + .radio { .radio + .radio {
margin-left: 0.5em; margin-right: 0.5em;
} }
.select { .select {
@ -5249,7 +5254,7 @@ fieldset[disabled] .select select:hover {
display: flex; display: flex;
height: 1em; height: 1em;
justify-content: center; justify-content: center;
margin-right: 0.5em; margin-left: 0.5em;
width: 1em; width: 1em;
} }
@ -7230,13 +7235,13 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
} }
.navbar-link:not(.is-arrowless) { .navbar-link:not(.is-arrowless) {
padding-right: 2.5em; padding-left: 2.5em;
} }
.navbar-link:not(.is-arrowless)::after { .navbar-link:not(.is-arrowless)::after {
border-color: #3273dc; border-color: #3273dc;
margin-top: -0.375em; margin-top: -0.375em;
right: 1.125em; left: 1.125em;
} }
.navbar-dropdown { .navbar-dropdown {
@ -7355,9 +7360,6 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
align-items: center; align-items: center;
display: flex; display: flex;
} }
.navbar-item {
display: flex;
}
.navbar-item.has-dropdown { .navbar-item.has-dropdown {
align-items: stretch; align-items: stretch;
} }
@ -7400,7 +7402,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
display: none; display: none;
font-size: 0.875rem; font-size: 0.875rem;
left: 0; right: 0;
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -7411,7 +7413,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
white-space: nowrap; white-space: nowrap;
} }
.navbar-dropdown a.navbar-item { .navbar-dropdown a.navbar-item {
padding-right: 3rem; padding-left: 3rem;
} }
.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
background-color: whitesmoke; background-color: whitesmoke;
@ -8021,11 +8023,13 @@ label.panel-block:hover {
} }
.tabs.is-toggle li:first-child a { .tabs.is-toggle li:first-child a {
border-radius: 0 4px 4px 0; border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
} }
.tabs.is-toggle li:last-child a { .tabs.is-toggle li:last-child a {
border-radius: 4px 0 0 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
} }
.tabs.is-toggle li.is-active a { .tabs.is-toggle li.is-active a {
@ -10822,7 +10826,7 @@ label.panel-block:hover {
justify-content: center; justify-content: center;
} }
.hero-buttons .button:not(:last-child) { .hero-buttons .button:not(:last-child) {
margin-right: 1.5rem; margin-left: 1.5rem;
} }
} }

2
css/bulma-rtl.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
css/bulma.css vendored
View File

@ -3828,6 +3828,11 @@ 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;
} }
@ -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) {
@ -4319,23 +4324,23 @@ a.tag:hover {
background-color: white; background-color: white;
border-color: #dbdbdb; border-color: #dbdbdb;
border-radius: 4px; border-radius: 4px;
color: inherit; color: #363636;
} }
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {
color: inherit; color: rgba(54, 54, 54, 0.3);
} }
.input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered { .input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered {
@ -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

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": [

8
sass/components/navbar.sass
View File

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

12
sass/components/tabs.sass
View File

@ -125,14 +125,18 @@ $tabs-toggle-link-active-color: $link-invert !default
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false) +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
&:first-child a &:first-child a
+ltr +ltr
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius border-top-left-radius: $tabs-toggle-link-radius
border-bottom-left-radius: $tabs-toggle-link-radius
+rtl +rtl
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 border-top-right-radius: $tabs-toggle-link-radius
border-bottom-right-radius: $tabs-toggle-link-radius
&:last-child a &:last-child a
+ltr +ltr
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 border-top-right-radius: $tabs-toggle-link-radius
border-bottom-right-radius: $tabs-toggle-link-radius
+rtl +rtl
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius 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

4
sass/elements/button.sass
View File

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

40
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
border-bottom-left-radius: 0
+rtl
border-top-right-radius: 0
border-bottom-right-radius: 0
&:not(:last-child) &:not(:last-child)
border-bottom-right-radius: 0 +ltr
border-top-right-radius: 0 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)

2
sass/form/file.sass
View File

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

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