mirror of
https://github.com/documize/community.git
synced 2025-08-02 03:55:24 +02:00
Provide icon rendering framework
This commit is contained in:
Harvey Kandola
parent
6eb68f84e0
commit
02102f9bf3
48 changed files with 851 additions and 546 deletions
|
|
@ -29,18 +29,21 @@
|
|||
.background-color-theme-200 { background-color: $theme-200; }
|
||||
.background-color-theme-100 { background-color: $theme-100; }
|
||||
|
||||
@import "reset.scss";
|
||||
@import "font.scss";
|
||||
@import "icon.scss";
|
||||
@import "mixins.scss";
|
||||
@import "base.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/views.scss";
|
||||
@import "layout/all.scss";
|
||||
|
||||
@import "vendor/all.scss";
|
||||
@import "print.scss";
|
||||
|
|
|
|||
|
|
@ -1,196 +0,0 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
text-rendering: optimizeLegibility;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
// height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
// @include ease-in();
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.admin-link {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.broken-link {
|
||||
color: map-get($red-shades, 600);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.no-outline {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto !important;
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px white inset;
|
||||
box-shadow: 0 0 0 1000px white inset;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: map-get($gray-shades, 100);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: map-get($gray-shades, 300);
|
||||
|
||||
&:hover {
|
||||
background: map-get($gray-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
$i: 150;
|
||||
@while $i > 0 {
|
||||
.margin-#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-top-#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-bottom-#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-right-#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-left-#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
|
||||
$i: 150;
|
||||
@while $i > 0 {
|
||||
.padding-#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-top-#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-bottom-#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-right-#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-left-#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
|
||||
$i: 100;
|
||||
@while $i > 0 {
|
||||
.width-#{$i} {
|
||||
width: #{$i}#{"%"} !important;
|
||||
}
|
||||
$i: $i - 1;
|
||||
}
|
||||
|
|
@ -187,30 +187,10 @@ icons
|
|||
content: "\ea08";
|
||||
}
|
||||
|
||||
.dicon-edit-to-check::before {
|
||||
content: "\ea0a";
|
||||
}
|
||||
|
||||
.dicon-settings-gear::before {
|
||||
content: "\ea0c";
|
||||
}
|
||||
|
||||
.dicon-arrow-down::before {
|
||||
content: "\ea0d";
|
||||
}
|
||||
|
||||
.dicon-arrow-left::before {
|
||||
content: "\ea0e";
|
||||
}
|
||||
|
||||
.dicon-arrow-right::before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
|
||||
.dicon-arrow-up::before {
|
||||
content: "\ea10";
|
||||
}
|
||||
|
||||
.dicon-small-down::before {
|
||||
content: "\ea11";
|
||||
}
|
||||
|
|
@ -375,14 +355,6 @@ icons
|
|||
content: "\ea3a";
|
||||
}
|
||||
|
||||
.dicon-menu-to-arrow-left-3::before {
|
||||
content: "\ea3b";
|
||||
}
|
||||
|
||||
.dicon-grid-to-list::before {
|
||||
content: "\ea3c";
|
||||
}
|
||||
|
||||
.dicon-ctrl-down::before {
|
||||
content: "\ea3d";
|
||||
}
|
||||
|
|
@ -415,4 +387,10 @@ icons
|
|||
content: "\ea45";
|
||||
}
|
||||
|
||||
.dicon-bookmark-2::before {
|
||||
content: "\ea46";
|
||||
}
|
||||
|
||||
.dicon-menu-8::before {
|
||||
content: "\ea48";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
@import "grid.scss";
|
||||
@import "spacing.scss";
|
||||
@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";
|
||||
|
||||
@import "common.scss";
|
||||
@import "master-internal.scss";
|
||||
|
|
|
|||
|
|
@ -1,25 +1,10 @@
|
|||
// Styles that apply to all pages using master layout
|
||||
|
||||
|
||||
$display-break-1: 700px;
|
||||
$display-break-2: 900px;
|
||||
$display-break-3: 1200px;
|
||||
$display-break-4: 1600px;
|
||||
$display-break-5: 1800px;
|
||||
|
||||
.master-page-heading {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
.master-page-desc {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
|
||||
.grid-container-8-2 {
|
||||
%grid-base {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 2fr;
|
||||
|
|
@ -40,6 +25,32 @@ $display-break-5: 1800px;
|
|||
justify-self: self-start;
|
||||
}
|
||||
|
||||
// X- axis alignment
|
||||
.grid-cell-left {
|
||||
justify-self: self-end;
|
||||
}
|
||||
.grid-cell-right {
|
||||
justify-self: self-end;
|
||||
}
|
||||
.grid-cell-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
// Y axis alignment
|
||||
.grid-cell-top {
|
||||
align-self: self-start;
|
||||
}
|
||||
.grid-cell-middle {
|
||||
align-self: center;
|
||||
}
|
||||
.grid-cell-bottom {
|
||||
align-self: self-end;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container-8-2 {
|
||||
@extend %grid-base;
|
||||
|
||||
@media (min-width: $display-break-2) {
|
||||
grid-template-columns: 8fr 2fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
|
@ -50,6 +61,27 @@ $display-break-5: 1800px;
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-cell-2 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container-6-4 {
|
||||
@extend %grid-base;
|
||||
|
||||
@media (min-width: $display-break-2) {
|
||||
grid-template-columns: 6fr 4fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
.grid-cell-1 {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-cell-2 {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
12
gui/app/styles/core/layout/headings.scss
Normal file
12
gui/app/styles/core/layout/headings.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// Headings
|
||||
.master-page-heading {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: map-get($gray-shades, 900);
|
||||
}
|
||||
|
||||
.master-page-desc {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
59
gui/app/styles/core/layout/sidebar.scss
Normal file
59
gui/app/styles/core/layout/sidebar.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
.sidebar-content {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
> .section {
|
||||
margin: 0;
|
||||
padding: 0 7px;
|
||||
|
||||
> .title {
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
|
||||
> .list {
|
||||
margin: 10px 0;
|
||||
|
||||
> .item {
|
||||
padding: 3px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
> .dicon {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: map-get($gray-shades, 500);
|
||||
}
|
||||
|
||||
> .name {
|
||||
display: inline-block;
|
||||
padding: 0 0 0 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: $color-black-light-3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .dicon {
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
> .name {
|
||||
color: $color-black-light-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .selected {
|
||||
> .dicon, > .name, &:hover {
|
||||
color: $theme-500 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
gui/app/styles/core/layout/spacing.scss
Normal file
71
gui/app/styles/core/layout/spacing.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
.spacer-100 { height: 10px; }
|
||||
.spacer-200 { height: 20px; }
|
||||
.spacer-300 { height: 30px; }
|
||||
.spacer-400 { height: 40px; }
|
||||
.spacer-500 { height: 70px; }
|
||||
.spacer-600 { height: 100px; }
|
||||
.spacer-700 { height: 120px; }
|
||||
.spacer-800 { height: 150px; }
|
||||
.spacer-900 { height: 200px; }
|
||||
|
||||
@media (max-width: $display-break-1) {
|
||||
div[class^="spacer-"] {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
$i: 150;
|
||||
@while $i > 0 {
|
||||
.margin-#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-top-#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-bottom-#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-right-#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.margin-left-#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
|
||||
$i: 150;
|
||||
@while $i > 0 {
|
||||
.padding-#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-top-#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-bottom-#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-right-#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.padding-left-#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
|
||||
$i: 100;
|
||||
@while $i > 0 {
|
||||
.width-#{$i} {
|
||||
width: #{$i}#{"%"} !important;
|
||||
}
|
||||
$i: $i - 1;
|
||||
}
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
|
||||
@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;
|
||||
// -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) {
|
||||
|
|
@ -59,8 +59,7 @@
|
|||
box-shadow: 1px 1px 3px 0px rgba(211,211,211,1);
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-card, 5%);
|
||||
color: $color-link;
|
||||
background-color: map-get($gray-shades, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
57
gui/app/styles/core/reset.scss
Normal file
57
gui/app/styles/core/reset.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
text-rendering: optimizeLegibility;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
// height: 100vh;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px white inset;
|
||||
box-shadow: 0 0 0 1000px white inset;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: map-get($gray-shades, 100);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: map-get($gray-shades, 300);
|
||||
|
||||
&:hover {
|
||||
background: map-get($gray-shades, 600);
|
||||
}
|
||||
}
|
||||
42
gui/app/styles/core/text.scss
Normal file
42
gui/app/styles/core/text.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bold-100 { font-weight: 100; }
|
||||
.bold-200 { font-weight: 200; }
|
||||
.bold-300 { font-weight: 300; }
|
||||
.bold-400 { font-weight: 400; }
|
||||
.bold-500 { font-weight: 500; }
|
||||
.bold-600 { font-weight: 600; }
|
||||
.bold-700 { font-weight: 700; }
|
||||
.bold-800 { font-weight: 800; }
|
||||
.bold-900 { font-weight: 900; }
|
||||
88
gui/app/styles/core/util.scss
Normal file
88
gui/app/styles/core/util.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
a {
|
||||
// @include ease-in();
|
||||
color: $color-link;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.admin-link {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.broken-link {
|
||||
color: map-get($red-shades, 600);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.no-outline {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto !important;
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 1px solid map-get($gray-shades, 300);
|
||||
}
|
||||
|
||||
|
|
@ -1,44 +1,101 @@
|
|||
.view-spaces {
|
||||
> .heading {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: map-get($gray-shades, 800);
|
||||
text-transform: uppercase;
|
||||
|
||||
> .counter {
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
color: map-get($gray-shades, 600);
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .empty {
|
||||
font-size: 1.2rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
font-weight: normal;
|
||||
margin: 20px 0 50px 0;
|
||||
}
|
||||
|
||||
> .list {
|
||||
margin: 30px 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
> .item {
|
||||
@include card();
|
||||
@include ease-in();
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 10px;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
font-size: 1.1rem;
|
||||
overflow: hidden;
|
||||
margin: 0 0 2rem 0;
|
||||
padding: 15px 20px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 2fr;
|
||||
|
||||
> .info {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
padding: 0;
|
||||
align-self: self-start;
|
||||
justify-self: self-start;
|
||||
|
||||
> .name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
> .desc {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
margin-top: 0.4rem;
|
||||
color: $color-black-light-3;
|
||||
}
|
||||
|
||||
> .meta {
|
||||
padding: 25px 0 0 0;
|
||||
|
||||
> .dicon {
|
||||
color: map-get($gray-shades, 600);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .stats {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
padding: 0;
|
||||
align-self: self-start;
|
||||
justify-self: self-start;
|
||||
|
||||
> .stat {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: 5px 30px 5px 0;
|
||||
|
||||
> .number {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
> .label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: map-get($gray-shades, 600);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $display-break-2) {
|
||||
grid-template-columns: 8fr 2fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
> .info {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> .stats {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
padding: 0;
|
||||
justify-self: self-end;
|
||||
|
||||
> .stat, > .number, > .label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .stat {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue