diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index 915ba406..a4058bbd 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -33,6 +33,14 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) font-size: $size-medium &.is-large font-size: $size-large + &.is-rounded + .pagination-previous, + .pagination-next + padding-left: 1em + padding-right: 1em + border-radius: $radius-rounded + .pagination-link + border-radius: $radius-rounded .pagination, .pagination-list @@ -52,8 +60,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) padding-right: 0.5em justify-content: center margin: 0.25rem - text-align: center - + text-align: center + .pagination-previous, .pagination-next, .pagination-link diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass index 6d6f6b81..b073874a 100644 --- a/sass/components/tabs.sass +++ b/sass/components/tabs.sass @@ -122,8 +122,16 @@ $tabs-toggle-link-active-color: $link-invert !default margin-left: -#{$tabs-toggle-link-border-width} &:first-child a border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius + &.is-rounded + border-top-left-radius: $radius-rounded + border-bottom-left-radius: $radius-rounded + padding-left: 1.25em &:last-child a border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 + &.is-rounded + border-top-right-radius: $radius-rounded + border-bottom-right-radius: $radius-rounded + padding-right: 1.25em &.is-active a background-color: $tabs-toggle-link-active-background-color diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 6a428a0a..025fce88 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -199,6 +199,10 @@ $button-static-border-color: $grey-lighter !default color: $button-static-color box-shadow: none pointer-events: none + &.is-rounded + border-radius: $radius-rounded + padding-left: 1em + padding-right: 1em .buttons align-items: center diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 303a6454..d5ad7fa1 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -70,8 +70,6 @@ $help-size: $size-small !default box-shadow: $input-shadow max-width: 100% width: 100% - &[type="search"] - border-radius: 290486px &[readonly] box-shadow: none // Colors @@ -98,6 +96,8 @@ $help-size: $size-small !default &.is-inline display: inline width: auto + &.is-rounded + border-radius: $radius-rounded .input &.is-static @@ -171,6 +171,8 @@ $help-size: $size-small !default padding: 0 option padding: 0.5em 1em + &.is-rounded + border-radius: $radius-rounded // States &:hover &::after @@ -310,10 +312,16 @@ $help-size: $size-small !default &.is-right .file-cta border-radius: 0 $file-radius $file-radius 0 + &.is-rounded + border-top-right-radius: $radius-rounded + border-bottom-right-radius: $radius-rounded .file-name border-radius: $file-radius 0 0 $file-radius border-width: 1px 0 1px 1px order: -1 + &.is-rounded + border-top-left-radius: $radius-rounded + border-bottom-left-radius: $radius-rounded &.is-fullwidth .file-label width: 100% @@ -358,6 +366,8 @@ $help-size: $size-small !default padding-left: 1em padding-right: 1em white-space: nowrap + &.is-rounded + border-radius: $radius-rounded .file-cta background-color: $file-cta-background-color @@ -425,12 +435,18 @@ $help-size: $size-small !default .select select border-bottom-left-radius: $input-radius border-top-left-radius: $input-radius + &.is-rounded + border-bottom-left-radius: $radius-rounded + border-top-left-radius: $radius-rounded &:last-child .button, .input, .select select border-bottom-right-radius: $input-radius border-top-right-radius: $input-radius + &.is-rounded + border-bottom-right-radius: $radius-rounded + border-top-right-radius: $radius-rounded .button, .input, .select select diff --git a/sass/elements/image.sass b/sass/elements/image.sass index a88195b9..249e9a4c 100644 --- a/sass/elements/image.sass +++ b/sass/elements/image.sass @@ -1,4 +1,4 @@ -$dimensions: 16 24 32 48 64 96 128 !default +$dimensions: 16 24 32 48 64 96 128 256 512 !default .image display: block @@ -7,6 +7,8 @@ $dimensions: 16 24 32 48 64 96 128 !default display: block height: auto width: 100% + &.is-rounded + border-radius: $radius-rounded // Ratio &.is-square, &.is-1by1, diff --git a/sass/elements/other.sass b/sass/elements/other.sass index aa1c5c7a..b10d1fa3 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -27,7 +27,7 @@ .number align-items: center background-color: $background - border-radius: 290486px + border-radius: $radius-rounded display: inline-flex font-size: $size-medium height: 2em diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass index 63884de8..f6e8de37 100644 --- a/sass/elements/progress.sass +++ b/sass/elements/progress.sass @@ -6,7 +6,7 @@ $progress-value-background-color: $text !default -moz-appearance: none -webkit-appearance: none border: none - border-radius: 290486px + border-radius: $radius-rounded display: block height: $size-normal overflow: hidden diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass index a84e76f8..5b9548f9 100644 --- a/sass/elements/tag.sass +++ b/sass/elements/tag.sass @@ -104,7 +104,7 @@ $tag-delete-margin: 1px !default &:active background-color: darken($tag-background-color, 10%) &.is-rounded - border-radius: 290486px + border-radius: $radius-rounded a.tag &:hover diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass index e2e3bb65..0d3e09de 100644 --- a/sass/utilities/initial-variables.sass +++ b/sass/utilities/initial-variables.sass @@ -62,4 +62,5 @@ $easing: ease-out !default $radius-small: 2px !default $radius: 3px !default $radius-large: 5px !default +$radius-rounded: 290486px !default $speed: 86ms !default diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 23f20626..51c04936 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -38,7 +38,7 @@ -webkit-appearance: none background-color: rgba($black, 0.2) border: none - border-radius: 290486px + border-radius: $radius-rounded cursor: pointer display: inline-block flex-grow: 0 @@ -144,7 +144,7 @@ =loader animation: spinAround 500ms infinite linear border: 2px solid $border - border-radius: 290486px + border-radius: $radius-rounded border-right-color: transparent border-top-color: transparent content: ""