Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 07:39:43 +02:00
Code Releases Activity

Introduce new button and toolbar styles

Browse source
This commit is contained in:
Harvey Kandola 2018-12-06 20:13:03 +00:00
parent 3b179d5bc0
commit 0de7efdf20
11 changed files with 420 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

140
gui/app/styles/core/ui/ui-button.scss Normal file
View file

@ -0,0 +1,140 @@
%dmz-button {
display: inline-block;
white-space: nowrap;
vertical-align: middle;
text-align: center;
padding: 0.375rem 0.75rem;
font-weight: 500;
font-size: 1rem;
line-height: 1.5;
border: 1px solid transparent;
@extend .no-select;
@include button-shadow();
@include border-radius(2px);
text-transform: uppercase;
> .dicon {
font-size: 0.7rem;
padding: 0 5px 0 0;
font-weight: 700;
}
}
// Button spacer utilities
.dmz-button-gap-right {
margin: 0 5px 0 0;
display: inline-block;
}
.dmz-button-gap-left {
margin: 0 0 0 5px;
display: inline-block;
}
.dmz-button-gap-x {
margin: 0 5px;
display: inline-block;
}
.dmz-button-gap-top {
margin: 5px 0 0 0;
display: inline-block;
}
.dmz-button-gap-bottom {
margin: 0 0 5px 0;
display: inline-block;
}
.dmz-button-gap-y {
margin: 5px 0;
display: inline-block;
}
.dmz-button-gap-x-y {
margin: 5px;
display: inline-block;
}
// Colored buttons
.dmz-button-green {
@extend %dmz-button;
background-color: map-get($green-shades, 600);
color: $color-white;
@include button-shadow();
&:hover {
background-color: map-get($green-shades, 700);
}
}
.dmz-button-green-light {
@extend %dmz-button;
background-color: map-get($green-shades, 200);
color: map-get($green-shades, 700);
border: 1px solid map-get($green-shades, 300);
@include button-shadow-light();
&:hover {
background-color: map-get($green-shades, 300);
}
}
.dmz-button-yellow {
@extend %dmz-button;
background-color: map-get($yellow-shades, 600);
color: $color-white;
@include button-shadow();
&:hover {
background-color: map-get($yellow-shades, 700);
}
}
.dmz-button-yellow-light {
@extend %dmz-button;
background-color: map-get($yellow-shades, 200);
color: map-get($yellow-shades, 700);
border: 1px solid map-get($yellow-shades, 300);
@include button-shadow-light();
&:hover {
background-color: map-get($yellow-shades, 300);
}
}
.dmz-button-red {
@extend %dmz-button;
background-color: map-get($red-shades, 600);
color: $color-white;
@include button-shadow();
&:hover {
background-color: map-get($red-shades, 700);
}
}
.dmz-button-red-light {
@extend %dmz-button;
background-color: map-get($red-shades, 100);
color: map-get($red-shades, 700);
border: 1px solid map-get($red-shades, 200);
@include button-shadow-light();
&:hover {
background-color: map-get($red-shades, 300);
}
}
.dmz-button-gray {
@extend %dmz-button;
background-color: map-get($gray-shades, 600);
color: $color-white;
@include button-shadow();
&:hover {
background-color: map-get($gray-shades, 700);
}
}
.dmz-button-gray-light {
@extend %dmz-button;
background-color: map-get($gray-shades, 200);
color: map-get($gray-shades, 700);
border: 1px solid map-get($gray-shades, 300);
@include button-shadow-light();
&:hover {
background-color: map-get($gray-shades, 300);
}
}