FEATURE #1933 @1h: add basic SASS structure and configure gulp/elixir
This commit is contained in:
Michal Kváček
@@ -0,0 +1,28 @@
|
||||
.wyswyg {
|
||||
border: 1px solid $color-divider;
|
||||
|
||||
.toolbar,
|
||||
.ql-picker-label,
|
||||
.ql-picker-options {
|
||||
// background-color: lighten($color-divider, 10%) !important;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
border-top: 1px solid $color-divider;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ql-container {
|
||||
font-size: 1rem;
|
||||
|
||||
.ql-editor {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.footer {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: $sidebar-width;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: $footer-height;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.footer-fixed & {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
.footer-block {
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
// line-height: 30px;
|
||||
}
|
||||
|
||||
.footer-github-btn {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@include media-down(md) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.author > ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
content: "|";
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
||||
@include media-down(md) {
|
||||
display: block;
|
||||
text-align: right;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-down(md) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.header .header-block-buttons {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
.btn.header-btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid lighten($color-text, 10%);
|
||||
color: lighten($color-text, 10%);
|
||||
margin: 0 5px;
|
||||
border-radius: 0.2rem;
|
||||
// border-radius: 25px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid darken($color-text, 10%);
|
||||
color: darken($color-text, 10%);
|
||||
}
|
||||
|
||||
|
||||
@include media-down(sm) {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.header .header-block-collapse {
|
||||
|
||||
padding-right: 5px;
|
||||
|
||||
@include media-down(sm) {
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: $color-primary;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
vertical-align: initial;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
.header {
|
||||
background-color: $color-divider;
|
||||
height: $header-height;
|
||||
position: absolute;
|
||||
left: $sidebar-width;
|
||||
right: 0;
|
||||
transition: left 0.3s ease;
|
||||
z-index: 10;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
@include media-down(md) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
left: 0;
|
||||
height: $header-height-xs;
|
||||
}
|
||||
|
||||
.header-fixed & {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.header-block {
|
||||
@include media-down(sm) {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.header .header-block-nav {
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
padding-right: 15px;
|
||||
|
||||
@include media-down(sm) {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
@include clearfix();
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// All lists
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
display: table;
|
||||
}
|
||||
|
||||
// First level items
|
||||
& > ul > li {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
top: 50%;
|
||||
margin-top: -12px;
|
||||
background-color: darken($color-divider, 25%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// First leve items links
|
||||
& > ul > li > a {
|
||||
padding: 0 15px;
|
||||
color: $color-text;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menus
|
||||
.dropdown-menu {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
.header .header-block-nav {
|
||||
|
||||
.notifications {
|
||||
font-size: 16px;
|
||||
|
||||
|
||||
a {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
&.new .counter {
|
||||
color: $color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.notifications-dropdown-menu {
|
||||
white-space: normal;
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 350px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 100%;
|
||||
margin-right: -1px;
|
||||
// @include triangle(up, 10px, $dropdown-border);
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 100%;
|
||||
// @include triangle(up, 9px, $dropdown-bg);
|
||||
}
|
||||
|
||||
|
||||
.notifications-container {
|
||||
.notification-item {
|
||||
border-bottom: 1px solid $dropbown-color-border;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-color-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.img-col {
|
||||
display: table-cell;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.body-col {
|
||||
padding: 5px;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
|
||||
@include bg-cover();
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
color: $color-text;
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
|
||||
.accent {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $dropdown-link-color;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-color-bg;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
min-width: 100px;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
right: 107px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.header .header-block-nav {
|
||||
.profile {
|
||||
.img {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
background-color: darken($color-divider, 25%);
|
||||
color: $color-text-inverse;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
margin-right: 9px;
|
||||
font-weight: bold;
|
||||
|
||||
@include media-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 180px;
|
||||
white-space: normal;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 100%;
|
||||
margin-right: -1px;
|
||||
// @include triangle(up, 10px, $dropdown-border);
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 100%;
|
||||
// @include triangle(up, 9px, $dropdown-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
.icon {
|
||||
color: $color-primary;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
color: $color-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-dropdown-menu-icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.profile-dropdown-menu-topic {
|
||||
color: #7e8e9f;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logout {
|
||||
border-top: 1px solid $dropbown-color-border;
|
||||
}
|
||||
|
||||
|
||||
@include media-down(sm) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.header .header-block-search {
|
||||
$line-height: $header-height - 30px;
|
||||
margin-right: auto;
|
||||
|
||||
// float: left;
|
||||
padding-left: $content-padding-x-md;
|
||||
|
||||
@include media-down(sm) {
|
||||
padding-left: $content-padding-x-xs;
|
||||
}
|
||||
|
||||
@include media(md) {
|
||||
padding-left: $content-padding-x-sm;
|
||||
}
|
||||
|
||||
@include media(lg) {
|
||||
padding-left: $content-padding-x-md;
|
||||
}
|
||||
|
||||
@include media(xl) {
|
||||
padding-left: $content-padding-x-lg;
|
||||
}
|
||||
|
||||
& > form {
|
||||
float: right;
|
||||
|
||||
@include media-down(sm) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
color: $color-text-light;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: $line-height;
|
||||
line-height: $line-height;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding-left: 25px;
|
||||
height: 40px;
|
||||
max-width: 150px;
|
||||
|
||||
@include media-down(sm) {
|
||||
max-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
// .underline {
|
||||
// &:extend(.underline-animation);
|
||||
// }
|
||||
|
||||
|
||||
input:focus + .underline {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
#modal-media {
|
||||
.modal-body {
|
||||
min-height: 250px;
|
||||
|
||||
}
|
||||
|
||||
.modal-tab-content {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.images-container {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
|
||||
.image-container {
|
||||
margin: 0 auto 10px auto;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
|
||||
&:hover {
|
||||
border-color: fade-out($color-primary, 0.5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: fade-out($color-primary, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
padding: 15px;
|
||||
|
||||
.dropzone {
|
||||
position: relative;
|
||||
border: 2px dashed $color-primary;
|
||||
height: 270px;
|
||||
|
||||
.dz-message-block {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
|
||||
.dz-message {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: $color-primary;
|
||||
width: 230px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.modal {
|
||||
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// MOdal tabs are defined in _common/modal/modal.scss
|
||||
|
||||
.modal-header {
|
||||
background-color: $color-primary;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
.btn {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+157
@@ -0,0 +1,157 @@
|
||||
.customize {
|
||||
// height: 200px;
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
padding: 5px 15px;
|
||||
text-align: center;
|
||||
|
||||
.customize-header{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#customize-menu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: $sidebar-width;
|
||||
|
||||
@include media-down(sm) {
|
||||
|
||||
}
|
||||
|
||||
.sidebar-open & {
|
||||
@include media-down(md) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-down(md) {
|
||||
// position: absolute;
|
||||
transition: left 0.3s ease;
|
||||
left: -$sidebar-width;
|
||||
}
|
||||
|
||||
& > li {
|
||||
& > a {
|
||||
background-color: $sidebar-color-primary;
|
||||
border-top: 1px solid fade-out($sidebar-color-secondary, 0.5);
|
||||
}
|
||||
|
||||
& > a:hover,
|
||||
&.open > a {
|
||||
background-color: $sidebar-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.customize {
|
||||
width: $sidebar-width;
|
||||
color: fade-out($color-text-inverse, 0.5);
|
||||
background-color: $sidebar-color-secondary;
|
||||
text-align: center;
|
||||
padding: 10px 15px;
|
||||
border-top: 2px solid $color-primary;
|
||||
|
||||
.customize-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.customize-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
|
||||
|
||||
&.title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
|
||||
& + span {
|
||||
padding: 0;
|
||||
padding-left: 5px
|
||||
}
|
||||
|
||||
& + span:before {
|
||||
font-size: 17px;
|
||||
color: #546273;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:checked + span:before{
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.customize-colors {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
.color-item {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
|
||||
&.color-red {
|
||||
background-color: #FB494D;
|
||||
border-color: #FB494D;
|
||||
}
|
||||
|
||||
&.color-orange {
|
||||
background-color: #FE7A0E;
|
||||
border-color: #FE7A0E;
|
||||
}
|
||||
|
||||
&.color-green {
|
||||
background-color: #8CDE33;
|
||||
border-color: #8CDE33;
|
||||
}
|
||||
|
||||
&.color-seagreen {
|
||||
background-color: #4bcf99;
|
||||
border-color: #4bcf99;
|
||||
}
|
||||
|
||||
&.color-blue {
|
||||
background-color: #52BCD3;
|
||||
border-color: #52BCD3;
|
||||
}
|
||||
|
||||
&.color-purple {
|
||||
background-color: #7867A7;
|
||||
border-color: #7867A7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
font-family: FontAwesome;
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.sidebar-header {
|
||||
.brand {
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding-left: 25px;
|
||||
line-height: $header-height;
|
||||
font-size: 16px;
|
||||
|
||||
@include media-down(sm) {
|
||||
line-height: $header-height-xs;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
.sidebar {
|
||||
background-color: $sidebar-color-primary;
|
||||
width: $sidebar-width;
|
||||
padding-bottom: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transition: left 0.3s ease;
|
||||
z-index: 20;
|
||||
|
||||
|
||||
@include media-down(md) {
|
||||
position: fixed;
|
||||
left: -$sidebar-width;
|
||||
}
|
||||
|
||||
.sidebar-fixed & {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidebar-open & {
|
||||
left: 0;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 51px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: darken($sidebar-color-primary, 6.5%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
// Common styles
|
||||
li {
|
||||
a:focus,
|
||||
.open & a:focus {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Second + menu items
|
||||
ul {
|
||||
padding: 0;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
.loaded & {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
li.active ul {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
// All links which are not active
|
||||
// have subdued color
|
||||
li a {
|
||||
color: $sidebar-color-text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// All links which are not active
|
||||
// On hover bg become darker
|
||||
// Their color become lighter
|
||||
li a:hover,
|
||||
li.open > a,
|
||||
li.open a:hover {
|
||||
color: $sidebar-color-text-active;
|
||||
background-color: $sidebar-color-secondary;
|
||||
}
|
||||
|
||||
|
||||
// First level items
|
||||
&> li {
|
||||
|
||||
// First level items links
|
||||
& > a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
// First level active links have primary background
|
||||
&.active > a,
|
||||
&.active > a:hover {
|
||||
background-color: $color-primary !important;
|
||||
color: $color-text-inverse !important;
|
||||
}
|
||||
|
||||
// First level active links have bit darker background
|
||||
&.open > a {
|
||||
background-color: darken($sidebar-color-primary, 3%);
|
||||
}
|
||||
|
||||
// Open items links
|
||||
&.open > a {
|
||||
i.arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// First level item links arrow
|
||||
& > a {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
&.arrow {
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
line-height: initial;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:before {
|
||||
content: "\f105" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Second level items
|
||||
& > li > ul > li {
|
||||
|
||||
// Second level and deeper items links
|
||||
// Have bit darker background and more padding
|
||||
// from left side
|
||||
a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 50px;
|
||||
background-color: darken($sidebar-color-primary, 3%);
|
||||
}
|
||||
|
||||
// Second level active items links
|
||||
// Have brighter color
|
||||
&.active a {
|
||||
color: $sidebar-color-text-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 200vw;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 15;
|
||||
|
||||
@include media-down(md) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
background-color: fade-out(#000, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-open & {
|
||||
@include media-down(md) {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.app {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: $sidebar-width;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
background-color: $color-bg;
|
||||
box-shadow: 0 0 3px #ccc;
|
||||
transition: left 0.3s ease, padding-left 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
|
||||
$padding-x: $content-padding-x-md;
|
||||
$padding-y: $content-padding-y-md;
|
||||
|
||||
padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
|
||||
min-height: 100vh;
|
||||
|
||||
@include media(xl) {
|
||||
$padding-x: $content-padding-x-xl;
|
||||
$padding-y: $content-padding-y-xl;
|
||||
|
||||
padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
|
||||
}
|
||||
|
||||
@include media(lg) {
|
||||
$padding-x: $content-padding-x-lg;
|
||||
$padding-y: $content-padding-y-lg;
|
||||
|
||||
padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
|
||||
}
|
||||
|
||||
@include media(md) {
|
||||
$padding-x: $content-padding-x-md;
|
||||
$padding-y: $content-padding-y-md;
|
||||
|
||||
padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
$padding-x: $content-padding-x-sm;
|
||||
$padding-y: $content-padding-y-sm;
|
||||
|
||||
padding: $header-height-xs + $padding-y $padding-x $footer-height + $padding-y $padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-down(md) {
|
||||
padding-left: 0;
|
||||
// background-color: #ccc;
|
||||
// left: -$sidebar-width;
|
||||
// width: calc(100% + #{$sidebar-width});
|
||||
}
|
||||
|
||||
&.sidebar-open {
|
||||
// Disable content scrolling when sidebar is open
|
||||
@include media-down(md) {
|
||||
left: 0;
|
||||
// position: absolute;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.blank {
|
||||
background-color: #667380;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
.items-list-page {
|
||||
|
||||
.title-search-block {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
@include media-down(sm) {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.action {
|
||||
display: inline;
|
||||
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-down(sm){
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.items-search {
|
||||
position: absolute;
|
||||
margin-bottom: 15px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@include media-down(sm) {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For common item-list class see /src/_common/styles/items.less
|
||||
|
||||
// Desktop view
|
||||
|
||||
.item-list {
|
||||
|
||||
.item-col {
|
||||
&.item-col-check {
|
||||
text-align: left;
|
||||
// width: auto;
|
||||
// flex-basis: 30px;
|
||||
}
|
||||
|
||||
&.item-col-img {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
flex-basis: 70px;
|
||||
|
||||
@include media-up(sm) {
|
||||
&:not(.item-col-header) {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item-col-title {
|
||||
text-align: left;
|
||||
margin-left: 0 !important;
|
||||
margin-right: auto;
|
||||
// flex-basis: calc(40% - 100px);
|
||||
flex-basis: 0;
|
||||
flex-grow: 3 * $item-list-col-grow;
|
||||
}
|
||||
|
||||
&.item-col-sales {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.item-col-stats {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.item-col-category {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.item-col-author {
|
||||
text-align: left;
|
||||
flex-grow: 1.5 * $item-list-col-grow;
|
||||
}
|
||||
|
||||
&.item-col-date {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// All mobile views
|
||||
@include media-down(sm) {
|
||||
.card.items {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
.item {
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 1px 1px 5px fade-out($color-text-light, 0.9);
|
||||
}
|
||||
|
||||
.item-row {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.item-col {
|
||||
&.item-col-author {
|
||||
flex-grow: $item-list-col-grow;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Large Mobile view
|
||||
|
||||
@include media(sm) {
|
||||
.item-list {
|
||||
|
||||
.item {
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 1px 1px 5px fade-out($color-text-light, 0.9);
|
||||
}
|
||||
|
||||
.item-row {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-heading {
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
line-height: 40px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.item-col {
|
||||
&.item-col-check,
|
||||
&.item-col-title,
|
||||
&.item-col-actions-dropdown {
|
||||
border-bottom: 1px solid $color-divider;
|
||||
|
||||
.item-heading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.item-col-sales,
|
||||
&.item-col-stats,
|
||||
&.item-col-category,
|
||||
&.item-col-author,
|
||||
&.item-col-date {
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
&.item-col-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.item-col-title {
|
||||
padding-left: $item-list-padding-x;
|
||||
text-align: left;
|
||||
margin-left: 0 !important;
|
||||
margin-right: auto;
|
||||
flex-basis: calc(100% - 40px);
|
||||
}
|
||||
|
||||
|
||||
&.item-col-actions {
|
||||
|
||||
}
|
||||
|
||||
&.item-col-img {
|
||||
padding-left: $item-list-padding-x;
|
||||
flex-basis: 69px + $item-list-padding-x;
|
||||
}
|
||||
|
||||
|
||||
&.item-col-sales {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.item-col-stats {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.item-col-category {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.item-col-author {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.item-col-date {
|
||||
padding-right: $item-list-padding-x;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
flex-basis: 100px;
|
||||
flex-basis: 0;
|
||||
flex-grow: $item-list-col-grow;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Small Mobile view
|
||||
|
||||
@include media(xs) {
|
||||
|
||||
.item-list .item {
|
||||
border: none;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 1px 1px 5px fade-out($color-text-light, 0.9);
|
||||
|
||||
|
||||
.item-col {
|
||||
text-align: right;
|
||||
border-bottom: 1px solid $color-divider;
|
||||
padding-left: $item-list-padding-x;
|
||||
|
||||
&[class^=item-col] {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
|
||||
&.item-col-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.item-col-img {
|
||||
.item-img {
|
||||
padding-bottom: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
&.item-col-title {
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
|
||||
.item-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.item-col-actions-dropdown {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.item-col-sales {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.item-col-stats {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.item-col-category {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.item-col-author {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.item-col-date {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.error-card {
|
||||
width: 410px;
|
||||
min-height: 330px;
|
||||
margin: 60px auto;
|
||||
|
||||
.error-title {
|
||||
font-size: 150px;
|
||||
line-height: 150px;
|
||||
font-weight: 700;
|
||||
color: #252932;
|
||||
text-align: center;
|
||||
text-shadow: rgba(61, 61, 61, 0.3) .5px .5px, rgba(61, 61, 61, 0.2) 1px 1px, rgba(61, 61, 61, 0.3) 1.5px 1.5px;
|
||||
}
|
||||
|
||||
.error-sub-title {
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.global {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
margin: 0;
|
||||
|
||||
.error-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.error-sub-title,
|
||||
.error-container {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media(md) {
|
||||
.error-card {
|
||||
width: 50%;
|
||||
|
||||
&.global {
|
||||
position: relative;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
transform: inherit;
|
||||
margin: 40px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-down(sm) {
|
||||
.error-card {
|
||||
width: 90%;
|
||||
|
||||
&.global {
|
||||
position: relative;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
transform: inherit;
|
||||
margin: 40px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
.table-flip-scroll table {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
.table-flip-scroll .flip-content:after,
|
||||
.table-flip-scroll .flip-header:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0
|
||||
}
|
||||
.table-flip-scroll html .flip-content,
|
||||
.table-flip-scroll html .flip-header {
|
||||
-ms-zoom: 1;
|
||||
zoom: 1
|
||||
}
|
||||
.table-flip-scroll *:first-child+html .flip-content,
|
||||
.table-flip-scroll *:first-child+html .flip-header {
|
||||
-ms-zoom: 1;
|
||||
zoom: 1
|
||||
}
|
||||
.table-flip-scroll table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
position: relative
|
||||
}
|
||||
.table-flip-scroll th,
|
||||
.table-flip-scroll td {
|
||||
margin: 0;
|
||||
vertical-align: top
|
||||
}
|
||||
.table-flip-scroll th:last-child,
|
||||
.table-flip-scroll td:last-child {
|
||||
border-bottom: 1px solid #ddd
|
||||
}
|
||||
.table-flip-scroll th {
|
||||
border: 0 !important;
|
||||
border-right: 1px solid #ddd !important;
|
||||
//font-size: 13px !important;
|
||||
//padding: 5px;
|
||||
width: auto !important;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
.table-flip-scroll td {
|
||||
display: block;
|
||||
text-align: left;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
}
|
||||
.table-flip-scroll thead {
|
||||
display: block;
|
||||
float: left
|
||||
}
|
||||
.table-flip-scroll thead tr {
|
||||
display: block;
|
||||
}
|
||||
.table-flip-scroll tbody {
|
||||
display: block;
|
||||
width: auto;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap
|
||||
}
|
||||
.table-flip-scroll tbody tr {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-left: -5px;
|
||||
border-left: 1px solid #ddd
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user