mirror of
https://github.com/tabler/tabler.git
synced 2026-08-14 07:12:22 +04:00
cards components
This commit is contained in:
+19
-14
@@ -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;
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
color: $text-muted-light;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
|
||||
+13
-13
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
font-weight: 400;
|
||||
color: $text-muted-light;
|
||||
color: $text-muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,6 @@ h6,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user