Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(theme): massive theme refactoring to use mixins instead of variables

Browse source
This commit is contained in:
nixa 2017-06-08 23:06:33 +03:00
parent 0420354b9c
commit cfeb3cf125
19 changed files with 151 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/app/@theme/layouts/one-column/one-column.layout.scss Normal file
View 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);
}
}
}
}
}

1
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -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>

71
src/app/@theme/styles/cosmic/_layout.scss
View file

@ -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;
}
}
}
}

15
src/app/@theme/styles/cosmic/_misc.scss
View file

@ -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);
}
}

21
src/app/@theme/styles/cosmic/theme.scss
View file

@ -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);

2
src/app/@theme/styles/default/_buttons.scss
View file

@ -1,2 +0,0 @@
@mixin ngx-buttons-theme($theme-name) {
}

15
src/app/@theme/styles/default/_misc.scss
View file

@ -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);
}
}

19
src/app/@theme/styles/default/theme.scss
View file

@ -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);

2
src/app/@theme/styles/light/_buttons.scss
View file

@ -1,2 +0,0 @@
@mixin ngx-buttons-theme($theme-name) {
}

15
src/app/@theme/styles/light/_misc.scss
View file

@ -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);
}
}

19
src/app/@theme/styles/light/theme.scss
View file

@ -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
View file

@ -0,0 +1,2 @@
@import '~@nga/theme/styles_new/all';
@include nga-install();

