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

Componentize new UI buttons and toolbar

Browse source
This commit is contained in:
Harvey Kandola 2018-12-08 15:16:04 +00:00
parent 0de7efdf20
commit 44d3e40663
7 changed files with 3781 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,10 @@
@mixin button-shadow-light() {
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 300);
}
@mixin button-shadow() {
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 500);
}
%dmz-button {
display: inline-block;
white-space: nowrap;
@ -8,15 +15,23 @@
font-size: 1rem;
line-height: 1.5;
border: 1px solid transparent;
text-transform: uppercase;
cursor: pointer;
@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;
font-size: 1rem;
padding: 0.2rem 0.4rem 0 0;
font-weight: 500;
}
> .label {
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
}
}
@ -113,7 +128,7 @@
@include button-shadow-light();
&:hover {
background-color: map-get($red-shades, 300);
background-color: map-get($red-shades, 200);
}
}
@ -138,3 +153,25 @@
background-color: map-get($gray-shades, 300);
}
}
.dmz-button-theme {
@extend %dmz-button;
background-color: $theme-800;
color: $color-white;
@include button-shadow();
&:hover {
background-color: $theme-600;
}
}
.dmz-button-theme-light {
@extend %dmz-button;
background-color: $theme-100;
color: $theme-800;
border: 1px solid $theme-200;
@include button-shadow-light();
&:hover {
background-color: $theme-200;
}
}