Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 20:15:26 +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

7
gui/app/styles/core/ui/all.scss
View file

@ -1,10 +1,3 @@
@mixin button-shadow-light() {
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 400);
}
@mixin button-shadow() {
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 600);
}
@import "ui-tooltip";
@import "ui-popup";
@import "ui-button";

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;
}
}

94
gui/app/styles/core/ui/ui-toolbar.scss
View file

@ -1,4 +1,8 @@
%dmz-toolbar {
%toolbar-shadow {
box-shadow: 1px 1px 3px 0px map-get($gray-shades, 200);
}
.dmz-toolbar {
display: inline-block;
text-align: center;
white-space: nowrap;
@ -47,42 +51,80 @@
}
}
.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;
.dmz-toolbar-large {
height: 40px;
padding: 7px 10px;
line-height: 33px;
> .dicon {
font-size: 20px;
font-weight: 500;
padding: 0 0.5rem;
}
}
.dmz-toolbar-small {
@extend %dmz-toolbar;
background-color: transparent;
.dmz-toolbar-dark {
background-color: map-get($gray-shades, 200);
}
.dmz-toolbar-large {
@extend .dmz-toolbar-dark-large;
background-color: transparent;
}
.dmz-toolbar-raised-small {
@extend %dmz-toolbar;
.dmz-toolbar-light {
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();
.dmz-toolbar-raised {
@extend %toolbar-shadow;
}
.dmz-toolbar-bordered {
border: 1px solid map-get($gray-shades, 300);
}
// .dmz-toolbar-dark-small {
// @extend .dmz-toolbar;
// background-color: map-get($gray-shades, 200);
// border: 1px solid map-get($gray-shades, 300);
// @extend %toolbar-shadow;
// }
// .dmz-toolbar-dark-large {
// @extend .dmz-toolbar;
// background-color: map-get($gray-shades, 200);
// border: 1px solid map-get($gray-shades, 300);
// height: 40px;
// padding: 7px 10px;
// line-height: 33px;
// @extend %toolbar-shadow;
// > .dicon {
// font-size: 20px;
// font-weight: 500;
// padding: 0 0.5rem;
// }
// }
// .dmz-toolbar-small {
// @extend .dmz-toolbar;
// background-color: transparent;
// }
// .dmz-toolbar-large {
// @extend .dmz-toolbar-dark-large;
// background-color: transparent;
// border: none;
// box-shadow: none;
// }
// .dmz-toolbar-raised-small {
// @extend .dmz-toolbar;
// @extend %toolbar-shadow;
// background-color: map-get($gray-shades, 100);
// border: 1px solid map-get($gray-shades, 200);
// }
// .dmz-toolbar-raised-large {
// @extend .dmz-toolbar-dark-large;
// @extend %toolbar-shadow;
// background-color: map-get($gray-shades, 100);
// border: 1px solid map-get($gray-shades, 200);
// }

3614
gui/app/styles/core/vendor/animate.scss vendored
View file

File diff suppressed because one or more lines are too long