empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Align Fleet UI colors with Figma components (#615)

Browse Source 
- This if the 1st PR as part of the of the Align components in Fleet UI with design system in Figma #539
- These changes replace all the color variables in /styles/var/colors.scss with new colors and naming convention used in Figma.
This commit is contained in:
noahtalerman 2021-04-09 12:04:11 -07:00 committed by GitHub
parent 1f97aebf61
commit c2700ee5c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
93 changed files with 489 additions and 492 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Avatar/_styles.scss
View File

@ -1,5 +1,5 @@
.avatar {
background: $white url('../assets/images/avatar-default.png') center 100% no-repeat;
background: $core-white url('../assets/images/avatar-default.png') center 100% no-repeat;
background-size: cover;
border-radius: 50%;

2
frontend/components/IconToolTip/IconToolTip.tsx
View File

@ -17,7 +17,7 @@ const IconToolTip = (props: IIconToolTipProps): JSX.Element => {
<path d="M7.49605 10.1893V9.70927C7.49605 9.33327 7.56405 8.98527 7.70005 8.66527C7.84405 8.34527 8.08405 7.99727 8.42005 7.62127C8.67605 7.34127 8.85205 7.10127 8.94805 6.90127C9.05205 6.70127 9.10405 6.48927 9.10405 6.26527C9.10405 6.00127 9.00805 5.79327 8.81605 5.64127C8.62405 5.48927 8.35205 5.41326 8.00005 5.41326C7.21605 5.41326 6.49205 5.70127 5.82805 6.27727L5.32405 5.12527C5.66005 4.82127 6.07605 4.57727 6.57205 4.39327C7.07605 4.20927 7.58405 4.11727 8.09605 4.11727C8.60005 4.11727 9.04005 4.20127 9.41605 4.36927C9.80005 4.53727 10.096 4.76927 10.304 5.06527C10.52 5.36127 10.628 5.70927 10.628 6.10927C10.628 6.47727 10.544 6.82127 10.376 7.14127C10.216 7.46127 9.92805 7.80927 9.51205 8.18527C9.13605 8.52927 8.87605 8.82927 8.73205 9.08527C8.58805 9.34127 8.49605 9.59727 8.45605 9.85327L8.40805 10.1893H7.49605ZM7.11205 12.6973V11.0293H8.79205V12.6973H7.11205Z" fill="white" />
</svg>
</span>
{/* same colour as $core-dark-blue-grey */}
{/* same colour as $core-fleet-blue */}
<ReactTooltip effect={'solid'} data-html={isHtml} backgroundColor={'#3e4771'} />
</div>
);

2
frontend/components/InfoBanner/_styles.scss
View File

@ -2,5 +2,5 @@
padding: 16px;
border-radius: $border-radius;
border: 1px solid #D9D9FE;
background-color: $info;
background-color: $ui-vibrant-blue-10;
}

10
frontend/components/KolideAce/_styles.scss
View File

@ -2,20 +2,20 @@
&__label {
font-size: $x-small;
font-weight: $regular;
color: $core-black;
color: $core-fleet-black;
display: block;
margin-bottom: 4px;
min-height: 25px;
&--error {
color: $alert;
color: $ui-error;
}
}
&__wrapper {
&--error {
.ace-kolide {
border: 1px solid $alert;
border: 1px solid $ui-error;
}
}
}
@ -23,10 +23,10 @@
&__hint {
font-size: $x-small;
font-weight: $regular;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
code {
color: $core-blue;
color: $core-vibrant-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;

2
frontend/components/LoginRoutes/_styles.scss
View File

@ -5,5 +5,5 @@
justify-content: center;
position: relative;
min-height: 100vh;
background-color: $core-gradient;
background-color: $gradients-dark-gradient-vertical;
}

4
frontend/components/NumberPill/_styles.scss
View File

@ -1,7 +1,7 @@
.number-pill {
background-color: $core-blue;
background-color: $core-vibrant-blue;
border-radius: 14px;
color: $white;
color: $core-white;
display: inline-block;
line-height: 26px;
height: 26px;

4
frontend/components/Pagination/_style.scss
View File

@ -9,7 +9,7 @@
text-align: right;
button {
color: $core-blue;
color: $core-vibrant-blue;
padding: 6px;
.kolidecon-chevronleft {
@ -22,7 +22,7 @@
}
button:hover {
background-color: $core-blue-label-over;
background-color: $ui-vibrant-blue-10;
}
.button--disabled:hover {

10
frontend/components/StackedWhiteBoxes/_styles.scss
View File

@ -17,7 +17,7 @@
}
&__box {
background-color: $white;
background-color: $core-white;
border-radius: 10px;
min-height: 360px;
box-sizing: border-box;
@ -25,7 +25,7 @@
font-weight: 300;
&-text {
color: $core-black;
color: $core-fleet-black;
font-size: $small;
margin: 40px 0 24px;
}
@ -37,7 +37,7 @@
&-text {
font-size: $large;
font-weight: 300;
color: $core-black;
color: $core-fleet-black;
line-height: 32px;
margin-top: 0;
margin-bottom: 0;
@ -50,7 +50,7 @@
&-link {
transition: color 150ms ease-in-out;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
text-decoration: none;
position: absolute;
top: 10px;
@ -60,7 +60,7 @@
font-size: 30px;
&:hover {
color: $core-blue;
color: $core-vibrant-blue;
}
}
}

2
frontend/components/TableContainer/DataTable/DropdownCell/_styles.scss
View File

@ -11,7 +11,7 @@
.Select-placeholder {
line-height: normal;
color: $core-black;
color: $core-fleet-black;
}
.Select-input {

8
frontend/components/TableContainer/DataTable/HeaderCell/_styles.scss
View File

@ -16,27 +16,27 @@
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid $ui-dark-grey;
border-bottom: 6px solid $ui-fleet-black-25;
}
.descending-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid $ui-dark-grey;
border-top: 6px solid $ui-fleet-black-25;
}
&.ascending {
.ascending-arrow {
border-bottom-color: $core-blue;
border-bottom-color: $core-vibrant-blue;
}
}
&.descending {
.descending-arrow {
border-top-color: $core-blue;
border-top-color: $core-vibrant-blue;
}
}
}

20
frontend/components/TableContainer/DataTable/_styles.scss
View File

@ -3,7 +3,7 @@
.data-table {
&__wrapper {
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
border-radius: 6px;
margin-top: $pad-half;
overflow: scroll;
@ -13,12 +13,12 @@
&__table {
width: 100%;
border-collapse: collapse;
color: $core-black;
color: $core-fleet-black;
font-size: $x-small;
}
tr {
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
&:last-child {
border-bottom: 0;
@ -26,15 +26,15 @@
}
thead {
background-color: $core-light-blue-grey;
color: $core-black;
background-color: $ui-off-white;
color: $core-fleet-black;
text-align: left;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
th {
padding: 16px 27px;
white-space: nowrap;
border-right: 1px solid $ui-borders;
border-right: 1px solid $ui-fleet-blue-15;
&:last-child {
border-right: none;
@ -52,18 +52,18 @@
margin: 0;
}
.Select-control {
background-color: $white;
background-color: $core-white;
border: none;
}
}
}
&__hostname {
color: $core-black;
color: $core-fleet-black;
}
&__status {
color: $core-dark-blue-grey;
color: $core-fleet-blue;
text-transform: capitalize;
&:before {

10
frontend/components/TableContainer/_styles.scss
View File

@ -9,7 +9,7 @@
&__results-count {
font-size: $x-small;
font-weight: $bold;
color: $core-black;
color: $core-fleet-black;
margin: 0;
}
@ -23,7 +23,7 @@
display: flex;
align-items: center;
font-size: $x-small;
color: $core-blue;
color: $core-vibrant-blue;
img {
width: 20px;
@ -34,12 +34,12 @@
&__edit-columns-button:hover {
cursor: pointer;
text-decoration: underline;
color: $core-blue-over;
color: $core-vibrant-blue-over;
}
&__search-input {
position: relative;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
width: 344px;
margin-left: $pad-medium;
@ -57,7 +57,7 @@
top: 10px;
left: 12px;
font-size: 20px;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
}
}
}

6
frontend/components/UserRow/_styles.scss
View File

@ -32,7 +32,7 @@
&__status--active {
&:before {
background-color: $success;
background-color: $ui-success;
border-radius: 100%;
content: ' ';
display: inline-block;
@ -44,7 +44,7 @@
&__status--invited {
&:before {
background-color: $warning;
background-color: $ui-warning;
border-radius: 100%;
content: ' ';
display: inline-block;
@ -56,7 +56,7 @@
&__status--disabled {
&:before {
background-color: $core-red;
background-color: $core-vibrant-red;
border-radius: 100%;
content: ' ';
display: inline-block;

6
frontend/components/WarningBanner/_styles.scss
View File

@ -2,11 +2,11 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: $warning;
color: $black;
background-color: $ui-warning;
color: $core-fleet-black;
padding: 15px 20px;
border-radius: $border-radius;
border: 1px solid $warning-border;
border: 1px solid $ui-warning;
font-size: $x-small;
margin: 0 0 25px;

6
frontend/components/YamlAce/_styles.scss
View File

@ -5,20 +5,20 @@
font-style: normal;
font-stretch: normal;
letter-spacing: -0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
display: block;
margin: 0 0 4px;
min-height: 25px;
&--error {
color: $alert;
color: $ui-error;
}
}
&__wrapper {
&--error {
.ace-kolide {
border: 1px solid $alert;
border: 1px solid $ui-error;
}
}
}

48
frontend/components/buttons/Button/_styles.scss
View File

@ -27,10 +27,10 @@ $base-class: 'button';
}
.#{$base-class} {
@include button-variant($core-blue);
@include button-variant($core-vibrant-blue);
transition: color 150ms ease-in-out, background 150ms ease-in-out, top 50ms ease-in-out, box-shadow 50ms ease-in-out, border 50ms ease-in-out;
position: relative;
color: $white;
color: $core-white;
text-decoration: none;
flex-direction: row;
justify-content: center;
@ -51,37 +51,37 @@ $base-class: 'button';
}
&--brand {
@include button-variant($core-blue, $core-blue-over, $core-blue-down);
@include button-variant($core-vibrant-blue, $core-vibrant-blue-over, $core-vibrant-blue-down);
}
&--success {
@include button-variant($success);
@include button-variant($ui-success);
}
&--alert {
@include button-variant($alert, $core-red-over, $core-red-down);
@include button-variant($ui-error, $core-vibrant-red-over, $core-vibrant-red-down);
}
&--blue-green {
@include button-variant($core-blue-green)
@include button-variant($ui-success)
}
&--grey {
@include button-variant($core-medium-blue-grey, $core-dark-blue-grey-over, $core-dark-blue-grey-down);
@include button-variant($core-fleet-blue, $core-fleet-blue-over, $core-fleet-blue-down);
}
&--warning {
@include button-variant($warning);
@include button-variant($ui-warning);
}
&--link {
@include button-variant($core-purple);
@include button-variant($core-fleet-purple);
}
&--label {
@include button-variant($core-light-blue-grey, $core-blue-over, null, $inverse: true);
color: $core-blue;
border: 1px solid $core-blue;
@include button-variant($ui-off-white, $core-vibrant-blue-over, null, $inverse: true);
color: $core-vibrant-blue;
border: 1px solid $core-vibrant-blue;
box-sizing: border-box;
font-size: $xx-small;
padding: 4px 10px;
@ -92,7 +92,7 @@ $base-class: 'button';
}
&:hover {
border: 1px solid $core-blue;
border: 1px solid $core-vibrant-blue;
}
}
@ -100,7 +100,7 @@ $base-class: 'button';
@include button-variant(transparent);
border: 0;
box-shadow: none;
color: $core-blue;
color: $core-vibrant-blue;
font-size: $x-small;
cursor: pointer;
margin: 0;
@ -109,7 +109,7 @@ $base-class: 'button';
line-height: normal;
&:active {
color: $core-blue-down;
color: $core-vibrant-blue-down;
box-shadow: none;
top: 0;
}
@ -119,7 +119,7 @@ $base-class: 'button';
}
&:hover {
color: $core-blue-over;
color: $core-vibrant-blue-over;
background-color: transparent;
box-shadow: none;
text-decoration: underline;
@ -127,16 +127,16 @@ $base-class: 'button';
}
&--inverse {
@include button-variant($white, $core-blue-over, $core-blue-down, $inverse: true);
color: $core-blue;
border: 2px solid $core-blue;
@include button-variant($core-white, $core-vibrant-blue-over, $core-vibrant-blue-down, $inverse: true);
color: $core-vibrant-blue;
border: 2px solid $core-vibrant-blue;
box-sizing: border-box;
}
&--inverse-alert {
@include button-variant($white, $core-red-over, $core-red-down, $inverse: true);
color: $alert;
border: 2px solid $alert;
@include button-variant($core-white, $core-vibrant-red-over, $core-vibrant-red-down, $inverse: true);
color: $ui-error;
border: 2px solid $ui-error;
box-sizing: border-box;
}
@ -159,7 +159,7 @@ $base-class: 'button';
@include button-variant(transparent);
border: 0;
box-shadow: none;
color: $core-dark-blue-grey;
color: $core-fleet-black;
cursor: pointer;
margin: 0;
padding: 0;
@ -182,7 +182,7 @@ $base-class: 'button';
}
&--contextual-nav-item {
@include button-variant(transparent, $core-blue-label-over);
@include button-variant(transparent, $ui-vibrant-blue-10);
display: flex;
justify-content: space-between;
}

8
frontend/components/buttons/DropdownButton/_styles.scss
View File

@ -20,7 +20,7 @@
display: none;
z-index: 2;
border-radius: 2px;
background-color: $white;
background-color: $core-white;
box-shadow: 0 4px 10px rgba(52, 59, 96, 0.15);
&--opened {
@ -32,7 +32,7 @@
display: block;
.button {
color: $core-dark-blue-grey;
color: $core-fleet-black;
text-transform: none;
text-align: left;
font-weight: $regular;
@ -46,8 +46,8 @@
letter-spacing: -0.5px;
&:hover {
background-color: $core-blue;
color: $white;
background-color: $core-vibrant-blue;
color: $core-white;
}
}
}

2
frontend/components/buttons/EllipsisMenu/_styles.scss
View File

@ -4,7 +4,7 @@
position: absolute;
&__btn {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $medium;
font-weight: $bold;
letter-spacing: -1px;

8
frontend/components/config/EnrollSecretTable/_styles.scss
View File

@ -22,7 +22,7 @@
}
&__secret-copy-icon {
color: $core-blue;
color: $core-vibrant-blue;
margin-right: 16px;
}
@ -52,7 +52,7 @@
&__secret-download-icon {
display: block;
font-size: $x-small;
color: $core-blue;
color: $core-vibrant-blue;
font-weight: $bold;
a {
@ -78,7 +78,7 @@
width: 100%;
height: 17px;
// We explicityly use rgba(255,255,255,0) because it's equivalent to transparent for most broswers except Safari.
background-image: linear-gradient(to bottom, $white, rgba(255, 255, 255, 0));
background-image: linear-gradient(to bottom, $core-white, rgba(255, 255, 255, 0));
}
&:after {
@ -90,7 +90,7 @@
width: 100%;
height: 17px;
// We explicityly use rgba(255,255,255,0) because it's equivalent to transparent for most broswers except Safari.
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), $white);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), $core-white);
}
.form-field__label {

12
frontend/components/flash_messages/FlashMessage/_styles.scss
View File

@ -13,7 +13,7 @@
display: flex;
align-items: center;
justify-content: center;
color: $white;
color: $core-white;
padding: $pad-half;
z-index: 3;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@ -26,13 +26,13 @@
&--success {
.kolidecon {
color: $success;
color: $ui-success;
}
}
&--error {
.kolidecon {
color: $alert;
color: $ui-error;
}
}
@ -51,7 +51,7 @@
}
&__undo {
color: $white;
color: $core-white;
cursor: pointer;
font-size: 16px;
text-decoration: underline;
@ -66,11 +66,11 @@
.kolidecon {
transition: color 150ms ease-in-out;
color: $core-medium-blue-grey;
color: $core-fleet-black;
font-size: 24px;
&:hover {
color: $white;
color: $core-white;
}
}
}

4
frontend/components/flash_messages/PersistentFlash/_styles.scss
View File

@ -13,7 +13,7 @@
display: flex;
align-items: center;
justify-content: center;
color: $white;
color: $core-white;
padding: $pad-half;
z-index: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@ -25,7 +25,7 @@
text-align: center;
i {
color: $alert;
color: $ui-error;
font-size: 24px;
}

2
frontend/components/forms/ConfigurePackQueryForm/_styles.scss
View File

@ -23,7 +23,7 @@
font-size: 16px;
font-weight: $bold;
letter-spacing: -0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
border-bottom: 1px solid #eaeefb;
padding: 0 0 9px;
margin: 0 0 9px;

8
frontend/components/forms/FormField/_styles.scss
View File

@ -4,21 +4,21 @@
&__label {
font-size: $x-small;
font-weight: $regular;
color: $core-black;
color: $core-fleet-black;
display: block;
margin-bottom: 4px;
&--error {
color: $alert;
color: $ui-error;
}
}
&__hint {
font-weight: $regular;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
code {
color: $core-blue;
color: $core-vibrant-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;

4
frontend/components/forms/LoginForm/_styles.scss
View File

@ -14,7 +14,7 @@
&__container {
display: flex;
align-items: center;
background-color: $white;
background-color: $core-white;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-sizing: border-box;
@ -41,7 +41,7 @@
&__forgot-link {
font-size: $x-small;
text-decoration: none;
color: $core-blue;
color: $core-vibrant-blue;
}
&__sso-image {

8
frontend/components/forms/LogoutForm/_styles.scss
View File

@ -6,7 +6,7 @@
display: flex;
align-items: center;
flex-direction: column;
background-color: $white;
background-color: $core-white;
box-sizing: border-box;
padding: 30px;
width: 460px;
@ -14,19 +14,19 @@
}
&__avatar {
border: 1px solid $core-blue;
border: 1px solid $core-vibrant-blue;
border-radius: 50%;
}
&__username {
color: $core-blue;
color: $core-vibrant-blue;
font-size: $large;
margin: $pad-half 0;
text-transform: uppercase;
}
&__subtext {
color: $core-medium-blue-grey;
color: $core-fleet-blue;
font-size: $medium;
margin-top: $pad-half;
}

4
frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
View File

@ -8,7 +8,7 @@
}
&__icon {
color: $success;
color: $ui-success;
font-size: 120px;
display: block;
text-align: center;
@ -67,7 +67,7 @@
font-weight: $regular;
line-height: 1.71;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin: 30px 0 0;
.kolide-checkbox {

12
frontend/components/forms/RegistrationForm/_styles.scss
View File

@ -10,7 +10,7 @@
@include position(absolute, 49% 0 null null);
transition: left 300ms ease, opacity 300ms ease;
border-radius: 10px;
background-color: $core-light-blue-grey;
background-color: $ui-off-white;
box-sizing: border-box;
padding: 40px;
z-index: 1;
@ -23,7 +23,7 @@
padding: 0 0 16px;
margin: 0;
margin-bottom: 40px;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
}
p {
@ -61,7 +61,7 @@
.user-registration__title {
font-size: 24px;
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding: 25px 35px;
}
}
@ -162,19 +162,19 @@
&__description {
font-size: 14px;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
}
&__title {
font-size: 18px;
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin: 0;
padding: 0;
}
&__field-wrapper {
background-color: $core-light-blue-grey;
background-color: $ui-off-white;
box-sizing: border-box;
z-index: 2;
display: flex;

4
frontend/components/forms/_styles.scss
View File

@ -1,8 +1,8 @@
.form {
&__base-error {
background-color: $alert;
background-color: $ui-error;
border-radius: 3px;
color: $white;
color: $core-white;
font-size: 14px;
margin-top: 10px;
padding: 5px 0;

24
frontend/components/forms/admin/AppConfigForm/_styles.scss
View File

@ -4,7 +4,7 @@
font-size: 15px;
button {
color: $core-purple;
color: $core-fleet-purple;
font-size: 15px;
font-weight: $regular;
float: right;
@ -13,7 +13,7 @@
}
input {
color: $core-purple;
color: $core-fleet-purple;
}
}
@ -35,7 +35,7 @@
h2 {
a {
color: $black;
color: $core-fleet-black;
scroll-margin-top: 210px; // used to push down anchor to visible area when there are sticky headers
}
}
@ -43,7 +43,7 @@
.smtp-options {
font-size: 15px;
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding-left: 15px;
em {
@ -52,13 +52,13 @@
&--configured {
em {
color: $success;
color: $ui-success;
}
}
&--notconfigured {
em {
color: $alert;
color: $ui-error;
}
}
}
@ -104,10 +104,10 @@
}
.hint {
color: $core-dark-blue-grey;
color: $core-fleet-blue;
&--brand {
color: $core-blue;
color: $core-vibrant-blue;
}
}
}
@ -119,13 +119,13 @@
border-radius: 20%;
height: 120px;
width: 120px;
border: 1px solid $ui-borders;
border: 1px solid $ui-fleet-blue-15;
background-color: $ui-light-grey;
transform: translate(-100px, 20px);
}
p {
color: $core-purple;
color: $core-fleet-purple;
font-size: 18px;
font-weight: $bold;
margin-top: 0;
@ -143,11 +143,11 @@
vertical-align: text-bottom;
&--off {
color: $core-medium-blue-grey;
color: $core-fleet-black;
}
&--on {
color: $core-blue;
color: $core-vibrant-blue;
}
}

16
frontend/components/forms/fields/Checkbox/_styles.scss
View File

@ -9,14 +9,14 @@
&:focus + .kolide-checkbox__tick {
&::after {
border-color: $core-blue;
border-color: $core-vibrant-blue;
}
}
&:checked + .kolide-checkbox__tick {
&::after {
background-color: $core-blue;
border: solid 2px $core-blue;
background-color: $core-vibrant-blue;
border: solid 2px $core-vibrant-blue;
}
&::before {
@ -27,7 +27,7 @@
width: 7px;
height: 13px;
margin: -8px 0 0 -3px;
border: 2px solid $white;
border: 2px solid $core-white;
border-top: 0;
border-left: 0;
content: '';
@ -45,17 +45,17 @@
@include size(20px);
transition: border 75ms ease-in-out, background 75ms ease-in-out;
border-radius: 2px;
border: solid 2px $ui-borders;
border: solid 2px $ui-fleet-blue-15;
content: '';
box-sizing: border-box;
display: block;
background-color: $white;
background-color: $core-white;
visibility: visible;
}
&--disabled {
&::after {
background-color: $ui-borders;
background-color: $ui-fleet-blue-15;
}
}
}
@ -65,7 +65,7 @@
font-weight: $regular;
line-height: 20px;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding-left: $pad-small;
}
}

46
frontend/components/forms/fields/Dropdown/_styles.scss
View File

@ -3,11 +3,11 @@
display: block;
font-size: $x-small;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
margin-bottom: $pad-xsmall;
&--error {
color: $alert;
color: $ui-error;
}
}
@ -15,12 +15,12 @@
&--error {
&.Select {
.Select-control {
border-color: $alert;
background-color: $alert-light;
border-color: $ui-error;
background-color: $ui-error;
}
.Select-arrow {
border-top-color: $alert;
border-top-color: $ui-error;
}
}
}
@ -35,14 +35,14 @@
margin-top: 4px;
font-size: $xx-small;
white-space: normal;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
font-style: italic;
}
}
.Select {
.Select-control {
border: 1px solid $ui-borders;
border: 1px solid $ui-fleet-blue-15;
background-color: $ui-light-grey;
border-radius: 4px;
height: 40px;
@ -56,7 +56,7 @@
font-size: $x-small;
border-radius: 4px;
background-color: $ui-light-grey;
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
.Select-value-icon {
border: 0;
@ -78,13 +78,13 @@
left: 50%;
visibility: visible;
font-size: $x-small;
color: $ui-medium-grey;
color: $ui-gray;
text-indent: 0;
}
&:hover {
&::after {
color: $core-medium-blue-grey;
color: $core-fleet-black;
}
}
}
@ -92,7 +92,7 @@
.Select-value-label {
font-size: $x-small;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-black;
line-height: 28px;
}
}
@ -106,12 +106,12 @@
}
.Select-arrow {
border-top-color: $core-dark-blue-grey;
border-top-color: $core-fleet-blue;
}
&.is-focused {
.Select-control {
border: 1px solid $core-blue;
border: 1px solid $core-vibrant-blue;
}
&:not(.is-open) {
@ -126,7 +126,7 @@
&.is-pseudo-focused > .Select-control {
.Select-value {
.Select-value-label {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $x-small;
}
}
@ -147,22 +147,22 @@
}
.Select-option {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $x-small;
margin: $pad-small;
padding: $pad-half;
display: block;
&.is-focused {
background-color: $core-blue-label-over;
background-color: $ui-vibrant-blue-25;
.Select-icon {
color: $core-blue-label-over;
color: $ui-vibrant-blue-25;
}
}
&.is-disabled {
color: $ui-medium-grey;
color: $ui-gray;
.Select-icon {
visibility: hidden;
@ -172,11 +172,11 @@
}
.Select-icon {
color: $ui-medium-grey;
color: $ui-gray;
}
.Select-placeholder {
color: $core-medium-blue-grey;
color: $core-fleet-black;
font-size: $x-small;
line-height: 40px;
padding: 0 12px;
@ -201,12 +201,12 @@
.Select-option {
&.is-disabled {
color: $core-dark-blue-grey;
color: $core-fleet-black;
cursor: default;
&.is-focused {
background-color: $core-blue-label-down;
color: $white;
background-color: $ui-vibrant-blue-25;
color: $core-white;
}
}
}

32
frontend/components/forms/fields/InputField/_styles.scss
View File

@ -1,23 +1,23 @@
.input-field {
line-height: 34px;
background-color: $ui-light-grey;
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
border-radius: 4px;
font-size: $small;
padding: $pad-xsmall 12px;
color: $core-medium-blue-grey;
color: $core-fleet-black;
font-family: 'Nunito Sans', sans-serif;
box-sizing: border-box;
height: 40px;
::placeholder {
color: $core-medium-blue-grey;
color: $ui-fleet-black-50;
}
&:focus {
outline: none;
border-color: $core-blue;
border-top-color: $core-purple;
border-color: $core-vibrant-blue;
border-top-color: $core-fleet-purple;
}
&--disabled {
@ -26,14 +26,14 @@
&--error {
transition: background 150ms ease-in-out, color 150ms ease-in-out;
border-color: $alert;
background-color: $alert-light;
color: $white;
border-color: $ui-error;
background-color: $ui-error;
color: $core-white;
&:focus {
border-bottom-color: $alert;
background-color: $white;
color: $core-dark-blue-grey;
border-bottom-color: $ui-error;
background-color: $core-white;
color: $core-fleet-black;
}
}
@ -51,11 +51,11 @@
display: block;
font-size: $medium;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin-bottom: $pad-xsmall;
&--error {
color: $alert;
color: $ui-error;
}
}
@ -68,11 +68,11 @@
font-weight: $regular;
line-height: 1.57;
letter-spacing: 1px;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
code {
color: $core-blue;
background-color: $ui-medium-grey;
color: $core-vibrant-blue;
background-color: $ui-gray;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
}

16
frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
View File

@ -8,19 +8,19 @@
right: 6px;
top: 28px;
font-size: 18px;
color: $core-medium-blue-grey;
color: $core-fleet-black;
&--active {
color: $core-blue;
color: $core-vibrant-blue;
}
&--error {
color: $alert;
color: $ui-error;
}
}
&__input {
border: 1px solid $ui-borders;
border: 1px solid $ui-fleet-blue-15;
background-color: $ui-light-grey;
border-radius: 4px;
padding: 9px 30px 9px 16px;
@ -29,11 +29,11 @@
position: relative;
width: 100%;
box-sizing: border-box;
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-weight: $regular;
::placeholder {
color: $core-medium-blue-grey;
color: $ui-fleet-black-50;
}
&:focus {
@ -41,7 +41,7 @@
}
&--error {
border-bottom-color: $alert;
border-bottom-color: $ui-error;
}
}
@ -65,7 +65,7 @@
margin-top: 8px;
code {
color: $core-blue;
color: $core-vibrant-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;

6
frontend/components/forms/fields/Radio/_styles.scss
View File

@ -20,7 +20,7 @@
content: "";
width: 10px;
height: 10px;
box-shadow: inset 1em 1em $core-blue;
box-shadow: inset 1em 1em $core-vibrant-blue;
border-radius: 50%;
top: 5px;
left: 5px;
@ -33,7 +33,7 @@
}
&:focus + .radio__control {
border-color: $core-blue;
border-color: $core-vibrant-blue;
}
}
}
@ -44,7 +44,7 @@
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid $ui-borders;
border: 2px solid $ui-fleet-blue-15;
transform: translateY(-0.05em);
}

10
frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
View File

@ -6,9 +6,9 @@
text-transform: uppercase;
font-weight: $bold;
font-size: $xx-small;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
letter-spacing: 0.5px;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
&:first-child {
margin: 0;
@ -23,15 +23,15 @@
position: relative;
z-index: 2;
padding: 24px 16px;
border-right: 1px solid $ui-borders;
background-color: $white;
border-right: 1px solid $ui-fleet-blue-15;
background-color: $core-white;
}
&__spotlight {
width: 50%;
float: right;
overflow-y: auto;
background-color: $white;
background-color: $core-white;
min-height: 500px;
position: relative;
z-index: 1;

30
frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss
View File

@ -3,7 +3,7 @@
padding: $pad-large;
&__back {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $xx-small;
display: none;
@ -30,21 +30,21 @@
font-size: $medium;
font-weight: $bold;
letter-spacing: 0.6px;
color: $core-black;
color: $core-fleet-black;
margin: 0;
}
&__icon {
color: $core-medium-blue-grey;
color: $core-fleet-black;
margin-right: $pad-small;
width: 21px;
&--online {
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
&--offline {
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
}
@ -56,11 +56,11 @@
text-transform: uppercase;
&--is-online {
color: $success;
color: $ui-success;
}
&--is-offline {
color: $alert;
color: $ui-error;
}
}
@ -73,7 +73,7 @@
font-size: $small;
font-weight: $bold;
letter-spacing: 0.9px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
text-transform: uppercase;
margin: 0;
}
@ -83,7 +83,7 @@
font-weight: $regular;
line-height: 1.85;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
list-style: none;
margin: 0;
padding: 0;
@ -119,12 +119,12 @@
font-size: $medium;
font-weight: $bold;
letter-spacing: 0.6px;
color: $core-black;
color: $core-fleet-black;
margin: 0;
}
&__icon {
color: $core-medium-blue-grey;
color: $core-fleet-black;
margin-right: $pad-small;
width: 21px;
}
@ -138,7 +138,7 @@
&__hosts-count {
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-black;
strong {
min-width: 21px;
@ -150,14 +150,14 @@
}
&__hosts-online {
color: $success;
color: $ui-success;
}
&__description {
font-size: $pad-medium;
font-weight: $regular;
line-height: 1.71;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin: 0 0 $pad-small;
}
}
@ -174,7 +174,7 @@
th {
font-weight: $bold;
line-height: 2.3;
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding-right: $pad-half;
}
}

24
frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
View File

@ -27,7 +27,7 @@
&__add-btn {
transition: color 0ms;
color: $core-blue;
color: $core-vibrant-blue;
font-size: $medium;
}
@ -40,9 +40,9 @@
}
&__count {
background-color: $core-dark-blue-grey;
background-color: $core-fleet-black;
border-radius: $border-radius;
color: $white;
color: $core-white;
font-size: $xx-small;
line-height: 16px;
font-weight: bold;
@ -51,35 +51,35 @@
}
&__icon {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $small;
&--online {
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
&--offline {
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
&--mia {
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
}
&__ip {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $small;
}
&__label-host {
color: $core-purple;
color: $core-fleet-purple;
font-size: $medium;
margin-left: $pad-half;
}
&__label-label {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: 14px;
margin-left: $pad-half;
@ -89,7 +89,7 @@
}
&__more-info {
color: $core-blue;
color: $core-vibrant-blue;
cursor: pointer;
float: right;
margin-right: $pad-base;
@ -97,7 +97,7 @@
&__target-icon {
font-size: $medium;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin-right: $pad-xsmall;
}

30
frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
View File

@ -3,14 +3,14 @@
&__label {
font-size: $x-small;
color: $core-black;
color: $core-fleet-black;
display: block;
margin: 40px 0 4px;
text-align: right;
&--error {
.target-select__select-targets {
color: $alert;
color: $ui-error;
}
}
}
@ -22,7 +22,7 @@
&__targets-count {
font-size: $small;
font-weight: $regular;
color: $core-blue;
color: $core-vibrant-blue;
}
&.Select {
@ -55,7 +55,7 @@
> input {
line-height: 30px;
padding: 8px 0;
color: $core-black;
color: $core-fleet-black;
font-size: 16px;
}
}
@ -76,7 +76,7 @@
&.is-disabled {
&.is-focused {
background-color: $core-blue-label-down;
background-color: $ui-vibrant-blue-25;
border-radius: 8px;
}
}
@ -89,7 +89,7 @@
.Select-value {
line-height: 34px;
border: 1px solid $core-dark-blue-grey;
border: 1px solid $core-fleet-black;
margin-top: 5px;
margin-bottom: 0;
}
@ -97,7 +97,7 @@
&.is-focused {
.Select-control {
border: 1px solid $core-blue;
border: 1px solid $core-vibrant-blue;
}
}
}
@ -135,8 +135,8 @@
.Select-value {
border-radius: $border-radius;
background-color: $white;
border: solid 1px $ui-borders;
background-color: $core-white;
border: solid 1px $ui-fleet-blue-15;
.Select-value-icon {
border: 0;
@ -157,14 +157,14 @@
top: 50%;
left: 50%;
visibility: visible;
color: $core-dark-blue-grey;
color: $core-fleet-black;
display: block;
text-indent: 0;
}
&:hover {
&::after {
color: $alert;
color: $ui-error;
}
}
}
@ -172,7 +172,7 @@
.Select-value-label {
font-size: 16px;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding: 0 0 0 $pad-medium;
line-height: 34px;
}
@ -181,10 +181,10 @@
.Select-clear {
font-size: 28px;
margin-right: 10px;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
&:hover {
color: $alert;
color: $ui-error;
}
}
@ -199,7 +199,7 @@
content: '\f049';
font-size: 180px;
margin-top: -90px;
color: $ui-medium-grey;
color: $ui-gray;
}
}
}

14
frontend/components/forms/fields/Slider/_styles.scss
View File

@ -1,6 +1,6 @@
.kolide-slider {
transition: background-color 150ms ease-in-out;
background-color: $core-dark-blue-grey;
background-color: $core-fleet-black;
border-radius: 12px;
border: 1px solid #eaeaea;
cursor: pointer;
@ -12,15 +12,15 @@
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2);
&:hover {
background-color: $core-dark-blue-grey;
background-color: $core-fleet-black;
box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
&--active {
background-color: $core-blue;
background-color: $core-vibrant-blue;
&:hover {
background-color: $core-blue;
background-color: $core-vibrant-blue;
}
}
@ -37,7 +37,7 @@
transition: left 150ms ease-in-out;
margin-top: 3px;
border-radius: 50%;
background-color: $white;
background-color: $core-white;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
&--active {
@ -51,10 +51,10 @@
text-align: left;
vertical-align: text-bottom;
margin-right: 10px;
color: $core-medium-blue-grey;
color: $core-fleet-black;
&--active {
color: $core-blue;
color: $core-vibrant-blue;
margin-right: 0;
margin-left: 10px;
}

2
frontend/components/forms/queries/QueryForm/_styles.scss
View File

@ -34,7 +34,7 @@
}
&__title {
color: $core-dark-blue-grey;
color: $core-fleet-black;
display: inline-block;
font-size: $large;
}

16
frontend/components/hosts/AddHostModal/_styles.scss
View File

@ -47,13 +47,13 @@
font-weight: $regular;
line-height: 20px;
letter-spacing: normal;
color: $black;
color: $core-fleet-black;
margin: 8px 0 0 44px;
}
a {
font-size: $x-small;
color: $core-blue;
color: $core-vibrant-blue;
font-weight: $bold;
text-decoration: none;
@ -84,8 +84,8 @@
width: 24px;
height: 24px;
border-radius: 100px;
border: 2px solid $core-blue;
color: $core-blue;
border: 2px solid $core-vibrant-blue;
color: $core-vibrant-blue;
font-weight: $bold;
text-align: center;
margin-right: 16px;
@ -118,16 +118,16 @@
pre,
code {
background-color: $core-light-blue-grey;
color: $core-medium-blue-grey;
border: 1px solid $ui-borders;
background-color: $ui-off-white;
color: $core-fleet-black;
border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
padding: 7px 16px;
margin: 24px 0 0 44px;
}
&__error {
color: $alert;
color: $ui-error;
}
}

6
frontend/components/loaders/ProgressBar/_styles.scss
View File

@ -1,6 +1,6 @@
.progress-bar {
display: flex;
background-color: $ui-dark-grey;
background-color: $ui-fleet-black-25;
height: 10px;
overflow: hidden;
border-radius: 2px;
@ -12,11 +12,11 @@
transition: width 300ms ease-in;
&--error {
background-color: $alert;
background-color: $ui-error;
}
&--success {
background-color: $success;
background-color: $ui-success;
}
}
}

