diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss index 362cb43d7f..f7eea00ae9 100644 --- a/ui-v2/app/styles/app.scss +++ b/ui-v2/app/styles/app.scss @@ -1,41 +1,27 @@ @charset 'utf-8'; +@import 'base/index'; +@import 'base/reset/index'; @import 'variables/index'; -@import 'ember-bulma-css/utilities/initial-variables.sass'; -@import 'ember-bulma-css/utilities/functions.sass'; -@import 'ember-bulma-css/utilities/derived-variables.sass'; -@import 'ember-bulma-css/utilities/mixins.sass'; -@import 'ember-bulma-css/utilities/controls.sass'; -@import 'ember-bulma-css/base/minireset.sass'; -@import 'ember-bulma-css/base/generic.sass'; +@import 'ember-power-select'; -%user-select-none { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -@import 'core/reset'; -@import 'core/typography'; -@import 'core/layout'; - -@import 'components/loader'; -@import 'components/main-header'; -@import 'components/footer'; @import 'components/breadcrumbs'; -@import 'components/button'; +@import 'components/anchors'; +@import 'components/buttons'; @import 'components/tabs'; -@import 'components/healthcheck-status'; -@import 'components/healthchecked-resource'; -@import 'components/expanded-single-select'; -@import 'components/app-view'; +@import 'components/table'; +@import 'components/form-elements'; + @import 'components/tabular-collection'; @import 'components/list-collection'; -@import 'components/table'; + +@import 'components/product'; + +@import 'components/healthcheck-status'; +@import 'components/healthchecked-resource'; @import 'components/freetext-filter'; +@import 'components/filter-bar'; @import 'components/tomography-graph'; @import 'components/action-group'; @import 'components/flash-message'; @@ -44,22 +30,10 @@ @import 'components/feedback-dialog'; @import 'components/notice'; +@import 'core/typography'; +@import 'core/layout'; + @import 'routes/dc/service/index'; @import 'routes/dc/nodes/index'; @import 'routes/dc/intention/index'; @import 'routes/dc/kv/index'; - -main a { - color: $text; -} -main a[rel*='help'] { - @extend %with-info; -} -main label a[rel*='help'] { - color: $text-note; -} -[role='tabpanel'] > p:only-child [rel*='help']::after { - content: none; -} - -@import 'ember-power-select'; diff --git a/ui-v2/app/styles/base/color/base-variables.scss b/ui-v2/app/styles/base/color/base-variables.scss new file mode 100644 index 0000000000..b31e096c9a --- /dev/null +++ b/ui-v2/app/styles/base/color/base-variables.scss @@ -0,0 +1,133 @@ +$brand-gray-050: #f5f6f7; +$brand-gray-100: #e1e4e7; +$brand-gray-200: #cdd3d7; +$brand-gray-300: #b9c1c7; +$brand-gray-400: #a5b0b7; +$brand-gray-500: #919fa8; +$brand-gray-600: #77838a; +$brand-gray-700: #5d666b; +$brand-gray-800: #42494d; +$brand-gray-900: #282c2e; +$brand-magenta-050: #f9ebf2; +$brand-magenta-100: #efc4d8; +$brand-magenta-200: #e59ebe; +$brand-magenta-300: #da77a4; +$brand-magenta-400: #d0508a; +$brand-magenta-500: #c62a71; +$brand-magenta-600: #9e2159; +$brand-magenta-700: #7d1a47; +$brand-magenta-800: #5a1434; +$brand-magenta-900: #360c1f; +$brand-blue-050: #f0f5ff; +$brand-blue-100: #bfd4ff; +$brand-blue-200: #8ab1ff; +$brand-blue-300: #5b92ff; +$brand-blue-400: #387aff; +$brand-blue-500: #1563ff; +$brand-blue-600: #0f4fd1; +$brand-blue-700: #0e40a3; +$brand-blue-800: #0a2d74; +$brand-blue-900: #061b46; +$brand-purple-050: #eeedfc; +$brand-purple-100: #d5d2f7; +$brand-purple-200: #aea7f2; +$brand-purple-300: #8d83ed; +$brand-purple-400: #7568e8; +$brand-purple-500: #5c4ee5; +$brand-purple-600: #4c40bc; +$brand-purple-700: #3b3292; +$brand-purple-800: #2a2469; +$brand-purple-900: #1a163f; +$brand-teal-050: #ebf8f3; +$brand-teal-100: #c3ecdc; +$brand-teal-200: #9bdfc5; +$brand-teal-300: #74d3ae; +$brand-teal-400: #4cc679; +$brand-teal-500: #25ba81; +$brand-teal-600: #1f996a; +$brand-teal-700: #187753; +$brand-teal-800: #11553b; +$brand-teal-900: #0b3324; +$brand-cyan-050: #e7f8ff; +$brand-cyan-100: #b9ecff; +$brand-cyan-200: #8be0ff; +$brand-cyan-300: #5cd3ff; +$brand-cyan-400: #2ec7ff; +$brand-cyan-500: #00bbff; +$brand-cyan-600: #009fd9; +$brand-cyan-700: #0077a3; +$brand-cyan-800: #005574; +$brand-cyan-900: #003346; +$ui-gray-1: #191a1c; +$ui-gray-2: #323538; +$ui-gray-3: #4c4f54; +$ui-gray-4: #656a70; +$ui-gray-5: #7f858d; +$ui-gray-6: #9a9ea5; +$ui-gray-7: #b4b8bc; +$ui-gray-8: #d0d2d5; +$ui-gray-9: #ebecee; +$ui-gray-10: #f3f4f6; +$ui-gray-050: #f7f8fa; +$ui-gray-100: #ebeef2; +$ui-gray-200: #dce0e6; +$ui-gray-300: #bac1cc; +$ui-gray-400: #8e96a3; +$ui-gray-500: #6f7682; +$ui-gray-600: #626873; +$ui-gray-700: #525761; +$ui-gray-800: #373a42; +$ui-gray-900: #1f2124; +$ui-green-050: #ecf7ed; +$ui-green-100: #c6e9c9; +$ui-green-200: #a0dba5; +$ui-green-300: #7acc81; +$ui-green-400: #54be5d; +$ui-green-500: #2eb039; +$ui-green-600: #26912f; +$ui-green-700: #1e7125; +$ui-green-800: #15501a; +$ui-green-900: #0d3010; +$ui-blue-050: #f0f5ff; +$ui-blue-100: #bfd4ff; +$ui-blue-200: #8ab1ff; +$ui-blue-300: #5b92ff; +$ui-blue-400: #387aff; +$ui-blue-500: #1563ff; +$ui-blue-600: #0f4fd1; +$ui-blue-700: #0e40a3; +$ui-blue-800: #0a2d74; +$ui-blue-900: #061b46; +$ui-red-050: #f9ecee; +$ui-red-100: #efc7cc; +$ui-red-200: #e5a2aa; +$ui-red-300: #db7d88; +$ui-red-400: #d15866; +$ui-red-500: #c73445; +$ui-red-600: #a32b39; +$ui-red-700: #7f222c; +$ui-red-800: #5b1820; +$ui-red-900: #370f13; +$ui-orange-050: #fef4ec; +$ui-orange-100: #fde0c8; +$ui-orange-200: #fccca4; +$ui-orange-300: #fbb77f; +$ui-orange-400: #faa35b; +$ui-orange-500: #fa8f37; +$ui-orange-600: #cd762e; +$ui-orange-700: #a05c23; +$ui-orange-800: #724119; +$ui-orange-900: #45270f; +$ui-yellow-050: #fffbed; +$ui-yellow-100: #fdeeba; +$ui-yellow-200: #fce48c; +$ui-yellow-300: #fbd95e; +$ui-yellow-400: #face30; +$ui-yellow-500: #fac402; +$ui-yellow-600: #cda102; +$ui-yellow-700: #a07d02; +$ui-yellow-800: #725a01; +$ui-yellow-900: #453601; +$transparent: transparent; +$ui-white: #fff; +$ui-black: #000; diff --git a/ui-v2/app/styles/base/color/box-placeholders.scss b/ui-v2/app/styles/base/color/box-placeholders.scss new file mode 100644 index 0000000000..aa5f5ac50c --- /dev/null +++ b/ui-v2/app/styles/base/color/box-placeholders.scss @@ -0,0 +1,16 @@ +%box-border-000 { + /* same as decor-border-000 - but need to think about being able to import color on its own*/ + border-style: solid; + border-width: 0; +} +%box-color-yellow-500 { + @extend %box-border-000; + background-color: $ui-yellow-050; + border-color: $ui-color-warning; +} +%box-color-gray-500 { + @extend %box-border-000; + background-color: $ui-gray-050; + border-color: $ui-gray-300; + color: $ui-gray-400; +} diff --git a/ui-v2/app/styles/base/color/index.scss b/ui-v2/app/styles/base/color/index.scss new file mode 100644 index 0000000000..34c035fcda --- /dev/null +++ b/ui-v2/app/styles/base/color/index.scss @@ -0,0 +1,3 @@ +@import './base-variables'; +@import './semantic-variables'; +@import './box-placeholders'; diff --git a/ui-v2/app/styles/base/color/semantic-variables.scss b/ui-v2/app/styles/base/color/semantic-variables.scss new file mode 100644 index 0000000000..32cb0fa149 --- /dev/null +++ b/ui-v2/app/styles/base/color/semantic-variables.scss @@ -0,0 +1,12 @@ +$ui-color-primary: $ui-blue-500; +$ui-color-dangerous: $ui-red-500; +$ui-color-primary-disabled: $ui-blue-500; +$ui-color-transparent: transparent; +$ui-color-neutral: $ui-gray-500; +$ui-color-action: $ui-blue-500; +$ui-color-info: $ui-blue-500; +$ui-color-success: $ui-green-500; +$ui-color-failure: $ui-red-500; +$ui-color-danger: $ui-red-500; +$ui-color-warning: $ui-yellow-500; +$ui-color-alert: $ui-orange-500; diff --git a/ui-v2/app/styles/base/decoration/base-placeholders.scss b/ui-v2/app/styles/base/decoration/base-placeholders.scss new file mode 100644 index 0000000000..42a6acd54c --- /dev/null +++ b/ui-v2/app/styles/base/decoration/base-placeholders.scss @@ -0,0 +1,4 @@ +%decor-border-000 { + border-style: solid; + border-width: 0; +} diff --git a/ui-v2/app/styles/base/decoration/base-variables.scss b/ui-v2/app/styles/base/decoration/base-variables.scss new file mode 100644 index 0000000000..c22d70dda2 --- /dev/null +++ b/ui-v2/app/styles/base/decoration/base-variables.scss @@ -0,0 +1,9 @@ +$decor-radius-000: 0; +$decor-radius-100: 2px; +$decor-radius-200: 4px; +$decor-radius-300: 7px; +$decor-radius-full: 100%; +$decor-border-000: none; +$decor-border-100: 1px solid; +$decor-border-200: 2px solid; +$decor-border-300: 3px solid; diff --git a/ui-v2/app/styles/base/decoration/index.scss b/ui-v2/app/styles/base/decoration/index.scss new file mode 100644 index 0000000000..3fe0d277f0 --- /dev/null +++ b/ui-v2/app/styles/base/decoration/index.scss @@ -0,0 +1,2 @@ +@import './base-variables'; +@import './base-placeholders'; diff --git a/ui-v2/app/styles/base/index.scss b/ui-v2/app/styles/base/index.scss new file mode 100644 index 0000000000..e48bb67d47 --- /dev/null +++ b/ui-v2/app/styles/base/index.scss @@ -0,0 +1,3 @@ +@import './decoration/index'; +@import './color/index'; +@import './typography/index'; diff --git a/ui-v2/app/styles/base/reset/base-variables.scss b/ui-v2/app/styles/base/reset/base-variables.scss new file mode 100644 index 0000000000..e726cdd98e --- /dev/null +++ b/ui-v2/app/styles/base/reset/base-variables.scss @@ -0,0 +1,35 @@ +%reset-margin { + margin: 0; +} +%reset-box { + margin: 0; + padding: 0; +} +%reset-typo { + font-size: 100%; + font-weight: normal; +} +%reset-list { + list-style: none; +} +%reset-table { + border-collapse: collapse; + border-spacing: 0; +} +%reset-table th, +%reset-table td { + padding: 0; + text-align: left; +} +/* move to layout? */ +%responsive-media { + height: auto; + max-width: 100%; +} +%user-select-none { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} diff --git a/ui-v2/app/styles/base/reset/index.scss b/ui-v2/app/styles/base/reset/index.scss new file mode 100644 index 0000000000..0aec96d2de --- /dev/null +++ b/ui-v2/app/styles/base/reset/index.scss @@ -0,0 +1,3 @@ +@import './base-variables'; +@import './system'; +@import './minireset'; diff --git a/ui-v2/app/styles/base/reset/minireset.scss b/ui-v2/app/styles/base/reset/minireset.scss new file mode 100644 index 0000000000..b469bf9406 --- /dev/null +++ b/ui-v2/app/styles/base/reset/minireset.scss @@ -0,0 +1,64 @@ +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + @extend %reset-box; +} +h1, +h2, +h3, +h4, +h5, +h6 { + @extend %reset-typo; +} +ul { + @extend %reset-list; +} +table { + @extend %reset-table; +} +img, +embed, +object, +audio, +video { + @extend %responsive-media; +} +button, +input, +select, +textarea { + margin: 0; +} +iframe { + border: 0; +} +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} diff --git a/ui-v2/app/styles/base/reset/system.scss b/ui-v2/app/styles/base/reset/system.scss new file mode 100644 index 0000000000..72af44357e --- /dev/null +++ b/ui-v2/app/styles/base/reset/system.scss @@ -0,0 +1,99 @@ +a { + text-decoration: none; +} +td, +th, +span, +strong { + color: inherit; +} +body { + color: $ui-gray-900; +} +a { + color: $ui-color-action; +} +html { + background-color: $ui-white; +} +hr { + background-color: $ui-gray-500; +} +html { + font-size: $typo-size-000; +} +body { + line-height: 1.5; +} +body, +button, +input, +select, +textarea { + font-family: $typo-family-sans; +} +code, +pre { + font-family: $typo-family-mono; +} +strong { + font-style: inherit; + font-weight: $typo-weight-bold; +} +html { + text-rendering: optimizeLegibility; + text-size-adjust: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; +} + +pre { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + white-space: pre; + word-wrap: normal; +} +html { + overflow-x: hidden; + overflow-y: scroll; +} +html { + box-sizing: border-box; +} +*, +*::before, +*::after { + box-sizing: inherit; +} +fieldset { + border: none; + width: 100%; +} +a { + cursor: pointer; +} +hr { + border: none; + display: block; +} +input[type='checkbox'], +input[type='radio'] { + vertical-align: baseline; +} +td, +th { + text-align: left; + vertical-align: top; +} +html { + min-width: 300px; +} +hr { + height: 1px; + margin: 1.5rem 0; +} diff --git a/ui-v2/app/styles/base/typography/base-variables.scss b/ui-v2/app/styles/base/typography/base-variables.scss new file mode 100644 index 0000000000..7b1faff76f --- /dev/null +++ b/ui-v2/app/styles/base/typography/base-variables.scss @@ -0,0 +1,26 @@ +$typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; +$typo-family-mono: monospace; +$typo-size-000: 16px; +$typo-size-100: 3.5rem; +$typo-size-200: 2.5rem; +$typo-size-300: 2.2rem; +$typo-size-400: 1.5rem; +$typo-size-500: 1.125rem; +$typo-size-600: 0.875rem; +$typo-size-700: 0.8125rem; +$typo-size-800: 0.75rem; +$typo-weight-light: 300; +$typo-weight-normal: 400; +$typo-weight-medium: 500; +$typo-weight-semibold: 600; +$typo-weight-bold: 700; +$typo-lead-000: 0; +$type-lead-050: 1; +$typo-lead-100: 1.2; +$typo-lead-200: 1.25; +$typo-lead-300: 1.28; +$typo-lead-500: 1.33; +$typo-lead-600: 1.4; +$typo-lead-700: 1.5; +$typo-lead-800: 1.7; diff --git a/ui-v2/app/styles/base/typography/index.scss b/ui-v2/app/styles/base/typography/index.scss new file mode 100644 index 0000000000..bb221c7e8f --- /dev/null +++ b/ui-v2/app/styles/base/typography/index.scss @@ -0,0 +1 @@ +@import './base-variables'; diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss index b4f324c114..49aec84eb9 100644 --- a/ui-v2/app/styles/components/action-group.scss +++ b/ui-v2/app/styles/components/action-group.scss @@ -1,116 +1,4 @@ +@import './action-group/index'; .action-group { @extend %action-group; } -%action-group label { - border-radius: $radius-small; - cursor: pointer; -} - -%action-group input[type='radio']:checked + label:first-of-type, -%action-group label:first-of-type:hover { - background-color: $gray; -} -%action-group label span { - display: none; -} -%action-group label::after, -%action-group label::before, -%action-group::before { - @extend %with-dot; -} -%action-group::before { - margin-left: -1px; -} -%action-group label::after { - margin-left: 5px; -} -%action-group label::before { - margin-left: -7px; -} -%action-group ul { - border: 1px solid; - border-radius: $radius-small; - box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21); -} -%action-group ul::before { - border-top: 1px solid; - border-left: 1px solid; -} -%action-group ul, -%action-group ul::before { - border-color: $blue; -} -%action-group li a:hover { - background-color: $blue; - color: $white; -} -%action-group ul, -%action-group ul::before { - background-color: $white; -} -%action-group { -} -%action-group { - width: 30px; - height: 30px; - position: absolute; - top: 8px; - right: 15px; -} -%action-group label { - display: block; - height: 100%; -} -%action-group label:last-of-type { - position: absolute; - width: 100%; - z-index: -1; - top: 0; -} -%action-group ul { - position: absolute; - right: -10px; - padding: 1px; -} -%action-group ul::before { - position: absolute; - right: 18px; - content: ''; - display: block; - width: 10px; - height: 10px; -} -%action-group ul:not(.above) { - top: 35px; -} -%action-group ul:not(.above)::before { - top: -6px; - transform: rotate(45deg); -} -%action-group ul.above { - bottom: 35px; -} -%action-group ul.above::before { - bottom: -6px; - transform: rotate(225deg); -} -%action-group li { - position: relative; - z-index: 1; -} -%action-group li a { - width: 170px; - padding: 10px 10px; -} -%action-group input[type='radio'], -%action-group input[type='radio'] ~ ul, -%action-group input[type='radio'] ~ .with-confirmation > ul { - display: none; -} -%action-group input[type='radio']:checked ~ ul, -%action-group input[type='radio']:checked ~ .with-confirmation > ul { - display: block; -} -%action-group input[type='radio']:checked ~ label:last-of-type { - z-index: 1; -} diff --git a/ui-v2/app/styles/components/action-group/index.scss b/ui-v2/app/styles/components/action-group/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/action-group/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/action-group/layout.scss b/ui-v2/app/styles/components/action-group/layout.scss new file mode 100644 index 0000000000..0c12687a0d --- /dev/null +++ b/ui-v2/app/styles/components/action-group/layout.scss @@ -0,0 +1,76 @@ +%action-group label span { + display: none; +} +%action-group::before { + margin-left: -1px; +} +%action-group label::after { + margin-left: 5px; +} +%action-group label::before { + margin-left: -7px; +} +%action-group { + width: 30px; + height: 30px; + position: absolute; + top: 8px; + right: 15px; +} +%action-group label { + display: block; + height: 100%; +} +%action-group label:last-of-type { + position: absolute; + width: 100%; + z-index: -1; + top: 0; +} +%action-group ul { + position: absolute; + right: -10px; + padding: 1px; +} +%action-group ul::before { + position: absolute; + right: 18px; + content: ''; + display: block; + width: 10px; + height: 10px; +} +%action-group ul:not(.above) { + top: 35px; +} +%action-group ul:not(.above)::before { + top: -6px; + transform: rotate(45deg); +} +%action-group ul.above { + bottom: 35px; +} +%action-group ul.above::before { + bottom: -6px; + transform: rotate(225deg); +} +%action-group li { + position: relative; + z-index: 1; +} +%action-group li a { + width: 170px; + padding: 10px 10px; +} +%action-group input[type='radio'], +%action-group input[type='radio'] ~ ul, +%action-group input[type='radio'] ~ .with-confirmation > ul { + display: none; +} +%action-group input[type='radio']:checked ~ ul, +%action-group input[type='radio']:checked ~ .with-confirmation > ul { + display: block; +} +%action-group input[type='radio']:checked ~ label[for="actions_close"] { + z-index: 1; +} diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/components/action-group/skin.scss new file mode 100644 index 0000000000..29881072b8 --- /dev/null +++ b/ui-v2/app/styles/components/action-group/skin.scss @@ -0,0 +1,37 @@ +%action-group label { + border-radius: $radius-small; + cursor: pointer; +} +%action-group ul { + border: $decor-border-100; + border-radius: $radius-small; + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21); +} +%action-group ul::before { + border-top: $decor-border-100; + border-left: $decor-border-100; +} +%action-group ul, +%action-group ul::before { + border-color: $ui-color-action; +} +%action-group input[type='radio']:checked + label:first-of-type, +%action-group label:first-of-type:hover { + background-color: $ui-gray-050; +} +%action-group label:first-of-type:active { + background-color: $ui-gray-100; +} +%action-group li a:hover { + background-color: $ui-color-action; + color: $ui-white; +} +%action-group ul, +%action-group ul::before { + background-color: $ui-white; +} +%action-group label::after, +%action-group label::before, +%action-group::before { + @extend %with-dot; +} diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss new file mode 100644 index 0000000000..4c0399dd69 --- /dev/null +++ b/ui-v2/app/styles/components/anchors.scss @@ -0,0 +1,18 @@ +@import './anchors/index'; +main a { + color: $ui-gray-900; +} +main a[rel*='help'] { + @extend %with-info; +} +main label a[rel*='help'] { + color: $ui-gray-400; +} + +[role='tabpanel'] > p:only-child [rel*='help']::after { + content: none; +} +main p a, +main dd a { + @extend %anchor; +} diff --git a/ui-v2/app/styles/components/anchors/index.scss b/ui-v2/app/styles/components/anchors/index.scss new file mode 100644 index 0000000000..093b8f8936 --- /dev/null +++ b/ui-v2/app/styles/components/anchors/index.scss @@ -0,0 +1,10 @@ +%anchor:hover, +%anchor:focus { + text-decoration: underline; +} +%anchor, +%anchor:hover, +%anchor:focus, +%anchor:active { + color: $ui-color-action; +} diff --git a/ui-v2/app/styles/components/breadcrumbs.scss b/ui-v2/app/styles/components/breadcrumbs.scss index 071467acfc..56e537ed1e 100644 --- a/ui-v2/app/styles/components/breadcrumbs.scss +++ b/ui-v2/app/styles/components/breadcrumbs.scss @@ -1,18 +1,4 @@ +@import './breadcrumbs/index'; main header nav:first-child { @extend %breadcrumbs; } -%breadcrumbs a { - @extend %with-chevron; - color: $blue; -} -%breadcrumbs { - position: absolute; - top: -35px; // %app-view:margin-top - 15px; -} -%breadcrumbs ol { - list-style-type: none; - display: flex; -} -%breadcrumbs li { - margin-right: 5px; -} diff --git a/ui-v2/app/styles/components/breadcrumbs/index.scss b/ui-v2/app/styles/components/breadcrumbs/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/breadcrumbs/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/breadcrumbs/layout.scss b/ui-v2/app/styles/components/breadcrumbs/layout.scss new file mode 100644 index 0000000000..fff6770491 --- /dev/null +++ b/ui-v2/app/styles/components/breadcrumbs/layout.scss @@ -0,0 +1,10 @@ +%breadcrumbs { + position: absolute; + top: -35px; // %app-view:margin-top - 15px; +} +%breadcrumbs ol { + display: flex; +} +%breadcrumbs li { + margin-right: 5px; +} diff --git a/ui-v2/app/styles/components/breadcrumbs/skin.scss b/ui-v2/app/styles/components/breadcrumbs/skin.scss new file mode 100644 index 0000000000..86f88cf495 --- /dev/null +++ b/ui-v2/app/styles/components/breadcrumbs/skin.scss @@ -0,0 +1,9 @@ +%breadcrumbs a { + @extend %with-chevron; +} +%breadcrumbs ol { + list-style-type: none; +} +%breadcrumbs a { + color: $ui-color-action; +} diff --git a/ui-v2/app/styles/components/button.scss b/ui-v2/app/styles/components/button.scss deleted file mode 100644 index d6d47bdbdc..0000000000 --- a/ui-v2/app/styles/components/button.scss +++ /dev/null @@ -1,120 +0,0 @@ -button, -a[rel='back'], -html.template-error div > a { - @extend %button; -} -%button.type-delete { - @extend %dangerous-button; -} -// no % all copy buttons WILL be buttons -button.copy-btn { - @extend %copy-button; -} -main p a, -main dd a { - @extend %link; -} -%button[type='submit'], -%button.type-create { - @extend %primary-button; -} -%link:hover, -%link:focus { - text-decoration: underline; -} -%button { - @extend %user-select-none; - white-space: nowrap; - border: 1px solid; - border-radius: $radius-small; - box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.12); - cursor: pointer; -} -%primary-button { - border: 0; -} -%copy-button { - border: 0 !important; - box-shadow: none !important; -} -%copy-button { - @extend %with-clipboard; -} -%button:not([type='submit']), -a[rel='back'] { - border-color: currentColor; -} -%link, -%link:hover, -%link:focus, -%link:active { - color: $blue; -} -%button { - color: $gray-500; -} -%button:hover, -%button:focus { - color: $gray-700; -} -%button:active { - color: $gray-700; -} -%copy-button { - color: $blue !important; - background-color: $transparent; -} -%copy-button:hover, -%copy-button:focus { - background-color: $gray-050; -} -%copy-button:active { - background-color: $gray-100; -} -%primary-button { - background-color: $blue-500; - color: $white !important; -} -%primary-button:hover, -%primary-button:focus { - background-color: $blue-700; -} -%primary-button:disabled { - color: rgba($white, 0.5); - background-color: rgba($blue-700, 0.5); - box-shadow: none; -} -%primary-button:active { - background-color: $blue-900; -} -%dangerous-button { - color: $dangerous-red; -} -%dangerous-button:hover, -%dangerous-button:focus { - background-color: $red-500; - color: $white; - border-color: $red-500; -} -%dangerous-button:disabled { - color: rgba($red-500, 0.5); - border-color: rgba($red-500, 0.5); - background-color: $white; - box-shadow: none; -} -%dangerous-button:active { - background-color: $red-700; - color: $white; - border-color: $red-700; -} -%button { - display: inline-flex; - text-align: center; - justify-content: center; - align-items: center; - padding: calc(0.375em - 1px) calc(2.2em - 1px); - height: 2.5em; -} -%button:not(:last-child) { - margin-right: 7px; -} diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss new file mode 100644 index 0000000000..977dc0897e --- /dev/null +++ b/ui-v2/app/styles/components/buttons.scss @@ -0,0 +1,16 @@ +@import './buttons/index'; +button[type='submit'], +a.type-create { + @extend %primary-button; +} +button[type='reset'], +button[type='button']:not(.copy-btn):not(.type-delete), +html.template-error div > a { + @extend %secondary-button; +} +button.type-delete { + @extend %dangerous-button; +} +button.copy-btn { + @extend %copy-button; +} diff --git a/ui-v2/app/styles/components/buttons/index.css b/ui-v2/app/styles/components/buttons/index.css new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/buttons/index.css @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/buttons/layout.scss b/ui-v2/app/styles/components/buttons/layout.scss new file mode 100644 index 0000000000..eb242bdb28 --- /dev/null +++ b/ui-v2/app/styles/components/buttons/layout.scss @@ -0,0 +1,11 @@ +%button { + display: inline-flex; + text-align: center; + justify-content: center; + align-items: center; + padding: calc(0.375em - 1px) calc(2.2em - 1px); + height: 2.5em; +} +%button:not(:last-child) { + margin-right: 7px; +} diff --git a/ui-v2/app/styles/components/buttons/skin.scss b/ui-v2/app/styles/components/buttons/skin.scss new file mode 100644 index 0000000000..0d8822cd61 --- /dev/null +++ b/ui-v2/app/styles/components/buttons/skin.scss @@ -0,0 +1,90 @@ +/* decor */ +%button { + @extend %user-select-none; + cursor: pointer; + white-space: nowrap; +} +%primary-button, +%secondary-button, +%copy-button, +%dangerous-button { + @extend %button; +} +%primary-button, +%secondary-button, +%dangerous-button { + border: $decor-border-100; + border-radius: $radius-small; + box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12); +} +%primary-button, +%copy-button { + border: 0; +} +%copy-button { + @extend %with-clipboard; +} +/* color */ +%secondary-button, +%dangerous-button, +%copy-button { + border-color: currentColor; +} +%secondary-button { + color: $ui-gray-400; +} +%secondary-button:hover, +%secondary-button:focus { + color: $ui-gray-600; +} +%secondary-button:active { + color: $ui-gray-600; +} +%primary-button { + background-color: $ui-color-action; + color: $ui-white; +} +%primary-button:hover, +%primary-button:focus { + background-color: $ui-blue-700; +} +%primary-button:disabled { + color: rgba($ui-white, 0.5); + background-color: rgba($ui-blue-700, 0.5); + box-shadow: none; +} +%primary-button:active { + background-color: $ui-blue-900; +} +%dangerous-button { + color: $ui-color-danger; +} +%dangerous-button:hover, +%dangerous-button:focus { + background-color: $ui-color-danger; + border-color: $ui-color-danger; + color: $ui-white; +} +%dangerous-button:disabled { + color: rgba($ui-color-danger, 0.5); + border-color: rgba($ui-color-danger, 0.5); + background-color: $ui-white; + box-shadow: none; +} +%dangerous-button:active { + background-color: $ui-red-700; + border-color: $ui-red-700; + color: $ui-white; +} +%copy-button { + color: $ui-color-action; + background-color: $ui-color-transparent; +} +%copy-button:hover, +%copy-button:focus { + color: $ui-color-action; + background-color: $ui-gray-050; +} +%copy-button:active { + background-color: $ui-gray-200; +} diff --git a/ui-v2/app/styles/components/code-editor.scss b/ui-v2/app/styles/components/code-editor.scss index 1132925cc6..966b044a5e 100644 --- a/ui-v2/app/styles/components/code-editor.scss +++ b/ui-v2/app/styles/components/code-editor.scss @@ -1,178 +1,2 @@ -$syntax-light-grey: #dde3e7; -$syntax-light-gray: #a4a4a4; -$syntax-light-grey-blue: #6c7b81; -$syntax-dark-grey: #788290; -$syntax-faded-gray: #eaeaea; -// Product colors -$syntax-atlas: #127eff; -$syntax-vagrant: #2f88f7; -$syntax-consul: #69499a; -$syntax-terraform: #822ff7; -$syntax-serf: #dd4e58; -$syntax-packer: #1ddba3; - -// Our colors -$syntax-gray: lighten($black, 89%); -$syntax-red: #ff3d3d; -$syntax-green: #39b54a; -$syntax-dark-gray: #535f73; - -$syntax-gutter-grey: #2a2f36; -$syntax-yellow: $yellow; -.CodeMirror { - min-height: 300px; - height: auto; -} -.CodeMirror-lint-tooltip { - background-color: #f9f9fa; - border: 1px solid $syntax-light-gray; - border-radius: 0; - color: lighten($black, 13%); - font-family: $family-monospace; - font-size: 13px; - padding: 7px 8px 9px; -} - -.cm-s-hashi { - &.CodeMirror { - width: 100%; - background-color: $black !important; - color: #cfd2d1 !important; - border: none; - font-family: $family-monospace; - -webkit-font-smoothing: auto; - line-height: 1.4; - } - - .CodeMirror-gutters { - color: $syntax-dark-grey; - background-color: $syntax-gutter-grey; - border: none; - } - - .CodeMirror-cursor { - border-left: solid thin #f8f8f0; - } - - .CodeMirror-linenumber { - color: #6d8a88; - } - - &.CodeMirror-focused div.CodeMirror-selected { - background: rgba(255, 255, 255, 0.1); - } - - .CodeMirror-line::selection, - .CodeMirror-line > span::selection, - .CodeMirror-line > span > span::selection { - background: rgba(255, 255, 255, 0.1); - } - - .CodeMirror-line::-moz-selection, - .CodeMirror-line > span::-moz-selection, - .CodeMirror-line > span > span::-moz-selection { - background: rgba(255, 255, 255, 0.1); - } - - span.cm-comment { - color: $syntax-light-grey; - } - - span.cm-string, - span.cm-string-2 { - color: $syntax-packer; - } - - span.cm-number { - color: $syntax-serf; - } - - span.cm-variable { - color: lighten($syntax-consul, 20%); - } - - span.cm-variable-2 { - color: lighten($syntax-consul, 20%); - } - - span.cm-def { - color: $syntax-packer; - } - - span.cm-operator { - color: $syntax-gray; - } - span.cm-keyword { - color: $syntax-yellow; - } - - span.cm-atom { - color: $syntax-serf; - } - - span.cm-meta { - color: $syntax-packer; - } - - span.cm-tag { - color: $syntax-packer; - } - - span.cm-attribute { - color: #9fca56; - } - - span.cm-qualifier { - color: #9fca56; - } - - span.cm-property { - color: lighten($syntax-consul, 20%); - } - - span.cm-variable-3 { - color: #9fca56; - } - - span.cm-builtin { - color: #9fca56; - } - - .CodeMirror-activeline-background { - background: #101213; - } - - .CodeMirror-matchingbracket { - text-decoration: underline; - color: white !important; - } -} - -.readonly-codemirror { - .CodeMirror-cursors { - display: none; - } - - .cm-s-hashi { - span { - color: $syntax-light-grey; - } - - span.cm-string, - span.cm-string-2 { - color: $syntax-faded-gray; - } - - span.cm-number { - color: lighten($syntax-dark-gray, 30%); - } - - span.cm-property { - color: white; - } - - span.cm-variable-2 { - color: $syntax-light-grey-blue; - } - } -} +@import './code-editor/index'; +// yet to make into placeholder diff --git a/ui-v2/app/styles/components/code-editor/index.scss b/ui-v2/app/styles/components/code-editor/index.scss new file mode 100644 index 0000000000..97e60dd40d --- /dev/null +++ b/ui-v2/app/styles/components/code-editor/index.scss @@ -0,0 +1,178 @@ +$syntax-light-grey: #dde3e7; +$syntax-light-gray: #a4a4a4; +$syntax-light-grey-blue: #6c7b81; +$syntax-dark-grey: #788290; +$syntax-faded-gray: #eaeaea; +// Product colors +$syntax-atlas: #127eff; +$syntax-vagrant: #2f88f7; +$syntax-consul: #69499a; +$syntax-terraform: #822ff7; +$syntax-serf: #dd4e58; +$syntax-packer: #1ddba3; + +// Our colors +$syntax-gray: lighten($ui-black, 89%); +$syntax-red: #ff3d3d; +$syntax-green: #39b54a; +$syntax-dark-gray: #535f73; + +$syntax-gutter-grey: #2a2f36; +$syntax-yellow: $ui-yellow-500; +.CodeMirror { + min-height: 300px; + height: auto; +} +.CodeMirror-lint-tooltip { + background-color: #f9f9fa; + border: 1px solid $syntax-light-gray; + border-radius: 0; + color: lighten($ui-black, 13%); + font-family: $typo-family-mono; + font-size: 13px; + padding: 7px 8px 9px; +} + +.cm-s-hashi { + &.CodeMirror { + width: 100%; + background-color: $ui-black !important; + color: #cfd2d1 !important; + border: none; + font-family: $typo-family-mono; + -webkit-font-smoothing: auto; + line-height: 1.4; + } + + .CodeMirror-gutters { + color: $syntax-dark-grey; + background-color: $syntax-gutter-grey; + border: none; + } + + .CodeMirror-cursor { + border-left: solid thin #f8f8f0; + } + + .CodeMirror-linenumber { + color: #6d8a88; + } + + &.CodeMirror-focused div.CodeMirror-selected { + background: rgba(255, 255, 255, 0.1); + } + + .CodeMirror-line::selection, + .CodeMirror-line > span::selection, + .CodeMirror-line > span > span::selection { + background: rgba(255, 255, 255, 0.1); + } + + .CodeMirror-line::-moz-selection, + .CodeMirror-line > span::-moz-selection, + .CodeMirror-line > span > span::-moz-selection { + background: rgba(255, 255, 255, 0.1); + } + + span.cm-comment { + color: $syntax-light-grey; + } + + span.cm-string, + span.cm-string-2 { + color: $syntax-packer; + } + + span.cm-number { + color: $syntax-serf; + } + + span.cm-variable { + color: lighten($syntax-consul, 20%); + } + + span.cm-variable-2 { + color: lighten($syntax-consul, 20%); + } + + span.cm-def { + color: $syntax-packer; + } + + span.cm-operator { + color: $syntax-gray; + } + span.cm-keyword { + color: $syntax-yellow; + } + + span.cm-atom { + color: $syntax-serf; + } + + span.cm-meta { + color: $syntax-packer; + } + + span.cm-tag { + color: $syntax-packer; + } + + span.cm-attribute { + color: #9fca56; + } + + span.cm-qualifier { + color: #9fca56; + } + + span.cm-property { + color: lighten($syntax-consul, 20%); + } + + span.cm-variable-3 { + color: #9fca56; + } + + span.cm-builtin { + color: #9fca56; + } + + .CodeMirror-activeline-background { + background: #101213; + } + + .CodeMirror-matchingbracket { + text-decoration: underline; + color: $ui-white !important; + } +} + +.readonly-codemirror { + .CodeMirror-cursors { + display: none; + } + + .cm-s-hashi { + span { + color: $syntax-light-grey; + } + + span.cm-string, + span.cm-string-2 { + color: $syntax-faded-gray; + } + + span.cm-number { + color: lighten($syntax-dark-gray, 30%); + } + + span.cm-property { + color: $ui-white; + } + + span.cm-variable-2 { + color: $syntax-light-grey-blue; + } + } +} diff --git a/ui-v2/app/styles/components/confirmation-dialog.scss b/ui-v2/app/styles/components/confirmation-dialog.scss index 0e4e1dec8b..6365e8433c 100644 --- a/ui-v2/app/styles/components/confirmation-dialog.scss +++ b/ui-v2/app/styles/components/confirmation-dialog.scss @@ -1,25 +1,4 @@ +@import './confirmation-dialog/index'; div.with-confirmation { @extend %confirmation-dialog, %confirmation-dialog-inline; } -table div.with-confirmation.confirming { - background-color: $white; -} -%confirmation-dialog-inline p { - color: $text-note; -} -%confirmation-dialog { - float: right; -} -%confirmation-dialog-inline p { - margin-right: 1em; - margin-bottom: 0; -} -%confirmation-dialog-inline { - display: flex; - align-items: center; - line-height: 1; -} -table div.with-confirmation.confirming { - position: absolute; - right: 0; -} diff --git a/ui-v2/app/styles/components/confirmation-dialog/index.scss b/ui-v2/app/styles/components/confirmation-dialog/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/confirmation-dialog/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/confirmation-dialog/layout.scss b/ui-v2/app/styles/components/confirmation-dialog/layout.scss new file mode 100644 index 0000000000..c58c339847 --- /dev/null +++ b/ui-v2/app/styles/components/confirmation-dialog/layout.scss @@ -0,0 +1,16 @@ +%confirmation-dialog { + float: right; +} +%confirmation-dialog-inline p { + margin-right: 1em; + margin-bottom: 0; +} +%confirmation-dialog-inline { + display: flex; + align-items: center; + line-height: 1; +} +table div.with-confirmation.confirming { + position: absolute; + right: 0; +} diff --git a/ui-v2/app/styles/components/confirmation-dialog/skin.scss b/ui-v2/app/styles/components/confirmation-dialog/skin.scss new file mode 100644 index 0000000000..8df087ff55 --- /dev/null +++ b/ui-v2/app/styles/components/confirmation-dialog/skin.scss @@ -0,0 +1,6 @@ +table div.with-confirmation.confirming { + background-color: $ui-white; +} +%confirmation-dialog-inline p { + color: $ui-gray-400; +} diff --git a/ui-v2/app/styles/components/expanded-single-select.scss b/ui-v2/app/styles/components/expanded-single-select.scss deleted file mode 100644 index b0f36de02d..0000000000 --- a/ui-v2/app/styles/components/expanded-single-select.scss +++ /dev/null @@ -1,32 +0,0 @@ -%expanded-single-select label { - cursor: pointer; -} -%expanded-single-select input[type='radio']:checked + *, -%expanded-single-select input[type='radio']:hover + *, -%expanded-single-select input[type='radio']:focus + * { - background-color: $white; - box-shadow: 0 4px 8px 0 rgba($black, 0.05); -} -%expanded-single-select, -%expanded-single-select label { - height: 100%; -} -@media #{$--horizontal-selects} { - %expanded-single-select { - display: flex; - } - %expanded-single-select label { - flex-grow: 1; - } -} -%expanded-single-select label { - display: block; -} -%expanded-single-select label span { - display: block; - height: 100%; - padding: 5px 14px; -} -%expanded-single-select input[type='radio'] { - display: none; -} diff --git a/ui-v2/app/styles/components/expanded-single-select/index.scss b/ui-v2/app/styles/components/expanded-single-select/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/expanded-single-select/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/expanded-single-select/layout.scss b/ui-v2/app/styles/components/expanded-single-select/layout.scss new file mode 100644 index 0000000000..8d35e9fba0 --- /dev/null +++ b/ui-v2/app/styles/components/expanded-single-select/layout.scss @@ -0,0 +1,23 @@ +@media #{$--horizontal-selects} { + %expanded-single-select { + display: flex; + } + %expanded-single-select label { + flex-grow: 1; + } +} +%expanded-single-select input[type='radio'] { + display: none; +} +%expanded-single-select label, +%expanded-single-select label span { + display: block; +} +%expanded-single-select, +%expanded-single-select label, +%expanded-single-select label span { + height: 100%; +} +%expanded-single-select label span { + padding: 5px 14px; +} diff --git a/ui-v2/app/styles/components/expanded-single-select/skin.scss b/ui-v2/app/styles/components/expanded-single-select/skin.scss new file mode 100644 index 0000000000..a03183b045 --- /dev/null +++ b/ui-v2/app/styles/components/expanded-single-select/skin.scss @@ -0,0 +1,13 @@ +%expanded-single-select label { + cursor: pointer; +} +%expanded-single-select input[type='radio']:checked + *, +%expanded-single-select input[type='radio']:hover + *, +%expanded-single-select input[type='radio']:focus + * { + box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05); +} +%expanded-single-select input[type='radio']:checked + *, +%expanded-single-select input[type='radio']:hover + *, +%expanded-single-select input[type='radio']:focus + * { + background-color: $ui-white; +} diff --git a/ui-v2/app/styles/components/feedback-dialog.scss b/ui-v2/app/styles/components/feedback-dialog.scss index 858f76ee2a..19ec3ca6e8 100644 --- a/ui-v2/app/styles/components/feedback-dialog.scss +++ b/ui-v2/app/styles/components/feedback-dialog.scss @@ -1,39 +1,4 @@ +@import './feedback-dialog/index'; main .with-feedback { @extend %feedback-dialog-inline; } -%feedback-dialog-inline p, -%feedback-dialog-inline p::after { - color: $white; - background-color: $carbon; -} -// %feedback-dialog-inline p { -// animation-name: feedback-dialog-out; -// animation-fill-mode: forwards; -// } -// @keyframes feedback-dialog-out { -// 90% { opacity: 1; } -// 100% { opacity: 0; } -// } -%feedback-dialog-inline { - position: relative; - display: flex; - justify-content: center; -} -%feedback-dialog-inline p::after { - content: ''; - display: block; - position: absolute; - left: 50%; - margin-left: -5px; - bottom: -5px; - width: 10px; - height: 10px; - transform: rotate(45deg); -} -%feedback-dialog-inline p { - padding: 10px; - position: absolute; - bottom: 100%; - text-align: center; - white-space: nowrap; //temp -} diff --git a/ui-v2/app/styles/components/feedback-dialog/index.scss b/ui-v2/app/styles/components/feedback-dialog/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/feedback-dialog/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/feedback-dialog/layout.scss b/ui-v2/app/styles/components/feedback-dialog/layout.scss new file mode 100644 index 0000000000..9ead44e9d2 --- /dev/null +++ b/ui-v2/app/styles/components/feedback-dialog/layout.scss @@ -0,0 +1,23 @@ +%feedback-dialog-inline { + position: relative; + display: flex; + justify-content: center; +} +%feedback-dialog-inline p::after { + content: ''; + display: block; + position: absolute; + left: 50%; + margin-left: -5px; + bottom: -5px; + width: 10px; + height: 10px; + transform: rotate(45deg); +} +%feedback-dialog-inline p { + padding: 10px; + position: absolute; + bottom: 100%; + text-align: center; + white-space: nowrap; //temp +} diff --git a/ui-v2/app/styles/components/feedback-dialog/skin.scss b/ui-v2/app/styles/components/feedback-dialog/skin.scss new file mode 100644 index 0000000000..172a9f5081 --- /dev/null +++ b/ui-v2/app/styles/components/feedback-dialog/skin.scss @@ -0,0 +1,5 @@ +%feedback-dialog-inline p, +%feedback-dialog-inline p::after { + color: $ui-white; + background-color: $ui-gray-800; +} diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss index 018a76b9d2..5d65866dee 100644 --- a/ui-v2/app/styles/components/filter-bar.scss +++ b/ui-v2/app/styles/components/filter-bar.scss @@ -1,81 +1,12 @@ -@import './expanded-single-select'; -@import './icons'; +@import './filter-bar/index'; +@import './expanded-single-select/index'; +@import './icons/index'; .filter-bar { @extend %filter-bar; } - -// decoration/color -%filter-bar > * { - border: 1px solid; - border-radius: $radius-small; -} -// TODO: Move this elsewhere -@media #{$--horizontal-selects} { - %filter-bar label:not(:last-child) { - border-right: 1px solid; - } -} -@media #{$--lt-horizontal-selects} { - %filter-bar label:not(:last-child) { - border-bottom: 1px solid; - } -} -%filter-bar, -%filter-bar > * { - background-color: $lightest-gray; -} -%filter-bar > *, -%filter-bar label:not(:last-child) { - border-color: $border-blue !important; -} - -// layout -%filter-bar { - padding: 14px; - display: block; -} -@media #{$--horizontal-filters} { - %filter-bar { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - } - %filter-bar > *:first-child { - margin-left: 12px; - } - %filter-bar fieldset { - min-width: 210px; - width: auto; - } -} -@media #{$--lt-horizontal-filters} { - %filter-bar > *:first-child { - margin-bottom: 12px; - } -} %filter-bar [role='radiogroup'] { @extend %expanded-single-select; } -%filter-bar [role='radiogroup'] label { - color: $text-note; - cursor: pointer; - line-height: 1.7; - white-space: nowrap; -} -// icons -%filter-bar [role='radiogroup'] label span::before { - left: 11px; - top: 50%; - margin-top: -0.5em; -} -%filter-bar .value-allow span, -%filter-bar .value-deny span, -%filter-bar .value-passing span, -%filter-bar .value-warning span, -%filter-bar .value-critical span { - position: relative; - text-indent: 23px; -} %filter-bar .value-passing span { @extend %with-passing; } @@ -100,12 +31,3 @@ %filter-bar .value-critical span { @extend %with-critical; } -%filter-bar .value-warning span::after { - left: 0.7em; - top: 50%; - margin-top: -8px; - border-color: $lightest-gray; -} -%filter-bar .value-warning input:checked + span::after { - border-color: $white; -} diff --git a/ui-v2/app/styles/components/filter-bar/index.scss b/ui-v2/app/styles/components/filter-bar/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/filter-bar/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/filter-bar/layout.scss b/ui-v2/app/styles/components/filter-bar/layout.scss new file mode 100644 index 0000000000..d4be8335c6 --- /dev/null +++ b/ui-v2/app/styles/components/filter-bar/layout.scss @@ -0,0 +1,43 @@ +%filter-bar { + padding: 14px; + display: block; + margin-top: 0 !important; +} +@media #{$--horizontal-filters} { + %filter-bar { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } + %filter-bar > *:first-child { + margin-left: 12px; + } + %filter-bar fieldset { + min-width: 210px; + width: auto; + } +} +@media #{$--lt-horizontal-filters} { + %filter-bar > *:first-child { + margin-bottom: 12px; + } +} +// icons +%filter-bar [role='radiogroup'] label span::before { + left: 11px; + top: 50%; + margin-top: -0.5em; +} +%filter-bar .value-allow span, +%filter-bar .value-deny span, +%filter-bar .value-passing span, +%filter-bar .value-warning span, +%filter-bar .value-critical span { + position: relative; + text-indent: 23px; +} +%filter-bar .value-warning span::after { + left: 0.7em; + top: 50%; + margin-top: -8px; +} diff --git a/ui-v2/app/styles/components/filter-bar/skin.scss b/ui-v2/app/styles/components/filter-bar/skin.scss new file mode 100644 index 0000000000..518b63ec94 --- /dev/null +++ b/ui-v2/app/styles/components/filter-bar/skin.scss @@ -0,0 +1,38 @@ +// decoration/color +%filter-bar > * { + border: $decor-border-100; + border-radius: $radius-small; +} +// TODO: Move this elsewhere +@media #{$--horizontal-selects} { + %filter-bar label:not(:last-child) { + border-right: $decor-border-100; + } +} +@media #{$--lt-horizontal-selects} { + %filter-bar label:not(:last-child) { + border-bottom: $decor-border-100; + } +} +%filter-bar [role='radiogroup'] label { + cursor: pointer; + white-space: nowrap; +} +%filter-bar, +%filter-bar > * { + background-color: $ui-gray-050; +} +%filter-bar > *, +%filter-bar label:not(:last-child) { + border-color: $ui-gray-300 !important; +} + +%filter-bar [role='radiogroup'] label { + color: $ui-gray-400; +} +%filter-bar .value-warning span::after { + border-color: $ui-gray-050; +} +%filter-bar .value-warning input:checked + span::after { + border-color: $ui-white; +} diff --git a/ui-v2/app/styles/components/flash-message.scss b/ui-v2/app/styles/components/flash-message.scss index a621b023a6..1043b10919 100644 --- a/ui-v2/app/styles/components/flash-message.scss +++ b/ui-v2/app/styles/components/flash-message.scss @@ -1,52 +1,4 @@ +@import './flash-message/index'; .flash-message { @extend %flash-message; } -%flash-message p.success strong { - @extend %with-passing; -} -%flash-message p.success { - border-color: $green; - background-color: $green-050; -} -%flash-message p { - color: $green; -} -%flash-message p.error strong { - @extend %with-critical; -} -%flash-message p.error { - border-color: $red; - background-color: $red-050; -} -%flash-message p.error { - color: $red; -} - -%flash-message p { - border-radius: $radius-small; - border: 1px solid; -} -%flash-message { - display: flex; - position: relative; - z-index: 2; - justify-content: center; - margin: 0 15%; -} -%flash-message p { - top: -46px; - position: absolute; - padding: 9px 15px; -} -%flash-message p strong { - color: inherit; -} -%flash-message p strong { - position: relative; - display: inline-block; - padding-left: 20px; -} -%flash-message p strong::before { - left: 0; - margin-top: -0.5em !important; -} diff --git a/ui-v2/app/styles/components/flash-message/index.scss b/ui-v2/app/styles/components/flash-message/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/flash-message/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/flash-message/layout.scss b/ui-v2/app/styles/components/flash-message/layout.scss new file mode 100644 index 0000000000..c7dea1fee6 --- /dev/null +++ b/ui-v2/app/styles/components/flash-message/layout.scss @@ -0,0 +1,21 @@ +%flash-message { + display: flex; + position: relative; + z-index: 2; + justify-content: center; + margin: 0 15%; +} +%flash-message p { + top: -46px; + position: absolute; + padding: 9px 15px; +} +%flash-message p strong { + position: relative; + display: inline-block; + padding-left: 20px; +} +%flash-message p strong::before { + left: 0; + margin-top: -0.5em !important; +} diff --git a/ui-v2/app/styles/components/flash-message/skin.scss b/ui-v2/app/styles/components/flash-message/skin.scss new file mode 100644 index 0000000000..1324eb3b55 --- /dev/null +++ b/ui-v2/app/styles/components/flash-message/skin.scss @@ -0,0 +1,27 @@ +%flash-message p.success strong { + @extend %with-passing; +} +%flash-message p.error strong { + @extend %with-critical; +} +%flash-message p { + border: $decor-border-100; + border-radius: $radius-small; +} +%flash-message p.success { + border-color: $ui-color-success; + background-color: $ui-green-050; +} +%flash-message p { + color: $ui-color-success; +} +%flash-message p.error { + border-color: $ui-color-failure; + background-color: $ui-red-050; +} +%flash-message p.error { + color: $ui-color-failure; +} +%flash-message p strong { + color: inherit; +} diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss index fa2eae5e06..6b98a3cf3d 100644 --- a/ui-v2/app/styles/components/form-elements.scss +++ b/ui-v2/app/styles/components/form-elements.scss @@ -1,167 +1,10 @@ +@import './form-elements/index'; .type-toggle { @extend %toggle; - float: right; - margin-bottom: 0 !important; } -%form-element > span { - display: block; - margin-bottom: 0.5em; +label span { + @extend %user-select-none; } -[type='radio'] { - cursor: pointer; -} -%form-element textarea { - display: block; - max-width: 100%; - min-width: 100%; - min-height: 70px; - padding: 0.625em 15px; - resize: vertical; - line-height: 1.5; -} -%form-element [type='text'], -%form-element [type='password'] { - max-width: 100%; - width: 100%; - display: inline-flex; - justify-content: flex-start; - height: 2.25em; - line-height: 1.5; -} -%form-element [type='text'], -%form-element [type='password'] { - border: 1px solid; - -moz-appearance: none; - -webkit-appearance: none; -} -%form-element [type='text'], -%form-element [type='password'] { - box-shadow: none; - border-radius: $radius-small; -} -.has-error > input, -.has-error > textarea { - border: 1px solid; -} -%form-element > span { - color: $text-gray; -} -%form-element [type='text'], -%form-element [type='password'], -%form-element textarea { - color: $user-text-gray; -} -%form-element [type='text'], -%form-element [type='password'], -%form-element textarea { - background-color: $gray-050; -} -%form-element [type='text'], -%form-element [type='password'], -%form-element textarea { - border-color: $border-mid; -} -%form-element [type='text']:hover, -%form-element [type='password']:hover, -%form-element textarea:hover { - border-color: $blue; -} -%form-element [type='text']:focus, -%form-element [type='password']:focus, -%form-element textarea:focus { - outline: none; - box-shadow: none; - border-color: $border-dark; -} -.has-error > input { - border-color: $dangerous-red !important; -} -%toggle input:checked + span::before { - background-color: $green; -} -%toggle span { - color: $text; -} -%form-element > em { - color: $text-note; -} -%toggle span::after { - border-radius: 100%; - background-color: $white; -} -%toggle span::before { - background-color: $border-blue; - border-radius: 7px; -} -%form-element, -%form-element > em { - display: block; -} -%form-element > em { - margin-left: 8px; - margin-top: 10px; -} -%form-element, -%radio-group { - margin-bottom: 1.55em; -} -%form-element > span { - margin-bottom: 0.4em !important; -} -%radio-group { - overflow: hidden; - padding-left: 1px; -} -%radio-group label { - @extend %form-element; - float: left; -} -%radio-group label:not(:last-child) { - margin-right: 25px; -} -%radio-group label > span { - margin-left: 1em; - margin-top: 0.2em; - float: right; -} -%radio-group label, -%radio-group label > span { - margin-bottom: 0 !important; -} -%form-element [type='text'], -%form-element [type='password'] { - padding: 17px 15px; -} -%toggle { - position: relative; -} -%toggle input { - display: none; -} -%toggle span { - display: inline-block; - padding-left: 25px; -} -%toggle span::before, -%toggle span::after { - position: absolute; - display: block; - content: ''; - top: 50%; - cursor: pointer; -} -%toggle span::before { - left: 0px; - width: 20px; - height: 12px; - margin-top: -8px; -} -%toggle span::after { - left: 2px; - margin-top: -6px; - width: 8px; - height: 8px; -} -%toggle input:checked + span::after { - left: 10px; +.has-error { + @extend %form-element-error; } diff --git a/ui-v2/app/styles/components/form-elements/index.scss b/ui-v2/app/styles/components/form-elements/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/form-elements/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/form-elements/layout.scss b/ui-v2/app/styles/components/form-elements/layout.scss new file mode 100644 index 0000000000..3fc9e898a9 --- /dev/null +++ b/ui-v2/app/styles/components/form-elements/layout.scss @@ -0,0 +1,94 @@ +%toggle { + float: right; + margin-bottom: 0 !important; +} +%form-element > span { + display: block; + margin-bottom: 0.5em; +} +%form-element textarea { + display: block; + max-width: 100%; + min-width: 100%; + min-height: 70px; + padding: 0.625em 15px; + resize: vertical; +} +%form-element [type='text'], +%form-element [type='password'] { + max-width: 100%; + width: 100%; + display: inline-flex; + justify-content: flex-start; + height: 2.25em; +} +%form-element, +%form-element > em { + display: block; +} +%form-element > em { + margin-left: 8px; + margin-top: 10px; +} +%form-element, +%radio-group { + margin-bottom: 1.55em; +} +%form-element > span { + margin-bottom: 0.4em !important; +} +%radio-group { + overflow: hidden; + padding-left: 1px; +} +%radio-group label { + float: left; +} +%radio-group label:not(:last-child) { + margin-right: 25px; +} +%radio-group label > span { + margin-left: 1em; + margin-top: 0.2em; + float: right; +} +%radio-group label, +%radio-group label > span { + margin-bottom: 0 !important; +} +%form-element [type='text'], +%form-element [type='password'] { + padding: 17px 15px; +} +%toggle { + position: relative; +} +%toggle input { + display: none; +} +%toggle span { + display: inline-block; + padding-left: 25px; +} +%toggle span::before, +%toggle span::after { + position: absolute; + display: block; + content: ''; + top: 50%; +} +%toggle span::before { + left: 0px; + width: 20px; + height: 12px; + margin-top: -8px; +} +%toggle span::after { + left: 2px; + margin-top: -6px; + width: 8px; + height: 8px; +} +%toggle input:checked + span::after { + left: 10px; +} diff --git a/ui-v2/app/styles/components/form-elements/skin.scss b/ui-v2/app/styles/components/form-elements/skin.scss new file mode 100644 index 0000000000..8f58f355f3 --- /dev/null +++ b/ui-v2/app/styles/components/form-elements/skin.scss @@ -0,0 +1,73 @@ +%form-element-error > input, +%form-element-error > textarea { + border: $decor-border-100; +} +%radio-group label { + @extend %form-element; +} +[type='radio'], +%toggle span::before, +%toggle span::after { + cursor: pointer; +} +%form-element [type='text'], +%form-element [type='password'] { + border: $decor-border-100; + -moz-appearance: none; + -webkit-appearance: none; +} +%form-element [type='text'], +%form-element [type='password'] { + box-shadow: none; + border-radius: $radius-small; +} +%form-element [type='text']:focus, +%form-element [type='password']:focus, +%form-element textarea:focus { + outline: none; + box-shadow: none; + border-color: $ui-gray-400; +} +%form-element-error > input { + border-color: $ui-color-failure !important; +} +%toggle input:checked + span::before { + background-color: $ui-color-success; +} +%toggle span { + color: $ui-gray-900; +} +%form-element > em { + color: $ui-gray-400; +} +%toggle span::after { + border-radius: 100%; + background-color: $ui-white; +} +%toggle span::before { + background-color: $ui-gray-300; + border-radius: 7px; +} +%form-element > span { + color: $ui-gray-500; +} +%form-element [type='text'], +%form-element [type='password'], +%form-element textarea { + color: $ui-gray-500; +} +%form-element [type='text'], +%form-element [type='password'], +%form-element textarea { + background-color: $ui-gray-050; +} +%form-element [type='text'], +%form-element [type='password'], +%form-element textarea { + border-color: $ui-gray-300; +} +%form-element [type='text']:hover, +%form-element [type='password']:hover, +%form-element textarea:hover { + border-color: $ui-color-action; +} diff --git a/ui-v2/app/styles/components/freetext-filter.scss b/ui-v2/app/styles/components/freetext-filter.scss index 28164c48b7..6f92dd58b6 100644 --- a/ui-v2/app/styles/components/freetext-filter.scss +++ b/ui-v2/app/styles/components/freetext-filter.scss @@ -1,43 +1,8 @@ -@import './icons'; +@import './freetext-filter/index'; +@import './icons/index'; .freetext-filter { @extend %freetext-filter; } -%freetext-filter { - cursor: pointer; -} -%freetext-filter input { - -webkit-appearance: none; - border: none; - border-right: 1px solid; -} %freetext-filter span { @extend %with-magnifier; - visibility: hidden; -} -%freetext-filter { - background-color: $white; -} -%freetext-filter span { - color: $border-blue; -} -%freetext-filter input { - border-color: 1px $border-blue; -} -%freetext-filter input, -%freetext-filter input::placeholder { - color: $text-note; -} -%freetext-filter label { - display: block; - height: 33px; -} -%freetext-filter input { - width: calc(100% - 2.7em); - height: 100%; - padding: 8px 10px; -} -%freetext-filter span { - width: 2.7em; - height: 100%; - float: right; } diff --git a/ui-v2/app/styles/components/freetext-filter/index.scss b/ui-v2/app/styles/components/freetext-filter/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/freetext-filter/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/freetext-filter/layout.scss b/ui-v2/app/styles/components/freetext-filter/layout.scss new file mode 100644 index 0000000000..7eda7f6205 --- /dev/null +++ b/ui-v2/app/styles/components/freetext-filter/layout.scss @@ -0,0 +1,17 @@ +%freetext-filter span { + visibility: hidden; +} +%freetext-filter label { + display: block; + height: 33px; +} +%freetext-filter input { + width: calc(100% - 2.7em); + height: 100%; + padding: 8px 10px; +} +%freetext-filter span { + width: 2.7em; + height: 100%; + float: right; +} diff --git a/ui-v2/app/styles/components/freetext-filter/skin.scss b/ui-v2/app/styles/components/freetext-filter/skin.scss new file mode 100644 index 0000000000..9c1dfbc788 --- /dev/null +++ b/ui-v2/app/styles/components/freetext-filter/skin.scss @@ -0,0 +1,21 @@ +%freetext-filter { + cursor: pointer; +} +%freetext-filter input { + -webkit-appearance: none; + border: none; + border-right: $decor-border-100; +} +%freetext-filter { + background-color: $ui-white; +} +%freetext-filter span { + color: $ui-gray-300; +} +%freetext-filter input { + border-color: $ui-gray-300; +} +%freetext-filter input, +%freetext-filter input::placeholder { + color: $ui-gray-400; +} diff --git a/ui-v2/app/styles/components/healthcheck-status.scss b/ui-v2/app/styles/components/healthcheck-status.scss index 55b34acf53..c8d34ee754 100644 --- a/ui-v2/app/styles/components/healthcheck-status.scss +++ b/ui-v2/app/styles/components/healthcheck-status.scss @@ -1,68 +1,14 @@ -@import './icons'; +@import './healthcheck-status/index'; +@import './icons/index'; .healthcheck-status { @extend %healthcheck-status; } -%healthcheck-status { - border: 1px solid; -} -%healthcheck-status, -%healthcheck-status pre { - border-radius: $radius-small; -} -%healthcheck-status dd:first-of-type { - color: $text-note; -} -%healthcheck-status pre { - background-color: $black; - color: $white; -} -%healthcheck-status::before { - background-size: 55%; - width: 25px !important; - height: 25px !important; - left: 17px; - top: 20px !important; - margin-top: 0 !important; -} %healthcheck-status.passing { @extend %with-passing; - border-color: $border-blue; -} -%healthcheck-status.passing::before { - background-color: $green !important; -} -%healthcheck-status.critical { - @extend %with-critical; - border-color: $red; - background-color: rgba($red, 0.1); -} -%healthcheck-status.critical::before { - background-color: $red !important; } %healthcheck-status.warning { @extend %with-warning; - border-color: $orange; - background-color: rgba($orange, 0.1); } -%healthcheck-status.warning::before { - background-size: 100%; -} -%healthcheck-status { - padding: 20px 24px; - padding-bottom: 26px; - padding-left: 57px; - margin-bottom: 24px; - position: relative; -} -%healthcheck-status pre { - padding: 12px; -} -%healthcheck-status .with-feedback { - float: right; -} -%healthcheck-status dt { - margin-bottom: 0.2em; -} -%healthcheck-status dd:first-of-type { - margin-bottom: 0.6em; +%healthcheck-status.critical { + @extend %with-critical; } diff --git a/ui-v2/app/styles/components/healthcheck-status/index.scss b/ui-v2/app/styles/components/healthcheck-status/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/healthcheck-status/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/healthcheck-status/layout.scss b/ui-v2/app/styles/components/healthcheck-status/layout.scss new file mode 100644 index 0000000000..ef40daf375 --- /dev/null +++ b/ui-v2/app/styles/components/healthcheck-status/layout.scss @@ -0,0 +1,30 @@ +%healthcheck-status::before { + background-size: 55%; + width: 25px !important; + height: 25px !important; + left: 17px; + top: 20px !important; + margin-top: 0 !important; +} +%healthcheck-status.warning::before { + background-size: 100%; +} +%healthcheck-status { + padding: 20px 24px; + padding-bottom: 26px; + padding-left: 57px; + margin-bottom: 24px; + position: relative; +} +%healthcheck-status pre { + padding: 12px; +} +%healthcheck-status .with-feedback { + float: right; +} +%healthcheck-status dt { + margin-bottom: 0.2em; +} +%healthcheck-status dd:first-of-type { + margin-bottom: 0.6em; +} diff --git a/ui-v2/app/styles/components/healthcheck-status/skin.scss b/ui-v2/app/styles/components/healthcheck-status/skin.scss new file mode 100644 index 0000000000..e37d72f506 --- /dev/null +++ b/ui-v2/app/styles/components/healthcheck-status/skin.scss @@ -0,0 +1,31 @@ +%healthcheck-status { + border: $decor-border-100; +} +%healthcheck-status, +%healthcheck-status pre { + border-radius: $radius-small; +} +%healthcheck-status dd:first-of-type { + color: $ui-gray-400; +} +%healthcheck-status pre { + background-color: $ui-black; + color: $ui-white; +} +%healthcheck-status.passing { + border-color: $ui-gray-200; +} +%healthcheck-status.passing::before { + background-color: $ui-color-success !important; +} +%healthcheck-status.critical { + border-color: $ui-color-danger; + background-color: rgba($ui-color-danger, 0.1); +} +%healthcheck-status.critical::before { + background-color: $ui-color-danger !important; +} +%healthcheck-status.warning { + border-color: $ui-color-alert; + background-color: rgba($ui-color-alert, 0.1); +} diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index c7b7b7f738..e163ff534e 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -1,111 +1,14 @@ -@import './icons'; +@import './healthchecked-resource/index'; +@import './icons/index'; .healthchecked-resource { @extend %healthchecked-resource; } -%healthchecked-resource { - border: 1px solid; - box-shadow: 0 4px 8px 0 rgba($black, 0.05); -} -%healthchecked-resource:hover, -%healthchecked-resource:focus { - box-shadow: 0 8px 10px 0 rgba($black, 0.1); -} -%healthchecked-resource li { - border-top: 1px solid; -} -%healthchecked-resource header span, -%healthchecked-resource header em, -%healthchecked-resource li:not(:last-child) span { - overflow: hidden; - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; -} -%healthchecked-resource li:last-child:not(:only-child) { - overflow: hidden; - white-space: nowrap; -} -%healthchecked-resource, -%healthchecked-resource li { - border-color: $border-blue; -} -%healthchecked-resource { - position: relative; - border-radius: $radius-small; -} -%healthchecked-resource header { - position: relative; -} - -%healthchecked-resource header strong { - position: absolute; -} -%healthchecked-resource a, -%healthchecked-resource header a > * { - display: block; -} -%healthchecked-resource li { - position: relative; -} -%healthchecked-resource li::before { - left: 11px; - top: 50%; - margin-top: -0.49em !important; -} %healthchecked-resource li.passing { @extend %with-passing; - color: $green; } %healthchecked-resource li.warning { @extend %with-warning; - color: $orange; } %healthchecked-resource li.critical { @extend %with-critical; - color: $red; -} -.healthy .healthchecked-resource header span { - padding-right: 20px; -} -.healthy .healthchecked-resource li { - position: absolute; - top: 8px; - right: 16px; - border: none; -} -.healthy .healthchecked-resource li::before { - left: 0; -} -.healthy .healthchecked-resource li span { - display: none; -} -.healthy .healthchecked-resource li a { - padding-left: 0; -} -%healthchecked-resource header strong { - top: 2.8em; - left: 15px; -} -%healthchecked-resource header span { - margin-bottom: 1.75em; -} -%healthchecked-resource header a { - padding: 12px 15px; -} -.unhealthy .healthchecked-resource header a { - padding-bottom: 15px; -} -.unhealthy .healthchecked-resource header.with-service a { - padding-bottom: 25px; -} -%healthchecked-resource li a { - padding: 3px 15px; - padding-top: 4px; - padding-left: 39px; - height: 31px; -} -%healthchecked-resource li:not(.passing) strong, -.healthy .healthchecked-resource li:only-child strong { - display: none; } diff --git a/ui-v2/app/styles/components/healthchecked-resource/index.scss b/ui-v2/app/styles/components/healthchecked-resource/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/healthchecked-resource/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/healthchecked-resource/layout.scss b/ui-v2/app/styles/components/healthchecked-resource/layout.scss new file mode 100644 index 0000000000..630905bdda --- /dev/null +++ b/ui-v2/app/styles/components/healthchecked-resource/layout.scss @@ -0,0 +1,78 @@ +%healthchecked-resource header span, +%healthchecked-resource header em, +%healthchecked-resource li:not(:last-child) span { + overflow: hidden; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 100%; +} +%healthchecked-resource li:last-child:not(:only-child) { + overflow: hidden; + white-space: nowrap; +} +%healthchecked-resource, +%healthchecked-resource li { + border-color: $ui-gray-200; +} +%healthchecked-resource, +%healthchecked-resource header, +%healthchecked-resource li { + position: relative; +} +%healthchecked-resource header strong { + position: absolute; +} +%healthchecked-resource a, +%healthchecked-resource header a > * { + display: block; +} +%healthchecked-resource li::before { + left: 11px; + top: 50%; + margin-top: -0.49em !important; +} +.healthy .healthchecked-resource header span { + padding-right: 20px; +} +.healthy .healthchecked-resource li { + position: absolute; + top: 8px; + right: 16px; + border: none; +} +.healthy .healthchecked-resource li::before { + left: 0; +} +.healthy .healthchecked-resource li span { + display: none; +} +.healthy .healthchecked-resource li a { + padding-left: 0; +} +%healthchecked-resource header strong { + top: 2.8em; + left: 15px; +} +%healthchecked-resource header span { + margin-bottom: 1.75em; +} +%healthchecked-resource header a { + padding: 12px 15px; +} +.unhealthy .healthchecked-resource header a { + padding-bottom: 15px; +} +.unhealthy .healthchecked-resource header.with-service a { + padding-bottom: 25px; +} +%healthchecked-resource li a { + padding: 3px 15px; + padding-top: 4px; + padding-left: 39px; + height: 31px; +} +%healthchecked-resource li:not(.passing) strong, +.healthy .healthchecked-resource li:only-child strong { + display: none; +} diff --git a/ui-v2/app/styles/components/healthchecked-resource/skin.scss b/ui-v2/app/styles/components/healthchecked-resource/skin.scss new file mode 100644 index 0000000000..e800763170 --- /dev/null +++ b/ui-v2/app/styles/components/healthchecked-resource/skin.scss @@ -0,0 +1,23 @@ +%healthchecked-resource li.passing { + color: $ui-color-success; +} +%healthchecked-resource li.warning { + color: $ui-color-alert; +} +%healthchecked-resource li.critical { + color: $ui-color-failure; +} +%healthchecked-resource { + border: $decor-border-100; + box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05); +} +%healthchecked-resource:hover, +%healthchecked-resource:focus { + box-shadow: 0 8px 10px 0 rgba($ui-black, 0.1); +} +%healthchecked-resource li { + border-top: $decor-border-100; +} +%healthchecked-resource { + border-radius: $radius-small; +} diff --git a/ui-v2/app/styles/components/icons.scss b/ui-v2/app/styles/components/icons/index.scss similarity index 94% rename from ui-v2/app/styles/components/icons.scss rename to ui-v2/app/styles/components/icons/index.scss index e12d1fae52..56699a270b 100644 --- a/ui-v2/app/styles/components/icons.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -45,7 +45,7 @@ height: 22px; left: -25px; margin-top: -11px; - background-color: transparent; + background-color: $ui-color-transparent; } %with-clipboard { padding-left: 38px !important; @@ -57,7 +57,7 @@ height: 17px; left: 12px; margin-top: -8px; - background-color: transparent; + background-color: $ui-color-transparent; } %with-chevron::before { @extend %pseudo-icon; @@ -66,7 +66,7 @@ height: 9px; left: 0; margin-top: -4px; - background-color: transparent; + background-color: $ui-color-transparent; } %with-folder::before { @extend %pseudo-icon; @@ -76,7 +76,7 @@ margin-top: -6px; left: 2px; background-image: url('data:image/svg+xml;charset=UTF-8,'); - background-color: transparent; + background-color: $ui-color-transparent; } %with-magnifier { position: relative; @@ -94,7 +94,7 @@ border: 0.05em solid; border-radius: 0.35em; border-color: currentColor; - background-color: transparent; + background-color: $ui-color-transparent; } %with-magnifier::after { @extend %pseudo-icon; @@ -116,7 +116,7 @@ @extend %pseudo-icon; right: 0; background-image: url('data:image/svg+xml;charset=UTF-8,'); - background-color: transparent; + background-color: $ui-color-transparent; width: 16px; height: 16px; } @@ -126,7 +126,7 @@ } %with-inverted-tick { @extend %pseudo-icon; - background-color: transparent; + background-color: $ui-color-transparent; background-image: url('data:image/svg+xml;charset=UTF-8,'); height: 20px !important; width: 16px !important; @@ -148,7 +148,7 @@ background-image: url('data:image/svg+xml;charset=UTF-8,'); width: 16px; height: 14px; - background-color: transparent; + background-color: $ui-color-transparent; } %with-right-arrow-grey { @extend %pseudo-icon; @@ -159,7 +159,7 @@ background-image: url('data:image/svg+xml;charset=UTF-8,'); width: 16px; height: 16px; - background-color: transparent; + background-color: $ui-color-transparent; } %with-deny-icon-grey { @extend %pseudo-icon; @@ -177,7 +177,7 @@ } %with-warning::before { @extend %with-warning-icon-orange; - background-color: transparent; + background-color: $ui-color-transparent; } %with-critical::before { @extend %with-cross; diff --git a/ui-v2/app/styles/components/list-collection.scss b/ui-v2/app/styles/components/list-collection.scss index e9ade85190..595a4a1c30 100644 --- a/ui-v2/app/styles/components/list-collection.scss +++ b/ui-v2/app/styles/components/list-collection.scss @@ -1,11 +1,11 @@ -.list-collection { - height: 500px; - position: relative; -} .unhealthy > div, .healthy > div { @extend %card-grid; } +.list-collection { + height: 500px; + position: relative; +} .healthy > div { width: calc(100% + 23px); } diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss index ec4d63d5c6..e7b986dbce 100644 --- a/ui-v2/app/styles/components/notice.scss +++ b/ui-v2/app/styles/components/notice.scss @@ -1,24 +1,4 @@ -.notice { - @extend %notice; -} -%notice { - @extend %with-warning; -} -%notice::before { - left: 20px; - top: 18px; - margin-top: 0; -} -%notice { - border: 1px solid; - border-radius: $radius-small; -} -%notice.warning { - background-color: $yellow-050; - border-color: $yellow-500; -} -%notice { - position: relative; - padding: 1em; - padding-left: 45px; +@import './notice/index'; +.notice.warning { + @extend %notice-warning; } diff --git a/ui-v2/app/styles/components/notice/index.scss b/ui-v2/app/styles/components/notice/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/notice/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/notice/layout.scss b/ui-v2/app/styles/components/notice/layout.scss new file mode 100644 index 0000000000..64b017dd31 --- /dev/null +++ b/ui-v2/app/styles/components/notice/layout.scss @@ -0,0 +1,10 @@ +%notice::before { + left: 20px; + top: 18px; + margin-top: 0; +} +%notice { + position: relative; + padding: 1em; + padding-left: 45px; +} diff --git a/ui-v2/app/styles/components/notice/skin.scss b/ui-v2/app/styles/components/notice/skin.scss new file mode 100644 index 0000000000..d7c7866dfe --- /dev/null +++ b/ui-v2/app/styles/components/notice/skin.scss @@ -0,0 +1,40 @@ +%notice { + border-radius: $radius-small; +} +%notice-success, +%notice-info, +%notice-error, +%notice-warning { + @extend %notice; +} +%notice-success { + @extend %with-passing; + background-color: $ui-green-050; + border-color: $ui-color-success; + color: $ui-green-700; +} +%notice-success::before { + color: $ui-color-success; +} +%notice-info { + @extend %with-passing; /* needs a better info button*/ + background-color: $ui-blue-050; + border-color: $ui-color-action; /* TODO: change to info */ + color: $ui-blue-700; +} +%notice-info::before { + color: $ui-color-action; /* change to info */ +} +%notice-warning { + @extend %box-color-yellow-500, %with-warning; + border-width: 1px; +} +%notice-error { + @extend %with-critical; + background-color: $ui-red-050; + border-color: $ui-color-failure; + color: $ui-red-600; +} +%notice-error::before { + color: $ui-color-failure; +} diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss new file mode 100644 index 0000000000..4d8f0673a1 --- /dev/null +++ b/ui-v2/app/styles/components/pill.scss @@ -0,0 +1,4 @@ +@import './pill/index'; +td strong { + @extend %pill; +} diff --git a/ui-v2/app/styles/components/pill/index.scss b/ui-v2/app/styles/components/pill/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/pill/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/tag.scss b/ui-v2/app/styles/components/pill/layout.scss similarity index 54% rename from ui-v2/app/styles/components/tag.scss rename to ui-v2/app/styles/components/pill/layout.scss index f31eb7be8c..fceb4a5a55 100644 --- a/ui-v2/app/styles/components/tag.scss +++ b/ui-v2/app/styles/components/pill/layout.scss @@ -1,5 +1,4 @@ -%tag { +%pill { display: inline-block; padding: 1px 5px; - border-radius: $radius-small; } diff --git a/ui-v2/app/styles/components/pill/skin.scss b/ui-v2/app/styles/components/pill/skin.scss new file mode 100644 index 0000000000..6efe90d8a4 --- /dev/null +++ b/ui-v2/app/styles/components/pill/skin.scss @@ -0,0 +1,4 @@ +%pill { + background-color: $ui-gray-100; + border-radius: $radius-small; +} diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss new file mode 100644 index 0000000000..a174cade83 --- /dev/null +++ b/ui-v2/app/styles/components/product.scss @@ -0,0 +1,51 @@ +@import './product/index'; +@import './filter-bar'; +@import './form-elements/index'; +html body > svg { + display: none; +} +html.ember-loading body > svg { + @extend %brand-loader; +} +html.template-loading main > div { + @extend %loader; +} +main { + @extend %app-view; +} +%app-view > div > div { + @extend %app-content; +} +%app-view header form { + @extend %filter-bar; +} +%app-content .type-text, +%app-content .type-toggle { + @extend %form-element; +} +%app-content [role='radiogroup'] { + @extend %radio-group; +} +%loader circle { + fill: $brand-magenta-100; +} +%main-header::before { + background-color: $brand-magenta-600; +} +%header-nav a, +%header-nav-toggle-button { + color: $brand-magenta-050; +} +@media #{$--lt-horizontal-nav} { + %header-nav-panel { + background-color: $brand-magenta-600; + } +} +@media #{$--horizontal-nav} { + %header-nav > ul > li:not(:first-child).is-active > a { + background-color: $brand-magenta-800; + } +} +#wrapper > footer { + @extend %footer; +} diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/product/app-view.scss similarity index 70% rename from ui-v2/app/styles/components/app-view.scss rename to ui-v2/app/styles/components/product/app-view.scss index 265b981af1..f1ad635b20 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/product/app-view.scss @@ -1,62 +1,65 @@ -@import './filter-bar'; -@import './form-elements'; -main { - @extend %app-view; -} -%app-view > div > div { - @extend %app-content; -} -%app-view header form { - @extend %filter-bar; -} %app-view h2, %app-view header > div:last-of-type { - border-bottom: 1px solid; + border-bottom: $decor-border-100; } %app-view header > div:last-of-type, %app-view h2 { border-color: $keyline-light; } %app-content div > dl > dd { - color: $text-light; + color: $ui-gray-400; } -%app-view { - position: relative; - margin-top: 50px; +[role='tabpanel'] > p:only-child, +.template-error > div { + background-color: $ui-gray-050; + color: $ui-gray-400; } -%app-view header + div > *:first-child { - margin-top: 1.25em; -} -%app-view h2 { - padding-bottom: 0.2em; - margin-bottom: 1.1em; +%app-content > p:only-child, +%app-view > div.disabled > div { + background-color: $ui-gray-050; + color: $ui-gray-400; } %app-view header > div:last-of-type > div:first-child { flex-grow: 1; } +%app-view { + position: relative; +} %app-view header .actions { float: right; display: flex; align-items: flex-start; } +%app-view { + margin-top: 50px; +} +%app-view h2 { + padding-bottom: 0.2em; + margin-bottom: 1.1em; +} +%app-view header + div > *:first-child { + margin-top: 1.25em; +} %app-view header .actions > *:not(:last-child) { margin-right: 7px; } %app-view header .actions a, %app-view header .actions button { - @extend %button; padding: calc(0.375em - 1px) calc(2.2em - 1px); height: 2.25em; } // content -%app-content > p:only-child, +%app-content div > dl > dt { + position: absolute; +} +%app-content div > dl { + position: relative; +} [role='tabpanel'] > p:only-child, -%app-view > div.disabled > div, -.template-error > div { - background-color: $lightest-gray; - color: $text-blue; - font-size: $size-8; +.template-error > div, +%app-content > p:only-child, +%app-view > div.disabled > div { margin-top: 0; padding: 50px; text-align: center; @@ -64,30 +67,14 @@ main { [role='tabpanel'] > *:first-child { margin-top: 1.25em; } -%filter-bar, -%tab-section, %app-view > div.disabled > div { margin-top: 0 !important; } -%app-content .type-text, -%app-content .type-toggle { - @extend %form-element; -} -%app-content [role='radiogroup'] { - @extend %radio-group; -} %app-content form:not(:last-child) { margin-bottom: 2.2em; } -%app-content div > dl { - position: relative; -} -%app-content div > dt { - font-weight: bold; -} %app-content div > dl > dt { width: 120px; - position: absolute; } %app-content div > dl > dd { padding-left: 120px; diff --git a/ui-v2/app/styles/components/footer.scss b/ui-v2/app/styles/components/product/footer.scss similarity index 55% rename from ui-v2/app/styles/components/footer.scss rename to ui-v2/app/styles/components/product/footer.scss index d81bd65ffd..7652bd6b1e 100644 --- a/ui-v2/app/styles/components/footer.scss +++ b/ui-v2/app/styles/components/product/footer.scss @@ -1,23 +1,16 @@ -#wrapper > footer { - @extend %footer; -} -%footer { - border-top: 1px solid; -} -%footer { - border-color: $keyline-darker; - background-color: $white; -} -%footer { - max-width: 1150px; -} -%footer > * { - font-size: inherit; - color: $text-note; -} %footer > a:first-child { @extend %with-hashicorp; } +%footer { + border-top: $decor-border-100; +} +%footer { + border-color: $keyline-mid; + background-color: $ui-white; +} +%footer > * { + color: $ui-gray-400; +} %footer { display: flex; justify-content: center; diff --git a/ui-v2/app/styles/components/header-nav.scss b/ui-v2/app/styles/components/product/header-nav.scss similarity index 85% rename from ui-v2/app/styles/components/header-nav.scss rename to ui-v2/app/styles/components/product/header-nav.scss index dd1a4775ea..85e55abf58 100644 --- a/ui-v2/app/styles/components/header-nav.scss +++ b/ui-v2/app/styles/components/product/header-nav.scss @@ -1,11 +1,44 @@ -@import './icons'; -%header-nav-toggle-button span { - visibility: hidden; +%primary-nav ul ul { + @extend %header-drop-nav; +} +%primary-nav, +%secondary-nav { + @extend %header-nav; } %header-nav-toggle-button::before, %header-nav-toggle-button::after, %header-nav-toggle-button span::before { @extend %with-dot; +} +%header-nav-toggle-button span { + visibility: hidden; +} +%header-drop-nav { + border: $decor-border-100; + box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21); +} +%header-drop-nav li { + border-bottom: $decor-border-100; +} +%header-drop-nav li { + border-color: $ui-gray-300; +} +%header-drop-nav { + border-color: $ui-gray-300; + background-color: $ui-white; +} +%header-drop-nav a { + color: $ui-gray-900 !important; +} +%header-nav > ul > li > a:hover, +%header-nav > ul > li > a:focus, +%header-nav > ul > li > a:active, +%header-nav > ul > li.is-active > a { + color: $ui-white; +} +%header-nav-toggle-button::before, +%header-nav-toggle-button::after, +%header-nav-toggle-button span::before { right: 10px; left: auto !important; top: 23px !important; @@ -24,9 +57,6 @@ position: absolute; } @media #{$--lt-horizontal-nav} { - %header-nav-panel { - background-color: $magenta-600; - } %header-nav-panel label span { visibility: visible !important; display: inline-block; @@ -69,7 +99,7 @@ padding: 15px 35px; } %header-nav-toggle:checked + label { - background-color: rgba($black, 0.4); + background-color: rgba($ui-black, 0.4); width: 100vw; height: 100%; left: 0; @@ -91,22 +121,11 @@ display: none; } } -%primary-nav ul ul { - @extend %header-drop-nav; -} -%primary-nav, -%secondary-nav { - @extend %header-nav; -} %header-drop-nav a:hover, %header-drop-nav a:focus, %header-drop-nav a:active, %header-drop-nav a.selected { - background-color: $lightest-gray; -} -%header-nav a, -%header-nav-toggle-button { - color: $magenta-50; + background-color: $ui-gray-050; } %header-nav a { display: block; @@ -127,19 +146,10 @@ display: block; } %primary-nav > ul > li.is-active > a { - font-weight: $weight-bold; + font-weight: $typo-weight-bold; } } -%header-nav > ul > li > a:hover, -%header-nav > ul > li > a:focus, -%header-nav > ul > li > a:active, -%header-nav > ul > li.is-active > a { - color: $white; -} @media #{$--horizontal-nav} { - %header-nav > ul > li:not(:first-child).is-active > a { - background-color: $magenta-800; - } %header-nav ul { display: flex; } @@ -147,14 +157,6 @@ min-width: 266px; } } -%header-drop-nav { - border: 1px solid $border-blue; - background-color: $white; - box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21); -} -%header-drop-nav a { - color: $text !important; -} %header-drop-nav .is-active a::after { @extend %with-inverted-tick; position: absolute; @@ -162,12 +164,6 @@ margin-top: -8px; right: 10px; } -%header-drop-nav li { - border-bottom: 1px solid; -} -%header-drop-nav li { - border-color: $border-blue; -} %header-drop-nav { display: block; position: absolute; diff --git a/ui-v2/app/styles/components/product/index.scss b/ui-v2/app/styles/components/product/index.scss new file mode 100644 index 0000000000..02e434a49e --- /dev/null +++ b/ui-v2/app/styles/components/product/index.scss @@ -0,0 +1,9 @@ +/* TODO: All of these folders should be self contained */ +/* figure out what the best way to deal with 'icons' is */ +/* most probably a centralized module */ +@import '../icons/index'; +@import './loader'; +@import './main-header'; +@import './header-nav'; +@import './app-view'; +@import './footer'; diff --git a/ui-v2/app/styles/components/loader.scss b/ui-v2/app/styles/components/product/loader.scss similarity index 77% rename from ui-v2/app/styles/components/loader.scss rename to ui-v2/app/styles/components/product/loader.scss index 4847a2c0a2..4fcf0252b1 100644 --- a/ui-v2/app/styles/components/loader.scss +++ b/ui-v2/app/styles/components/product/loader.scss @@ -1,6 +1,15 @@ -html.template-loading main > div { - @extend %loader; +/* logo */ +%brand-loader { + display: block; } +%brand-loader { + position: absolute; + top: 50%; + margin-top: -26px; + left: 50%; + margin-left: -84px; +} +/* blobs / %ui-loader ? */ %loader { display: flex; align-items: center; @@ -10,7 +19,6 @@ html.template-loading main > div { %loader circle { animation: loader-animation 1.5s infinite ease-in-out; transform-origin: 50% 50%; - fill: #efc4d8; } %loader g:nth-last-child(2) circle { @@ -27,7 +35,6 @@ html.template-loading main > div { %loader g:nth-last-child(5) circle { animation-delay: 0.5s; - border: 1px solid red; } @keyframes loader-animation { diff --git a/ui-v2/app/styles/components/main-header.scss b/ui-v2/app/styles/components/product/main-header.scss similarity index 92% rename from ui-v2/app/styles/components/main-header.scss rename to ui-v2/app/styles/components/product/main-header.scss index 6b68d38fd6..79e3be7357 100644 --- a/ui-v2/app/styles/components/main-header.scss +++ b/ui-v2/app/styles/components/product/main-header.scss @@ -18,9 +18,6 @@ @extend %secondary-nav; } -%main-header::before { - background-color: $magenta-600; -} %main-header { display: flex; } diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index c78786af28..f6131fdf33 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -1,15 +1,37 @@ -@import './icons'; -@import './tag'; -td strong { - @extend %tag; - background-color: $gray; +@import './icons/index'; +td.folder { + @extend %with-folder; } -th { - color: $text-light !important; +td dt.passing { + @extend %with-passing; +} +td dt.warning { + @extend %with-warning; +} +td dt.critical { + @extend %with-critical; +} +table:not(.sessions) tr { + cursor: pointer; } th, td { - border-bottom: 1px solid; + border-bottom: $decor-border-100; +} +td dt.passing, +td dt.passing + dd { + color: $ui-color-success; +} +td dt.warning, +td dt.warning + dd { + color: $ui-color-alert; +} +td dt.critical, +td dt.critical + dd { + color: $ui-color-failure; +} +th { + color: $ui-gray-400 !important; } th { border-color: $keyline-dark; @@ -17,9 +39,6 @@ th { td { border-color: $keyline-mid; } -td.folder { - @extend %with-folder; -} table { width: 100%; } @@ -84,24 +103,8 @@ td dd.zero { td dt { text-indent: -9000px; } -td dt.passing, -td dt.passing + dd { - color: $green; -} -td dt.warning, -td dt.warning + dd { - color: $orange; -} -td dt.critical, -td dt.critical + dd { - color: $red; -} -td dt.passing { - @extend %with-passing; -} td dt.warning { overflow: visible; - @extend %with-warning; } td dt.warning::before { top: 7px; @@ -110,9 +113,6 @@ td dt.warning::after { left: -2px; top: -1px; } -td dt.critical { - @extend %with-critical; -} td dd { box-sizing: content-box; margin-left: 22px; diff --git a/ui-v2/app/styles/components/tabs.scss b/ui-v2/app/styles/components/tabs.scss index 94998d2521..518482f457 100644 --- a/ui-v2/app/styles/components/tabs.scss +++ b/ui-v2/app/styles/components/tabs.scss @@ -1,61 +1,7 @@ +@import './tabs/index'; main header nav:last-child { @extend %tab-nav; } .tab-section { @extend %tab-section; } -%tab-nav label { - cursor: pointer; -} -%tab-nav ul { - border: 0; -} -%tab-nav a { - border-bottom: $tabs-border-bottom-width $tabs-border-bottom-style; -} -%tab-nav a { - border-color: $tabs-border-bottom-color; - color: $tabs-link-color; -} -%tab-nav a:hover, -%tab-nav a:focus, -%tab-nav a:active, -%tab-nav .selected a { - border-color: $tabs-border-active-bottom-color; - color: $tabs-link-active-color; -} - -%tab-nav a { - white-space: nowrap; -} -@media #{$--horizontal-tabs} { - %tab-nav ul { - display: flex; - align-items: center; - } - %tab-nav ul li:not(:first-child) { - margin-left: 37px; - } - %tab-nav a { - padding-left: 5px; - padding-right: 5px; - } -} -@media #{$--lt-horizontal-tabs} { - %tab-nav li { - width: 100%; - } -} -%tab-nav a { - display: block; - padding-top: 12px; - padding-bottom: 12px; -} -%tab-nav input[type='radio'], -%tab-section > input[type='radio'], -%tab-section > input[type='radio'] + * { - display: none; -} -%tab-section > input[type='radio']:checked + * { - display: block; -} diff --git a/ui-v2/app/styles/components/tabs/index.scss b/ui-v2/app/styles/components/tabs/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/tabs/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/tabs/layout.scss b/ui-v2/app/styles/components/tabs/layout.scss new file mode 100644 index 0000000000..0855017fb8 --- /dev/null +++ b/ui-v2/app/styles/components/tabs/layout.scss @@ -0,0 +1,34 @@ +%tab-section { + margin-top: 0 !important; +} +@media #{$--horizontal-tabs} { + %tab-nav ul { + display: flex; + align-items: center; + } + %tab-nav ul li:not(:first-child) { + margin-left: 37px; + } + %tab-nav a { + padding-left: 5px; + padding-right: 5px; + } +} +@media #{$--lt-horizontal-tabs} { + %tab-nav li { + width: 100%; + } +} +%tab-nav a { + display: block; + padding-top: 12px; + padding-bottom: 12px; +} +%tab-nav input[type='radio'], +%tab-section > input[type='radio'], +%tab-section > input[type='radio'] + * { + display: none; +} +%tab-section > input[type='radio']:checked + * { + display: block; +} diff --git a/ui-v2/app/styles/components/tabs/skin.scss b/ui-v2/app/styles/components/tabs/skin.scss new file mode 100644 index 0000000000..c642f4d123 --- /dev/null +++ b/ui-v2/app/styles/components/tabs/skin.scss @@ -0,0 +1,24 @@ +%tab-nav label { + cursor: pointer; +} +%tab-nav ul { + border: 0; +} +%tab-nav a { + border-bottom: $decor-border-300; +} +%tab-nav a { + border-color: $ui-color-transparent; + color: $ui-gray-500; +} +%tab-nav a:hover, +%tab-nav a:focus, +%tab-nav a:active, +%tab-nav .selected a { + border-color: $brand-magenta-600; + color: $brand-magenta-600; +} + +%tab-nav a { + white-space: nowrap; +} diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss index e7ee2c6b71..6620da9c6c 100644 --- a/ui-v2/app/styles/components/tabular-collection.scss +++ b/ui-v2/app/styles/components/tabular-collection.scss @@ -1,6 +1,3 @@ -table:not(.sessions) tr { - cursor: pointer; -} table { position: relative; } @@ -16,6 +13,9 @@ table tr > * { flex: 1 0 auto; } +tr > * dl { + float: left; +} html.template-service.template-list main table tr { @extend %services-row; } @@ -65,9 +65,6 @@ html.template-node.template-show main table.sessions tr { display: none; } } -tr > * dl { - float: left; -} %intentions-row > * { width: calc(25% - 60px); } diff --git a/ui-v2/app/styles/components/tomography-graph.scss b/ui-v2/app/styles/components/tomography-graph.scss index 6481d46167..b76b8bccb1 100644 --- a/ui-v2/app/styles/components/tomography-graph.scss +++ b/ui-v2/app/styles/components/tomography-graph.scss @@ -1,31 +1,31 @@ .tomography .background { - fill: $lightest-gray; + fill: $ui-gray-050; } .tomography .axis { fill: none; - stroke: $border-blue; + stroke: $ui-gray-300; stroke-dasharray: 4 4; } .tomography .border { fill: none; - stroke: $border-blue; + stroke: $ui-gray-300; } .tomography .point { - stroke: $text-note; - fill: $magenta-600; + stroke: $ui-gray-400; + fill: $brand-magenta-600; } .tomography .lines line { - stroke: $magenta-600; + stroke: $brand-magenta-600; } .tomography .lines line:hover { - stroke: $border-blue; + stroke: $ui-gray-300; stroke-width: 2px; } .tomography .tick line { - stroke: $border-blue; + stroke: $ui-gray-300; } .tomography .tick text { - font-size: $size-normal; + font-size: $typo-size-600; text-anchor: start; - color: $text; + color: $ui-gray-900; } diff --git a/ui-v2/app/styles/core/layout.scss b/ui-v2/app/styles/core/layout.scss index 8f56e985c1..cf3d072f52 100644 --- a/ui-v2/app/styles/core/layout.scss +++ b/ui-v2/app/styles/core/layout.scss @@ -1,70 +1,27 @@ +@import '../layouts/index'; + html.template-with-vertical-menu, html.template-with-vertical-menu body { overflow: hidden; } #wrapper { - margin: 0 auto; - position: static; - max-width: 1260px; - padding: 0 1.9047619047619049%; // 24px - padding: 0 1.9047619047619049vw; // 24px - width: auto; // stop bulma jumping around - - display: flex; - min-height: 100vh; - flex-direction: column; + @extend %viewport-container; } -@media #{$--min-padding} { - #wrapper { - padding: 0 10px; - } - main, - #wrapper > footer { - padding: 0 33px; - } -} -@media #{$--max-padding} { - #wrapper { - padding: 0 24px; - } - main, - #wrapper > footer { - padding: 0 33px; - } +#wrapper { + @extend %with-sticky-footer; } main { - max-width: 1150px; + @extend %with-sticky-footer-content; } main, #wrapper > footer { - padding: 0 2.619047619047619%; //33px; - padding: 0 1.9047619047619049vw; + @extend %content-container; } -main { - flex: 1; -} -// workaround bulma's sweeping box-sizing -#wrapper { - box-sizing: content-box; -} -main > * { - box-sizing: border-box; -} -main p { - margin-bottom: 1em; +html.template-edit main { + @extend %content-container-restricted; } +/* TODO: keep margin below forms, move elsewhere */ main form, main form + div .with-confirmation { margin-bottom: 2em; } -html body > svg { - display: none; - position: absolute; - top: 50%; - margin-top: -26px; - left: 50%; - margin-left: -84px; -} -html.ember-loading body > svg { - display: block; -} diff --git a/ui-v2/app/styles/core/reset.css b/ui-v2/app/styles/core/reset.css deleted file mode 100644 index 5e37b0d816..0000000000 --- a/ui-v2/app/styles/core/reset.css +++ /dev/null @@ -1,10 +0,0 @@ -body { - background-color: $white; -} -fieldset { - border: 0; - width: 100%; -} -label span { - @extend %user-select-none; -} diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 5dbadf0a72..259db1cf41 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -1,14 +1,20 @@ %button { - font-family: $body-family; + font-family: $typo-family-sans; } -%button { +main p { + margin-bottom: 1em; +} +%button, +%form-element textarea, +%form-element [type='text'], +%form-element [type='password'] { line-height: 1.5; } %radio-group label { line-height: 1.25; } -h1 { - letter-spacing: 1px; +%filter-bar [role='radiogroup'] label { + line-height: 1.7; } %header-nav, %tab-nav { @@ -17,9 +23,14 @@ h1 { %footer { letter-spacing: -0.05em; } +th, +button, +td strong, +td:first-child, h1, +%app-content div > dt, %header-drop-nav .is-active { - font-weight: $weight-bold; + font-weight: $typo-weight-bold; } h2, %header-nav, @@ -29,21 +40,22 @@ h2, %form-element > span, %app-content div > dl > dt, td a { - font-weight: $weight-semibold; + font-weight: $typo-weight-semibold; } %button { - font-weight: $weight-semibold !important; + font-weight: $typo-weight-semibold !important; } th, %breadcrumbs a, %action-group a, %tab-nav { - font-weight: $weight-medium; + font-weight: $typo-weight-medium; } main label a[rel*='help'], td:first-child em, +%pill, %healthchecked-resource strong { - font-weight: $weight-normal; + font-weight: $typo-weight-normal; } %form-element > em, td:first-child em, @@ -56,40 +68,39 @@ td:first-child em, %form-element > span > * { text-transform: none; } +%footer > * { + font-size: inherit; +} h1 { - font-size: $size-4; + font-size: $typo-size-400; } h2, %header-drop-nav .is-active { - font-size: $size-5; + font-size: $typo-size-500; } body, pre code, input, textarea, td { - font-size: $size-6; + font-size: $typo-size-600; } th, %healthchecked-resource strong, %footer { - font-size: $size-7; + font-size: $typo-size-700; } %toggle span { - font-size: $size-7 !important; + font-size: $typo-size-700 !important; } +%app-content > p:only-child, +[role='tabpanel'] > p:only-child, +%app-view > div.disabled > div, +.template-error > div, %button, .with-confirmation p, %form-element > em, %form-element > span, %feedback-dialog-inline p { - font-size: $size-8; -} -th, -button, -td strong { - font-weight: normal; -} -td:first-child { - font-weight: bold; + font-size: $typo-size-800; } diff --git a/ui-v2/app/styles/layouts/containers.scss b/ui-v2/app/styles/layouts/containers.scss new file mode 100644 index 0000000000..1648a426a7 --- /dev/null +++ b/ui-v2/app/styles/layouts/containers.scss @@ -0,0 +1,57 @@ +$ideal-viewport-width-num: 1260; +$ideal-viewport-width: #{$ideal-viewport-width-num}px; +$ideal-content-width-num: 1150; +$ideal-content-width: #{$ideal-content-width-num}px; +$ideal-viewport-padding-num: 24; +$ideal-viewport-padding: #{ideal-viewport-padding-num}px; +$minimum-viewport-padding: 10px; +$ideal-content-padding: 33px; + +// workaround bulma's sweeping box-sizing +// so we can verify the ideal widths are the same + +%viewport-container { + box-sizing: content-box; +} +%viewport-container { + margin-left: auto; + margin-right: auto; +} +%content-container > * { + box-sizing: border-box; +} +%content-container-restricted { + max-width: $ideal-content-width; +} +%viewport-container { + padding-left: calc(#{$ideal-viewport-padding-num}% / (#{$ideal-viewport-width-num} / 100)); + padding-right: calc(#{$ideal-viewport-padding-num}% / (#{$ideal-viewport-width-num} / 100)); + padding-left: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100)); + padding-right: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100)); +} +@media #{$--min-padding} { + %viewport-container { + padding-left: $minimum-viewport-padding; + padding-right: $minimum-viewport-padding; + } + %content-container { + padding-left: $ideal-viewport-padding; + padding-right: $ideal-viewport-padding; + } +} +@media #{$--max-padding} { + %viewport-container { + padding-left: $ideal-viewport-padding; + padding-right: $ideal-viewport-padding; + } + %content-container { + padding-left: $ideal-viewport-padding; + padding-right: $ideal-viewport-padding; + } +} +%content-container { + padding-left: calc(33% / (#{$ideal-viewport-width-num} / 100)); + padding-right: calc(33% / (#{$ideal-viewport-width-num} / 100)); + padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100)); + padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100)); +} diff --git a/ui-v2/app/styles/layouts/index.scss b/ui-v2/app/styles/layouts/index.scss new file mode 100644 index 0000000000..65c78ee584 --- /dev/null +++ b/ui-v2/app/styles/layouts/index.scss @@ -0,0 +1,2 @@ +@import './with-sticky-footer'; +@import './containers'; diff --git a/ui-v2/app/styles/layouts/with-sticky-footer.scss b/ui-v2/app/styles/layouts/with-sticky-footer.scss new file mode 100644 index 0000000000..9690ace049 --- /dev/null +++ b/ui-v2/app/styles/layouts/with-sticky-footer.scss @@ -0,0 +1,8 @@ +%with-sticky-footer { + display: flex; + min-height: 100vh; + flex-direction: column; +} +%with-sticky-footer-content { + flex: 1; +} diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss index 61de303bd1..ce502d3dfb 100644 --- a/ui-v2/app/styles/routes/dc/intention/index.scss +++ b/ui-v2/app/styles/routes/dc/intention/index.scss @@ -7,5 +7,5 @@ html.template-intention.template-list td.intent-deny strong { visibility: hidden; } html.template-intention.template-list td.destination { - font-weight: $weight-semibold; + font-weight: $typo-weight-semibold; } diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss index f7c3003bea..f8400db878 100644 --- a/ui-v2/app/styles/routes/dc/nodes/index.scss +++ b/ui-v2/app/styles/routes/dc/nodes/index.scss @@ -1,6 +1,5 @@ // TODO: Generalize this, also see services/index +@import '../../../components/pill/index'; html.template-node.template-show td.tags span { - @extend %tag; - background-color: $gray; - margin-bottom: 0.5em; + @extend %pill; } diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss index d60c5c77a0..29f36d8d58 100644 --- a/ui-v2/app/styles/routes/dc/service/index.scss +++ b/ui-v2/app/styles/routes/dc/service/index.scss @@ -1,4 +1,4 @@ -@import '../../../components/tag'; +@import '../../../components/pill/index'; html.template-service.template-show main dl { display: flex; margin-bottom: 1.4em; @@ -9,7 +9,5 @@ html.template-service.template-show main dt { // TODO: Generalize this, also see nodes/index html.template-service.template-list td.tags span, html.template-service.template-show main dd span { - @extend %tag; - background-color: $gray; - margin-bottom: 0.5em; + @extend %pill; } diff --git a/ui-v2/app/styles/variables/color.scss b/ui-v2/app/styles/variables/color.scss deleted file mode 100644 index 753abc1ebb..0000000000 --- a/ui-v2/app/styles/variables/color.scss +++ /dev/null @@ -1,35 +0,0 @@ -$magenta-50: #f9ebf2; -$magenta-600: #9e2159; -$magenta-800: #5a1434; - -$green-050: #ecf7ed; - -$red-050: #f9ecee; -$red-500: #c73445; -$red-700: #7f222c; - -$blue-500: #1563ff; -$blue-700: #0e40a3; -$blue-900: #061b46; - -$yellow-050: #fef9e8; -$yellow-500: #fa8f37; - -$gray-050: #f5f6f7; -$gray-100: #e1e4e7; -$gray-500: #919fa8; -$gray-700: #5d666b; - -$white: #fff; -$black: #000; -$carbon: #42494d; -$red: #d73445; -$blue: #0068ff; -$green: #2eb039; -$orange: #fa8f37; -$gray: #cdd3d7; -$transparent: transparent; - -$magenta-800-url-encoded: %235a1434; -$lightest-gray: #f9f9f9; // bg grays -$dangerous-red: #b94a3c; diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss index e394da2f1a..d64dcc751e 100644 --- a/ui-v2/app/styles/variables/index.scss +++ b/ui-v2/app/styles/variables/index.scss @@ -1,61 +1,15 @@ @import './custom-query'; -@import './color'; +$gray: $ui-gray-200; +$ui-gray-025: #fafbfc; + +$magenta-800-url-encoded: %235a1434; + +$keyline-light: $ui-gray-100; // h1 +$keyline-mid: $ui-gray-200; // td, footer +$keyline-dark: $ui-gray-300; // th +$keyline-darker: $ui-gray-400; // decoration -$radius-small: 2px; -$radius: 4px; - -// colors - -$keyline-light: rgba(#bdc4d0, 0.5); // h1 -$keyline-mid: #cdd3d7; // td -$keyline-dark: #a5b0b7; // th -$keyline-darker: #b9c1c7; //footer - -$border-mid: #b9c4d2; -$border-dark: #8d9fad; - -$border-blue: #bbc4d1; - -$text-blue: #919fa8; -$text-field-blue: #b9c4d2; -$user-text-gray: #677877; -// #6a7786; -// #677887 input labels -$text-gray: #77838a; // tab text -$text-light: #828b9a; -$text: #282828; - -$text-note: #929dab; // used for confirmations and footer - -$primary: $blue-500; -$body-background-color: transparent; -$navbar-background-color: $body-background-color; - -$tabs-border-active-bottom-color: $magenta-600; -$tabs-link-color: $text-gray; -$tabs-link-active-color: $magenta-600; -$tabs-border-bottom-style: solid; -$tabs-border-bottom-width: 3px; -$tabs-border-bottom-color: transparent; - -// fonts - -/** - * Sizes don't use auto rem to px calculating -*/ -html { - font-size: 16px; -} -// follow bulma and use 1, 2, 3, 4 etc for font sizes... -$size-4: 1.5rem; // $size-large? 24 -$size-5: 1.125rem; // $size-medium? // 18 -$size-6: 0.875rem; // $size-normal? // 14 -$size-7: 0.8125rem; // $size-small? // 13 -$size-8: 0.75rem; // $size-small? // 12 -.is-size-8 { - font-size: $size-8; -} -$weight-medium: 500; -$weight-semibold: 600; -$weight-bold: 700; +// undecided +$radius-small: $decor-radius-100; +$radius: $decor-radius-200;