Browse Source

adding #44

master
HerrHase 2 years ago
parent
commit
b5985a8746
3 changed files with 55 additions and 2 deletions
  1. +18
    -0
      public/components.html
  2. +1
    -1
      public/plain-ui.css
  3. +36
    -1
      src/scss/components/_button.scss

+ 18
- 0
public/components.html View File

@ -166,6 +166,24 @@
</button> </button>
</div> </div>
<div>
<button class="button button--full">
full
</button>
<button class="button button--full button--danger">
danger
</button>
<button class="button button--full button--success">
success
</button>
<button class="button button--full button--warning">
warning
</button>
<button class="button button--full button--info">
info
</button>
</div>
<div> <div>
<button class="button button--outline"> <button class="button button--outline">
outline outline


+ 1
- 1
public/plain-ui.css
File diff suppressed because it is too large
View File


+ 36
- 1
src/scss/components/_button.scss View File

@ -26,6 +26,26 @@
} }
} }
/**
*
*
*/
@mixin button-full-color($name)
{
&--#{$name}.button--full {
background-color: var(--#{$name});
&:hover {
background-color: var(--background-contrast);
border-color: var(--#{$name});
}
&:focus, &:active {
outline: 2px solid var(--#{$name});
}
}
}
/** /**
* *
* *
@ -58,7 +78,7 @@
transition: background-color 0.1s; transition: background-color 0.1s;
margin: $margin; margin: $margin;
padding: 0 1.3rem; padding: 0 1.3rem;
min-height: 2.8rem; min-height: 2.8rem;
width: 100%; width: 100%;
@ -124,4 +144,19 @@
@include button-outline-color('info', lighten($color__info, 20%)); @include button-outline-color('info', lighten($color__info, 20%));
@include button-outline-color('warning', lighten($color__warning, 20%)); @include button-outline-color('warning', lighten($color__warning, 20%));
@include button-outline-color('success', lighten($color__success, 20%)); @include button-outline-color('success', lighten($color__success, 20%));
&--full {
background-color: var(--active);
color: white;
&:hover {
background-color: var(--background-contrast);
color: var(--text);
}
}
@include button-full-color('danger');
@include button-full-color('info');
@include button-full-color('warning');
@include button-full-color('success');
} }

Loading…
Cancel
Save