8
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -1,3 +1,9 @@
:host {
@import '~@nga/theme/styles_new/all';
@include nga-install-component() {
display: block;
/deep/ .echart {
height: calc(#{nga-theme(card-height-xmedium)} - 50px);
}
}

7
src/app/pages/maps/gmaps/gmaps.component.scss Normal file
View file

@ -0,0 +1,7 @@
@import '~@nga/theme/styles_new/all';
@include nga-install-component() {
/deep/ agm-map .agm-map-container-inner {
height: calc(#{nga-theme(card-height-xmedium)} - 50px);
}
}

1
src/app/pages/maps/gmaps/gmaps.component.ts
View file

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-gmaps',
styleUrls: ['./gmaps.component.scss'],
templateUrl: './gmaps.component.html',
})
export class GmapsComponent {

8
src/app/pages/maps/leaflet/leaflet.component.scss
View file

@ -1,3 +1,9 @@
:host {
@import '~@nga/theme/styles_new/all';
@include nga-install-component() {
display: block;
/deep/ .leaflet-container {
height: calc(#{nga-theme(card-height-xmedium)} - 50px);
}
}

4
src/app/pages/pages.component.ts
View file

@ -1,8 +1,6 @@
import { Component } from '@angular/core';
import 'style-loader!../@theme/styles/cosmic/theme.scss';
import 'style-loader!../@theme/styles/light/theme.scss';
import 'style-loader!../@theme/styles/default/theme.scss';
import 'style-loader!../@theme/styles/themes.scss';
@Component({
selector: 'ngx-pages',

95
src/app/@theme/styles/cosmic/_buttons.scss → src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
View file

@ -1,4 +1,24 @@
@mixin ngx-buttons-theme($theme-name) {
@import '~@nga/theme/styles_new/all';
@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;
}
}
@mixin btn-bg($background) {
background-color: $background;
}
@include nga-install-component() {
$btn-component-size: 50px;
$btn-component-bd-radius: 12px;
@ -37,8 +57,8 @@
}
.example-container .container-title {
font-family: nga-theme(font-secondary);
margin-bottom: 14px;
font-family: Exo;
}
.example-container .container-btn {
@ -46,26 +66,13 @@
}
.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);
@include btn-component(nga-theme(btn-primary-bevel-bd), nga-theme(btn-primary-glow), nga-theme(btn-primary-shadow));
}
.example-container .states-container.warning-container {
@ -73,7 +80,7 @@
@include warning-gradient();
}
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
@include btn-component(nga-theme(btn-warning-bevel-bd), nga-theme(btn-warning-glow), nga-theme(btn-warning-shadow));
}
.example-container .states-container.success-container {
@ -81,7 +88,7 @@
@include success-gradient();
}
@include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
@include btn-component(nga-theme(btn-success-bevel-bd), nga-theme(btn-success-glow), nga-theme(btn-success-shadow));
}
.example-container .states-container.info-container {
@ -89,7 +96,7 @@
@include info-gradient();
}
@include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
@include btn-component(nga-theme(btn-info-bevel-bd), nga-theme(btn-info-glow), nga-theme(btn-info-shadow));
}
.example-container .states-container.danger-container {
@ -97,16 +104,16 @@
@include danger-gradient();
}
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
@include btn-component(nga-theme(btn-danger-bevel-bd), nga-theme(btn-danger-glow), nga-theme(btn-danger-shadow));
}
.example-container .states-container.secondary-container {
.border {
color: $btn-secondary-color;
border: $btn-secondary-border-width solid $btn-secondary-border;
color: nga-theme(btn-secondary-color);
border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
}
@include btn-component($btn-secondary-bevel-bd, $btn-secondary-glow, $btn-secondary-shadow);
@include btn-component(nga-theme(btn-secondary-bevel-bd), nga-theme(btn-secondary-glow), nga-theme(btn-secondary-shadow));
}
}
@ -114,91 +121,87 @@
$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);
@include btn-bg(nga-theme(btn-primary-bg));
}
.hover {
@include btn-bg($btn-primary-bg-hover-focus);
@include btn-bg(nga-theme(btn-primary-bg-hover-focus));
}
.active {
@include btn-bg($btn-primary-bg-active);
@include btn-bg(nga-theme(btn-primary-bg-active));
}
}
.example-container .states-container.warning-container {
.original {
@include btn-bg($btn-warning-bg);
@include btn-bg(nga-theme(btn-warning-bg));
}
.hover {
@include btn-bg($btn-warning-bg-hover-focus);
@include btn-bg(nga-theme(btn-warning-bg-hover-focus));
}
.active {
@include btn-bg($btn-warning-bg-active);
@include btn-bg(nga-theme(btn-warning-bg-active));
}
}
.example-container .states-container.success-container {
.original {
@include btn-bg($btn-success-bg);
@include btn-bg(nga-theme(btn-success-bg));
}
.hover {
@include btn-bg($btn-success-bg-hover-focus);
@include btn-bg(nga-theme(btn-success-bg-hover-focus));
}
.active {
@include btn-bg($btn-success-bg-active);
@include btn-bg(nga-theme(btn-success-bg-active));
}
}
.example-container .states-container.info-container {
.original {
@include btn-bg($btn-info-bg);
@include btn-bg(nga-theme(btn-info-bg));
}
.hover {
@include btn-bg($btn-info-bg-hover-focus);
@include btn-bg(nga-theme(btn-info-bg-hover-focus));
}
.active {
@include btn-bg($btn-info-bg-active);
@include btn-bg(nga-theme(btn-info-bg-active));
}
}
.example-container .states-container.danger-container {
.original {
@include btn-bg($btn-danger-bg);
@include btn-bg(nga-theme(btn-danger-bg));
}
.hover {
@include btn-bg($btn-danger-bg-hover-focus);
@include btn-bg(nga-theme(btn-danger-bg-hover-focus));
}
.active {
@include btn-bg($btn-danger-bg-active);
@include btn-bg(nga-theme(btn-danger-bg-active));
}
}
.example-container .states-container.secondary-container {
.original {
@include btn-bg($btn-secondary-border);
@include btn-bg(nga-theme(btn-secondary-border));
}
.hover {
@include btn-bg($btn-secondary-bg-hover-focus);
@include btn-bg(nga-theme(btn-secondary-bg-hover-focus));
}
.active {
@include btn-bg($btn-secondary-bg-active);
@include btn-bg(nga-theme(btn-secondary-bg-active));
}
}
}
@ -207,12 +210,12 @@
display: flex !important;
.container-title {
font-family: nga-theme(font-secondary);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: white;
font-family: Exo;
}
}
}

1
src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
View file

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-hero-buttons',
styleUrls: ['./hero-buttons.component.scss'],
templateUrl: './hero-buttons.component.html',
})
export class HeroButtonComponent {