diff options
Diffstat (limited to 'app/assets/stylesheets/framework/buttons.scss')
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 161 |
1 files changed, 137 insertions, 24 deletions
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 4369ae78bde..6b89387ab5f 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -1,7 +1,29 @@ +@mixin btn-comment-icon { + border-radius: 50%; + background: $white-light; + padding: 1px 5px; + font-size: 12px; + color: $blue-500; + width: 24px; + height: 24px; + border: 1px solid $blue-500; + + &:hover, + &.inverted { + background: $blue-500; + border-color: $blue-600; + color: $white-light; + } + + &:active { + outline: 0; + } +} + @mixin btn-default { border-radius: 3px; font-size: $gl-font-size; - font-weight: 400; + font-weight: $gl-font-weight-normal; padding: $gl-vert-padding $gl-btn-padding; &:focus, @@ -20,17 +42,29 @@ color: $text; border-color: $border; + > .icon { + color: $text; + } + &:hover, &:focus { background-color: $hover-background; border-color: $hover-border; color: $hover-text; + + > .icon { + color: $hover-text; + } } &:active { background-color: $active-background; border-color: $active-border; color: $hover-text; + + > .icon { + color: $hover-text; + } } } @@ -54,17 +88,6 @@ border-color: $border-dark; color: $color; } - - svg { - - path { - fill: $color; - } - - use { - stroke: $color; - } - } } @mixin btn-green { @@ -108,6 +131,13 @@ } } +@mixin btn-svg { + height: $gl-padding; + width: $gl-padding; + top: 0; + vertical-align: text-top; +} + .btn { @include btn-default; @include btn-white; @@ -118,7 +148,6 @@ outline: 0; } - &.btn-small, &.btn-sm { padding: 4px 10px; font-size: 13px; @@ -147,6 +176,11 @@ &.btn-remove { @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); } + + &.btn-primary, + &.btn-info { + @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); + } } &.btn-gray { @@ -163,7 +197,8 @@ @include btn-orange; } - &.btn-close { + &.btn-close, + &.btn-close-color { @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); } @@ -181,7 +216,8 @@ float: right; } - &.btn-reopen { + &.btn-reopen, + .btn-reopen-color { /* should be same as parent class for now */ } @@ -189,14 +225,6 @@ @include btn-with-margin; } - &.disabled { - pointer-events: auto !important; - } - - &[disabled] { - pointer-events: none !important; - } - .fa-caret-down, .fa-chevron-down { margin-left: 5px; @@ -208,6 +236,16 @@ } } + &.dot-highlight::after { + content: ''; + background-color: $blue-500; + width: $gl-padding * 0.5; + height: $gl-padding * 0.5; + display: inline-block; + border-radius: 50%; + margin-left: 3px; + } + svg { height: 15px; width: 15px; @@ -257,6 +295,12 @@ } } +.btn-align-content { + display: flex; + justify-content: center; + align-items: center; +} + .btn-group { &.btn-grouped { @include btn-with-margin; @@ -264,7 +308,7 @@ } .btn-clipboard { - border: none; + border: 0; padding: 0 5px; } @@ -367,8 +411,77 @@ padding: 0; background: transparent; border: 0; + border-radius: 0; + &:hover, + &:active, &:focus { outline: 0; + background: transparent; + box-shadow: none; + } +} + +.btn-link.btn-secondary-hover-link { + color: $gl-text-color-secondary; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } +} + +.btn-link.btn-primary-hover-link { + color: inherit; + + &:hover, + &:active, + &:focus { + color: $gl-link-color; + text-decoration: none; + } +} + +.btn-missing { + color: $notes-light-color; + border: 1px dashed $border-gray-normal-dashed; + border-radius: $border-radius-default; + + &:hover, + &:active, + &:focus { + color: $notes-light-color; + background-color: $white-normal; + } +} + +.btn-svg svg { + @include btn-svg; +} + +// All disabled buttons, regardless of color, type, etc +%disabled { + background-color: $gray-light !important; + border-color: $theme-gray-200 !important; + color: $gl-text-color-disabled !important; + opacity: 1 !important; + cursor: default !important; + + i { + color: $gl-text-color-disabled !important; + } +} + +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn, +.dropdown-toggle[disabled], +[disabled].dropdown-menu-toggle { + @extend %disabled; + + &:hover { + @extend %disabled; } } |