is-rounded (#1323)

* is-rounded

* padding

diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass
index 915ba4064819a7b4967dd35f3b25de7c20526143..a4058bbd666bd13df22bdc9d95a420d5c1701b74 100644 (file)
--- 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 6d6f6b810ba85678554e227ef46a8d0907c068a0..b073874a86efab80bb53b838f10a8f5c7f5356e4 100644 (file)
--- 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 6a428a0a5c0d9a83ac3fda7a1a8c94545d23699a..025fce883ee8153fe2d628820300f3930055c3fe 100644 (file)
--- 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 303a6454a4e8523c2801a6402943950058168bee..d5ad7fa19f9ade66ba2f77018d2fc577296479b0 100644 (file)
--- 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 a88195b9d216452039e04acb760e7556dbade0c3..249e9a4c0542a57896866d7f49eec29e78b26085 100644 (file)
--- 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 aa1c5c7ae0069c442bc49a754e9792e6c605c3f1..b10d1fa348738798e634292bd0b0b3fe79e12eef 100644 (file)
--- 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 63884de8a5dcb28bd28a7b172268454ca4947a39..f6e8de37aaeff026888227ff27f42a65fe0d385c 100644 (file)
--- 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 a84e76f8cb141708039099005c7767e51ceda278..5b9548f97f7ac92253a2749105d78691d46a4d18 100644 (file)
--- 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 e2e3bb652f7d0712a2c2b3da95ca0c7e607720b2..0d3e09de80b841a80b2c36cb12e27557592528da 100644 (file)
--- 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 23f20626b0f927e423b21d010f42e0bbdb23d272..51c049367370755dcde08ac5b7e064f850bc624c 100644 (file)
--- 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: ""