diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/settings.scss')
-rw-r--r-- | app/assets/stylesheets/page_bundles/settings.scss | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/settings.scss b/app/assets/stylesheets/page_bundles/settings.scss new file mode 100644 index 00000000000..9037eb7ae62 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/settings.scss @@ -0,0 +1,209 @@ +@import 'mixins_and_variables_and_functions'; + +@keyframes expandMaxHeight { + 0% { + max-height: 0; + } + + 99% { + max-height: 100vh; + } + + 100% { + max-height: none; + } +} + +@keyframes collapseMaxHeight { + 0% { + max-height: 100vh; + } + + 100% { + max-height: 0; + } +} + +.settings { + // border-top for each item except the top one + border-top: 1px solid var(--border-color, $border-color); + + &:first-of-type { + margin-top: 10px; + padding-top: 0; + border: 0; + } + + + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid var(--border-color, $border-color); + } + + &.animating { + overflow: hidden; + } +} + +.settings-header { + position: relative; + padding: $gl-padding-24 110px 0 0; + + h4 { + margin-top: 0; + } + + .settings-title { + cursor: pointer; + } + + button { + position: absolute; + top: 20px; + right: 6px; + min-width: 80px; + } +} + +.settings-content { + max-height: 1px; + overflow-y: hidden; + padding-right: 110px; + animation: collapseMaxHeight 300ms ease-out; + // Keep the section from expanding when we scroll over it + pointer-events: none; + + .settings.expanded & { + max-height: none; + overflow-y: visible; + animation: expandMaxHeight 300ms ease-in; + // Reset and allow clicks again when expanded + pointer-events: auto; + } + + .settings.no-animate & { + animation: none; + } + + @media(max-width: map-get($grid-breakpoints, md)-1) { + padding-right: 20px; + } + + &::before { + content: ' '; + display: block; + height: 1px; + overflow: hidden; + margin-bottom: 4px; + } + + &::after { + content: ' '; + display: block; + height: 1px; + overflow: hidden; + margin-top: 20px; + } + + .sub-section { + margin-bottom: 32px; + padding: 16px; + border: 1px solid var(--border-color, $border-color); + background-color: var(--gray-light, $gray-light); + } + + .bs-callout, + .form-check:first-child, + .form-check .form-text.text-muted, + .form-check + .form-text.text-muted { + margin-top: 0; + } + + .form-check .form-text.text-muted { + margin-bottom: $grid-size; + } +} + +.settings-list-icon { + color: var(--gray-500, $gl-text-color-secondary); + font-size: $default-icon-size; + line-height: 42px; +} + +.settings-message { + padding: 5px; + line-height: 1.3; + color: var(--gray-900, $gray-900); + background-color: var(--orange-50, $orange-50); + border: 1px solid var(--orange-200, $orange-200); + border-radius: $gl-border-radius-base; +} + +.prometheus-metrics-monitoring { + .card { + .card-toggle { + width: 14px; + } + + .badge.badge-pill { + font-size: 12px; + line-height: 12px; + } + + .card-header .label-count { + color: var(--white, $white); + background: var(--gray-800, $gray-800); + } + + .card-body { + padding: 0; + } + + .flash-container { + margin-bottom: 0; + cursor: default; + + .flash-notice { + border-radius: 0; + } + } + } + + .custom-monitored-metrics { + .card-header { + display: flex; + align-items: center; + } + + .custom-metric { + display: flex; + align-items: center; + } + + .custom-metric-link-bold { + font-weight: $gl-font-weight-bold; + text-decoration: none; + } + } + + .loading-metrics .metrics-load-spinner { + color: var(--gray-700, $gray-700); + } + + .metrics-list { + margin-bottom: 0; + + li { + padding: $gl-padding; + + .badge.badge-pill { + margin-left: 5px; + background: $badge-bg; + } + + /* Ensure we don't add border if there's only single li */ + + li { + border-top: 1px solid var(--border-color, $border-color); + } + } + } +} |