mirror of
https://github.com/documize/community.git
synced 2025-07-19 21:29:42 +02:00
Introduce new button and toolbar styles
This commit is contained in:
Harvey Kandola
parent
3b179d5bc0
commit
0de7efdf20
11 changed files with 420 additions and 109 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<div class="auth-box">
|
||||
<div class="logo">
|
||||
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
|
||||
<div class="url">Authenticate with {{appMeta.appHost}}</div>
|
||||
<div class="url">{{appMeta.appHost}}</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
{{forgot-password forgot=(action 'forgot')}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="auth-box">
|
||||
<div class="logo">
|
||||
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
|
||||
<div class="url">Authenticate with {{appMeta.appHost}}</div>
|
||||
<div class="url">{{appMeta.appHost}}</div>
|
||||
</div>
|
||||
<form {{action 'login' on="submit"}}>
|
||||
<div class="form-group">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="auth-box">
|
||||
<div class="logo">
|
||||
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid" />
|
||||
<div class="url">Authenticate with {{appMeta.appHost}}</div>
|
||||
<div class="url">{{appMeta.appHost}}</div>
|
||||
</div>
|
||||
{{password-reset reset=(action 'reset')}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,14 @@
|
|||
{{#layout/top-bar selectItem="spaces"}}
|
||||
{{/layout/top-bar}}
|
||||
{{#layout/master-sidebar selectedItem="spaces"}}
|
||||
{{/layout/master-sidebar}}
|
||||
|
||||
{{#layout/middle-zone}}
|
||||
{{#layout/middle-zone-content}}
|
||||
{{spaces/space-list spaces=model}}
|
||||
{{/layout/middle-zone-content}}
|
||||
{{#layout/master-content}}
|
||||
|
||||
{{#layout/middle-zone-sidebar}}
|
||||
<div id="sidebar" class="sidebar">
|
||||
<h1>{{appMeta.title}}</h1>
|
||||
<p>{{appMeta.message}}</p>
|
||||
{{#if session.isEditor}}
|
||||
<button type="button" class="btn btn-success font-weight-bold my-3" {{action 'onShowModal'}}>+ SPACE</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/layout/middle-zone-sidebar}}
|
||||
<h1>{{appMeta.title}}</h1>
|
||||
<p>{{appMeta.message}}</p>
|
||||
{{#if session.isEditor}}
|
||||
<button type="button" class="btn btn-success font-weight-bold my-3" {{action 'onShowModal'}}>+ SPACE</button>
|
||||
{{/if}}
|
||||
{{spaces/space-list spaces=model}}
|
||||
|
||||
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
|
@ -47,7 +41,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/layout/middle-zone}}
|
||||
|
||||
{{#layout/bottom-bar}}
|
||||
{{/layout/bottom-bar}}
|
||||
{{/layout/master-content}}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,90 @@
|
|||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
{{/layout/master-sidebar}}
|
||||
{{#layout/master-content}}
|
||||
<button {{action 'onSuccess'}}>Success</button>
|
||||
<button {{action 'onInfo'}}>Info</button>
|
||||
<button {{action 'onWarn'}}>Warn</button>
|
||||
<button {{action 'onError'}}>Error</button>
|
||||
<button class="dmz-button-green" {{action 'onSuccess'}}>save</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-yellow" {{action 'onInfo'}}>update</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-gray" {{action 'onWarn'}}>cancel</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-red" {{action 'onError'}}>delete</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="dmz-button-green-light">Save</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-yellow-light">Update</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-gray-light">cancel</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-red-light">Delete</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>space</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/>content</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/>user</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/>group</button>
|
||||
<div class="dmz-button-gap-right" />
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-dark-small">
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-dark-large">
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-small">
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-large">
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-raised-small">
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="dmz-toolbar-raised-large">
|
||||
<i class="dicon dicon-bin red"/>
|
||||
<i class="dicon dicon-print yellow"/>
|
||||
<i class="dicon dicon-settings-gear"/>
|
||||
<i class="dicon dicon-print green"/>
|
||||
<i class="dicon dicon-single-01"/>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
|
||||
|
|
|
|||
|
|
@ -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
140
gui/app/styles/core/ui/ui-button.scss
Normal 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
84
gui/app/styles/core/ui/ui-popup.scss
Normal 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
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();
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
> .url {
|
||||
margin: 20px 0;
|
||||
color: map-get($gray-shades, 600);
|
||||
color: map-get($gray-shades, 700);
|
||||
font-weight: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue