github.com/hernad/nomad@v1.6.112/ui/app/styles/components/boxed-section.scss (about) 1 /** 2 * Copyright (c) HashiCorp, Inc. 3 * SPDX-License-Identifier: MPL-2.0 4 */ 5 6 .boxed-section { 7 margin-bottom: 1.5em; 8 9 &:last-child { 10 margin-bottom: 0; 11 } 12 13 .boxed-section-head, 14 .boxed-section-foot { 15 padding: 0.75em 1.5em; 16 border: 1px solid $grey-blue; 17 background: $white-ter; 18 display: flex; 19 flex-direction: row; 20 align-items: baseline; 21 flex-wrap: wrap; 22 23 .pull-right { 24 margin-left: auto; 25 } 26 27 .is-subsection { 28 display: flex; 29 align-items: baseline; 30 31 .is-padded { 32 padding: 0em 0em 0em 1em; 33 } 34 .is-one-line { 35 white-space: nowrap; 36 } 37 } 38 39 .is-fixed-width { 40 display: inline-block; 41 width: 8em; 42 } 43 44 &.is-compact { 45 padding: 0.75em; 46 } 47 } 48 49 .boxed-section-head { 50 border-top-left-radius: $radius; 51 border-top-right-radius: $radius; 52 53 &.is-light { 54 background: $white; 55 } 56 57 &.is-hollow { 58 border-bottom: none; 59 background: transparent; 60 61 & + .boxed-section-body { 62 border-top: none; 63 padding-top: 0.75em; 64 } 65 } 66 67 & + .boxed-section-body { 68 padding: 1.5em; 69 border-top-left-radius: 0; 70 border-top-right-radius: 0; 71 } 72 73 .button, 74 .is-inline-block { 75 display: inline-block; 76 } 77 78 .header-toggle { 79 display: inline-block; 80 position: relative; 81 top: 0.2em; 82 margin-left: $control-padding-horizontal; 83 margin-right: $control-padding-horizontal; 84 } 85 86 &.task-log-head .header-toggle { 87 top: 0.5em; 88 } 89 } 90 91 .boxed-section-body { 92 padding: 0.75em 1.5em; 93 background: $white; 94 border: 1px solid $grey-blue; 95 margin-top: -1px; 96 border-radius: $radius; 97 98 &.is-full-bleed { 99 padding: 0; 100 border: none; 101 102 // Often components will have a DOM presence but no layout. 103 // In that case, pass through. 104 > *:first-child, 105 > .ember-view:first-child > *:first-child { 106 border-top-left-radius: 0; 107 border-top-right-radius: 0; 108 } 109 } 110 111 &.is-dark { 112 background: $dark-2; 113 border-color: lighten($dark, 30%); 114 color: $white; 115 } 116 117 &.with-foot { 118 border-bottom-left-radius: 0; 119 border-bottom-right-radius: 0; 120 } 121 } 122 123 .boxed-section-foot { 124 margin-top: -1px; 125 border-bottom-left-radius: $radius; 126 border-bottom-right-radius: $radius; 127 } 128 129 .boxed-section-row { 130 width: 100%; 131 display: flex; 132 align-items: baseline; 133 134 + .boxed-section-row { 135 margin-top: 0.5em; 136 } 137 } 138 139 &.is-small { 140 font-size: $size-7; 141 } 142 143 @each $name, $pair in $colors { 144 $color: nth($pair, 1); 145 $color-invert: nth($pair, 2); 146 147 &.is-#{$name} { 148 > .boxed-section-head { 149 background: $color; 150 border-color: $color; 151 color: $color-invert; 152 } 153 154 > .boxed-section-body { 155 border-color: $color; 156 } 157 158 > .boxed-section-foot { 159 border-color: $color; 160 background: lighten($color, 40%); 161 color: $color; 162 } 163 } 164 } 165 }