2
frontend/components/loaders/Timer/_styles.scss
View File

@ -1,4 +1,4 @@
.kolide-timer {
font-size: 14px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}

8
frontend/components/modals/Modal/_styles.scss
View File

@ -23,11 +23,11 @@
.button {
@include size(30px);
line-height: 30px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $x-large;
&:hover {
color: $alert-light;
color: $ui-error;
}
}
}
@ -37,14 +37,14 @@
font-weight: $regular;
text-align: left;
padding-bottom: 15px;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
display: flex;
justify-content: space-between;
}
&__modal_container {
@include position(absolute, 22px null null null);
background-color: $white;
background-color: $core-white;
width: 658px;
padding: 40px;
border-radius: 8px;

4
frontend/components/packs/EditPackFormWrapper/_styles.scss
View File

@ -7,7 +7,7 @@
@include ellipsis(80%);
.kolidecon {
color: $ui-medium-grey;
color: $ui-gray;
}
}
@ -15,7 +15,7 @@
font-size: 15px;
font-weight: $regular;
line-height: 2;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
max-width: 800px;
word-wrap: break-word;
}

14
frontend/components/packs/PacksList/Row/_styles.scss
View File

@ -1,9 +1,9 @@
.packs-list-row {
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
cursor: pointer;
&--selected {
background-color: $core-blue-label-down;
background-color: $ui-vibrant-blue-25;
}
&:focus {
@ -11,7 +11,7 @@
}
&:hover {
background-color: $core-blue-label-over;
background-color: $ui-vibrant-blue-10;
}
&:last-child {
@ -19,7 +19,7 @@
}
&__td {
color: $core-black;
color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
padding: 7px 0;
@ -48,16 +48,16 @@
&__status-icon {
&--enabled {
color: $success;
color: $ui-success;
}
&--disabled {
color: $alert;
color: $ui-error;
}
}
&__status-text {
color: $core-black;
color: $core-fleet-black;
font-weight: $regular;
margin-left: 10px;

8
frontend/components/packs/PacksList/_styles.scss
View File

@ -3,15 +3,15 @@
overflow: scroll;
&__wrapper {
border: 1px solid $ui-borders;
border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
overflow: hidden;
margin-top: 16px;
}
thead {
background-color: $core-light-blue-grey;
border-bottom: 1px solid $ui-borders;
background-color: $ui-off-white;
border-bottom: 1px solid $ui-fleet-blue-15;
}
&__th {
@ -41,6 +41,6 @@
&__empty-table {
text-align: center;
font-size: $x-small;
color: $core-black;
color: $core-fleet-black;
}
}

6
frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
View File

@ -1,6 +1,6 @@
.queries-list-row {
line-height: 38px;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
&__description {
max-width: 280px;
@ -11,12 +11,12 @@
}
&--selected {
background-color: $core-blue-label-down;
background-color: $ui-vibrant-blue-25;
}
&:hover {
cursor: pointer;
background-color: $core-blue-label-over;
background-color: $ui-vibrant-blue-10;
}
&:active,

8
frontend/components/queries/QueriesList/_styles.scss
View File

@ -1,6 +1,6 @@
.queries-list {
background-color: $white;
border: 1px solid $ui-borders;
background-color: $core-white;
border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
box-sizing: border-box;
margin-top: 16px;
@ -11,8 +11,8 @@
width: 100%;
thead {
background-color: $core-light-blue-grey;
border-bottom: 1px solid $ui-borders;
background-color: $ui-off-white;
border-bottom: 1px solid $ui-fleet-blue-15;
.form-field {
margin: 0;

10
frontend/components/queries/QueryProgressDetails/_styles.scss
View File

@ -9,7 +9,7 @@
max-width: 420px;
em {
color: $core-medium-blue-grey;
color: $core-fleet-black;
font-size: 0.8em;
}
}
@ -22,7 +22,7 @@
&__text-online {
&:before {
background-color: $success;
background-color: $ui-success;
border-radius: 100%;
content: ' ';
display: inline-block;
@ -34,7 +34,7 @@
&__text-offline {
&:before {
background-color: $ui-dark-grey;
background-color: $ui-fleet-black-25;
border-radius: 100%;
content: ' ';
display: inline-block;
@ -46,7 +46,7 @@
&__text-error {
&:before {
background-color: $alert;
background-color: $ui-error;
border-radius: 100%;
content: ' ';
display: inline-block;
@ -57,7 +57,7 @@
}
&__text-results {
color: $core-medium-blue-grey;
color: $core-fleet-black;
}
&__btn-wrapper {

24
frontend/components/queries/QueryResultsTable/_styles.scss
View File

@ -1,7 +1,7 @@
.query-results-table {
display: flex;
flex-direction: column;
background-color: $white;
background-color: $core-white;
width: 100%;
min-height: calc(500px + (#{$pad-base} * 2));
box-sizing: border-box;
@ -20,10 +20,10 @@
}
&__filter-icon {
color: $ui-dark-grey;
color: $ui-fleet-black-25;
&--is-active {
color: $core-blue;
color: $core-vibrant-blue;
}
}
@ -34,7 +34,7 @@
&__results-table-wrapper {
display: flex;
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
border-radius: 3px;
overflow: scroll;
margin-top: 4px;
@ -60,7 +60,7 @@
&__error-table-wrapper {
display: flex;
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
border-radius: 3px;
overflow: scroll;
margin-bottom: 40px;
@ -71,16 +71,16 @@
&__table {
border-collapse: collapse;
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $x-small;
width: 100%;
}
thead {
background-color: $core-light-blue-grey;
color: $core-black;
background-color: $ui-off-white;
color: $core-fleet-black;
text-align: left;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
th {
padding: 12px 24px;
@ -105,7 +105,7 @@
}
tbody {
background-color: $white;
background-color: $core-white;
td {
padding: 12px 24px;
@ -113,7 +113,7 @@
}
tr {
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
&:last-child {
border-bottom: 0;
@ -126,7 +126,7 @@
animation-fill-mode: forwards;
border-radius: 3px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
z-index: 99;
padding: 20px;

4
frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
View File

@ -1,13 +1,13 @@
.scheduled-query-list-item {
outline: none;
cursor: pointer;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
&:last-child {
border-bottom: 0;
}
&--selected {
background-color: $core-blue-label-down;
background-color: $ui-vibrant-blue-25;
}
}

26
frontend/components/queries/ScheduledQueriesList/_styles.scss
View File

@ -1,6 +1,6 @@
.scheduled-queries-list {
background-color: $white;
border: 1px solid $ui-borders;
background-color: $core-white;
border: 1px solid $ui-fleet-blue-15;
border-radius: 4px;
box-sizing: border-box;
@ -11,8 +11,8 @@
thead {
height: 50px;
background-color: $core-light-blue-grey;
border-bottom: 1px solid $ui-borders;
background-color: $ui-off-white;
border-bottom: 1px solid $ui-fleet-blue-15;
th {
font-size: $x-small;
@ -73,7 +73,7 @@
line-height: 2.71;
letter-spacing: -0.5px;
text-align: left;
color: $core-black;
color: $core-fleet-black;
}
&:nth-child(3) {
@ -81,7 +81,7 @@
font-weight: $regular;
line-height: 2.71;
letter-spacing: -0.5px;
color: $core-black;
color: $core-fleet-black;
}
&:nth-child(4) {
@ -90,7 +90,7 @@
line-height: 2.71;
letter-spacing: -0.5px;
text-align: left;
color: $core-black;
color: $core-fleet-black;
}
&:nth-child(5),
@ -100,7 +100,7 @@
line-height: 2.71;
letter-spacing: -0.5px;
text-align: center;
color: $core-black;
color: $core-fleet-black;
.kolidecon {
font-size: 18px;
@ -110,7 +110,7 @@
&:nth-child(7) {
text-align: center;
font-size: 18px;
color: $core-black;
color: $core-fleet-black;
}
}
@ -125,7 +125,7 @@
text-align: left;
h1 {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: 24px;
font-weight: $regular;
line-height: 1.96;
@ -137,7 +137,7 @@
font-size: 20px;
line-height: 2;
letter-spacing: -0.4px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-weight: $regular;
margin: 0;
}
@ -146,7 +146,7 @@
font-size: 16px;
font-weight: $regular;
line-height: 2.5;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin: 0;
}
@ -161,7 +161,7 @@
font-size: 16px;
font-weight: $regular;
line-height: 2.5;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
}

4
frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
View File

@ -5,7 +5,7 @@ $base-class: 'panel-group-item';
width: 100%;
font-size: $x-small;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-black;
text-align: left;
padding: 10px 0;
margin: 2px 0;
@ -13,7 +13,7 @@ $base-class: 'panel-group-item';
&.#{$base-class}--selected {
font-weight: $bold;
background-color: $core-blue-label-down;
background-color: $ui-vibrant-blue-25;
.#{$base-class}__count {
font-weight: $bold;

8
frontend/components/side_panels/HostSidePanel/_styles.scss
View File

@ -1,5 +1,5 @@
.host-side-panel {
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding: 14px 20px 22px;
.input-icon-field {
@ -17,7 +17,7 @@
h3 {
font-size: $x-small;
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin: 24px 0 10px 16px;
}
@ -27,7 +27,7 @@
}
&__panel-group-item {
color: $core-dark-blue-grey;
color: $core-fleet-black;
width: 100%;
&--filter {
@ -38,7 +38,7 @@
top: 10px;
left: 12px;
font-size: 20px;
color: $core-medium-blue-grey;
color: $core-fleet-black;
}
}

10
frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
View File

@ -2,7 +2,7 @@
padding: 16px 20px 0;
&__description {
color: $core-dark-blue-grey;
color: $core-fleet-blue;
font-size: 14px;
word-wrap: break-word;
}
@ -18,20 +18,20 @@
}
&__pack-icon {
color: $core-medium-blue-grey;
color: $core-fleet-black;
margin-right: 11px;
}
&__pack-name {
@include ellipsis(250px);
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $small;
font-weight: $regular;
margin: 0;
}
&__query-icon {
color: $core-medium-blue-grey;
color: $core-fleet-black;
font-size: 16px;
margin-right: 15px;
}
@ -45,7 +45,7 @@
&__query-name {
@include ellipsis(240px);
font-size: $small;
color: $core-blue;
color: $core-vibrant-blue;
text-decoration: none;
}
}

16
frontend/components/side_panels/PackInfoSidePanel/_styles.scss
View File

@ -1,7 +1,7 @@
.pack-info-side-panel {
background-color: $white;
background-color: $core-white;
bottom: 0;
border-left: 1px solid $ui-borders;
border-left: 1px solid $ui-fleet-blue-15;
box-sizing: border-box;
overflow: scroll;
padding: 30px;
@ -9,8 +9,8 @@
&__title {
font-size: $medium;
font-weight: $regular;
color: $core-dark-blue-grey;
border-bottom: 1px solid $ui-borders;
color: $core-fleet-black;
border-bottom: 1px solid $ui-fleet-blue-15;
padding-bottom: 8px;
margin: 0 0 4px;
}
@ -18,7 +18,7 @@
&__subtitle {
font-size: $small;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
margin: 0 0 10px;
padding-top: 15px;
}
@ -26,14 +26,14 @@
p,
ul {
font-size: $x-small;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
dl {
dt {
font-weight: $bold;
font-size: $x-small;
color: $core-dark-blue-grey;
color: $core-fleet-black;
.kolidecon {
font-size: 20px;
@ -47,7 +47,7 @@
dd {
font-size: 13px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin-left: 30px;
}
}

6
frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
View File

@ -7,7 +7,7 @@
font-size: $small;
.kolidecon {
color: $core-medium-blue-grey;
color: $core-fleet-black;
margin-right: 6px;
}
}
@ -21,7 +21,7 @@
&__description {
font-size: $small;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
word-wrap: break-word;
}
@ -48,6 +48,6 @@
text-decoration: none;
font-size: $small;
vertical-align: middle;
color: $core-blue;
color: $core-vibrant-blue;
}
}

22
frontend/components/side_panels/QuerySidePanel/_styles.scss
View File

@ -5,7 +5,7 @@
margin: 0 0 16px;
font-size: $x-small;
font-weight: $bold;
color: $core-darkest-blue-grey;
color: $core-fleet-black;
}
&__choose-table {
@ -23,13 +23,13 @@
&__description {
font-size: $x-small;
font-style: italic;
color: $core-medium-blue-grey;
color: $core-fleet-black;
margin: 0;
}
&__platforms {
font-size: 14px;
color: $core-medium-blue-grey;
color: $core-fleet-black;
list-style: none;
margin: 0 0 24px;
padding: 0;
@ -72,7 +72,7 @@
display: flex;
margin: 0 0 15px;
padding-top: $pad-half;
border-top: 1px solid $ui-borders;
border-top: 1px solid $ui-fleet-blue-15;
}
&__suggestion {
@ -81,7 +81,7 @@
line-height: 1.71;
letter-spacing: 0.5px;
text-align: left;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
}
&__load-suggestion {
@ -96,8 +96,8 @@
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid $ui-borders;
color: $core-dark-blue-grey;
border-top: 1px solid $ui-fleet-blue-15;
color: $core-fleet-black;
font-size: px-to-rem(14);
padding: 12px 0;
@ -108,12 +108,12 @@
&__name {
border-radius: 4px;
border: solid 1px $core-dark-blue-grey;
border: solid 1px $core-fleet-black;
padding: 4px 10px;
box-sizing: border-box;
font-size: $xx-small;
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
}
&__description {
@ -123,14 +123,14 @@
&__type {
font-size: $x-small;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
&__help {
margin-left: 12px;
vertical-align: text-bottom;
font-size: 20px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
}

6
frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
View File

@ -4,7 +4,7 @@
font-size: 18px;
font-weight: $bold;
letter-spacing: -0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
margin: 0 0 10px;
}
@ -24,7 +24,7 @@
font-size: 16px;
font-weight: $bold;
letter-spacing: -0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-black;
border-bottom: 1px solid #eaeefb;
padding: 0 0 9px;
margin: 0 0 9px;
@ -35,7 +35,7 @@
font-size: 14px;
font-weight: $regular;
line-height: 1.71;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
}
}

4
frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
View File

@ -1,8 +1,8 @@
.secondary-side-panel-container {
align-self: stretch;
background-color: $core-light-blue-grey;
background-color: $ui-off-white;
box-sizing: border-box;
border-left: 1px solid $ui-medium-grey;
border-left: 1px solid $ui-gray;
overflow: auto;
width: $sidepanel-width;

2
frontend/components/side_panels/SiteNavHeader/_styles.scss
View File

@ -16,7 +16,7 @@
@include ellipsis(110px);
margin: 0;
padding: 0;
color: $white;
color: $core-white;
font-size: $small;
font-weight: $bold;
position: relative;

14
frontend/components/side_panels/SiteNavSidePanel/_styles.scss
View File

@ -5,7 +5,7 @@
border-bottom: 3px solid transparent;
&:hover {
background-color: $core-black-over;
background-color: $core-fleet-black;
}
&--multiple.site-nav-item--active {
@ -17,8 +17,8 @@
}
.site-nav-item__link {
border-right: 3px solid $core-blue;
background-color: $core-black;
border-right: 3px solid $core-vibrant-blue;
background-color: $core-fleet-black;
}
}
@ -39,7 +39,7 @@
}
a {
color: $white;
color: $core-white;
text-align: center;
display: flex;
align-items: center;
@ -47,11 +47,11 @@
}
&--active {
border-bottom: 3px solid $core-blue;
background-color: $core-black;
border-bottom: 3px solid $core-vibrant-blue;
background-color: $core-fleet-black;
&:hover {
background-color: $core-black;
background-color: $core-fleet-black;
}
.site-nav-item__name {

2
frontend/components/side_panels/UserMenu/_styles.scss
View File

@ -12,7 +12,7 @@
min-width: 125px;
&:hover {
background-color: $info;
background-color: $ui-vibrant-blue-10;
color: #3e4771;
}
}

4
frontend/layouts/CoreLayout/_styles.scss
View File

@ -9,13 +9,13 @@
margin: 0;
padding: 0;
position: relative;
background-color: $white;
background-color: $core-white;
display: flex;
flex-direction: column;
}
.site-nav {
background: $core-gradient-horizontal;
background: $gradients-dark-gradient;
box-sizing: border-box;
display: flex;
top: 0;

6
frontend/pages/ConfirmInvitePage/_styles.scss
View File

@ -1,5 +1,5 @@
.confirm-invite-page {
background-color: $white;
background-color: $core-white;
border-radius: 10px;
width: 436px;
padding: 40px;
@ -11,13 +11,13 @@
font-weight: $bold;
line-height: 0.72;
letter-spacing: 0.6px;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
margin: 0;
padding: 0;
}
p {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: 14px;
font-weight: $regular;
}

4
frontend/pages/Fleet404/_styles.scss
View File

@ -5,7 +5,7 @@
}
a {
color: $core-blue;
color: $core-vibrant-blue;
text-decoration: none;
&:hover {
@ -39,7 +39,7 @@
display: inline;
font-size: 32px;
max-width: 479px;
color: $core-black;
color: $core-fleet-black;
span {
font-weight: $bold;

4
frontend/pages/Fleet500/_styles.scss
View File

@ -4,7 +4,7 @@
}
a {
color: $core-blue;
color: $core-vibrant-blue;
text-decoration: none;
display: block;
margin-top: 16px;
@ -43,7 +43,7 @@
> h1 {
font-size: 32px;
min-width: 479px;
color: $core-black;
color: $core-fleet-black;
span {
font-weight: $bold;

4
frontend/pages/ForgotPasswordPage/_styles.scss
View File

@ -13,11 +13,11 @@
font-size: $small;
span {
color: $core-blue;
color: $core-vibrant-blue;
}
}
&__email {
color: $core-purple;
color: $core-fleet-purple;
}
}

4
frontend/pages/LoginSuccessfulPage/_styles.scss
View File

@ -1,5 +1,5 @@
.login-success {
background-color: $white;
background-color: $core-white;
margin-top: 20px;
padding: 40px;
text-align: center;
@ -14,6 +14,6 @@
&__sub-text {
font-size: $x-small;
color: $core-medium-blue-grey;
color: $core-fleet-blue;
}
}

4
frontend/pages/LogoutPage/_styles.scss
View File

@ -8,12 +8,12 @@
&__tab {
align-self: center;
background-color: $white;
background-color: $core-white;
height: 30px;
margin-top: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: 0 5px 30px 0 rgba($black, 0.3);
box-shadow: 0 5px 30px 0 rgba($core-fleet-black, 0.3);
width: 376px;
}
}

34
frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
View File

@ -15,7 +15,7 @@
width: 150px;
font-size: $small;
font-weight: $regular;
color: $white;
color: $core-white;
position: relative;
&::before {
@ -23,7 +23,7 @@
position: absolute;
width: 200px;
height: 2px;
background-color: $core-blue;
background-color: $core-vibrant-blue;
bottom: 43px;
left: 87px;
@ -56,29 +56,29 @@
&--active {
font-weight: $bold;
color: $white;
color: $core-white;
}
&--1 {
&::after {
border: 2px solid $white;
border: 2px solid $core-white;
}
&.registration-breadcrumbs__page--active {
&::before {
background: linear-gradient(to right, $white 50%, $core-blue 50%);
background: linear-gradient(to right, $core-white 50%, $core-vibrant-blue 50%);
}
&::after {
background-color: transparent;
border: 2px solid $white;
border: 2px solid $core-white;
}
}
&.registration-breadcrumbs__page--complete {
&::before {
background-color: $white;
background-color: $core-white;
background-size: auto;
z-index: 2;
}
@ -86,7 +86,7 @@
&::after {
@include size(28px);
content: '\f035';
color: $white;
color: $core-white;
border: 0;
}
}
@ -94,30 +94,30 @@
&--2 {
&::after {
border: solid 1px $core-blue;
border: solid 1px $core-vibrant-blue;
}
&.registration-breadcrumbs__page--active {
&::before {
background: linear-gradient(to right, $white 50%, $core-blue 50%);
background: linear-gradient(to right, $core-white 50%, $core-vibrant-blue 50%);
}
&::after {
background-color: transparent;
border: 2px solid $white;
border: 2px solid $core-white;
}
}
&.registration-breadcrumbs__page--complete {
&::before {
background: $white;
background: $core-white;
z-index: 2;
}
&::after {
@include size(28px);
content: '\f035';
color: $white;
color: $core-white;
border: 0;
}
}
@ -129,18 +129,18 @@
}
&::after {
border: solid 1px $core-blue;
border: solid 1px $core-vibrant-blue;
}
&.registration-breadcrumbs__page--active {
&::before {
background: linear-gradient(to right, $white 50%, $core-blue 50%);
background: linear-gradient(to right, $core-white 50%, $core-vibrant-blue 50%);
}
&::after {
background-color: transparent;
border: 2px solid $white;
border: 2px solid $core-white;
}
}
@ -148,7 +148,7 @@
&::after {
@include size(28px);
content: '\f035';
color: $white;
color: $core-white;
border: 0;
}
}

16
frontend/pages/UserSettingsPage/_styles.scss
View File

@ -32,7 +32,7 @@
a {
display: block;
color: $core-blue;
color: $core-vibrant-blue;
text-align: center;
position: relative;
z-index: 1;
@ -56,17 +56,17 @@
&__avatar {
@include size(120px);
border: solid 1px $ui-borders;
border: solid 1px $ui-fleet-blue-15;
margin: 0 auto;
display: block;
}
&__more-info-detail {
color: $core-dark-blue-grey;
color: $core-fleet-blue;
.kolidecon {
color: $ui-medium-grey;
color: $ui-gray;
font-size: 18px;
margin-right: 11px;
}
@ -93,7 +93,7 @@
margin: 0 0 4px;
a {
color: $core-blue;
color: $core-vibrant-blue;
}
}
@ -111,7 +111,7 @@
top: 8px;
right: 10px;
font-size: 18px;
color: $core-blue;
color: $core-vibrant-blue;
&:active {
top: 8px;
@ -121,8 +121,8 @@
&__secret-input {
input {
border-radius: 2px;
background-color: $core-light-blue-grey;
border-color: $ui-borders;
background-color: $ui-off-white;
border-color: $ui-fleet-blue-15;
padding-right: 36px;
font-family: 'SourceCodePro', $monospace;

10
frontend/pages/admin/AppSettingsPage/_styles.scss
View File

@ -3,15 +3,15 @@
&__page-description {
font-size: $x-small;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
@include sticky-settings-description;
}
h2 {
font-size: 20px;
font-weight: $regular;
color: $core-black;
border-bottom: solid 1px $ui-borders;
color: $core-fleet-black;
border-bottom: solid 1px $ui-fleet-blue-15;
margin: 0 0 15px;
padding: 0 0 8px;
@ -28,7 +28,7 @@
small {
font-size: $x-small;
font-weight: $regular;
color: $core-dark-blue-grey;
color: $core-fleet-black;
}
}
@ -54,7 +54,7 @@
}
a {
color: $black;
color: $core-fleet-black;
text-decoration: none;
}
}

6
frontend/pages/admin/OsqueryOptionsPage/_styles.scss
View File

@ -9,7 +9,7 @@
&__page-description {
font-size: $x-small;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
@include sticky-settings-description;
padding-bottom: $pad-medium;
}
@ -26,7 +26,7 @@
}
a {
color: $core-blue;
color: $core-vibrant-blue;
font-size: $x-small;
font-weight: $bold;
text-decoration: none;
@ -53,7 +53,7 @@
font-weight: $regular;
line-height: 1.6;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
}
}

6
frontend/pages/admin/SettingsWrapper/_styles.scss
View File

@ -7,7 +7,7 @@
padding-top: 15px;
position: sticky;
top: 0;
background-color: $white;
background-color: $core-white;
z-index: 2;
}
@ -21,7 +21,7 @@
.react-tabs {
.react-tabs__tab-list {
border-bottom: 1px solid $ui-medium-grey;
border-bottom: 1px solid $ui-gray;
}
&__tab {
@ -61,7 +61,7 @@
&__tab--selected, &__tab--selected:focus {
font-weight: $bold;
border-bottom: 1px solid $core-blue;
border-bottom: 1px solid $core-vibrant-blue;
}
}
}

10
frontend/pages/admin/UserManagementPage/_styles.scss
View File

@ -3,7 +3,7 @@
&__page-description {
font-size: $x-small;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
@include sticky-settings-description;
padding-bottom: $pad-medium;
}
@ -14,7 +14,7 @@
&__config-button {
text-decoration: none;
color: $core-blue;
color: $core-vibrant-blue;
font-size: $x-small;
margin-left: $pad-medium;
}
@ -31,19 +31,19 @@
&--active {
&:before {
background-color: $success;
background-color: $ui-success;
}
}
&--no-access {
&:before {
background-color: $ui-dark-grey;
background-color: $ui-offline;
}
}
&--invite-pending {
&:before {
background-color: $warning;
background-color: $ui-warning;
}
}

2
frontend/pages/admin/UserManagementPage/components/DeleteUserForm/_styles.scss
View File

@ -6,7 +6,7 @@
}
&__warning {
color: $alert
color: $ui-error;
}
&__btn-wrap {

2
frontend/pages/admin/UserManagementPage/components/EmptyUsers/_styles.scss
View File

@ -20,7 +20,7 @@
}
p {
color: $core-black;
color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;

4
frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
View File

@ -1,7 +1,7 @@
.selected-teams-form {
border: 1px solid $ui-borders;
border: 1px solid $ui-fleet-blue-15;
border-radius: $border-radius;
background-color: $core-light-blue-grey;
background-color: $ui-off-white;
padding: $pad-medium;
&__team-item {

6
frontend/pages/admin/UserManagementPage/components/UserForm/_styles.scss
View File

@ -10,14 +10,14 @@
&__label {
font-size: $x-small;
font-weight: $bold;
color: $core-dark-blue-grey;
color: $core-fleet-black;
padding-left: 32px;
}
}
}
&__label {
color: $core-black;
color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
margin-bottom: 4px;
@ -33,7 +33,7 @@
}
a {
color: $core-blue;
color: $core-vibrant-blue;
font-size: $x-small;
font-weight: $bold;
text-decoration: none;

12
frontend/pages/hosts/HostDetailsPage/_styles.scss
View File

@ -30,7 +30,7 @@
}
&__header {
color: $core-black;
color: $core-fleet-black;
font-weight: $bold;
}
@ -55,7 +55,7 @@
.title {
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid $ui-borders;
border-bottom: 1px solid $ui-fleet-blue-15;
margin: 0;
&__inner {
@ -75,7 +75,7 @@
.last-fetched {
font-size: $xx-small;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
margin: 0;
padding-left: $pad-small;
}
@ -112,12 +112,12 @@
}
.status {
color: $core-dark-blue-grey;
color: $core-fleet-blue;
text-transform: capitalize;
&--online {
&:before {
background-color: $success;
background-color: $ui-success;
border-radius: 100%;
content: ' ';
display: inline-block;
@ -129,7 +129,7 @@
&--offline {
&:before {
background-color: $ui-dark-grey;
background-color: $ui-fleet-black-25;
border-radius: 100%;
content: ' ';
display: inline-block;

8
frontend/pages/hosts/ManageHostsPage/_styles.scss
View File

@ -38,13 +38,13 @@
h2 {
text-transform: uppercase;
color: $core-dark-blue-grey;
color: $core-fleet-blue;
font-weight: $regular;
font-size: 16px;
}
p {
color: $core-medium-blue-grey;
color: $core-fleet-blue;
margin: 0;
font-size: $x-small;
font-style: italic;
@ -67,13 +67,13 @@
&--online {
&:before {
background-color: $success;
background-color: $ui-success;
}
}
&--offline {
&:before {
background-color: $ui-dark-grey;
background-color: $ui-offline;
}
}

2
frontend/pages/hosts/ManageHostsPage/components/EmptyHosts/_styles.scss
View File

@ -20,7 +20,7 @@
}
p {
color: $core-black;
color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;

14
frontend/pages/hosts/ManageHostsPage/components/NoHosts/_styles.scss
View File

@ -9,7 +9,7 @@
font-weight: $regular;
line-height: normal;
letter-spacing: normal;
color: $core-black;
color: $core-fleet-black;
}
h2 {
@ -17,20 +17,20 @@
font-weight: $bold;
margin: 0 0 24px;
line-height: 20px;
color: $core-black;
color: $core-fleet-black;
}
ul {
margin: 0;
padding: 0;
color: $core-black;
color: $core-fleet-black;
list-style: none;
li {
&::before {
content: '•';
color: $core-blue;
color: $core-vibrant-blue;
margin-right: 16px;
}
}
@ -52,7 +52,7 @@
}
p {
color: $core-black;
color: $core-fleet-black;
font-weight: $regular;
font-size: $x-small;
margin: 0;
@ -74,14 +74,14 @@
margin-top: 24px;
p {
color: $core-black;
color: $core-fleet-black;
font-weight: $bold;
font-size: $x-small;
margin: 0;
}
a {
color: $core-blue;
color: $core-vibrant-blue;
font-weight: $regular;
font-size: $x-small;
text-decoration: none;

14
frontend/pages/packs/AllPacksPage/_styles.scss
View File

@ -1,6 +1,6 @@
.all-packs-page {
&__bulk-action-btn {
color: $core-purple;
color: $core-fleet-purple;
font-size: 15px;
font-weight: $regular;
margin-left: 26px;
@ -9,19 +9,19 @@
margin-left: 0;
i {
color: $alert;
color: $ui-error;
}
}
&--enable {
i {
color: $success;
color: $ui-success;
}
}
&--delete {
i {
color: $core-medium-blue-grey;
color: $core-fleet-black;
}
}
}
@ -33,7 +33,7 @@
}
&__pack-count {
color: $core-darkest-blue-grey;
color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
margin: 0;
@ -55,7 +55,7 @@
top: 36px;
left: 9px;
font-size: 18px;
color: $ui-medium-grey;
color: $ui-gray;
}
}
@ -68,7 +68,7 @@
}
&__table {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $small;
width: 100%;
}

2
frontend/pages/packs/PackComposerPage/_styles.scss
View File

@ -1,6 +1,6 @@
.pack-composer {
&__pack-form {
background-color: $white;
background-color: $core-white;
border-radius: 3px;
}
}

4
frontend/pages/queries/ManageQueriesPage/_styles.scss
View File

@ -15,7 +15,7 @@
}
&__query-count {
color: $core-dark-blue-grey;
color: $core-fleet-black;
font-size: $x-small;
font-weight: $bold;
margin: 0 12px 0 0;
@ -51,7 +51,7 @@
top: 36px;
left: 9px;
font-size: 18px;
color: $ui-medium-grey;
color: $ui-gray;
}
}

2
frontend/styles/global/_forms.scss
View File

@ -1,6 +1,6 @@
.input-with-icon {
::placeholder {
color: $core-medium-blue-grey;
color: $ui-fleet-black-50;
opacity: 1;
}
}

14
frontend/styles/global/_global.scss
View File

@ -8,7 +8,7 @@ html {
}
body {
color: $core-black;
color: $core-fleet-black;
padding: 0;
margin: 0;
font-family: 'Nunito Sans', sans-serif;
@ -37,16 +37,16 @@ h1 {
font-size: $large;
font-weight: $regular;
letter-spacing: -0.5px;
color: $core-black;
color: $core-fleet-black;
margin: 0;
}
a {
color: $core-purple;
color: $core-fleet-purple;
}
.wrapper {
background: $core-gradient;
background: $gradients-dark-gradient-vertical;
margin: 0;
}
@ -54,8 +54,8 @@ a {
.body-wrap {
padding: 40px 30px 0;
border-radius: 3px;
background-color: $white;
border: solid 1px $white;
background-color: $core-white;
border: solid 1px $core-white;
min-width: 910px;
@at-root {
@ -91,7 +91,7 @@ button {
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: $core-dark-blue-grey !important; //sass-lint:disable-line no-important
-webkit-text-fill-color: $core-fleet-black !important; //sass-lint:disable-line no-important
}
}

8
frontend/styles/global/_styles.scss
View File

@ -31,14 +31,14 @@
&.left {
&::after {
border-color: transparent $white transparent transparent;
border-color: transparent $core-white transparent transparent;
border-width: 15px;
right: 99%;
top: 23px;
}
&::before {
border-color: transparent $core-dark-blue-grey transparent transparent;
border-color: transparent $core-fleet-blue transparent transparent;
border-width: 16px;
right: 99%;
top: 22px;
@ -48,14 +48,14 @@
&.right {
&::after {
border-color: transparent transparent transparent $white;
border-color: transparent transparent transparent $core-white;
border-width: 15px;
left: 99%;
top: 23px;
}
&::before {
border-color: transparent transparent transparent $core-dark-blue-grey;
border-color: transparent transparent transparent $core-fleet-blue;
border-width: 16px;
left: 99%;
top: 22px;

75
frontend/styles/var/colors.scss
View File

@ -1,42 +1,39 @@
// Fleet brand colors
$white: #fff;
$black: #000;
$core-gradient: linear-gradient(360deg, #201e43 0%, #353d62 100%);
$core-gradient-horizontal: linear-gradient(270deg, #201E43 0%, #353D62 100%);
$core-black: #192147;
$core-blue: #6a67fe;
$core-blue-selected: rgba(106, 103, 254, 0.2);
$core-purple: #ae6ddf;
$core-red: #ff5c83;
$core-medium-blue-grey: #506e92;
$core-dark-blue-grey: #3e4771;
$core-darkest-blue-grey: #353d62;
$core-light-blue-grey: #f9fafc;
$core-fleet-black: #201e43;
$core-blue-green: #25c3ba;
$ui-borders: #dbe3e5;
// Core
$core-fleet-black: #192147;
$core-fleet-blue: #3e4771;
$core-vibrant-blue: #6a67fe;
$core-vibrant-red: #ff5c83;
$core-fleet-purple: #ae6ddf;
$core-white: #ffffff;
// UI
$ui-fleet-black-50: #8b8fa2;
$ui-fleet-black-25: #c5c7d1;
$ui-fleet-blue-15: #e2e4ea;
$ui-dark-blue-gray: #afbec1;
$ui-blue-gray: #dbe3e5;
$ui-gray: #e3e3e3;
$ui-light-grey: #fafafa;
$ui-medium-grey: #e3e3e3;
$ui-dark-grey: #afbec1;
$ui-off-white: #f9fafc;
$ui-vibrant-blue-25: #d9d9fe;
$ui-vibrant-blue-10: #f1f0ff;
// Notifications & status
$ui-offline: #8b8fa2;
$ui-success: #3DB67B;
$ui-warning: #ebbc43;
$ui-error: #d66c7b;
$ui-info: #6a67fe;
// Gradients
$gradients-dark-gradient: linear-gradient(270deg, #201e43 0%, #353d62 100%);
$gradients-dark-gradient-vertical: linear-gradient(360deg, #201e43 0%, #353d62 100%);
$gradients-bright-gradient: linear-gradient(180deg, #ae6ddf 0%, #6a67fe 100%);
// Colors for over (hover) and down (active) buttons styles
$core-red-over: #e93661;
$core-red-down: #cb3559;
$core-blue-over: #5855eb;
$core-blue-down: #3f3cd4;
$core-dark-blue-grey-over: #426186;
$core-dark-blue-grey-down: #345073;
$core-blue-label-over: rgba(106, 103, 254, 0.1);
$core-blue-label-down: rgba(106, 103, 254, 0.2);
$core-black-over: rgba(25, 33, 71, 0.5);
$alert: #ff5c83;
$alert-light: #ffb5b2;
$brand-light: #c38dec;
$core-blue-ultralight: #edd6ff;
$button-shadow: #734893;
$success: #27d77e;
$success-light: #48da90;
$warning: #fff4d8;
$warning-border: #ffeab5;
$info: #f1f0ff;
$core-vibrant-red-over: #e93661;
$core-vibrant-red-down: #cb3559;
$core-vibrant-blue-over: #5855eb;
$core-vibrant-blue-down: #3f3cd4;
$core-fleet-blue-over: #303860;
$core-fleet-blue-down: $core-fleet-black;

2
frontend/styles/var/mixins.scss
View File

@ -32,7 +32,7 @@ $max-width: 2560px;
// this is the current spacing needed to keep the description looking correct under the sub nav when scrolling.
top: 97px;
z-index: 2;
background-color: $white;
background-color: $core-white;
margin: 0;
padding: 40px 0 54px 0;
}