mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Added new cards
This commit is contained in:
Sercan Yemen
parent
65e637eeb9
commit
b7c10a515c
|
|
@ -20,8 +20,8 @@
|
|||
}
|
||||
|
||||
.mat-pseudo-checkbox-checked:after {
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
width: 14px !important;
|
||||
height: 7px !important;
|
||||
}
|
||||
|
||||
// Fix: "Input underlines has wrong color opacity value"
|
||||
|
|
|
|||
|
|
@ -9,145 +9,47 @@
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-rich-media {
|
||||
position: relative;
|
||||
// Buttons
|
||||
.mat-button {
|
||||
min-width: 0 !important;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.card-media-header {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
|
||||
&.medium {
|
||||
align-items: flex-start;
|
||||
|
||||
.card-rich-media {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
align-items: flex-start;
|
||||
|
||||
.card-rich-media {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-primary-title {
|
||||
padding: 0 16px 0 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-rich-media {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
+ div {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-avatar-header {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
|
||||
.card-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.card-avatar-title {
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-primary-title {
|
||||
padding: 16px;
|
||||
|
||||
.card-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
+ div {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-supporting-text {
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
|
||||
+ div {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
|
||||
&.icon-buttons {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
&.align-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mat-button {
|
||||
min-width: 0 !important;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
.card-expander {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
+ div {
|
||||
padding-top: 0;
|
||||
// Button Toggle Group
|
||||
.mat-button-toggle-group,
|
||||
.mat-button-toggle-standalone {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.mat-tab-labels {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mat-tab-label {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
// Divider
|
||||
.card-divider {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin: 16px;
|
||||
|
||||
&.light {
|
||||
border-top-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Expand Area
|
||||
.card-expand-area {
|
||||
overflow: hidden;
|
||||
|
||||
.card-expanded-supporting-text {
|
||||
.card-expanded-content {
|
||||
padding: 8px 16px 16px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,59 @@
|
|||
// ######################
|
||||
// POSITION HELPERS
|
||||
// ######################
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.position#{$infix}-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.position#{$infix}-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.position#{$infix}-static {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ####################################
|
||||
// ABSOLUTE POSITION ALIGNMENT HELPERS
|
||||
// ####################################
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.align#{$infix}-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.align#{$infix}-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.align#{$infix}-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.align#{$infix}-left {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ######################
|
||||
// SIZE HELPERS
|
||||
// ######################
|
||||
@each $prop, $abbrev in (height: h, width: w) {
|
||||
|
||||
@for $index from 0 through 128 {
|
||||
@for $index from 0 through 180 {
|
||||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
|
|
@ -28,7 +78,6 @@
|
|||
// ######################
|
||||
// SPACING HELPERS
|
||||
// ######################
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
|
|
@ -83,47 +132,45 @@
|
|||
}
|
||||
|
||||
@if ($abbrev == m) {
|
||||
@for $index from 0 through 64 {
|
||||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
// Some special margin utils for flex alignments
|
||||
.m#{$infix}-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
// Some special margin utils for flex alignments
|
||||
.m#{$infix}-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.mt#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mt#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
.mr#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mr#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.mb#{$infix}-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.mb#{$infix}-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.ml#{$infix}-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.ml#{$infix}-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.my#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.my#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Border helpers
|
||||
// ######################
|
||||
// BORDER HELPERS
|
||||
// ######################
|
||||
$border-style: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
.border,
|
||||
|
|
@ -162,3 +209,10 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
|
|||
border-top: $border-style;
|
||||
border-bottom: $border-style;
|
||||
}
|
||||
|
||||
// ######################
|
||||
// BORDER RADIUS HELPERS
|
||||
// ######################
|
||||
.border-radius-100 {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
|
@ -411,7 +411,6 @@ table {
|
|||
color: rgba(0, 0, 0, 0.54);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 24px;
|
||||
|
|
|
|||
|
|
@ -229,6 +229,22 @@ strong {
|
|||
}
|
||||
}
|
||||
|
||||
.line-height-1 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.line-height-1\.25 {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.line-height-1\.50 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.line-height-1\.75 {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
// Boxed text
|
||||
.text-boxed {
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,25 +4,48 @@
|
|||
|
||||
.content {
|
||||
|
||||
.card-row {
|
||||
.cards {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 24px 24px 48px 24px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.card-preview {
|
||||
.card {
|
||||
display: flex;
|
||||
min-width: 320px;
|
||||
padding: 24px 24px 48px 24px;
|
||||
margin-bottom: 96px;
|
||||
|
||||
.card-preview {
|
||||
display: flex;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.card-source {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-source {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
min-width: 400px;
|
||||
margin-left: 24px;
|
||||
&.source {
|
||||
|
||||
.cards {
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
.card-source {
|
||||
display: flex !important;
|
||||
flex: 1;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
min-width: 400px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import * as shape from 'd3-shape';
|
||||
import { fuseAnimations } from '../../../../core/animations';
|
||||
|
||||
@Component({
|
||||
|
|
@ -9,11 +10,207 @@ import { fuseAnimations } from '../../../../core/animations';
|
|||
})
|
||||
export class FuseCardsDocsComponent
|
||||
{
|
||||
view = 'preview';
|
||||
|
||||
// Card 9
|
||||
card9Expanded = false;
|
||||
|
||||
// Card 10
|
||||
card10Expanded = false;
|
||||
|
||||
// Card 19
|
||||
card19 = {
|
||||
scheme: {
|
||||
domain: ['#5c84f1']
|
||||
},
|
||||
data : [
|
||||
{
|
||||
'name' : 'GOOG',
|
||||
'series': [
|
||||
{
|
||||
'name' : 'Jan 1',
|
||||
'value': 540.2
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 2',
|
||||
'value': 539.4
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 3',
|
||||
'value': 538.9
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 4',
|
||||
'value': 539.6
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 5',
|
||||
'value': 540
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 6',
|
||||
'value': 540.2
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 7',
|
||||
'value': 540.48
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
curve : shape.curveBasis
|
||||
};
|
||||
|
||||
// Card 24
|
||||
card24 = {
|
||||
scheme : {
|
||||
domain: ['#4867d2', '#5c84f1', '#89a9f4']
|
||||
},
|
||||
devices: [
|
||||
{
|
||||
'name' : 'Desktop',
|
||||
'value' : 92.8,
|
||||
'change': -0.6
|
||||
},
|
||||
{
|
||||
'name' : 'Mobile',
|
||||
'value' : 6.1,
|
||||
'change': 0.7
|
||||
},
|
||||
{
|
||||
'name' : 'Tablet',
|
||||
'value' : 1.1,
|
||||
'change': 0.1
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Card 25
|
||||
card25 = {
|
||||
scheme: {
|
||||
domain: ['#5c84f1']
|
||||
},
|
||||
data : [
|
||||
{
|
||||
'name' : 'Monday',
|
||||
'value': 221
|
||||
},
|
||||
{
|
||||
'name' : 'Tuesday',
|
||||
'value': 428
|
||||
},
|
||||
{
|
||||
'name' : 'Wednesday',
|
||||
'value': 492
|
||||
},
|
||||
{
|
||||
'name' : 'Thursday',
|
||||
'value': 471
|
||||
},
|
||||
{
|
||||
'name' : 'Friday',
|
||||
'value': 413
|
||||
},
|
||||
{
|
||||
'name' : 'Saturday',
|
||||
'value': 344
|
||||
},
|
||||
{
|
||||
'name' : 'Sunday',
|
||||
'value': 294
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Card 26
|
||||
card26 = {
|
||||
scheme: {
|
||||
domain: ['#5c84f1']
|
||||
},
|
||||
data : [
|
||||
{
|
||||
'name' : 'Impressions',
|
||||
'series': [
|
||||
{
|
||||
'name' : 'Jan 1',
|
||||
'value': 670000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 2',
|
||||
'value': 540000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 3',
|
||||
'value': 820000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 4',
|
||||
'value': 570000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 5',
|
||||
'value': 720000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 6',
|
||||
'value': 570000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 7',
|
||||
'value': 870000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 8',
|
||||
'value': 720000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 9',
|
||||
'value': 890000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 10',
|
||||
'value': 987000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 11',
|
||||
'value': 1120000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 12',
|
||||
'value': 1360000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 13',
|
||||
'value': 1100000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 14',
|
||||
'value': 1490000
|
||||
},
|
||||
{
|
||||
'name' : 'Jan 15',
|
||||
'value': 980000
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
curve : shape.curveBasis
|
||||
};
|
||||
|
||||
constructor()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
toggleView()
|
||||
{
|
||||
if ( this.view === 'preview' )
|
||||
{
|
||||
this.view = 'source';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.view = 'preview';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@ import { FuseHljsDocsComponent } from './hljs/hljs.component';
|
|||
import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
|
||||
import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
|
||||
import { FuseNavigationDocsComponent } from './navigation/navigation.component';
|
||||
import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component';
|
||||
import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
|
||||
import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
|
||||
import { FuseWidgetDocsComponent } from './widget/widget.component';
|
||||
import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -55,7 +56,8 @@ const routes = [
|
|||
imports : [
|
||||
SharedModule,
|
||||
RouterModule.forChild(routes),
|
||||
FuseWidgetModule
|
||||
FuseWidgetModule,
|
||||
NgxChartsModule
|
||||
],
|
||||
declarations: [
|
||||
FuseCardsDocsComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user