mirror of https://github.com/status-im/consul.git
* Begin refactoring CSS into component folders. Moved most components into layout/skin folders, left out a couple of ones I want to think about more. * Adjust grays based on recent Structure changes * Switch to fullscreen layout for lists and detail, left aligned forms (#4435) * Specifically use the 'actions_close' label, not just the :last-child (actions-group) * Replace some non-var-ed colours in vaults code skin, plus prefixing (black and white)
This commit is contained in:
John Cowen
GitHub
parent
7bb35c4c78
commit
b41cad6fdf
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import './base-variables';
|
||||
@import './semantic-variables';
|
||||
@import './box-placeholders';
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
%decor-border-000 {
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './base-variables';
|
||||
@import './base-placeholders';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import './decoration/index';
|
||||
@import './color/index';
|
||||
@import './typography/index';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import './base-variables';
|
||||
@import './system';
|
||||
@import './minireset';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import './base-variables';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
%anchor:hover,
|
||||
%anchor:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
%anchor,
|
||||
%anchor:hover,
|
||||
%anchor:focus,
|
||||
%anchor:active {
|
||||
color: $ui-color-action;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
%breadcrumbs {
|
||||
position: absolute;
|
||||
top: -35px; // %app-view:margin-top - 15px;
|
||||
}
|
||||
%breadcrumbs ol {
|
||||
display: flex;
|
||||
}
|
||||
%breadcrumbs li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
%breadcrumbs a {
|
||||
@extend %with-chevron;
|
||||
}
|
||||
%breadcrumbs ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
%breadcrumbs a {
|
||||
color: $ui-color-action;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
table div.with-confirmation.confirming {
|
||||
background-color: $ui-white;
|
||||
}
|
||||
%confirmation-dialog-inline p {
|
||||
color: $ui-gray-400;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
%feedback-dialog-inline p,
|
||||
%feedback-dialog-inline p::after {
|
||||
color: $ui-white;
|
||||
background-color: $ui-gray-800;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
|
||||
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,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23BBC4D1" fill="%23FFF" cx="7" cy="7" r="7"/><path fill="%236A7786" d="M6.15 4.677V3.233h1.56v1.444zM6.15 11.374V6.35h1.56v5.023z"/></svg>');
|
||||
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,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="#{$magenta-800-url-encoded}"/></svg>');
|
||||
height: 20px !important;
|
||||
width: 16px !important;
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
|
||||
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,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
|
||||
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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
%notice::before {
|
||||
left: 20px;
|
||||
top: 18px;
|
||||
margin-top: 0;
|
||||
}
|
||||
%notice {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import './pill/index';
|
||||
td strong {
|
||||
@extend %pill;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
%tag {
|
||||
%pill {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
border-radius: $radius-small;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
%pill {
|
||||
background-color: $ui-gray-100;
|
||||
border-radius: $radius-small;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
|
|
@ -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 {
|
||||
|
|
@ -18,9 +18,6 @@
|
|||
@extend %secondary-nav;
|
||||
}
|
||||
|
||||
%main-header::before {
|
||||
background-color: $magenta-600;
|
||||
}
|
||||
%main-header {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
body {
|
||||
background-color: $white;
|
||||
}
|
||||
fieldset {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
label span {
|
||||
@extend %user-select-none;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './with-sticky-footer';
|
||||
@import './containers';
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
%with-sticky-footer {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
%with-sticky-footer-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue