mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-05 05:10:16 +01:00
feat(angular-cli): integrate angular-cli (#989)
This commit is contained in:
hryb
Alexander Zhukov
parent
7b8a6f4e88
commit
523f44b746
138 changed files with 4507 additions and 7170 deletions
|
|
@ -1,10 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import 'style-loader!./buttons.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'buttons',
|
||||
templateUrl: './buttons.html',
|
||||
styleUrls: ['./buttons.scss']
|
||||
})
|
||||
export class Buttons {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,134 +1,136 @@
|
|||
.basic-btns {
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
h5 {
|
||||
line-height: 35px;
|
||||
font-size: 12px;
|
||||
&.row-sm {
|
||||
line-height: 30px;
|
||||
:host /deep/ .widgets {
|
||||
.basic-btns {
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
h5 {
|
||||
line-height: 35px;
|
||||
font-size: 12px;
|
||||
&.row-sm {
|
||||
line-height: 30px;
|
||||
}
|
||||
&.row-xs {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
&.row-xs {
|
||||
line-height: 22px;
|
||||
& > .row {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
& > .row {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-row {
|
||||
& > div {
|
||||
.btns-row {
|
||||
& > div {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-sm {
|
||||
.btn {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-md {
|
||||
.btn {
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-lg {
|
||||
.btn {
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.btn-list {
|
||||
margin: 0 0 0 -18px;
|
||||
padding: 0;
|
||||
padding-top: 6px;
|
||||
clear: both;
|
||||
li {
|
||||
margin: 0px 0 12px 18px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-wrapper {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-sm {
|
||||
.btn {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-md {
|
||||
.btn {
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-lg {
|
||||
.btn {
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.btn-list {
|
||||
margin: 0 0 0 -18px;
|
||||
padding: 0;
|
||||
padding-top: 6px;
|
||||
clear: both;
|
||||
li {
|
||||
margin: 0px 0 12px 18px;
|
||||
$btn-icon-size: 34px;
|
||||
.btn-icon {
|
||||
width: $btn-icon-size;
|
||||
height: $btn-icon-size;
|
||||
line-height: $btn-icon-size;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group-example {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-toolbar-example {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-wrapper {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
$btn-icon-size: 34px;
|
||||
.btn-icon {
|
||||
width: $btn-icon-size;
|
||||
height: $btn-icon-size;
|
||||
line-height: $btn-icon-size;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group-example {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-toolbar-example {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.progress-buttons-container {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
span.button-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
.progress-buttons-container {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
span.button-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.row + .row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.row + .row {
|
||||
margin-top: 30px;
|
||||
|
||||
.button-panel {
|
||||
height: 315px;
|
||||
.btn {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.large-buttons-panel {
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
.button-panel.df-size-button-panel {
|
||||
.btn-xs {
|
||||
width: 60px;
|
||||
}
|
||||
.btn-sm {
|
||||
width: 90px;
|
||||
}
|
||||
.btn-mm {
|
||||
width: 120px;
|
||||
}
|
||||
.btn-md {
|
||||
width: 150px;
|
||||
}
|
||||
.btn-xm {
|
||||
width: 175px;
|
||||
}
|
||||
.btn-lg {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.btn-group.flex-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.button-panel {
|
||||
height: 315px;
|
||||
.btn {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.large-buttons-panel {
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
.button-panel.df-size-button-panel {
|
||||
.btn-xs {
|
||||
width: 60px;
|
||||
}
|
||||
.btn-sm {
|
||||
width: 90px;
|
||||
}
|
||||
.btn-mm {
|
||||
width: 120px;
|
||||
}
|
||||
.btn-md {
|
||||
width: 150px;
|
||||
}
|
||||
.btn-xm {
|
||||
width: 175px;
|
||||
}
|
||||
.btn-lg {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.btn-group.flex-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import 'style-loader!./grid.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'grid',
|
||||
templateUrl: './grid.html',
|
||||
styleUrls: ['./grid.scss']
|
||||
})
|
||||
export class Grid {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
.show-grid div[class^=col-]{
|
||||
:host /deep/.show-grid div[class^=col-]{
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid-h{
|
||||
:host /deep/.grid-h{
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
&:first-child{
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {IconsService} from './icons.service';
|
||||
|
||||
import 'style-loader!./icons.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'icons',
|
||||
templateUrl: './icons.html',
|
||||
styleUrls: ['./icons.scss']
|
||||
})
|
||||
export class Icons {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,123 +1,126 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
@mixin icon-hover($color) {
|
||||
i:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
:host /deep/ .widgets {
|
||||
|
||||
.icons-list {
|
||||
& > div {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
i {
|
||||
font-weight: $font-normal;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
@mixin icon-hover($color) {
|
||||
i:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include icon-hover($primary);
|
||||
}
|
||||
&.success {
|
||||
@include icon-hover($success);
|
||||
}
|
||||
&.warning {
|
||||
@include icon-hover($warning);
|
||||
}
|
||||
&.danger {
|
||||
@include icon-hover($danger);
|
||||
}
|
||||
}
|
||||
.icons-list {
|
||||
& > div {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
i {
|
||||
font-weight: $font-normal;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.see-all-icons {
|
||||
float: right;
|
||||
}
|
||||
&.primary {
|
||||
@include icon-hover($primary);
|
||||
}
|
||||
&.success {
|
||||
@include icon-hover($success);
|
||||
}
|
||||
&.warning {
|
||||
@include icon-hover($warning);
|
||||
}
|
||||
&.danger {
|
||||
@include icon-hover($danger);
|
||||
}
|
||||
}
|
||||
|
||||
.awesomeIcons {
|
||||
height: 308px;
|
||||
}
|
||||
a.see-all-icons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.kameleon-row {
|
||||
display: inline-block;
|
||||
min-width: 102px;
|
||||
width: 20%;
|
||||
.kameleon-icon {
|
||||
padding: 0 10px;
|
||||
.awesomeIcons {
|
||||
height: 308px;
|
||||
}
|
||||
|
||||
.kameleon-row {
|
||||
display: inline-block;
|
||||
min-width: 102px;
|
||||
width: 20%;
|
||||
.kameleon-icon {
|
||||
padding: 0 10px;
|
||||
img {
|
||||
width: 81px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.kameleon-row {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.kameleon-row {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.kameleon-row {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon-tabs {
|
||||
max-width: 84px;
|
||||
img {
|
||||
width: 81px;
|
||||
width: 100%;
|
||||
min-width: 81px;
|
||||
min-height: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setImgBg($color) {
|
||||
img {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.with-round-bg {
|
||||
margin-bottom: 6px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@include setImgBg($default);
|
||||
|
||||
&.success {
|
||||
@include setImgBg($success);
|
||||
}
|
||||
&.danger {
|
||||
@include setImgBg($danger);
|
||||
}
|
||||
&.warning {
|
||||
@include setImgBg($warning);
|
||||
}
|
||||
&.info {
|
||||
@include setImgBg($info);
|
||||
}
|
||||
&.primary {
|
||||
@include setImgBg($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.kameleon-row {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.kameleon-row {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.kameleon-row {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon-tabs {
|
||||
max-width: 84px;
|
||||
img {
|
||||
width: 100%;
|
||||
min-width: 81px;
|
||||
min-height: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setImgBg($color) {
|
||||
img {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.with-round-bg {
|
||||
margin-bottom: 6px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@include setImgBg($default);
|
||||
|
||||
&.success {
|
||||
@include setImgBg($success);
|
||||
}
|
||||
&.danger {
|
||||
@include setImgBg($danger);
|
||||
}
|
||||
&.warning {
|
||||
@include setImgBg($warning);
|
||||
}
|
||||
&.info {
|
||||
@include setImgBg($info);
|
||||
}
|
||||
&.primary {
|
||||
@include setImgBg($primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue