Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-01-28 18:29:10 +01:00
Code Issues Packages Projects Releases Activity

add is-outline classes for buttons

Browse Source
This commit is contained in:
Florian Scholdei
2019-09-17 13:08:17 +02:00
parent fb8f7fefd2
commit adccb58b38
1 changed files with 221 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
scm-ui/styles/scm.scss
View File

@@ -207,7 +207,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
background-color: $danger-25;
}
// outline option for tags
// tags
.tag:not(body) {
border: 1px solid transparent;
background-color: red; //TODO: replace with transparent
@@ -352,6 +352,226 @@ $danger-25: scale-color($danger, $lightness: 75%);
&.is-danger[disabled] {
background-color: scale-color($danger, $lightness: 75%);
}
&.is-outline-black {
color: $black;
border-color: $black;
}
&.is-outline-black:hover,
&.is-outline-black.is-hovered {
color: scale-color($black, $lightness: -10%);
border-color: scale-color($black, $lightness: -10%);
}
&.is-outline-black:active,
&.is-outline-black.is-active {
color: scale-color($black, $lightness: -20%);
border-color: scale-color($black, $lightness: -20%);
}
&.is-outline-black[disabled] {
color: scale-color($black, $lightness: 75%);
border-color: scale-color($black, $lightness: 75%);
}
&.is-outline-dark {
color: $dark;
border-color: $dark;
}
&.is-outline-dark:hover,
&.is-outline-dark.is-hovered {
color: scale-color($dark, $lightness: -10%);
border-color: scale-color($dark, $lightness: -10%);
}
&.is-outline-dark:active,
&.is-outline-dark.is-active {
color: scale-color($dark, $lightness: -20%);
border-color: scale-color($dark, $lightness: -20%);
}
&.is-outline-dark[disabled] {
color: scale-color($dark, $lightness: 75%);
border-color: scale-color($dark, $lightness: 75%);
}
&.is-outline-light {
/*color: $light;*/
border-color: $light;
}
&.is-outline-light:hover,
&.is-outline-light.is-hovered {
/* color: scale-color($light, $lightness: -10%); */
border-color: scale-color($light, $lightness: -10%);
}
&.is-outline-light:active,
&.is-outline-light.is-active {
/* color: scale-color($light, $lightness: -20%); */
border-color: scale-color($light, $lightness: -20%);
}
&.is-outline-light[disabled] {
/* color: scale-color($light, $lightness: 75%); */
border-color: scale-color($light, $lightness: 75%);
}
&.is-outline-white {
/*color: $white;*/
border-color: $white;
}
&.is-outline-white:hover,
&.is-outline-white.is-hovered {
/* color: scale-color($white, $lightness: -10%); */
border-color: scale-color($white, $lightness: -10%);
}
&.is-outline-white:active,
&.is-outline-white.is-active {
/* color: scale-color($white, $lightness: -20%); */
border-color: scale-color($white, $lightness: -20%);
}
&.is-outline-white[disabled] {
/* color: scale-color($white, $lightness: 75%); */
border-color: scale-color($white, $lightness: 75%);
}
&.is-outline-primary {
color: $primary;
border-color: $primary;
}
&.is-outline-primary:hover,
&.is-outline-primary.is-hovered {
color: scale-color($primary, $lightness: -10%);
border-color: scale-color($primary, $lightness: -10%);
}
&.is-outline-primary:active,
&.is-outline-primary.is-active {
color: scale-color($primary, $lightness: -20%);
border-color: scale-color($primary, $lightness: -20%);
}
&.is-outline-primary[disabled] {
color: scale-color($primary, $lightness: 75%);
border-color: scale-color($primary, $lightness: 75%);
}
&.is-outline-link {
color: $link;
border-color: $link;
}
&.is-outline-link:hover,
&.is-outline-link.is-hovered {
color: scale-color($link, $lightness: -10%);
border-color: scale-color($link, $lightness: -10%);
}
&.is-outline-link:active,
&.is-outline-link.is-active {
color: scale-color($link, $lightness: -20%);
border-color: scale-color($link, $lightness: -20%);
}
&.is-outline-link[disabled] {
color: scale-color($link, $lightness: 75%);
border-color: scale-color($link, $lightness: 75%);
}
&.is-outline-info {
color: $info;
border-color: $info;
}
&.is-outline-info:hover,
&.is-outline-info.is-hovered {
color: scale-color($info, $lightness: -10%);
border-color: scale-color($info, $lightness: -10%);
}
&.is-outline-info:active,
&.is-outline-info.is-active {
color: scale-color($info, $lightness: -20%);
border-color: scale-color($info, $lightness: -20%);
}
&.is-outline-info[disabled] {
color: scale-color($info, $lightness: 75%);
border-color: scale-color($info, $lightness: 75%);
}
&.is-outline-success {
color: $success;
border-color: $success;
}
&.is-outline-success:hover,
&.is-outline-success.is-hovered {
color: scale-color($success, $lightness: -10%);
border-color: scale-color($success, $lightness: -10%);
}
&.is-outline-success:active,
&.is-outline-success.is-active {
color: scale-color($success, $lightness: -20%);
border-color: scale-color($success, $lightness: -20%);
}
&.is-outline-success[disabled] {
color: scale-color($success, $lightness: 75%);
border-color: scale-color($success, $lightness: 75%);
}
/*&.is-outline-warning {
color: $warning;
border-color: $warning;
}
&.is-outline-warning:hover,
&.is-outline-warning.is-hovered {
color: scale-color($warning, $lightness: -10%);
border-color: scale-color($warning, $lightness: -10%);
}
&.is-outline-warning:active,
&.is-outline-warning.is-active {
color: scale-color($warning, $lightness: -20%);
border-color: scale-color($warning, $lightness: -20%);
}
&.is-outline-warning[disabled] {
color: scale-color($warning, $lightness: 75%);
border-color: scale-color($warning, $lightness: 75%);
}*/
&.is-outline-danger {
color: $danger;
border-color: $danger;
}
&.is-outline-danger:hover,
&.is-outline-danger.is-hovered {
color: scale-color($danger, $lightness: -10%);
border-color: scale-color($danger, $lightness: -10%);
}
&.is-outline-danger:active,
&.is-outline-danger.is-active {
color: scale-color($danger, $lightness: -20%);
border-color: scale-color($danger, $lightness: -20%);
}
&.is-outline-danger[disabled] {
color: scale-color($danger, $lightness: 75%);
border-color: scale-color($danger, $lightness: 75%);
}
}
.box-link-shadow {