mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
Replaced Material Icons & Boostrap with custom UI framework
This commit is contained in:
Harvey Kandola
parent
d0f0a12f2d
commit
61c648a7ac
75 changed files with 116 additions and 1445 deletions
|
|
@ -30,21 +30,16 @@
|
|||
.background-color-theme-100 { background-color: $theme-100; }
|
||||
|
||||
@import "reset.scss";
|
||||
@import "font.scss";
|
||||
@import "icon.scss";
|
||||
@import "mixins.scss";
|
||||
@import "layout/all.scss";
|
||||
@import "util.scss";
|
||||
@import "text.scss";
|
||||
@import "bootstrap.scss";
|
||||
|
||||
|
||||
@import "view/common.scss";
|
||||
@import "widget/widget.scss";
|
||||
@import "ui/all.scss";
|
||||
@import "view/toolbar.scss";
|
||||
@import "view/all.scss";
|
||||
|
||||
@import "vendor/all.scss";
|
||||
@import "print.scss";
|
||||
@import "news.scss";
|
||||
|
|
|
|||
6
gui/app/styles/core/bootstrap.scss
vendored
6
gui/app/styles/core/bootstrap.scss
vendored
|
|
@ -53,8 +53,6 @@ $input-focus-border-color: map-get($gray-shades, 600);
|
|||
$input-focus-color: $color-black-light-1;
|
||||
$input-placeholder-color: map-get($gray-shades, 600);
|
||||
$input-focus-border-color: map-get($gray-shades, 200);
|
||||
$input-btn-focus-width: .2rem;
|
||||
$input-btn-focus-color: rgba($theme-500, .25);
|
||||
|
||||
// form labels
|
||||
.form-group {
|
||||
|
|
@ -96,8 +94,8 @@ $link-hover-decoration: none;
|
|||
// Optional
|
||||
@import "node_modules/bootstrap/scss/reboot";
|
||||
@import "node_modules/bootstrap/scss/grid";
|
||||
@import "node_modules/bootstrap/scss/buttons";
|
||||
@import "node_modules/bootstrap/scss/button-group";
|
||||
// @import "node_modules/bootstrap/scss/buttons";
|
||||
// @import "node_modules/bootstrap/scss/button-group";
|
||||
@import "node_modules/bootstrap/scss/forms";
|
||||
@import "node_modules/bootstrap/scss/custom-forms";
|
||||
@import "node_modules/bootstrap/scss/input-group";
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
// .font-fixed-width {
|
||||
// font-family: 'courier new', courier;
|
||||
// }
|
||||
|
||||
// $font-regular: Helvetica;
|
||||
// $font-semibold: Helvetica;
|
||||
// $font-light: Helvetica;
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("font/icons/MaterialIcons-Regular.eot");
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'), url("font/icons/MaterialIcons-Regular.woff2") format('woff2'), url("font/icons/MaterialIcons-Regular.woff") format('woff'), url("font/icons/MaterialIcons-Regular.ttf") format('truetype');
|
||||
}
|
||||
|
|
@ -3,10 +3,3 @@
|
|||
@import "headings.scss";
|
||||
@import "master-internal.scss";
|
||||
@import "sidebar.scss";
|
||||
|
||||
@import "layout-master.scss";
|
||||
@import "layout-topbar.scss";
|
||||
@import "layout-sidebar.scss";
|
||||
@import "layout-footer.scss";
|
||||
@import "layout-content.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
.content-zone {
|
||||
> .explainer-header {
|
||||
color: map-get($gray-shades, 600);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
> .explainer-text {
|
||||
margin: 3px 0;
|
||||
padding: 0;
|
||||
color: map-get($gray-shades, 600);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
> .explainer-list {
|
||||
margin: 5px 20px;
|
||||
padding: 0;
|
||||
color: map-get($gray-shades, 600);
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.1rem;
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> .explainer-gap {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
footer {
|
||||
background-color: $theme-100;
|
||||
color: map-get($gray-shades, 600);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
padding: 5px 2rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
a, a:visited {
|
||||
@include ease-in();
|
||||
color: map-get($gray-shades, 600);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
> .progress {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
|
||||
> img {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
> .progress-done {
|
||||
background-color: map-get($green-shades, 600);
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@include border-radius(20px);
|
||||
}
|
||||
|
||||
> .progress-notification {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
color: map-get($green-shades, 600);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
$break-1: 900px;
|
||||
$break-2: 1200px;
|
||||
$break-3: 1400px;
|
||||
$break-4: 1600px;
|
||||
$break-5: 1800px;
|
||||
|
||||
.layout-header, .layout-footer {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-body {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
order: -1;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: auto auto 0 auto;
|
||||
bottom: 0;
|
||||
z-index: 888;
|
||||
@include sticky();
|
||||
}
|
||||
|
||||
@media (min-width: $break-1) {
|
||||
.layout-body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
flex: 0 0 200px;
|
||||
width: 200px;
|
||||
height: calc(100vh - 140px);
|
||||
@include sticky();
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 0 1 700px;
|
||||
padding: 0 2rem;
|
||||
margin: 0;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $break-2) {
|
||||
.layout-body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
flex: 0 0 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 0 1 1000px;
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 3rem;
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $break-3) {
|
||||
.layout-body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
flex: 0 0 400px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 0 1 1000px;
|
||||
margin: 0;
|
||||
padding: 0 0 0 3rem;
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $break-4) {
|
||||
.layout-body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
flex: 0 0 450px;
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 0 1 1200px;
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 3rem;
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $break-5) {
|
||||
.layout-body {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
flex: 0 0 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex: 0 1 1300px;
|
||||
margin: 0;
|
||||
padding: 0 2rem 0 4rem;
|
||||
max-width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
footer {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Conditional CSS for Edge 12+.
|
||||
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
|
||||
*/
|
||||
@supports (-ms-ime-align:auto) {
|
||||
// For IE/Edge footer must be at bottom as sticky/flex is not quite supported.
|
||||
.layout-footer, footer {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Conditional CSS for IE 8+ (and old Firefox 1.x).
|
||||
* @link: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
|
||||
*/
|
||||
@media screen\0 {
|
||||
/* Conditional IE styles */
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.sidebar {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-scroll {
|
||||
padding: 1rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-white {
|
||||
background-color: $color-white;
|
||||
margin: 10px 10px;
|
||||
|
||||
@media (min-width: $break-1) {
|
||||
margin: 10px 10px;
|
||||
height: calc(100vh - 204px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@media (min-width: $break-2) {
|
||||
margin: 10px 10px;
|
||||
}
|
||||
@media (min-width: $break-3) {
|
||||
margin: 20px 20px;
|
||||
}
|
||||
@media (min-width: $break-4) {
|
||||
margin: 20px 20px;
|
||||
}
|
||||
@media (min-width: $break-5) {
|
||||
margin: 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-view-switcher {
|
||||
color: $theme-500;
|
||||
background-color: map-get($gray-shades, 600);
|
||||
padding: 5px 20px;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
|
||||
> i {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .divider {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
#top-bar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background-color: $theme-500;
|
||||
color: $color-white;
|
||||
padding: 0 2rem;
|
||||
font-size: 1rem;
|
||||
height: 50px;
|
||||
|
||||
> .items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
|
||||
> .item {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 0 30px 0 0;
|
||||
padding: 0;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.1rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
> .logo {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
> .link, .link:visited {
|
||||
@include ease-in();
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
background-color: $theme-500 !important;
|
||||
color: $theme-500 !important;
|
||||
padding: 5px 10px !important;
|
||||
|
||||
&:hover {
|
||||
color: darken($theme-500, 15%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
height: 50px;
|
||||
float: right;
|
||||
|
||||
> .button-icon-gap {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
> .hamburger {
|
||||
@include ease-in();
|
||||
@include border-radius(3px);
|
||||
background-color: $theme-500;
|
||||
border: 1px solid $theme-100;
|
||||
|
||||
> i {
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.1rem;
|
||||
padding: 0px 3px 0px 3px;
|
||||
color: $theme-100;
|
||||
cursor: pointer;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-100;
|
||||
|
||||
> i {
|
||||
color: $theme-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,15 @@
|
|||
position: sticky;
|
||||
}
|
||||
|
||||
@mixin card() {
|
||||
background-color: $color-card;
|
||||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($gray-shades, 100);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($radius)
|
||||
{
|
||||
-webkit-border-radius: $radius;
|
||||
|
|
@ -37,32 +46,3 @@
|
|||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin ease-in()
|
||||
{
|
||||
// -webkit-transition: all 0.30s ease-in-out;
|
||||
// -moz-transition: all 0.30s ease-in-out;
|
||||
// -ms-transition: all 0.30s ease-in-out;
|
||||
// -o-transition: all 0.30s ease-in-out;
|
||||
// transition: all 0.30s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin content-container($pad-tb: 25px, $pad-lr: 50px) {
|
||||
@include border-radius(2px);
|
||||
padding: $pad-tb $pad-lr;
|
||||
box-shadow: 0 0 0 0.75pt map-get($gray-shades, 200),0 0 3pt 0.75pt map-get($gray-shades, 200);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
@mixin card() {
|
||||
background-color: $color-card;
|
||||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
|
||||
&:hover {
|
||||
background-color: map-get($gray-shades, 100);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shadow() {
|
||||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@
|
|||
color: #4c4c4c;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section-trello-list-checkbox {
|
||||
vertical-align: text-top;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
> .material-icons {
|
||||
> .dicon {
|
||||
font-size: 5rem;
|
||||
color: map-get($gray-shades, 200);
|
||||
}
|
||||
|
|
@ -33,7 +33,6 @@
|
|||
margin: 5rem 0;
|
||||
}
|
||||
|
||||
|
||||
.theme-picker {
|
||||
display : block;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -52,7 +51,6 @@
|
|||
cursor: default;
|
||||
border: 7px solid map-get($gray-shades, 300);
|
||||
@include border-radius(3px);
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
border: 7px solid map-get($gray-shades, 600);
|
||||
|
|
|
|||
|
|
@ -207,7 +207,6 @@
|
|||
> .item {
|
||||
margin: 15px 0;
|
||||
padding: 15px 0;
|
||||
@include ease-in();
|
||||
font-size: 1.2rem;
|
||||
color: $theme-500;
|
||||
}
|
||||
|
|
@ -255,7 +254,6 @@
|
|||
}
|
||||
|
||||
> .upload-backup-file {
|
||||
@include ease-in();
|
||||
margin: 50px 0 10px 0;
|
||||
|
||||
> .dz-preview, .dz-processing {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include ease-in();
|
||||
@include border-radius(3px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -65,7 +64,6 @@
|
|||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include ease-in();
|
||||
@include border-radius(3px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -83,8 +81,7 @@
|
|||
}
|
||||
|
||||
> .actions {
|
||||
@include ease-in();
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,19 @@
|
|||
width: 100%;
|
||||
|
||||
> .document {
|
||||
@include ease-in();
|
||||
margin: 0 0 5px 0;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 10px 15px;
|
||||
color: map-get($gray-shades, 600);
|
||||
color: map-get($gray-shades, 700);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
border: 1px solid map-get($gray-shades, 200);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
> .title, > .space, > .snippet {
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
|
|
@ -24,7 +26,6 @@
|
|||
}
|
||||
|
||||
> .space {
|
||||
color : map-get($gray-shades, 600);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
|
|
@ -32,24 +33,26 @@
|
|||
}
|
||||
|
||||
> .snippet {
|
||||
color : map-get($gray-shades, 600);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
> .material-icons {
|
||||
> .dicon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: $color-white;
|
||||
color: map-get($yellow-shades, 800);
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
background-color: $color-link !important;
|
||||
|
||||
> .title, .space, .snippet {
|
||||
color: $color-white !important;
|
||||
color: map-get($yellow-shades, 800) !important;
|
||||
}
|
||||
|
||||
background-color: map-get($yellow-shades, 100) !important;
|
||||
border: 1px solid map-get($yellow-shades, 300) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
.icon {
|
||||
.dicon {
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
|
@ -20,4 +20,3 @@
|
|||
.block-editor {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
width: 100%;
|
||||
|
||||
> .item {
|
||||
@include ease-in();
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
margin: 5px 0;
|
||||
|
|
@ -36,7 +35,6 @@
|
|||
}
|
||||
|
||||
> .details {
|
||||
@include ease-in();
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
|
||||
|
|
|
|||
1
gui/app/styles/core/view/import.scss
vendored
1
gui/app/styles/core/view/import.scss
vendored
|
|
@ -1,5 +1,6 @@
|
|||
.import-zone {
|
||||
margin: 3rem 1rem;
|
||||
text-align: center;
|
||||
|
||||
.dz-preview, .dz-processing {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
> .document {
|
||||
@include card();
|
||||
@include ease-in();
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -44,7 +43,6 @@
|
|||
}
|
||||
|
||||
> a {
|
||||
@include ease-in();
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
|
|
|
|||
|
|
@ -172,6 +172,10 @@
|
|||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
|
||||
> .dicon {
|
||||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
> td:first-child {
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
.toolbar {
|
||||
margin: 30px 0 0 0;
|
||||
|
||||
> .links {
|
||||
display: inlne-block;
|
||||
|
||||
> .link, div > .link {
|
||||
color: map-get($gray-shades, 600);
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
@include ease-in();
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .selected, div > .link {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
color: $color-white;
|
||||
background-color: map-get($gray-shades, 600);
|
||||
@include border-radius(20px);
|
||||
@include ease-in();
|
||||
padding: 10px 0 0 0;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
|
|
@ -14,7 +13,6 @@
|
|||
color: $color-white;
|
||||
background-color: map-get($gray-shades, 600);
|
||||
@include border-radius(100px);
|
||||
@include ease-in();
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
font-size: 30px;
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
// Copyright (c) 2015 Documize Inc.
|
||||
.button-gap {
|
||||
width: 5px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
@extend .no-select;
|
||||
}
|
||||
|
||||
.button-icon-white {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-white;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($color-white, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-gray {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: map-get($gray-shades, 300);
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken(map-get($gray-shades, 300), 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-gold {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: map-get($yellow-shades, 700);
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken(map-get($yellow-shades, 700), 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-danger {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: map-get($gray-shades, 300);
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: map-get($red-shades, 700);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-blue {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: map-get($gray-shades, 800);
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-red {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: map-get($red-shades, 700);
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: map-get($red-shades, 400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-green {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: map-get($green-shades, 600);
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: map-get($green-shades, 700);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-black {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-black-light-1;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($color-black-light-1, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-theme {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $theme-500;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($theme-500, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-theme-light {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $theme-100;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($theme-100, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-icon-small {
|
||||
> i {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-gap {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
white-space: nowrap;
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
> .material-icons {
|
||||
> .dicon{
|
||||
font-size: 1.5rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
vertical-align: top;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
}
|
||||
|
||||
> .text-header {
|
||||
@include ease-in();
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -36,7 +35,6 @@
|
|||
}
|
||||
|
||||
> .text {
|
||||
@include ease-in();
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
|
|
@ -45,7 +43,7 @@
|
|||
width: 80%;
|
||||
}
|
||||
|
||||
> .material-icons {
|
||||
> .dicon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
.ui-radio {
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 0 5px 0;
|
||||
|
||||
> .material-icons {
|
||||
font-size: 1.5rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> .selected {
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
> .text {
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: sub;
|
||||
color: $color-black-light-1;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-radio-selected {
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
text-align: center;
|
||||
background-color: map-get($gray-shades, 300);
|
||||
|
||||
> .material-icons {
|
||||
> .dicons {
|
||||
font-size: 22px;
|
||||
margin-top: 20px;
|
||||
color: map-get($gray-shades, 600);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
font-size: 0;
|
||||
|
||||
> .tab {
|
||||
@include ease-in();
|
||||
@extend .text-truncate;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,4 @@
|
|||
// Copyright (c) 2015 Documize Inc.
|
||||
// Material Design icons from https://design.google.com/icons/
|
||||
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 1.2rem;
|
||||
display: inline-block;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.transition-shadow {
|
||||
transition: box-shadow 0.25s;
|
||||
|
|
@ -83,11 +67,9 @@
|
|||
}
|
||||
|
||||
@import "widget-avatar";
|
||||
@import "widget-button";
|
||||
@import "widget-checkbox";
|
||||
@import "widget-list-picker";
|
||||
@import "widget-notification";
|
||||
@import "widget-radio";
|
||||
@import "widget-symbol";
|
||||
@import "widget-table";
|
||||
@import "widget-tabnav";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue