From 639e09e2c303062783bb017ac606e11d3d62f8fb Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 12 Oct 2019 21:44:57 +0100 Subject: [PATCH] Increase controls size, Update base colors --- sass/elements/button.sass | 8 ++++---- sass/form/input-textarea.sass | 14 +++++++++----- sass/form/shared.sass | 2 +- sass/utilities/controls.sass | 6 +++--- sass/utilities/initial-variables.sass | 8 ++++---- 5 files changed, 21 insertions(+), 17 deletions(-) diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 5c5aca5887..c493d4d890 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -5,8 +5,8 @@ $button-family: false !default $button-border-color: $grey-lighter !default $button-border-width: $control-border-width !default -$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default -$button-padding-horizontal: 0.75em !default +$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default +$button-padding-horizontal: 1em !default $button-hover-color: $link-hover !default $button-hover-border-color: $link-hover-border !default @@ -240,8 +240,8 @@ $button-static-border-color: $grey-lighter !default pointer-events: none &.is-rounded border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em + padding-left: calc(#{$button-padding-horizontal} + 0.25em) + padding-right: calc(#{$button-padding-horizontal} + 0.25em) .buttons align-items: center diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass index da4315ce49..7636cdaed8 100644 --- a/sass/form/input-textarea.sass +++ b/sass/form/input-textarea.sass @@ -1,3 +1,7 @@ +$textarea-padding: $control-padding-horizontal !default +$textarea-max-height: 40em !default +$textarea-min-height: 8em !default + %input-textarea @extend %input box-shadow: $input-shadow @@ -34,8 +38,8 @@ @extend %input-textarea &.is-rounded border-radius: $radius-rounded - padding-left: 1em - padding-right: 1em + padding-left: calc(#{$control-padding-horizontal} + 0.375em) + padding-right: calc(#{$control-padding-horizontal} + 0.375em) &.is-static background-color: transparent border-color: transparent @@ -48,11 +52,11 @@ display: block max-width: 100% min-width: 100% - padding: 0.625em + padding: $textarea-padding resize: vertical &:not([rows]) - max-height: 600px - min-height: 120px + max-height: $textarea-max-height + min-height: $textarea-min-height &[rows] height: initial // Modifiers diff --git a/sass/form/shared.sass b/sass/form/shared.sass index 12495a33e4..0eae6633c1 100644 --- a/sass/form/shared.sass +++ b/sass/form/shared.sass @@ -2,7 +2,7 @@ $input-color: $grey-darker !default $input-background-color: $white !default $input-border-color: $grey-lighter !default $input-height: $control-height !default -$input-shadow: inset 0 1px 2px rgba($black, 0.05) !default +$input-shadow: inset 0 0.0625em 0.125em rgba($black, 0.05) !default $input-placeholder-color: rgba($input-color, 0.3) !default $input-hover-color: $grey-darker !default diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass index 7ca05213fb..cc7672a198 100644 --- a/sass/utilities/controls.sass +++ b/sass/utilities/controls.sass @@ -3,11 +3,11 @@ $control-radius-small: $radius-small !default $control-border-width: 1px !default -$control-height: 2.25em !default +$control-height: 2.5em !default $control-line-height: 1.5 !default -$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default -$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default +$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default +$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default =control -moz-appearance: none diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass index bf2e05d261..cca201e887 100644 --- a/sass/utilities/initial-variables.sass +++ b/sass/utilities/initial-variables.sass @@ -16,13 +16,13 @@ $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, 71%, 48%) !default +$yellow: hsl(48, 100%, 53%) !default +$green: hsl(141, 53%, 53%) !default $turquoise: hsl(171, 100%, 41%) !default -$cyan: hsl(204, 86%, 53%) !default +$cyan: hsl(204, 71%, 53%) !default $blue: hsl(217, 71%, 53%) !default $purple: hsl(271, 100%, 71%) !default -$red: hsl(348, 100%, 61%) !default +$red: hsl(348, 86%, 61%) !default // Typography