mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-05 13:20: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,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {ChartistJsService} from './chartistJs.service';
|
||||
import 'style-loader!./chartistJs.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'chartist-js',
|
||||
templateUrl: './chartistJs.html',
|
||||
styleUrls: ['./chartistJs.scss']
|
||||
})
|
||||
|
||||
export class ChartistJs {
|
||||
|
|
|
|||
|
|
@ -1,71 +1,73 @@
|
|||
@import "../../../../theme/sass/conf/conf";
|
||||
|
||||
:host /deep/ {
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
|
||||
.ct-label{
|
||||
color: $default-text;
|
||||
opacity: 0.9;
|
||||
fill: $default-text;
|
||||
}
|
||||
|
||||
.ct-chart .ct-label{
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ct-chart svg{
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ct-series-a {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $primary;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-b {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-c {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-d {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $warning;
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ct-series-e {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $info;
|
||||
.ct-label {
|
||||
color: $default-text;
|
||||
opacity: 0.9;
|
||||
fill: $default-text;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $info;
|
||||
|
||||
.ct-chart .ct-label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ct-chart svg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ct-series-a {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $primary;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-b {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-c {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-d {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $warning;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ct-series-e {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $info;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $info;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-bar .ct-bar {
|
||||
stroke-width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-bar .ct-bar{
|
||||
stroke-width: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import {Component} from '@angular/core';
|
||||
import * as jQuery from 'jquery';
|
||||
|
||||
import {CalendarService} from './calendar.service';
|
||||
import 'style-loader!./calendar.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'calendar',
|
||||
templateUrl: './calendar.html'
|
||||
templateUrl: './calendar.html',
|
||||
styleUrls: ['./calendar.scss']
|
||||
})
|
||||
export class Calendar {
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {FeedService} from './feed.service';
|
||||
|
||||
import 'style-loader!./feed.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'feed',
|
||||
templateUrl: './feed.html'
|
||||
templateUrl: './feed.html',
|
||||
styleUrls: ['./feed.scss']
|
||||
})
|
||||
export class Feed {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,226 +1,217 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
.feed-panel .card-body{
|
||||
padding: 10px 0;
|
||||
}
|
||||
:host /deep/ .feed-messages-container {
|
||||
|
||||
.feed-message {
|
||||
$text-message-color: $content-text;
|
||||
$video-message-color: $danger;
|
||||
$image-message-color: $success;
|
||||
$geo-message-color: $primary;
|
||||
padding: 10px 0 ;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.12);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
> img, .media-icon {
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.feed-message {
|
||||
$text-message-color: $content-text;
|
||||
$video-message-color: $danger;
|
||||
$image-message-color: $success;
|
||||
$geo-message-color: $primary;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sub-photo-icon {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
&:after {
|
||||
content: '';
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
> img, .media-icon {
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sub-photo-icon {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: contain;
|
||||
}
|
||||
&.video-message {
|
||||
background: $video-message-color;
|
||||
&:after {
|
||||
@include bg-image('theme/icon/feed/feed-video.svg');
|
||||
}
|
||||
}
|
||||
&.image-message {
|
||||
background: $image-message-color;
|
||||
&:after {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-top: 1px;
|
||||
margin-left: 1px;
|
||||
border-radius: 5px;
|
||||
@include bg-image('theme/icon/feed/feed-image.svg');
|
||||
}
|
||||
}
|
||||
&.geo-message {
|
||||
background: $geo-message-color;
|
||||
padding: 4px;
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@include bg-image('theme/icon/feed/feed-location.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
&.video-message {
|
||||
background: $video-message-color;
|
||||
&:after {
|
||||
@include bg-image('theme/icon/feed/feed-video.svg');
|
||||
}
|
||||
}
|
||||
&.image-message {
|
||||
background: $image-message-color;
|
||||
&:after {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-top: 1px;
|
||||
margin-left: 1px;
|
||||
border-radius: 5px;
|
||||
@include bg-image('theme/icon/feed/feed-image.svg');
|
||||
}
|
||||
}
|
||||
&.geo-message {
|
||||
background: $geo-message-color;
|
||||
&:after {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@include bg-image('theme/icon/feed/feed-location.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-photo-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: -2px;
|
||||
bottom: -4px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-block {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
margin: 0 0 0 80px;
|
||||
padding: 5px 20px;
|
||||
color: $text-message-color;
|
||||
width: 280px;
|
||||
height: 70px;
|
||||
|
||||
&.text-message {
|
||||
font-size: 12px;
|
||||
width: inherit;
|
||||
max-width: calc(100% - 80px);
|
||||
height: inherit;
|
||||
min-height: 60px;
|
||||
&:before {
|
||||
display: block;
|
||||
.sub-photo-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: -2px;
|
||||
bottom: -4px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.message-content {
|
||||
}
|
||||
|
||||
.text-block {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
margin: 0 0 0 80px;
|
||||
padding: 5px 20px;
|
||||
color: $text-message-color;
|
||||
width: 280px;
|
||||
height: 70px;
|
||||
|
||||
&.text-message {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
font-weight: $font-light;
|
||||
width: inherit;
|
||||
max-width: calc(100% - 80px);
|
||||
height: inherit;
|
||||
min-height: 60px;
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
.message-content {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
font-weight: $font-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.small-message {
|
||||
width: 155px;
|
||||
height: 145px;
|
||||
.preview {
|
||||
bottom: 0;
|
||||
top: initial;
|
||||
height: 87px;
|
||||
img {
|
||||
width: 155px;
|
||||
&.small-message {
|
||||
width: 155px;
|
||||
height: 145px;
|
||||
.preview {
|
||||
bottom: 0;
|
||||
top: initial;
|
||||
height: 87px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
img {
|
||||
width: 155px;
|
||||
height: 87px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-size: 12px;
|
||||
padding-bottom: 5px;
|
||||
.author {
|
||||
font-size: 13px;
|
||||
padding-right: 5px;
|
||||
.message-header {
|
||||
font-size: 12px;
|
||||
padding-bottom: 5px;
|
||||
.author {
|
||||
font-size: 13px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.message-content {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
transition: 0s linear all;
|
||||
display: inline-block;
|
||||
img {
|
||||
padding-top: 10px;
|
||||
.preview {
|
||||
transition: 0s linear all;
|
||||
display: inline-block;
|
||||
img {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: none!important;
|
||||
left: 0;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
color: $help-text;
|
||||
margin-bottom: 5px;
|
||||
.post-time {
|
||||
float: left;
|
||||
}
|
||||
.ago-time {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
color: $help-text;
|
||||
margin-bottom: 5px;
|
||||
.post-time {
|
||||
float: left;
|
||||
}
|
||||
.ago-time {
|
||||
float: right;
|
||||
.line-clamp {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
position: relative;
|
||||
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.line-clamp:after {
|
||||
content: '...';
|
||||
text-align: right;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 25%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: calc(1em * 1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.line-clamp
|
||||
{
|
||||
display : block;
|
||||
display : -webkit-box;
|
||||
-webkit-box-orient : vertical;
|
||||
position : relative;
|
||||
|
||||
line-height : 1.2;
|
||||
overflow : hidden;
|
||||
text-overflow : ellipsis;
|
||||
padding : 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.line-clamp:after
|
||||
{
|
||||
content : '...';
|
||||
text-align : right;
|
||||
bottom : 0;
|
||||
right : 0;
|
||||
width : 25%;
|
||||
display : block;
|
||||
position : absolute;
|
||||
height : calc(1em * 1.2);
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
.line-clamp:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.line-clamp-1 {
|
||||
-webkit-line-clamp: 1;
|
||||
height: calc(1em * 1.2 * 1);
|
||||
}
|
||||
.line-clamp-2 {
|
||||
-webkit-line-clamp: 2;
|
||||
height: calc(1em * 1.2 * 2);
|
||||
}
|
||||
.line-clamp-3 {
|
||||
-webkit-line-clamp: 3;
|
||||
height: calc(1em * 1.2 * 3);
|
||||
}
|
||||
.line-clamp-4 {
|
||||
-webkit-line-clamp: 4;
|
||||
height: calc(1em * 1.2 * 4);
|
||||
}
|
||||
.line-clamp-5 {
|
||||
-webkit-line-clamp: 5;
|
||||
height: calc(1em * 1.2 * 5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@supports (-webkit-line-clamp: 1)
|
||||
{
|
||||
.line-clamp:after
|
||||
{
|
||||
display : none !important;
|
||||
}
|
||||
}
|
||||
.line-clamp-1
|
||||
{
|
||||
-webkit-line-clamp : 1;
|
||||
height : calc(1em * 1.2 * 1);
|
||||
}
|
||||
.line-clamp-2
|
||||
{
|
||||
-webkit-line-clamp : 2;
|
||||
height : calc(1em * 1.2 * 2);
|
||||
}
|
||||
.line-clamp-3
|
||||
{
|
||||
-webkit-line-clamp : 3;
|
||||
height : calc(1em * 1.2 * 3);
|
||||
}
|
||||
.line-clamp-4
|
||||
{
|
||||
-webkit-line-clamp : 4;
|
||||
height : calc(1em * 1.2 * 4);
|
||||
}
|
||||
.line-clamp-5
|
||||
{
|
||||
-webkit-line-clamp : 5;
|
||||
height : calc(1em * 1.2 * 5);
|
||||
/deep/.feed-panel .card-body {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {LineChartService} from './lineChart.service';
|
||||
|
||||
import 'style-loader!./lineChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'line-chart',
|
||||
templateUrl: './lineChart.html'
|
||||
templateUrl: './lineChart.html',
|
||||
styleUrls: ['./lineChart.scss']
|
||||
})
|
||||
export class LineChart {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
.dashboard-line-chart {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
margin-top: -10px;
|
||||
:host {
|
||||
/deep/.dashboard-line-chart {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import {Component} from '@angular/core';
|
|||
import {PieChartService} from './pieChart.service';
|
||||
|
||||
import 'easy-pie-chart/dist/jquery.easypiechart.js';
|
||||
import 'style-loader!./pieChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'pie-chart',
|
||||
templateUrl: './pieChart.html'
|
||||
templateUrl: './pieChart.html',
|
||||
styleUrls: ['./pieChart.scss']
|
||||
})
|
||||
// TODO: move easypiechart to component
|
||||
export class PieChart {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../../theme/sass/conf/conf";
|
||||
|
||||
.pie-charts {
|
||||
:host /deep/.pie-charts {
|
||||
color: $content-text;
|
||||
|
||||
.pie-chart-item-container {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
import 'style-loader!./popularApp.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'popular-app',
|
||||
templateUrl: './popularApp.html'
|
||||
templateUrl: './popularApp.html',
|
||||
styleUrls: ['./popularApp.scss']
|
||||
})
|
||||
export class PopularApp {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../../theme/sass/conf/conf";
|
||||
|
||||
.card.popular-app {
|
||||
/deep/.card.popular-app {
|
||||
&>.card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -50,6 +50,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.blur .card.popular-app .popular-app-img-container {
|
||||
/deep/.blur .card.popular-app .popular-app-img-container {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import {BaThemeConfigProvider} from '../../../theme';
|
|||
|
||||
import {TodoService} from './todo.service';
|
||||
|
||||
import 'style-loader!./todo.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'todo',
|
||||
templateUrl: './todo.html'
|
||||
templateUrl: './todo.html',
|
||||
styleUrls: ['./todo.scss']
|
||||
})
|
||||
export class Todo {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,105 +1,108 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
input.task-todo {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
:host /deep/.task-todo-container {
|
||||
|
||||
ul.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.placeholder, .ui-sortable-placeholder {
|
||||
input.task-todo {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
li {
|
||||
margin: 0 0 -1px 0;
|
||||
padding: 12px;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
border: 1px solid $input-border;
|
||||
cursor: grab;
|
||||
height: 42px;
|
||||
i.remove-todo {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
right: 12px;
|
||||
font-size: 32px;
|
||||
transition: color 0.2s;
|
||||
color: rgba($input-border, 0.5);
|
||||
visibility: hidden;
|
||||
line-height: 42px;
|
||||
&:hover {
|
||||
color: $input-border;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
i.remove-todo {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.todo-text {
|
||||
color: $content-text;
|
||||
}
|
||||
&:before {
|
||||
background: $input-border !important;
|
||||
}
|
||||
ul.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.placeholder, .ui-sortable-placeholder {
|
||||
}
|
||||
|
||||
i.mark {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
li {
|
||||
margin: 0 0 -1px 0;
|
||||
padding: 12px;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
border: 1px solid $input-border;
|
||||
cursor: grab;
|
||||
height: 42px;
|
||||
min-width: 4px;
|
||||
background: $input-border;
|
||||
cursor: pointer;
|
||||
transition: min-width 0.3s ease-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
i.mark {
|
||||
min-width: 40px;
|
||||
}
|
||||
label.todo-checkbox > span {
|
||||
&:before {
|
||||
color: white;
|
||||
content: '\f10c';
|
||||
margin-right: 20px;
|
||||
transition: margin-right 0.1s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
float: none;
|
||||
i.remove-todo {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
right: 12px;
|
||||
font-size: 32px;
|
||||
transition: color 0.2s;
|
||||
color: rgba($input-border, 0.5);
|
||||
visibility: hidden;
|
||||
line-height: 42px;
|
||||
&:hover {
|
||||
color: $input-border;
|
||||
}
|
||||
}
|
||||
label.todo-checkbox > input:checked + span:before {
|
||||
content: '\f00c';
|
||||
&:hover {
|
||||
i.remove-todo {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.todo-text {
|
||||
color: $content-text;
|
||||
}
|
||||
&:before {
|
||||
background: $input-border !important;
|
||||
}
|
||||
}
|
||||
|
||||
i.mark {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
height: 42px;
|
||||
min-width: 4px;
|
||||
background: $input-border;
|
||||
cursor: pointer;
|
||||
transition: min-width 0.3s ease-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
i.mark {
|
||||
min-width: 40px;
|
||||
}
|
||||
label.todo-checkbox > span {
|
||||
&:before {
|
||||
color: white;
|
||||
content: '\f10c';
|
||||
margin-right: 20px;
|
||||
transition: margin-right 0.1s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
label.todo-checkbox > input:checked + span:before {
|
||||
content: '\f00c';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.todo-checkbox {
|
||||
width: 100%;
|
||||
padding-right: 25px;
|
||||
min-height: 16px;
|
||||
cursor: pointer;
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
height: 16px;
|
||||
&:before {
|
||||
border: none;
|
||||
color: $help-text;
|
||||
transition: all 0.15s ease-out;
|
||||
label.todo-checkbox {
|
||||
width: 100%;
|
||||
padding-right: 25px;
|
||||
min-height: 16px;
|
||||
cursor: pointer;
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
height: 16px;
|
||||
&:before {
|
||||
border: none;
|
||||
color: $help-text;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-item-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.add-item-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ng2, .blur {
|
||||
/deep/.ng2, .blur {
|
||||
|
||||
.task-todo-container {
|
||||
.todo-panel.panel {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import {Component} from '@angular/core';
|
|||
import {TrafficChartService} from './trafficChart.service';
|
||||
import * as Chart from 'chart.js';
|
||||
|
||||
import 'style-loader!./trafficChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'traffic-chart',
|
||||
templateUrl: './trafficChart.html'
|
||||
templateUrl: './trafficChart.html',
|
||||
styleUrls: ['./trafficChart.scss']
|
||||
})
|
||||
|
||||
// TODO: move chart.js to it's own component
|
||||
|
|
|
|||
|
|
@ -1,205 +1,202 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
.channels-block {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.chart-bg {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
background-color: transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.ng2, .blur {
|
||||
/deep/ .ng2, /deep/ .blur {
|
||||
.traffic-chart .canvas-holder {
|
||||
border: 15px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.channels-info {
|
||||
display: inline-block;
|
||||
width: calc(100% - 370px);
|
||||
margin-left: 70px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.small-container {
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.channels-info-item {
|
||||
p {
|
||||
margin-bottom: 9px;
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.channel-number {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-chart {
|
||||
width: 300px;
|
||||
:host /deep/ .channels-block {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-legend {
|
||||
display: inline-block;
|
||||
padding: 70px 0 0 0;
|
||||
width: 160px;
|
||||
}
|
||||
.chart-bg {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.traffic-legend ul.doughnut-legend {
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 16px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 120px;
|
||||
span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
.channels-info {
|
||||
display: inline-block;
|
||||
width: calc(100% - 370px);
|
||||
margin-left: 70px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.small-container {
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-text {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
//color: $danger;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: $content-text;
|
||||
.channels-info-item {
|
||||
p {
|
||||
margin-bottom: 9px;
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.channel-number {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-change {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.channel-progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background-color: $progress-background;
|
||||
box-shadow: none;
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: $progress-default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
top: 27px;
|
||||
border-radius: 15px;
|
||||
left: -45px;
|
||||
}
|
||||
|
||||
@media (max-width: $resM) {
|
||||
|
||||
.card.medium-card.traffic-panel {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.channels-info {
|
||||
display: block;
|
||||
width: calc(100% - 88px);
|
||||
margin-top: -65px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1465px) and (min-width: 1199px) {
|
||||
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
|
||||
.traffic-chart {
|
||||
width: 240px;
|
||||
width: 300px;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-legend {
|
||||
display: inline-block;
|
||||
padding: 70px 0 0 0;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.traffic-legend ul.doughnut-legend {
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 16px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 120px;
|
||||
span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
top: 30px;
|
||||
.traffic-text {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
//color: $danger;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: $content-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.chart-bg {
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
.channel-change {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.channel-progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background-color: $progress-background;
|
||||
box-shadow: none;
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: $progress-default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
top: 27px;
|
||||
border-radius: 15px;
|
||||
left: -45px;
|
||||
}
|
||||
|
||||
@media (max-width: $resM) {
|
||||
|
||||
.card.medium-card.traffic-panel {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.channels-info {
|
||||
display: block;
|
||||
width: calc(100% - 88px);
|
||||
margin-top: -65px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1465px) and (min-width: 1199px) {
|
||||
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
|
||||
.traffic-chart {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.chart-bg {
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {UsersMapService} from './usersMap.service';
|
||||
import 'style-loader!./usersMap.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'users-map',
|
||||
templateUrl: './usersMap.html'
|
||||
templateUrl: './usersMap.html',
|
||||
styleUrls: ['./usersMap.scss']
|
||||
})
|
||||
export class UsersMap {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.dashboard-users-map {
|
||||
:host /deep/.dashboard-users-map {
|
||||
width: 100%;
|
||||
height: 315px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import { Component } from '@angular/core';
|
|||
|
||||
import './ckeditor.loader';
|
||||
import 'ckeditor';
|
||||
import 'style-loader!./ckeditor.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ckeditor-component',
|
||||
templateUrl: './ckeditor.html',
|
||||
styleUrls: ['./ckeditor.scss']
|
||||
})
|
||||
|
||||
export class Ckeditor {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
.cke_source {
|
||||
/deep/.cke_source {
|
||||
color: $dropdown-text!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
|
||||
|
||||
import 'style-loader!./login.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'login',
|
||||
templateUrl: './login.html',
|
||||
styleUrls: ['./login.scss']
|
||||
})
|
||||
export class Login {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {BubbleMapsService} from './bubbleMaps.service';
|
||||
import 'style-loader!./bubbleMaps.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'bubble-maps',
|
||||
templateUrl: './bubbleMaps.html',
|
||||
styleUrls: ['./bubbleMaps.scss']
|
||||
})
|
||||
export class BubbleMaps {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bubble-maps {
|
||||
:host /deep/.bubble-maps {
|
||||
width: 100%;
|
||||
height: calc(100vh - 283px);
|
||||
font-size : 11px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component, ElementRef} from '@angular/core';
|
||||
|
||||
import 'leaflet-map';
|
||||
import 'style-loader!./leafletMaps.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'leaflet-maps',
|
||||
templateUrl: './leafletMaps.html'
|
||||
templateUrl: './leafletMaps.html',
|
||||
styleUrls: ['./leafletMaps.scss']
|
||||
})
|
||||
export class LeafletMaps {
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {LineMapsService} from './lineMaps.service';
|
||||
import 'style-loader!./lineMaps.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'line-maps',
|
||||
templateUrl: './lineMaps.html'
|
||||
templateUrl: './lineMaps.html',
|
||||
styleUrls: ['./lineMaps.scss']
|
||||
})
|
||||
export class LineMaps {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.line-maps {
|
||||
:host /deep/.line-maps {
|
||||
width: 100%;
|
||||
height: calc(100vh - 283px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
|
||||
import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
|
||||
|
||||
import 'style-loader!./register.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'register',
|
||||
templateUrl: './register.html',
|
||||
styleUrls: ['./register.scss']
|
||||
})
|
||||
export class Register {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import 'style-loader!./basicTables.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'basic-tables',
|
||||
templateUrl: './basicTables.html'
|
||||
templateUrl: './basicTables.html',
|
||||
styleUrls: ['./basicTables.scss']
|
||||
|
||||
})
|
||||
export class BasicTables {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.status-button {
|
||||
:host /deep/.status-button {
|
||||
width: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import { Component } from '@angular/core';
|
|||
import { SmartTablesService } from './smartTables.service';
|
||||
import { LocalDataSource } from 'ng2-smart-table';
|
||||
|
||||
import 'style-loader!./smartTables.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'smart-tables',
|
||||
templateUrl: './smartTables.html',
|
||||
styleUrls: ['./smartTables.scss']
|
||||
})
|
||||
export class SmartTables {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="widgets">
|
||||
|
||||
<div class="row">
|
||||
<ba-card title="Basic Example" baCardClass="with-scroll">
|
||||
<ba-card title="Basic Example" baCardClass="with-scroll" class="smart-table-container">
|
||||
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,84 +1,85 @@
|
|||
@import "../../../../theme/sass/conf/conf";
|
||||
|
||||
.widgets {
|
||||
ba-card {
|
||||
:host /deep/ .widgets {
|
||||
.smart-table-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ng2-smart-table {
|
||||
th, td {
|
||||
border: 1px solid $border-light !important;
|
||||
line-height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
:host /deep/ {
|
||||
ng2-smart-table {
|
||||
th, td {
|
||||
border: 1px solid $border-light !important;
|
||||
line-height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
padding: 0 8px!important;
|
||||
}
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
color: $default-text;
|
||||
|
||||
input {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
ng2-smart-table-cell {
|
||||
color: $default-text;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
input {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
ng2-smart-table-cell {
|
||||
color: $default-text;
|
||||
line-height: 35px;
|
||||
}
|
||||
tr:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
a.ng2-smart-sort-link {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
font-weight: $font-bolder;
|
||||
&.sort {
|
||||
font-weight: $font-bolder !important;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $default-text !important;
|
||||
tbody {
|
||||
tr {
|
||||
color: $default-text;
|
||||
}
|
||||
tr:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
.actions {
|
||||
float: none;
|
||||
a.ng2-smart-sort-link {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
font-weight: $font-bolder;
|
||||
&.sort {
|
||||
font-weight: $font-bolder !important;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $default-text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
.actions {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions-title-add {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions-title-add {
|
||||
text-align: center;
|
||||
}
|
||||
a.ng2-smart-action, .ng2-smart-title {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
a.ng2-smart-action, .ng2-smart-title {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
&.ng2-smart-action-add-add {
|
||||
font-size: 25px !important;
|
||||
&.ng2-smart-action-add-add {
|
||||
font-size: 25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.ng2-smart-pagination-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
nav.ng2-smart-pagination-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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