diff --git a/README.md b/README.md index 8a8c509..e51160a 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ This is a port of the [Bulma](https://bulma.io/) project SASS files to the SCSS syntax. -Currently, these files are based on Bulma version 0.9.2, and will be updated +Currently, these files are based on Bulma version 0.9.3, and will be updated with later releases. The files are converted to SCSS with [this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164). diff --git a/bulma.scss b/bulma.scss index 3d18e2d..d90eb01 100644 --- a/bulma.scss +++ b/bulma.scss @@ -1,4 +1,4 @@ -/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */ +/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ @import "utilities/_all"; @import "base/_all"; @import "elements/_all"; diff --git a/components/_card.scss b/components/_card.scss index c571f91..45f491b 100644 --- a/components/_card.scss +++ b/components/_card.scss @@ -2,7 +2,7 @@ $card-color: $text !default; $card-background-color: $scheme-main !default; -$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$card-shadow: $shadow !default; $card-radius: 0.25rem !default; $card-header-background-color: transparent !default; @@ -64,6 +64,8 @@ $card-media-margin: $block-spacing !default; } .card-header-icon { + @include reset; + align-items: center; cursor: pointer; display: flex; diff --git a/components/_dropdown.scss b/components/_dropdown.scss index 6cef06b..779c47b 100644 --- a/components/_dropdown.scss +++ b/components/_dropdown.scss @@ -8,7 +8,7 @@ $dropdown-content-offset: 4px !default; $dropdown-content-padding-bottom: 0.5rem !default; $dropdown-content-padding-top: 0.5rem !default; $dropdown-content-radius: $radius !default; -$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$dropdown-content-shadow: $shadow !default; $dropdown-content-z: 20 !default; $dropdown-item-color: $text !default; diff --git a/components/_level.scss b/components/_level.scss index 28cfbdb..f709058 100644 --- a/components/_level.scss +++ b/components/_level.scss @@ -1,6 +1,6 @@ @import "../utilities/mixins"; -$level-item-spacing: $block-spacing / 2 !default; +$level-item-spacing: $block-spacing * 0.5 !default; .level { @extend %block; diff --git a/components/_navbar.scss b/components/_navbar.scss index ce08d0b..7d13e59 100644 --- a/components/_navbar.scss +++ b/components/_navbar.scss @@ -208,6 +208,8 @@ body { } .navbar-burger { + @extend %reset; + color: $navbar-burger-color; @include hamburger($navbar-height); diff --git a/components/_pagination.scss b/components/_pagination.scss index b74d216..67ce7a7 100644 --- a/components/_pagination.scss +++ b/components/_pagination.scss @@ -177,6 +177,14 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; order: 1; } + .pagination-previous, + .pagination-next, + .pagination-link, + .pagination-ellipsis { + margin-bottom: 0; + margin-top: 0; + } + .pagination-previous { order: 2; } @@ -187,6 +195,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; .pagination { justify-content: space-between; + margin-bottom: 0; + margin-top: 0; &.is-centered { .pagination-previous { diff --git a/components/_panel.scss b/components/_panel.scss index 1a07dc7..3a33431 100644 --- a/components/_panel.scss +++ b/components/_panel.scss @@ -3,7 +3,7 @@ $panel-margin: $block-spacing !default; $panel-item-border: 1px solid $border-light !default; $panel-radius: $radius-large !default; -$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$panel-shadow: $shadow !default; $panel-heading-background-color: $border-light !default; $panel-heading-color: $text-strong !default; diff --git a/elements/_box.scss b/elements/_box.scss index c791173..b2fe1b0 100644 --- a/elements/_box.scss +++ b/elements/_box.scss @@ -3,7 +3,7 @@ $box-color: $text !default; $box-background-color: $scheme-main !default; $box-radius: $radius-large !default; -$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$box-shadow: $shadow !default; $box-padding: 1.25rem !default; $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default; diff --git a/elements/_button.scss b/elements/_button.scss index 294078d..949b624 100644 --- a/elements/_button.scss +++ b/elements/_button.scss @@ -103,18 +103,18 @@ $button-colors: $colors !default; } &:first-child:not(:last-child) { - @include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false); - @include ltr-property("margin", $button-padding-horizontal / 4); + @include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false); + @include ltr-property("margin", $button-padding-horizontal * 0.25); } &:last-child:not(:first-child) { - @include ltr-property("margin", $button-padding-horizontal / 4, false); - @include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})); + @include ltr-property("margin", $button-padding-horizontal * 0.25, false); + @include ltr-property("margin", calc(#{-0.5 * $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}); + margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}); + margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}); } } diff --git a/elements/_content.scss b/elements/_content.scss index f6ed4a1..d501b6e 100644 --- a/elements/_content.scss +++ b/elements/_content.scss @@ -244,6 +244,10 @@ $content-table-foot-cell-color: $text-strong !default; font-size: $size-small; } + &.is-normal { + font-size: $size-normal; + } + &.is-medium { font-size: $size-medium; } diff --git a/elements/_icon.scss b/elements/_icon.scss index b5a6908..bcdccc5 100644 --- a/elements/_icon.scss +++ b/elements/_icon.scss @@ -41,11 +41,25 @@ $icon-text-spacing: 0.25em !default; flex-shrink: 0; &:not(:last-child) { - margin-right: $icon-text-spacing; + @include ltr { + margin-right: $icon-text-spacing; + } + + + @include rtl { + margin-left: $icon-text-spacing; + } } &:not(:first-child) { - margin-left: $icon-text-spacing; + @include ltr { + margin-left: $icon-text-spacing; + } + + + @include rtl { + margin-right: $icon-text-spacing; + } } } } diff --git a/elements/_other.scss b/elements/_other.scss index be62840..7e60fb4 100644 --- a/elements/_other.scss +++ b/elements/_other.scss @@ -16,20 +16,6 @@ text-transform: uppercase; } -.highlight { - @extend %block; - - font-weight: $weight-normal; - max-width: 100%; - overflow: hidden; - padding: 0; - - pre { - overflow: auto; - max-width: 100%; - } -} - .loader { @extend %loader; } diff --git a/elements/_title.scss b/elements/_title.scss index 37e841f..fbb1baa 100644 --- a/elements/_title.scss +++ b/elements/_title.scss @@ -59,10 +59,6 @@ $subtitle-negative-margin: -1.25rem !default; font-weight: $title-strong-weight; } - & + .highlight { - margin-top: -0.75rem; - } - &:not(.is-spaced) + .subtitle { margin-top: $subtitle-negative-margin; } diff --git a/form/_file.scss b/form/_file.scss index 5452f41..55e9654 100644 --- a/form/_file.scss +++ b/form/_file.scss @@ -67,6 +67,10 @@ $file-colors: $form-colors !default; font-size: $size-small; } + &.is-normal { + font-size: $size-normal; + } + &.is-medium { font-size: $size-medium; diff --git a/grid/_columns.scss b/grid/_columns.scss index 4a29d8b..1182fd2 100644 --- a/grid/_columns.scss +++ b/grid/_columns.scss @@ -103,11 +103,11 @@ $column-gap: 0.75rem !default; @for $i from 0 through 12 { .columns.is-mobile > &.is-#{$i} { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } .columns.is-mobile > &.is-offset-#{$i} { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } @@ -206,11 +206,11 @@ $column-gap: 0.75rem !default; @for $i from 0 through 12 { &.is-#{$i}-mobile { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } &.is-offset-#{$i}-mobile { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } } @@ -332,12 +332,12 @@ $column-gap: 0.75rem !default; &.is-#{$i}, &.is-#{$i}-tablet { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } &.is-offset-#{$i}, &.is-offset-#{$i}-tablet { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } } @@ -438,11 +438,11 @@ $column-gap: 0.75rem !default; @for $i from 0 through 12 { &.is-#{$i}-touch { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } &.is-offset-#{$i}-touch { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } } @@ -543,11 +543,11 @@ $column-gap: 0.75rem !default; @for $i from 0 through 12 { &.is-#{$i}-desktop { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } &.is-offset-#{$i}-desktop { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } } @@ -648,11 +648,11 @@ $column-gap: 0.75rem !default; @for $i from 0 through 12 { &.is-#{$i}-widescreen { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } &.is-offset-#{$i}-widescreen { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } } @@ -753,11 +753,11 @@ $column-gap: 0.75rem !default; @for $i from 0 through 12 { &.is-#{$i}-fullhd { flex: none; - width: percentage($i / 12); + width: percentage(divide($i, 12)); } &.is-offset-#{$i}-fullhd { - @include ltr-property("margin", percentage($i / 12), false); + @include ltr-property("margin", percentage(divide($i, 12)), false); } } } diff --git a/grid/_tiles.scss b/grid/_tiles.scss index 815a753..2b8c709 100644 --- a/grid/_tiles.scss +++ b/grid/_tiles.scss @@ -50,7 +50,7 @@ $tile-spacing: 0.75rem !default; @for $i from 1 through 12 { &.is-#{$i} { flex: none; - width: $i / 12 * 100%; + width: divide($i, 12) * 100%; } } } diff --git a/helpers/_spacing.scss b/helpers/_spacing.scss index 8710f18..1377f4d 100644 --- a/helpers/_spacing.scss +++ b/helpers/_spacing.scss @@ -10,7 +10,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default; $spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default; $spacing-horizontal: "x" !default; $spacing-vertical: "y" !default; -$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default; +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; @each $property, $shortcut in $spacing-shortcuts { @each $name, $value in $spacing-values { diff --git a/helpers/_typography.scss b/helpers/_typography.scss index 718131c..2620efe 100644 --- a/helpers/_typography.scss +++ b/helpers/_typography.scss @@ -130,6 +130,10 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig font-style: italic !important; } +.is-underlined { + text-decoration: underline !important; +} + .has-text-weight-light { font-weight: $weight-light !important; } diff --git a/layout/_hero.scss b/layout/_hero.scss index 6aad258..56707de 100644 --- a/layout/_hero.scss +++ b/layout/_hero.scss @@ -1,9 +1,10 @@ @import "../utilities/mixins"; $hero-body-padding: 3rem 1.5rem !default; +$hero-body-padding-tablet: 3rem 3rem !default; $hero-body-padding-small: 1.5rem !default; -$hero-body-padding-medium: 9rem 1.5rem !default; -$hero-body-padding-large: 18rem 1.5rem !default; +$hero-body-padding-medium: 9rem 4.5rem !default; +$hero-body-padding-large: 18rem 6rem !default; $hero-colors: $colors !default; @@ -83,6 +84,7 @@ $hero-colors: $colors !default; li { &.is-active a { + color: $color !important; opacity: 1; } } @@ -236,4 +238,8 @@ $hero-colors: $colors !default; flex-grow: 1; flex-shrink: 0; padding: $hero-body-padding; + + @include tablet { + padding: $hero-body-padding-tablet; + } } diff --git a/layout/_section.scss b/layout/_section.scss index 17af4f1..6ea3276 100644 --- a/layout/_section.scss +++ b/layout/_section.scss @@ -1,14 +1,17 @@ @import "../utilities/mixins"; $section-padding: 3rem 1.5rem !default; -$section-padding-medium: 9rem 1.5rem !default; -$section-padding-large: 18rem 1.5rem !default; +$section-padding-desktop: 3rem 3rem !default; +$section-padding-medium: 9rem 4.5rem !default; +$section-padding-large: 18rem 6rem !default; .section { padding: $section-padding; // Responsiveness @include desktop { + padding: $section-padding-desktop; + // Sizes &.is-medium { padding: $section-padding-medium; diff --git a/package.json b/package.json index c26378a..a720f8c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-scss", - "version": "0.9.2", + "version": "0.9.3", "description": "The Bulma CSS Framework files converted to SCSS syntax", "main": "bulma.scss", "scripts": { diff --git a/utilities/_derived-variables.scss b/utilities/_derived-variables.scss index 2b1fb76..08e0536 100644 --- a/utilities/_derived-variables.scss +++ b/utilities/_derived-variables.scss @@ -99,6 +99,10 @@ $size-normal: $size-6 !default; $size-medium: $size-5 !default; $size-large: $size-4 !default; +// Effects + +$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; + // Lists and maps $custom-colors: null !default; $custom-shades: null !default; diff --git a/utilities/_extends.scss b/utilities/_extends.scss index f4e880d..99be636 100644 --- a/utilities/_extends.scss +++ b/utilities/_extends.scss @@ -27,3 +27,7 @@ %overlay { @include overlay; } + +%reset { + @include reset; +} diff --git a/utilities/_functions.scss b/utilities/_functions.scss index 3724df3..699e574 100644 --- a/utilities/_functions.scss +++ b/utilities/_functions.scss @@ -74,7 +74,7 @@ } @else if $exp < 0 { @for $i from 1 through -$exp { - $value: $value / $number; + $value: divide($value, $number); } } @@ -90,13 +90,13 @@ @each $name, $value in $color-rgb { $adjusted: 0; - $value: $value / 255; + $value: divide($value, 255); @if $value < 0.03928 { - $value: $value / 12.92; + $value: divide($value, 12.92); } @else { - $value: ($value + 0.055) / 1.055; + $value: divide($value + 0.055, 1.055); $value: powerNumber($value, 2); } @@ -165,3 +165,36 @@ @return lighten($color, $amount); } + +// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245 +// Replaces old slash division deprecated in Dart Sass +@function divide($dividend, $divisor, $precision: 10) { + $sign: if($dividend > 0 and $divisor > 0, 1, -1); + $dividend: abs($dividend); + $divisor: abs($divisor); + $quotient: 0; + $remainder: $dividend; + + @if $dividend == 0 { + @return 0; + } + + @if $divisor == 0 { + @error "Cannot divide by 0"; + } + + @if $divisor == 1 { + @return $dividend; + } + + @while $remainder >= $divisor { + $quotient: $quotient + 1; + $remainder: $remainder - $divisor; + } + + @if $remainder > 0 and $precision > 0 { + $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1; + } + + @return ($quotient + $remainder) * $sign; +} diff --git a/utilities/_initial-variables.scss b/utilities/_initial-variables.scss index 9af866a..68f3152 100644 --- a/utilities/_initial-variables.scss +++ b/utilities/_initial-variables.scss @@ -16,11 +16,11 @@ $white-bis: hsl(0, 0%, 98%) !default; $white: hsl(0, 0%, 100%) !default; $orange: hsl(14, 100%, 53%) !default; -$yellow: hsl(48, 100%, 67%) !default; -$green: hsl(141, 53%, 53%) !default; +$yellow: hsl(44, 100%, 77%) !default; +$green: hsl(153, 53%, 53%) !default; $turquoise: hsl(171, 100%, 41%) !default; -$cyan: hsl(204, 71%, 53%) !default; -$blue: hsl(217, 71%, 53%) !default; +$cyan: hsl(207, 61%, 53%) !default; +$blue: hsl(229, 53%, 53%) !default; $purple: hsl(271, 100%, 71%) !default; $red: hsl(348, 86%, 61%) !default; @@ -73,7 +73,7 @@ $easing: ease-out !default; $radius-small: 2px !default; $radius: 4px !default; $radius-large: 6px !default; -$radius-rounded: 290486px !default; +$radius-rounded: 9999px !default; $speed: 86ms !default; // Flags diff --git a/utilities/_mixins.scss b/utilities/_mixins.scss index c17f4da..b631a3e 100644 --- a/utilities/_mixins.scss +++ b/utilities/_mixins.scss @@ -12,12 +12,12 @@ position: absolute; @if $height != 0 { - left: calc(50% - (#{$width} / 2)); - top: calc(50% - (#{$height} / 2)); + left: calc(50% - (#{$width} * 0.5)); + top: calc(50% - (#{$height} * 0.5)); } @else { - left: calc(50% - (#{$width} / 2)); - top: calc(50% - (#{$width} / 2)); + left: calc(50% - (#{$width} * 0.5)); + top: calc(50% - (#{$width} * 0.5)); } } @@ -99,6 +99,19 @@ } } +@mixin reset { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + // Responsiveness @mixin from($device) {