mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-24 18:26:11 +01:00
refactor(theme): massive theme refactoring to use mixins instead of variables
This commit is contained in:
nixa
parent
0420354b9c
commit
cfeb3cf125
19 changed files with 151 additions and 230 deletions
75
src/app/@theme/layouts/one-column/one-column.layout.scss
Normal file
75
src/app/@theme/layouts/one-column/one-column.layout.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
@import '~@nga/theme/styles_new/all';
|
||||
|
||||
// TODO move colors to theme
|
||||
@include nga-install-component() {
|
||||
/deep/ {
|
||||
.layout {
|
||||
|
||||
nga-layout-header > nav {
|
||||
|
||||
.left {
|
||||
color: nga-theme(color-inverse);
|
||||
|
||||
a {
|
||||
color: nga-theme(color-inverse) !important;
|
||||
|
||||
&:hover {
|
||||
color: nga-theme(color-secondary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right i {
|
||||
color: #7d85b2;
|
||||
|
||||
&:hover {
|
||||
color: nga-theme(color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-sidebar {
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
|
||||
.scrollable {
|
||||
//box-shadow: $layout-shadow;
|
||||
margin-top: nga-theme(layout-padding);
|
||||
border-top-right-radius: nga-theme(radius);
|
||||
}
|
||||
}
|
||||
|
||||
nga-layout-footer > nav {
|
||||
$footer-link: nga-theme(color-secondary);
|
||||
|
||||
border: none !important;
|
||||
padding: 1.25rem;
|
||||
|
||||
.created-by {
|
||||
color: #7d85b2;
|
||||
|
||||
a {
|
||||
color: #7d85b2 !important;
|
||||
|
||||
&:hover {
|
||||
color: nga-theme(color-secondary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-menu {
|
||||
> ul > li:first-child {
|
||||
a {
|
||||
background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
|
||||
box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
|
||||
margin: 1rem;
|
||||
border-radius: nga-theme(radius);
|
||||
height: 3.5rem;
|
||||
color: nga-theme(color-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-one-column-layout',
|
||||
styleUrls: ['./one-column.layout.scss'],
|
||||
template: `
|
||||
<nga-layout>
|
||||
<nga-layout-header fixed>
|
||||
|
|
|
|||
|
|
@ -1,218 +0,0 @@
|
|||
@mixin ngx-buttons-theme($theme-name) {
|
||||
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
.states-container .state-container {
|
||||
display: flex;
|
||||
|
||||
.state-value {
|
||||
width: $btn-component-size;
|
||||
height: $btn-component-size;
|
||||
border-radius: $btn-component-bd-radius;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
height: $btn-component-size;
|
||||
}
|
||||
|
||||
.state-details .header {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.state-details .subheader {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.example-container .container-title {
|
||||
margin-bottom: 14px;
|
||||
font-family: Exo;
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
@mixin btn-component($bevel-bd, $glow, $shadow) {
|
||||
.bevel-border {
|
||||
box-shadow: 0 3px 0 0 $bevel-bd;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 4px 10px 0 $shadow;
|
||||
}
|
||||
|
||||
.glow {
|
||||
box-shadow: 0 2px 12px 0 $glow;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.primary-container {
|
||||
.gradient {
|
||||
@include primary-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
|
||||
}
|
||||
|
||||
.example-container .states-container.warning-container {
|
||||
.gradient {
|
||||
@include warning-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
|
||||
}
|
||||
|
||||
.example-container .states-container.success-container {
|
||||
.gradient {
|
||||
@include success-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
|
||||
}
|
||||
|
||||
.example-container .states-container.info-container {
|
||||
.gradient {
|
||||
@include info-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
|
||||
}
|
||||
|
||||
.example-container .states-container.danger-container {
|
||||
.gradient {
|
||||
@include danger-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.border {
|
||||
color: $btn-secondary-color;
|
||||
border: $btn-secondary-border-width solid $btn-secondary-border;
|
||||
}
|
||||
|
||||
@include btn-component($btn-secondary-bevel-bd, $btn-secondary-glow, $btn-secondary-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.default-buttons {
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
@mixin btn-bg($background) {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.example-container .states-container.primary-container {
|
||||
.original {
|
||||
@include btn-bg($btn-primary-bg);
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg($btn-primary-bg-hover-focus);
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg($btn-primary-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.warning-container {
|
||||
.original {
|
||||
@include btn-bg($btn-warning-bg);
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg($btn-warning-bg-hover-focus);
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg($btn-warning-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.success-container {
|
||||
.original {
|
||||
@include btn-bg($btn-success-bg);
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg($btn-success-bg-hover-focus);
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg($btn-success-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.info-container {
|
||||
.original {
|
||||
@include btn-bg($btn-info-bg);
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg($btn-info-bg-hover-focus);
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg($btn-info-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.danger-container {
|
||||
.original {
|
||||
@include btn-bg($btn-danger-bg);
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg($btn-danger-bg-hover-focus);
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg($btn-danger-bg-active);
|
||||
}
|
||||
}
|
||||
|
||||
.example-container .states-container.secondary-container {
|
||||
.original {
|
||||
@include btn-bg($btn-secondary-border);
|
||||
}
|
||||
|
||||
.hover {
|
||||
@include btn-bg($btn-secondary-bg-hover-focus);
|
||||
}
|
||||
|
||||
.active {
|
||||
@include btn-bg($btn-secondary-bg-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-groups {
|
||||
display: flex !important;
|
||||
|
||||
.container-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-family: Exo;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
@mixin ngx-layout-theme($theme-name) {
|
||||
|
||||
.layout {
|
||||
|
||||
nga-layout-header > nav {
|
||||
|
||||
.left {
|
||||
color: $nga-color-inverse;
|
||||
|
||||
a {
|
||||
color: $nga-color-inverse !important;
|
||||
|
||||
&:hover {
|
||||
color: $nga-color-secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right i {
|
||||
color: #7d85b2;
|
||||
|
||||
&:hover {
|
||||
color: $nga-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-sidebar {
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
|
||||
.scrollable {
|
||||
//box-shadow: $layout-shadow;
|
||||
margin-top: $nga-layout-padding;
|
||||
border-top-right-radius: $nga-radius;
|
||||
}
|
||||
}
|
||||
|
||||
nga-layout-footer > nav {
|
||||
$footer-link: $nga-color-secondary;
|
||||
|
||||
border: none !important;
|
||||
padding: 1.25rem;
|
||||
|
||||
.created-by {
|
||||
color: #7d85b2;
|
||||
|
||||
a {
|
||||
color: #7d85b2 !important;
|
||||
|
||||
&:hover {
|
||||
color: $nga-color-secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-menu {
|
||||
> ul > li:first-child {
|
||||
a {
|
||||
background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
|
||||
box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
|
||||
margin: 1rem;
|
||||
border-radius: $nga-radius;
|
||||
height: 3.5rem;
|
||||
color: $nga-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@mixin ngx-misc-theme($theme-name) {
|
||||
agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
$nga-theme: 'cosmic';
|
||||
|
||||
@import '~@nga/theme/styles/themes/cosmic/theme';
|
||||
@import './layout';
|
||||
@import './buttons';
|
||||
@import './misc';
|
||||
|
||||
@include nga-theme-install($nga-theme) {
|
||||
@include ngx-layout-theme($nga-theme);
|
||||
@include ngx-buttons-theme($nga-theme);
|
||||
@include ngx-misc-theme($nga-theme);
|
||||
};
|
||||
|
||||
@import '~@nga/auth/styles/themes/cosmic/theme';
|
||||
@include nga-auth-install($nga-theme);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@mixin ngx-buttons-theme($theme-name) {
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@mixin ngx-misc-theme($theme-name) {
|
||||
agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
$nga-theme: 'default';
|
||||
|
||||
@import '~@nga/theme/styles/themes/default/theme';
|
||||
@import './buttons';
|
||||
@import './misc';
|
||||
|
||||
@include nga-theme-install($nga-theme) {
|
||||
@include ngx-buttons-theme($nga-theme);
|
||||
@include ngx-misc-theme($nga-theme);
|
||||
};
|
||||
|
||||
@import '~@nga/auth/styles/themes/default/theme';
|
||||
@include nga-auth-install($nga-theme);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@mixin ngx-buttons-theme($theme-name) {
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@mixin ngx-misc-theme($theme-name) {
|
||||
agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
$nga-theme: 'light';
|
||||
|
||||
@import '~@nga/theme/styles/themes/light/theme';
|
||||
@import './buttons';
|
||||
@import './misc';
|
||||
|
||||
@include nga-theme-install($nga-theme) {
|
||||
@include ngx-buttons-theme($nga-theme);
|
||||
@include ngx-misc-theme($nga-theme);
|
||||
};
|
||||
|
||||
@import '~@nga/auth/styles/themes/light/theme';
|
||||
@include nga-auth-install($nga-theme);
|
||||
2
src/app/@theme/styles/themes.scss
Normal file
2
src/app/@theme/styles/themes.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import '~@nga/theme/styles_new/all';
|
||||
@include nga-install();
|
||||
Loading…
Add table
Add a link
Reference in a new issue