1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00

refactor(app): use colors with tailwind [EE-3601] (#7133)

* refactor(app): use colors with tailwind
This commit is contained in:
Chaim Lev-Ari 2022-06-27 22:16:28 +03:00 committed by GitHub
parent 95f706aabe
commit cd19eb036b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 447 additions and 166 deletions

View file

@ -10,7 +10,7 @@
}
.btn-primary {
background-color: var(--ui-blue-1);
background-color: var(--ui-blue-8);
}
.btn-primary:hover,
@ -20,11 +20,11 @@
}
.btn-danger {
background-color: var(--ui-red-1);
background-color: var(--ui-error-8);
}
.btn-success {
background-color: var(--ui-green-1);
background-color: var(--ui-success-7);
}
/* Toggle switch */
@ -68,11 +68,11 @@
}
input:checked + .slider {
background-color: var(--ui-blue-1);
background-color: var(--ui-blue-8);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--ui-blue-1);
box-shadow: 0 0 1px var(--ui-blue-8);
}
input:checked + .slider:before {
@ -102,9 +102,9 @@ input:checked + .slider:before {
}
.md-checkbox input[type='checkbox']:checked + label:before {
background-color: var(--ui-blue-1) !important;
color: var(--ui-blue-1) !important;
border: 1px solid var(--ui-blue-1) !important;
background-color: var(--ui-blue-8) !important;
color: var(--ui-blue-8) !important;
border: 1px solid var(--ui-blue-8) !important;
}
.md-checkbox input[type='checkbox']:checked + .checkmark {
@ -116,20 +116,20 @@ input:checked + .slider:before {
.rzslider .rz-pointer {
background-color: var(--white-color);
border: 3px solid var(--ui-blue-1);
border: 3px solid var(--ui-blue-8);
width: 25px;
height: 25px;
top: -10px;
}
.rzslider .rz-bar {
background-color: var(--ui-grey-1);
background-color: var(--ui-gray-5);
height: 8px;
border-radius: 5px;
}
.rzslider .rz-selection {
background-color: var(--ui-blue-1);
background-color: var(--ui-blue-8);
}
.rzslider .rz-pointer:after {
@ -205,7 +205,7 @@ input:checked + .slider:before {
/* Widget */
.widget .widget-icon i {
color: var(--ui-blue-1);
color: var(--ui-blue-8);
}
.widget .widget-body table thead {
@ -245,9 +245,9 @@ input:checked + .slider:before {
}
.btn-group .btn-dangerlight {
background-color: var(--ui-red-2);
background-color: var(--ui-error-2);
border: 1px solid var(--border-button-group);
color: var(--ui-red-1);
color: var(--ui-error-8);
}
.btn.active {
@ -271,17 +271,17 @@ input:checked + .slider:before {
}
.toast-success .toast-progress {
background-color: var(--ui-green-1);
background-color: var(--ui-success-7);
}
.toast-warning .toast-progress {
background-color: var(--ui-yellow);
background-color: var(--ui-warning-6);
}
.toast-error .toast-progress {
background-color: var(--ui-red-1);
background-color: var(--ui-error-8);
}
#toast-container > div {
color: var(--ui-grey-4);
color: var(--ui-gray-7);
background-color: var(--white-color);
border-radius: 8px;
padding: 20px 20px 20px 80px;
@ -292,9 +292,9 @@ input:checked + .slider:before {
}
#toast-container > div:hover {
-moz-box-shadow: 0 0 12px var(--ui-grey-4);
-webkit-box-shadow: 0 0 12px var(--ui-grey-4);
box-shadow: 0 0 12px var(--ui-grey-4);
-moz-box-shadow: 0 0 12px var(--ui-gray-7);
-webkit-box-shadow: 0 0 12px var(--ui-gray-7);
box-shadow: 0 0 12px var(--ui-gray-7);
}
.toast-close-button {
@ -382,17 +382,17 @@ input:checked + .slider:before {
background: var(--ui-blue-3) !important;
color: black !important;
border-radius: 8px;
border-color: var(--ui-blue-4);
border-color: var(--ui-blue-7);
padding: 15px;
box-shadow: none;
}
.boxselector_wrapper input[type='radio']:not(:disabled) + label,
.box-selector-item input[type='radio']:not(:disabled) + label {
background: var(--ui-grey-2);
background: var(--ui-gray-2);
color: var(--black-color) !important;
border-radius: 8px;
border-color: var(--ui-grey-1);
border-color: var(--ui-gray-5);
padding: 15px;
box-shadow: none;
}
@ -449,11 +449,11 @@ input:checked + .slider:before {
}
.label-danger {
background-color: var(--ui-red-1);
background-color: var(--ui-error-8);
}
.label-success {
background-color: var(--ui-green-1);
background-color: var(--ui-success-7);
}
/* Feather Icon */