mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
Introduce new button and toolbar styles
This commit is contained in:
parent
3b179d5bc0
commit
0de7efdf20
11 changed files with 420 additions and 109 deletions
88
gui/app/styles/core/ui/ui-toolbar.scss
Normal file
88
gui/app/styles/core/ui/ui-toolbar.scss
Normal file
|
@ -0,0 +1,88 @@
|
|||
%dmz-toolbar {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
line-height: 24px;
|
||||
@extend .no-select;
|
||||
@include border-radius(6px);
|
||||
|
||||
> .dicon {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: map-get($gray-shades, 600);
|
||||
padding: 0 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
> .red {
|
||||
color: map-get($red-shades, 500);
|
||||
|
||||
&:hover {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
> .yellow {
|
||||
color: map-get($yellow-shades, 600);
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
> .green {
|
||||
color: map-get($green-shades, 500);
|
||||
|
||||
&:hover {
|
||||
color: map-get($green-shades, 600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dmz-toolbar-dark-small {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
}
|
||||
|
||||
.dmz-toolbar-dark-large {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
height: 36px;
|
||||
padding: 5px 10px;
|
||||
line-height: 33px;
|
||||
|
||||
> .dicon {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.dmz-toolbar-small {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dmz-toolbar-large {
|
||||
@extend .dmz-toolbar-dark-large;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dmz-toolbar-raised-small {
|
||||
@extend %dmz-toolbar;
|
||||
background-color: map-get($gray-shades, 100);
|
||||
@include button-shadow-light();
|
||||
}
|
||||
|
||||
.dmz-toolbar-raised-large {
|
||||
@extend .dmz-toolbar-dark-large;
|
||||
background-color: map-get($gray-shades, 100);
|
||||
@include button-shadow-light();
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue