diff --git a/app/assets/stylesheets/admin/components/buttons.scss b/app/assets/stylesheets/admin/components/buttons.scss new file mode 100644 index 0000000000..90394f6ad4 --- /dev/null +++ b/app/assets/stylesheets/admin/components/buttons.scss @@ -0,0 +1,47 @@ +input[type="submit"], input[type="button"], button, .button { + position: relative; + cursor: pointer; + font-size: 85%; + @include border-radius($border-radius); + display: inline-block; + padding: 8px 15px; + border: none; + background-color: $color-btn-bg; + color: $color-btn-text; + text-transform: uppercase; + font-weight: 600 !important; + + &:before { + font-weight: normal !important; + } + + &:visited, &:active, &:focus { color: $color-btn-text } + + &:hover { + background-color: $color-btn-hover-bg; + color: $color-btn-hover-text; + } + + &:active:focus { + box-shadow: 0 0 8px 0 darken($color-btn-hover-bg, 5) inset; + } + + &.fullwidth { + width: 100%; + text-align: center; + } + + &.secondary { + background-color: transparent; + border: 1px solid $color-btn-bg; + color: $color-btn-bg; + + &:hover, &:active, &:focus { + background-color: #ebf3fb; + } + + &:active:focus { + box-shadow: none; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/admin/openfoodnetwork.scss b/app/assets/stylesheets/admin/openfoodnetwork.scss index 99f4a849bb..d946d203bc 100644 --- a/app/assets/stylesheets/admin/openfoodnetwork.scss +++ b/app/assets/stylesheets/admin/openfoodnetwork.scss @@ -1,10 +1,5 @@ @import "variables"; -input[type="submit"], input[type="button"], button, .button { - cursor: pointer; - font-size: 85%; -} - .text-center { text-align: center; } diff --git a/app/assets/stylesheets/admin/shared/forms.scss b/app/assets/stylesheets/admin/shared/forms.scss index 0acdbe92d8..850cf83fc2 100644 --- a/app/assets/stylesheets/admin/shared/forms.scss +++ b/app/assets/stylesheets/admin/shared/forms.scss @@ -54,53 +54,6 @@ label { .label-block label { display: block } -input[type="submit"], -input[type="button"], -button, .button { - @include border-radius($border-radius); - display: inline-block; - padding: 8px 15px; - border: none; - background-color: $color-btn-bg; - color: $color-btn-text; - text-transform: uppercase; - font-weight: 600 !important; - - &:before { - font-weight: normal !important; - } - - &:visited, &:active, &:focus { color: $color-btn-text } - - &:hover { - background-color: $color-btn-hover-bg; - color: $color-btn-hover-text; - } - - &:active:focus { - box-shadow: 0 0 8px 0 darken($color-btn-hover-bg, 5) inset; - } - - &.fullwidth { - width: 100%; - text-align: center; - } - - &.secondary { - background-color: transparent; - border: 1px solid $color-btn-bg; - color: $color-btn-bg; - - &:hover, &:active, &:focus { - background-color: #ebf3fb; - } - - &:active:focus { - box-shadow: none; - } - } -} - span.info { font-style: italic; font-size: 85%;