forked from forgejo/forgejo
Backport #24989. Clean cherry-pick aside from one small conflict with divider. - Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker <img width="1226" alt="image" src="8d89786a-01ab-40f8-ae5a-e17f40e35084"> <img width="1249" alt="image" src="83651e6d-3c27-46ff-b8bd-ff344d70e949">
This commit is contained in:
silverwind
GitHub
parent
18093d4c9a
commit
ee26d1c578
31 changed files with 359 additions and 372 deletions
|
|
@ -1,44 +1,21 @@
|
|||
/* this contains override styles for buttons and related elements */
|
||||
|
||||
.ui.button {
|
||||
.ui.button,
|
||||
.ui.button:focus {
|
||||
background: var(--color-button);
|
||||
border: 1px solid var(--color-light-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* a ghost button is a button without border */
|
||||
.button.button-ghost {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button.button-ghost:hover {
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.button.button-ghost:active {
|
||||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.button.button-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.page-content .ui.button {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui.button:focus,
|
||||
.ui.button:hover {
|
||||
background: var(--color-hover);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.active.button,
|
||||
.ui.button:active,
|
||||
.ui.active.button:active,
|
||||
|
|
@ -51,6 +28,42 @@
|
|||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.delete-button:hover {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* try to match button with no icons in height */
|
||||
.icon-button {
|
||||
padding-top: 7.42px !important;
|
||||
padding-bottom: 7.42px !important;
|
||||
}
|
||||
|
||||
/* btn is a plain button without any opinionated styling */
|
||||
|
||||
.btn {
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.btn,
|
||||
a.btn:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* other button styles */
|
||||
|
||||
.ui.buttons .button:first-child {
|
||||
border-left: 1px solid var(--color-light-border);
|
||||
}
|
||||
|
|
@ -63,10 +76,6 @@
|
|||
border-left: none;
|
||||
}
|
||||
|
||||
.ui.button.button-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.two-toggle-buttons .button:not(.active):first-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -77,9 +86,11 @@
|
|||
|
||||
.ui.labeled.button.disabled > .button,
|
||||
.ui.basic.buttons .button,
|
||||
.ui.basic.button {
|
||||
.ui.basic.button,
|
||||
.ui.basic.buttons .button:focus,
|
||||
.ui.basic.button:focus {
|
||||
color: var(--color-text-light);
|
||||
background: var(--color-light);
|
||||
background: var(--color-button);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:hover,
|
||||
|
|
@ -88,8 +99,7 @@
|
|||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.basic.buttons .button:focus,
|
||||
.ui.basic.button:focus,
|
||||
|
||||
.ui.basic.buttons .button:active,
|
||||
.ui.basic.button:active,
|
||||
.ui.basic.buttons .active.button,
|
||||
|
|
@ -114,14 +124,14 @@
|
|||
.ui.primary.labels .label,
|
||||
.ui.ui.ui.primary.label,
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button {
|
||||
.ui.primary.buttons .button,
|
||||
.ui.primary.button:focus,
|
||||
.ui.primary.buttons .button:focus {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover,
|
||||
.ui.primary.button:focus,
|
||||
.ui.primary.buttons .button:focus {
|
||||
.ui.primary.buttons .button:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
|
|
@ -131,15 +141,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.primary.buttons .button,
|
||||
.ui.basic.primary.button {
|
||||
.ui.basic.primary.button,
|
||||
.ui.basic.primary.buttons .button:focus,
|
||||
.ui.basic.primary.button:focus {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.ui.basic.primary.buttons .button:hover,
|
||||
.ui.basic.primary.button:hover,
|
||||
.ui.basic.primary.buttons .button:focus,
|
||||
.ui.basic.primary.button:focus {
|
||||
.ui.basic.primary.button:hover {
|
||||
color: var(--color-primary-hover);
|
||||
border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
|
@ -155,47 +165,46 @@
|
|||
.ui.secondary.labels .label,
|
||||
.ui.ui.ui.secondary.label,
|
||||
.ui.secondary.button,
|
||||
.ui.secondary.buttons .button {
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
.ui.secondary.buttons .button,
|
||||
.ui.secondary.button:focus,
|
||||
.ui.secondary.buttons .button:focus {
|
||||
background: var(--color-secondary-button);
|
||||
}
|
||||
|
||||
.ui.secondary.button:hover,
|
||||
.ui.secondary.buttons .button:hover,
|
||||
.ui.secondary.button:focus,
|
||||
.ui.secondary.buttons .button:focus {
|
||||
background: var(--color-secondary-dark-1);
|
||||
color: var(--color-text);
|
||||
.ui.secondary.buttons .button:hover {
|
||||
background: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.ui.secondary.button:active,
|
||||
.ui.secondary.buttons .button:active {
|
||||
background: var(--color-secondary-dark-2);
|
||||
color: var(--color-text);
|
||||
background: var(--color-secondary-active);
|
||||
}
|
||||
|
||||
.ui.basic.secondary.buttons .button,
|
||||
.ui.basic.secondary.button {
|
||||
color: var(--color-secondary-dark-6) !important;
|
||||
.ui.basic.secondary.button,
|
||||
.ui.basic.secondary.button:focus,
|
||||
.ui.basic.secondary.buttons .button:focus {
|
||||
color: var(--color-secondary-button);
|
||||
border-color: var(--color-secondary-button);
|
||||
}
|
||||
|
||||
.ui.basic.secondary.buttons .button:hover,
|
||||
.ui.basic.secondary.button:hover,
|
||||
.ui.basic.secondary.buttons .button:active,
|
||||
.ui.basic.secondary.button:active {
|
||||
color: var(--color-secondary-dark-8) !important;
|
||||
border-color: var(--color-secondary-dark-1) !important;
|
||||
.ui.basic.secondary.button:hover {
|
||||
color: var(--color-secondary-hover);
|
||||
border-color: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.ui.basic.secondary.button:focus,
|
||||
.ui.basic.secondary.buttons .button:focus {
|
||||
color: var(--color-secondary-dark-8) !important;
|
||||
border-color: var(--color-secondary-dark-3) !important;
|
||||
.ui.basic.secondary.buttons .button:active,
|
||||
.ui.basic.secondary.button:active {
|
||||
color: var(--color-secondary-active);
|
||||
border-color: var(--color-secondary-active);
|
||||
}
|
||||
|
||||
/* tertiary */
|
||||
|
||||
.ui.tertiary.button {
|
||||
.ui.tertiary.button,
|
||||
.ui.tertiary.button:focus {
|
||||
color: var(--color-text-light);
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -204,7 +213,7 @@
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.tertiary.button:focus {
|
||||
.ui.tertiary.button:active {
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
|
|
@ -213,14 +222,14 @@
|
|||
.ui.red.labels .label,
|
||||
.ui.ui.ui.red.label,
|
||||
.ui.red.button,
|
||||
.ui.red.buttons .button {
|
||||
.ui.red.buttons .button,
|
||||
.ui.red.button:focus,
|
||||
.ui.red.buttons .button:focus {
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.red.button:hover,
|
||||
.ui.red.buttons .button:hover,
|
||||
.ui.red.button:focus,
|
||||
.ui.red.buttons .button:focus {
|
||||
.ui.red.buttons .button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -230,15 +239,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.red.buttons .button,
|
||||
.ui.basic.red.button {
|
||||
.ui.basic.red.button,
|
||||
.ui.basic.red.buttons .button:focus,
|
||||
.ui.basic.red.button:focus {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.basic.red.buttons .button:hover,
|
||||
.ui.basic.red.button:hover,
|
||||
.ui.basic.red.buttons .button:focus,
|
||||
.ui.basic.red.button:focus {
|
||||
.ui.basic.red.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
|
@ -254,14 +263,14 @@
|
|||
.ui.orange.labels .label,
|
||||
.ui.ui.ui.orange.label,
|
||||
.ui.orange.button,
|
||||
.ui.orange.buttons .button {
|
||||
.ui.orange.buttons .button,
|
||||
.ui.orange.button:focus,
|
||||
.ui.orange.buttons .button:focus {
|
||||
background: var(--color-orange);
|
||||
}
|
||||
|
||||
.ui.orange.button:hover,
|
||||
.ui.orange.buttons .button:hover,
|
||||
.ui.orange.button:focus,
|
||||
.ui.orange.buttons .button:focus {
|
||||
.ui.orange.buttons .button:hover {
|
||||
background: var(--color-orange-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -271,15 +280,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.orange.buttons .button,
|
||||
.ui.basic.orange.button {
|
||||
.ui.basic.orange.button,
|
||||
.ui.basic.orange.buttons .button:focus,
|
||||
.ui.basic.orange.button:focus {
|
||||
color: var(--color-orange);
|
||||
border-color: var(--color-orange);
|
||||
}
|
||||
|
||||
.ui.basic.orange.buttons .button:hover,
|
||||
.ui.basic.orange.button:hover,
|
||||
.ui.basic.orange.buttons .button:focus,
|
||||
.ui.basic.orange.button:focus {
|
||||
.ui.basic.orange.button:hover {
|
||||
color: var(--color-orange-dark-1);
|
||||
border-color: var(--color-orange-dark-1);
|
||||
}
|
||||
|
|
@ -295,14 +304,14 @@
|
|||
.ui.yellow.labels .label,
|
||||
.ui.ui.ui.yellow.label,
|
||||
.ui.yellow.button,
|
||||
.ui.yellow.buttons .button {
|
||||
.ui.yellow.buttons .button,
|
||||
.ui.yellow.button:focus,
|
||||
.ui.yellow.buttons .button:focus {
|
||||
background: var(--color-yellow);
|
||||
}
|
||||
|
||||
.ui.yellow.button:hover,
|
||||
.ui.yellow.buttons .button:hover,
|
||||
.ui.yellow.button:focus,
|
||||
.ui.yellow.buttons .button:focus {
|
||||
.ui.yellow.buttons .button:hover {
|
||||
background: var(--color-yellow-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -312,15 +321,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.yellow.buttons .button,
|
||||
.ui.basic.yellow.button {
|
||||
.ui.basic.yellow.button,
|
||||
.ui.basic.yellow.buttons .button:focus,
|
||||
.ui.basic.yellow.button:focus {
|
||||
color: var(--color-yellow);
|
||||
border-color: var(--color-yellow);
|
||||
}
|
||||
|
||||
.ui.basic.yellow.buttons .button:hover,
|
||||
.ui.basic.yellow.button:hover,
|
||||
.ui.basic.yellow.buttons .button:focus,
|
||||
.ui.basic.yellow.button:focus {
|
||||
.ui.basic.yellow.button:hover {
|
||||
color: var(--color-yellow-dark-1);
|
||||
border-color: var(--color-yellow-dark-1);
|
||||
}
|
||||
|
|
@ -336,14 +345,14 @@
|
|||
.ui.olive.labels .label,
|
||||
.ui.ui.ui.olive.label,
|
||||
.ui.olive.button,
|
||||
.ui.olive.buttons .button {
|
||||
.ui.olive.buttons .button,
|
||||
.ui.olive.button:focus,
|
||||
.ui.olive.buttons .button:focus {
|
||||
background: var(--color-olive);
|
||||
}
|
||||
|
||||
.ui.olive.button:hover,
|
||||
.ui.olive.buttons .button:hover,
|
||||
.ui.olive.button:focus,
|
||||
.ui.olive.buttons .button:focus {
|
||||
.ui.olive.buttons .button:hover {
|
||||
background: var(--color-olive-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -353,15 +362,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.olive.buttons .button,
|
||||
.ui.basic.olive.button {
|
||||
.ui.basic.olive.button,
|
||||
.ui.basic.olive.buttons .button:focus,
|
||||
.ui.basic.olive.button:focus {
|
||||
color: var(--color-olive);
|
||||
border-color: var(--color-olive);
|
||||
}
|
||||
|
||||
.ui.basic.olive.buttons .button:hover,
|
||||
.ui.basic.olive.button:hover,
|
||||
.ui.basic.olive.buttons .button:focus,
|
||||
.ui.basic.olive.button:focus {
|
||||
.ui.basic.olive.button:hover {
|
||||
color: var(--color-olive-dark-1);
|
||||
border-color: var(--color-olive-dark-1);
|
||||
}
|
||||
|
|
@ -377,14 +386,14 @@
|
|||
.ui.green.labels .label,
|
||||
.ui.ui.ui.green.label,
|
||||
.ui.green.button,
|
||||
.ui.green.buttons .button {
|
||||
.ui.green.buttons .button,
|
||||
.ui.green.button:focus,
|
||||
.ui.green.buttons .button:focus {
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.green.button:hover,
|
||||
.ui.green.buttons .button:hover,
|
||||
.ui.green.button:focus,
|
||||
.ui.green.buttons .button:focus {
|
||||
.ui.green.buttons .button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -394,15 +403,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.green.buttons .button,
|
||||
.ui.basic.green.button {
|
||||
.ui.basic.green.button,
|
||||
.ui.basic.green.buttons .button:focus,
|
||||
.ui.basic.green.button:focus {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.basic.green.buttons .button:hover,
|
||||
.ui.basic.green.button:hover,
|
||||
.ui.basic.green.buttons .button:focus,
|
||||
.ui.basic.green.button:focus {
|
||||
.ui.basic.green.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
|
@ -418,14 +427,14 @@
|
|||
.ui.teal.labels .label,
|
||||
.ui.ui.ui.teal.label,
|
||||
.ui.teal.button,
|
||||
.ui.teal.buttons .button {
|
||||
.ui.teal.buttons .button,
|
||||
.ui.teal.button:focus,
|
||||
.ui.teal.buttons .button:focus {
|
||||
background: var(--color-teal);
|
||||
}
|
||||
|
||||
.ui.teal.button:hover,
|
||||
.ui.teal.buttons .button:hover,
|
||||
.ui.teal.button:focus,
|
||||
.ui.teal.buttons .button:focus {
|
||||
.ui.teal.buttons .button:hover {
|
||||
background: var(--color-teal-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -435,15 +444,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.teal.buttons .button,
|
||||
.ui.basic.teal.button {
|
||||
.ui.basic.teal.button,
|
||||
.ui.basic.teal.buttons .button:focus,
|
||||
.ui.basic.teal.button:focus {
|
||||
color: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.ui.basic.teal.buttons .button:hover,
|
||||
.ui.basic.teal.button:hover,
|
||||
.ui.basic.teal.buttons .button:focus,
|
||||
.ui.basic.teal.button:focus {
|
||||
.ui.basic.teal.button:hover {
|
||||
color: var(--color-teal-dark-1);
|
||||
border-color: var(--color-teal-dark-1);
|
||||
}
|
||||
|
|
@ -459,14 +468,14 @@
|
|||
.ui.blue.labels .label,
|
||||
.ui.ui.ui.blue.label,
|
||||
.ui.blue.button,
|
||||
.ui.blue.buttons .button {
|
||||
.ui.blue.buttons .button,
|
||||
.ui.blue.button:focus,
|
||||
.ui.blue.buttons .button:focus {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.ui.blue.button:hover,
|
||||
.ui.blue.buttons .button:hover,
|
||||
.ui.blue.button:focus,
|
||||
.ui.blue.buttons .button:focus {
|
||||
.ui.blue.buttons .button:hover {
|
||||
background: var(--color-blue-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -476,15 +485,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.blue.buttons .button,
|
||||
.ui.basic.blue.button {
|
||||
.ui.basic.blue.button,
|
||||
.ui.basic.blue.buttons .button:focus,
|
||||
.ui.basic.blue.button:focus {
|
||||
color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
}
|
||||
|
||||
.ui.basic.blue.buttons .button:hover,
|
||||
.ui.basic.blue.button:hover,
|
||||
.ui.basic.blue.buttons .button:focus,
|
||||
.ui.basic.blue.button:focus {
|
||||
.ui.basic.blue.button:hover {
|
||||
color: var(--color-blue-dark-1);
|
||||
border-color: var(--color-blue-dark-1);
|
||||
}
|
||||
|
|
@ -500,14 +509,14 @@
|
|||
.ui.violet.labels .label,
|
||||
.ui.ui.ui.violet.label,
|
||||
.ui.violet.button,
|
||||
.ui.violet.buttons .button {
|
||||
.ui.violet.buttons .button,
|
||||
.ui.violet.button:focus,
|
||||
.ui.violet.buttons .button:focus {
|
||||
background: var(--color-violet);
|
||||
}
|
||||
|
||||
.ui.violet.button:hover,
|
||||
.ui.violet.buttons .button:hover,
|
||||
.ui.violet.button:focus,
|
||||
.ui.violet.buttons .button:focus {
|
||||
.ui.violet.buttons .button:hover {
|
||||
background: var(--color-violet-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -517,15 +526,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.violet.buttons .button,
|
||||
.ui.basic.violet.button {
|
||||
.ui.basic.violet.button,
|
||||
.ui.basic.violet.buttons .button:focus,
|
||||
.ui.basic.violet.button:focus {
|
||||
color: var(--color-violet);
|
||||
border-color: var(--color-violet);
|
||||
}
|
||||
|
||||
.ui.basic.violet.buttons .button:hover,
|
||||
.ui.basic.violet.button:hover,
|
||||
.ui.basic.violet.buttons .button:focus,
|
||||
.ui.basic.violet.button:focus {
|
||||
.ui.basic.violet.button:hover {
|
||||
color: var(--color-violet-dark-1);
|
||||
border-color: var(--color-violet-dark-1);
|
||||
}
|
||||
|
|
@ -541,14 +550,14 @@
|
|||
.ui.purple.labels .label,
|
||||
.ui.ui.ui.purple.label,
|
||||
.ui.purple.button,
|
||||
.ui.purple.buttons .button {
|
||||
.ui.purple.buttons .button,
|
||||
.ui.purple.button:focus,
|
||||
.ui.purple.buttons .button:focus {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
.ui.purple.button:hover,
|
||||
.ui.purple.buttons .button:hover,
|
||||
.ui.purple.button:focus,
|
||||
.ui.purple.buttons .button:focus {
|
||||
.ui.purple.buttons .button:hover {
|
||||
background: var(--color-purple-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -558,15 +567,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.purple.buttons .button,
|
||||
.ui.basic.purple.button {
|
||||
.ui.basic.purple.button,
|
||||
.ui.basic.purple.buttons .button:focus,
|
||||
.ui.basic.purple.button:focus {
|
||||
color: var(--color-purple);
|
||||
border-color: var(--color-purple);
|
||||
}
|
||||
|
||||
.ui.basic.purple.buttons .button:hover,
|
||||
.ui.basic.purple.button:hover,
|
||||
.ui.basic.purple.buttons .button:focus,
|
||||
.ui.basic.purple.button:focus {
|
||||
.ui.basic.purple.button:hover {
|
||||
color: var(--color-purple-dark-1);
|
||||
border-color: var(--color-purple-dark-1);
|
||||
}
|
||||
|
|
@ -582,14 +591,14 @@
|
|||
.ui.pink.labels .label,
|
||||
.ui.ui.ui.pink.label,
|
||||
.ui.pink.button,
|
||||
.ui.pink.buttons .button {
|
||||
.ui.pink.buttons .button,
|
||||
.ui.pink.button:focus,
|
||||
.ui.pink.buttons .button:focus {
|
||||
background: var(--color-pink);
|
||||
}
|
||||
|
||||
.ui.pink.button:hover,
|
||||
.ui.pink.buttons .button:hover,
|
||||
.ui.pink.button:focus,
|
||||
.ui.pink.buttons .button:focus {
|
||||
.ui.pink.buttons .button:hover {
|
||||
background: var(--color-pink-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -599,15 +608,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.pink.buttons .button,
|
||||
.ui.basic.pink.button {
|
||||
.ui.basic.pink.button,
|
||||
.ui.basic.pink.buttons .button:focus,
|
||||
.ui.basic.pink.button:focus {
|
||||
color: var(--color-pink);
|
||||
border-color: var(--color-pink);
|
||||
}
|
||||
|
||||
.ui.basic.pink.buttons .button:hover,
|
||||
.ui.basic.pink.button:hover,
|
||||
.ui.basic.pink.buttons .button:focus,
|
||||
.ui.basic.pink.button:focus {
|
||||
.ui.basic.pink.button:hover {
|
||||
color: var(--color-pink-dark-1);
|
||||
border-color: var(--color-pink-dark-1);
|
||||
}
|
||||
|
|
@ -623,14 +632,14 @@
|
|||
.ui.brown.labels .label,
|
||||
.ui.ui.ui.brown.label,
|
||||
.ui.brown.button,
|
||||
.ui.brown.buttons .button {
|
||||
.ui.brown.buttons .button,
|
||||
.ui.brown.button:focus,
|
||||
.ui.brown.buttons .button:focus {
|
||||
background: var(--color-brown);
|
||||
}
|
||||
|
||||
.ui.brown.button:hover,
|
||||
.ui.brown.buttons .button:hover,
|
||||
.ui.brown.button:focus,
|
||||
.ui.brown.buttons .button:focus {
|
||||
.ui.brown.buttons .button:hover {
|
||||
background: var(--color-brown-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -640,15 +649,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.brown.buttons .button,
|
||||
.ui.basic.brown.button {
|
||||
.ui.basic.brown.button,
|
||||
.ui.basic.brown.buttons .button:focus,
|
||||
.ui.basic.brown.button:focus {
|
||||
color: var(--color-brown);
|
||||
border-color: var(--color-brown);
|
||||
}
|
||||
|
||||
.ui.basic.brown.buttons .button:hover,
|
||||
.ui.basic.brown.button:hover,
|
||||
.ui.basic.brown.buttons .button:focus,
|
||||
.ui.basic.brown.button:focus {
|
||||
.ui.basic.brown.button:hover {
|
||||
color: var(--color-brown-dark-1);
|
||||
border-color: var(--color-brown-dark-1);
|
||||
}
|
||||
|
|
@ -659,97 +668,17 @@
|
|||
border-color: var(--color-brown-dark-2);
|
||||
}
|
||||
|
||||
/* grey */
|
||||
|
||||
.ui.grey.labels .label,
|
||||
.ui.ui.ui.grey.label,
|
||||
.ui.grey.button,
|
||||
.ui.grey.buttons .button {
|
||||
background: var(--color-grey);
|
||||
}
|
||||
|
||||
.ui.grey.button:hover,
|
||||
.ui.grey.buttons .button:hover,
|
||||
.ui.grey.button:focus,
|
||||
.ui.grey.buttons .button:focus {
|
||||
background: var(--color-grey-dark-1);
|
||||
}
|
||||
|
||||
.ui.grey.button:active,
|
||||
.ui.grey.buttons .button:active {
|
||||
background: var(--color-grey-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.grey.buttons .button,
|
||||
.ui.basic.grey.button {
|
||||
color: var(--color-grey);
|
||||
border-color: var(--color-grey);
|
||||
}
|
||||
|
||||
.ui.basic.grey.buttons .button:hover,
|
||||
.ui.basic.grey.button:hover,
|
||||
.ui.basic.grey.buttons .button:focus,
|
||||
.ui.basic.grey.button:focus {
|
||||
color: var(--color-grey-dark-1);
|
||||
border-color: var(--color-grey-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.grey.buttons .button:active,
|
||||
.ui.basic.grey.button:active {
|
||||
color: var(--color-grey-dark-2);
|
||||
border-color: var(--color-grey-dark-2);
|
||||
}
|
||||
|
||||
/* black */
|
||||
|
||||
.ui.black.labels .label,
|
||||
.ui.ui.ui.black.label,
|
||||
.ui.black.button,
|
||||
.ui.black.buttons .button {
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.ui.black.button:hover,
|
||||
.ui.black.buttons .button:hover,
|
||||
.ui.black.button:focus,
|
||||
.ui.black.buttons .button:focus {
|
||||
background: var(--color-black-dark-1);
|
||||
}
|
||||
|
||||
.ui.black.button:active,
|
||||
.ui.black.buttons .button:active {
|
||||
background: var(--color-black-dark-2);
|
||||
}
|
||||
|
||||
.ui.basic.black.buttons .button,
|
||||
.ui.basic.black.button {
|
||||
color: var(--color-black);
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
|
||||
.ui.basic.black.buttons .button:hover,
|
||||
.ui.basic.black.button:hover,
|
||||
.ui.basic.black.buttons .button:focus,
|
||||
.ui.basic.black.button:focus {
|
||||
color: var(--color-black-dark-1);
|
||||
border-color: var(--color-black-dark-1);
|
||||
}
|
||||
|
||||
.ui.basic.black.buttons .button:active,
|
||||
.ui.basic.black.button:active {
|
||||
color: var(--color-black-dark-2);
|
||||
border-color: var(--color-black-dark-2);
|
||||
}
|
||||
/* negative */
|
||||
|
||||
.ui.negative.buttons .button,
|
||||
.ui.negative.button {
|
||||
.ui.negative.button,
|
||||
.ui.negative.buttons .button:focus,
|
||||
.ui.negative.button:focus {
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.negative.buttons .button:hover,
|
||||
.ui.negative.button:hover,
|
||||
.ui.negative.buttons .button:focus,
|
||||
.ui.negative.button:focus {
|
||||
.ui.negative.button:hover {
|
||||
background: var(--color-red-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -758,18 +687,16 @@
|
|||
background: var(--color-red-dark-2);
|
||||
}
|
||||
|
||||
/* negative */
|
||||
|
||||
.ui.basic.negative.buttons .button,
|
||||
.ui.basic.negative.button {
|
||||
.ui.basic.negative.button,
|
||||
.ui.basic.negative.buttons .button:focus,
|
||||
.ui.basic.negative.button:focus {
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
|
||||
.ui.basic.negative.buttons .button:hover,
|
||||
.ui.basic.negative.button:hover,
|
||||
.ui.basic.negative.buttons .button:focus,
|
||||
.ui.basic.negative.button:focus {
|
||||
.ui.basic.negative.button:hover {
|
||||
color: var(--color-red-dark-1);
|
||||
border-color: var(--color-red-dark-1);
|
||||
}
|
||||
|
|
@ -783,14 +710,14 @@
|
|||
/* positive */
|
||||
|
||||
.ui.positive.buttons .button,
|
||||
.ui.positive.button {
|
||||
.ui.positive.button,
|
||||
.ui.positive.buttons .button:focus,
|
||||
.ui.positive.button:focus {
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.positive.buttons .button:hover,
|
||||
.ui.positive.button:hover,
|
||||
.ui.positive.buttons .button:focus,
|
||||
.ui.positive.button:focus {
|
||||
.ui.positive.button:hover {
|
||||
background: var(--color-green-dark-1);
|
||||
}
|
||||
|
||||
|
|
@ -800,15 +727,15 @@
|
|||
}
|
||||
|
||||
.ui.basic.positive.buttons .button,
|
||||
.ui.basic.positive.button {
|
||||
.ui.basic.positive.button,
|
||||
.ui.basic.positive.buttons .button:focus,
|
||||
.ui.basic.positive.button:focus {
|
||||
color: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
|
||||
.ui.basic.positive.buttons .button:hover,
|
||||
.ui.basic.positive.button:hover,
|
||||
.ui.basic.positive.buttons .button:focus,
|
||||
.ui.basic.positive.button:focus {
|
||||
.ui.basic.positive.button:hover {
|
||||
color: var(--color-green-dark-1);
|
||||
border-color: var(--color-green-dark-1);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue