1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-14 07:12:22 +04:00

cards components

This commit is contained in:
codecalm
2019-10-01 22:00:27 +02:00
parent a4ff3e1ba4
commit d7a8a5bb81
23 changed files with 121 additions and 510 deletions
+19 -14
View File
@@ -37,25 +37,24 @@ $lime: #7bd235 !default;
$green: #5eba00 !default;
$teal: #2bcbba !default;
$cyan: #17a2b8 !default;
$black: #000000 !default;
$white: #ffffff !default;
$light: #f0f2f5 !default;
$dark: #1c2c41 !default;
$black: #000 !default;
$white: #fff !default;
$dark: #021f34 !default;
$body-bg: #f5f7fb !default;
$body-color: #343a40 !default;
$body-color: #45535f !default;
$text-muted: #888e9a !default;
$text-muted-light: #adb5bd !default;
$text-muted: #8a91a5 !default;
$border-color: rgba(0, 0, 0, 0.09) !default;
$border-color: #dce3e9 !default;
$social-colors: (
"facebook": #3b5998,
"twitter": #1da1f2,
"google": #dc4e41,
"youtube": #f00,
"youtube": #ff0000,
"vimeo": #1ab7ea,
"dribbble": #ea4c89,
"github": #181717,
@@ -106,12 +105,12 @@ $avatar-sizes: (
//Fonts
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$line-height-base: 1.375 !default;
$line-height-base: 1.5 !default;
$border-radius: 3px !default;
//Typography
$headings-font-weight: 600 !default;
$headings-color: $dark !default;
$small-font-size: 87.5% !default;
@@ -212,6 +211,13 @@ $container-max-widths: (
//alerts
$alert-link-font-weight: 600 !default;
//cards
$card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$card-cap-bg: $body-bg !default;
$card-active-border-color: $blue !default;
//close
$close-font-weight: 400 !default;
$close-font-size: 1.5rem !default;
@@ -238,7 +244,7 @@ $pagination-padding-x: .25rem !default;
$pagination-color: $text-muted !default;
$pagination-bg: transparent !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-color: rgba($text-muted-light, .5) !default;
$pagination-disabled-color: rgba($text-muted, .5) !default;
//sidenav
$sidenav-width: 16rem !default;
@@ -269,20 +275,19 @@ $toast-header-color: $text-muted !default;
//other
$yiq-contrasted-threshold: 200 !default;
$card-border-color: $border-color !default;
$list-group-border-color: $border-color !default;
$list-group-action-color: inherit !default;
$input-disabled-bg: $gray-100 !default;
$input-border-color: $border-color !default;
$input-placeholder-color: $text-muted-light !default;
$input-placeholder-color: $text-muted !default;
$input-group-addon-bg: $gray-100 !default;
$input-group-addon-color: $text-muted !default;
$dropdown-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$input-border-radius: $border-radius !default;
+1 -1
View File
@@ -6,7 +6,7 @@
font-size: .875rem;
font-weight: 400;
line-height: 2rem;
color: $text-muted-light;
color: $text-muted;
text-align: center;
text-transform: uppercase;
vertical-align: bottom;
+1 -1
View File
@@ -24,7 +24,7 @@
}
.calendar-header {
color: $text-muted-light;
color: $text-muted;
}
.calendar-date {
+13 -13
View File
@@ -1,6 +1,6 @@
.card {
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04);
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0;
}
.card-link {
@@ -52,14 +52,6 @@
}
}
.card-footer {
background: transparent;
&:last-child {
border-radius: 0 0 $border-radius $border-radius;
}
}
.card-header {
display: flex;
align-items: center;
@@ -71,6 +63,10 @@
margin: (- $card-spacer-y) (- $card-spacer-x);
}
.card-footer {
color: $text-muted;
}
.card-progress {
height: 4px;
@@ -91,9 +87,6 @@
display: block;
font-size: $h4-font-size;
font-weight: 500;
margin: 0 0 1.5rem;
line-height: 1;
color: inherit;
@at-root a#{&}:hover {
color: inherit;
@@ -104,6 +97,13 @@
}
}
.card-subtitle {
margin-top: -$card-spacer-y;
margin-bottom: $card-spacer-y / 2;
font-size: $small-font-size;
color: $text-muted;
}
.card-body {
> :last-child {
margin-bottom: 0;
@@ -128,7 +128,7 @@ Card optinos
display: inline-block;
min-width: 1rem;
margin-left: .25rem;
color: $text-muted-light;
color: $text-muted;
}
/**
+2 -2
View File
@@ -31,7 +31,7 @@
height: 2.5rem;
color: #fff;
text-align: center;
background: $text-muted-light;
background: $text-muted;
border-radius: 50%;
.icon {
@@ -99,7 +99,7 @@
border-radius: 3px;
.icon {
color: $text-muted-light;
color: $text-muted;
}
&.active {
+1 -1
View File
@@ -7,7 +7,7 @@
padding-right: $card-spacer-x;
padding-left: $card-spacer-x;
line-height: 20px;
color: $text-muted-light;
color: $text-muted;
cursor: pointer;
background: transparent;
border: none;
+2 -2
View File
@@ -94,7 +94,7 @@
}
& ~ .step-item {
color: $text-muted-light;
color: $text-muted;
&::after,
&::before {
@@ -102,7 +102,7 @@
}
&::before {
color: $text-muted-light !important;
color: $text-muted !important;
}
}
}
+1 -1
View File
@@ -15,7 +15,7 @@
padding-top: .5rem;
padding-bottom: .5rem;
font-weight: 400;
color: $text-muted-light;
color: $text-muted;
white-space: nowrap;
}
}
-1
View File
@@ -20,7 +20,6 @@ h6,
.h4,
.h5,
.h6 {
a {
color: inherit;
}
-2
View File
@@ -10,8 +10,6 @@
.text-h2 { font-size: $h2-font-size !important; }
.text-h1 { font-size: $h1-font-size !important; }
.text-muted-light { color: $text-muted-light !important; }
.text-subheader {
font-size: $h6-font-size;
font-weight: 600;