Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 23:59:47 +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

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

@ -1 +1,11 @@
@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";
@import "ui-toolbar";

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

84
gui/app/styles/core/ui/ui-popup.scss Normal file
View file

@ -0,0 +1,84 @@
// https://github.com/kybishop/ember-attacher
.ember-attacher-popper {
background-color: $color-white;
font-size: 1rem;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
@include border-radius(3px);
> p {
margin: 4px;
padding: 0;
}
> .menu {
margin: 0;
padding: 0;
min-width: 140px;
> .item {
color: map-get($gray-shades, 800);
background-color: transparent;
display: block;
list-style-type: none;
margin: 0;
border: 0;
white-space: nowrap;
text-align: left;
padding: 0.5rem 1.5rem;
font-size: 1rem;
&:hover {
color: $color-black;
background-color: map-get($gray-shades, 100);
}
}
> .header {
color: map-get($gray-shades, 800);
background-color: map-get($gray-shades, 300);
font-size: 1rem;
font-weight: 600;
&:hover {
color: map-get($gray-shades, 800);
background-color: map-get($gray-shades, 300);
}
}
> .divider {
margin: 0;
padding: 0;
height: 1px;
border-top: 1px solid map-get($gray-shades, 200);
}
.red {
color: map-get($red-shades, 600);
&:hover {
color: map-get($red-shades, 800);
}
}
.green {
color: map-get($green-shades, 600);
&:hover {
color: map-get($green-shades, 800);
}
}
.yellow {
color: map-get($yellow-shades, 600);
&:hover {
color: map-get($yellow-shades, 800);
}
}
.bold {
font-weight: 600;
}
}
}

88
gui/app/styles/core/ui/ui-toolbar.scss Normal file
View 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();
}

83
gui/app/styles/core/ui/ui-tooltip.scss
View file

@ -4,86 +4,3 @@
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
}
.ember-attacher-popper {
background-color: $color-white;
font-size: 1rem;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
@include border-radius(3px);
> p {
margin: 4px;
padding: 0;
}
> .menu {
margin: 0;
padding: 0;
min-width: 140px;
> .item {
color: map-get($gray-shades, 800);
background-color: transparent;
display: block;
list-style-type: none;
margin: 0;
border: 0;
white-space: nowrap;
text-align: left;
padding: 0.5rem 1.5rem;
font-size: 1rem;
&:hover {
color: $color-black;
background-color: map-get($gray-shades, 100);
}
}
> .header {
color: map-get($gray-shades, 800);
background-color: map-get($gray-shades, 300);
font-size: 1rem;
font-weight: 600;
&:hover {
color: map-get($gray-shades, 800);
background-color: map-get($gray-shades, 300);
}
}
> .divider {
margin: 0;
padding: 0;
height: 1px;
border-top: 1px solid map-get($gray-shades, 200);
}
.red {
color: map-get($red-shades, 600);
&:hover {
color: map-get($red-shades, 800);
}
}
.green {
color: map-get($green-shades, 600);
&:hover {
color: map-get($green-shades, 800);
}
}
.yellow {
color: map-get($yellow-shades, 600);
&:hover {
color: map-get($yellow-shades, 800);
}
}
.bold {
font-weight: 600;
}
}
}