is-rounded (#1323)

* is-rounded

* padding

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

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

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

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

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,

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

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

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

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

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