diff options
Diffstat (limited to 'app/assets/stylesheets/pages/labels.scss')
-rw-r--r-- | app/assets/stylesheets/pages/labels.scss | 138 |
1 files changed, 91 insertions, 47 deletions
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index e179bdf0048..bc65404a741 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -50,11 +50,26 @@ .label-row { .label-name { - display: inline-block; - width: 200px; + display: block; + margin-bottom: 10px; - @media (max-width: $screen-xs-min) { - display: block; + @media (min-width: $screen-sm-min) { + display: inline-block; + width: 200px; + margin-bottom: 0; + } + } + + .label-description { + display: block; + margin-bottom: 10px; + + @media (min-width: $screen-sm-min) { + display: inline-block; + width: 40%; + margin-left: 10px; + margin-bottom: 0; + vertical-align: middle; } } @@ -68,10 +83,6 @@ padding: 3px 4px; } -.label-subscription { - display: inline-block; -} - .dropdown-labels-error { padding: 5px 10px; margin-bottom: 10px; @@ -79,62 +90,95 @@ color: $white-light; } -@mixin labels-mobile { - @media (max-width: $screen-xs-min) { - display: block; - width: 100%; - margin-left: 0; - padding: 10px 0; - } -} +.manage-labels-list { + .btn-action { + color: $gl-dark-link-color; + .fa { + font-size: 18px; + vertical-align: middle; + } -.manage-labels-list { + &:hover { + color: $gl-link-color; - .prepend-left-10, .prepend-description-left { - display: inline-block; - width: 40%; - vertical-align: middle; + &.remove-row { + color: $gl-danger; + } + } + } - @include labels-mobile; + .dropdown { + @media (min-width: $screen-sm-min) { + float: right; + } } +} - .prepend-description-left { - width: 57%; +.prioritized-labels { + margin-bottom: 30px; - @include labels-mobile; + .add-priority { + display: none; + color: $gray-light; } +} - .pull-info-right { - float: right; +.other-labels { + .remove-priority { + display: none; + } +} - @media (max-width: $screen-xs-min) { - float: none; - } +.toggle-priority { + display: inline-block; + vertical-align: middle; - .action-buttons { - border-color: transparent; - padding: 6px; - color: $gl-text-color; + button { + border-color: transparent; + padding: 5px 8px; + vertical-align: top; + font-size: 14px; - &.label-subscribe-button { - padding-left: 0; - } + &:hover { + border-color: transparent; } + } +} - i { - color: $gl-text-color; +.filtered-labels { + .label-row { + &:not(:last-child) { + margin-right: 5px; } + } - .append-right-20 { - a { - color: $gl-text-color; - } + .label-remove { + border-left: 1px solid rgba(0, 0, 0, .1); + z-index: 3; + } - @media (max-width: $screen-xs-min) { - display: block; - margin-bottom: 10px; - } + .btn { + color: inherit; + } +} + +.label-options-toggle { + width: 100%; +} + +.label-subscribe-button { + .label-subscribe-button-loading { + display: none; + } + + &.disabled { + .label-subscribe-button-icon { + display: none; + } + + .label-subscribe-button-loading { + display: block; } } } |