kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

Add more button colors, icon style for small buttons

Browse Source 
Plus tag icon for the tag buttons
This commit is contained in:
Râu Cao
2023-01-13 15:35:22 +08:00
parent 138cec0389
commit 1095bf0218
3 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles/_buttons.scss
+34 -13
View File
@@ -31,32 +31,53 @@ button, input[type=submit], .button {
&.small {
font-size: 0.86rem;
padding: 0.2rem 0.8rem;
svg {
width: 1em;
height: 1em;
vertical-align: middle;
margin-right: 0.4rem;
}
}
&.danger:not(:disabled) {
color: $red;
background-color: rgba(40, 21, 21, 0.6);
border-color: rgba(40, 21, 21, 1);
&:hover {
background-color: rgba(40, 21, 21, 0.8);
}
&:focus, &:active, &.active {
border-color: $red;
}
&:hover { background-color: rgba(40, 21, 21, 0.8); }
&:focus, &:active, &.active { border-color: $red; }
}
&.green:not(:disabled) {
color: $green;
background-color: rgba(21, 40, 21, 0.6);
border-color: rgba(21, 40, 21, 1);
&:hover { background-color: rgba(21, 40, 21, 0.8); }
&:focus, &:active, &.active { border-color: $green; }
}
&:hover {
background-color: rgba(21, 40, 21, 0.8);
}
&:focus, &:active, &.active {
border-color: $green;
}
&.pink:not(:disabled) {
color: $pink;
background-color: rgba(40, 21, 40, 0.6);
border-color: rgba(40, 21, 40, 1);
&:hover { background-color: rgba(40, 21, 40, 0.8); }
&:focus, &:active, &.active { border-color: $pink; }
}
&.purple:not(:disabled) {
color: $purple;
background-color: rgba(24, 21, 40, 0.6);
border-color: rgba(24, 21, 40, 1);
&:hover { background-color: rgba(24, 21, 40, 0.8); }
&:focus, &:active, &.active { border-color: $purple; }
}
&.yellow:not(:disabled) {
color: $yellow;
background-color: rgba(40, 40, 21, 0.6);
border-color: rgba(40, 40, 21, 1);
&:hover { background-color: rgba(40, 40, 21, 0.8); }
&:focus, &:active, &.active { border-color: $yellow; }
}
&.icon {