_card-colors.scss 4.27 KB
Newer Older
Liam's avatar
Liam committed
1
2
.card {
    &.bg-success {
3
        border-color: $state-success-border;
Liam's avatar
Liam committed
4
5
        background-color: $card-bg !important;
        .card-header {
6
7
            background-color: $state-success-bg;
            color: $state-success-text;
Liam's avatar
Liam committed
8
9
10
11
12
        }
        .card-body {
            background-color: $card-bg;
        }
        .card-footer {
13
            background-color: scale-color($state-success-bg, $lightness: 70%);
14
            color: $state-success-text;
Liam's avatar
Liam committed
15
16
            &:hover,
            &:focus {
17
18
19
20
                background-color: scale-color($state-success-bg, $lightness: 80%);
                .icon {
                    color: $state-success-text;
                }
21
            }
22
            .icon {
23
                color: $state-success-text;
Liam's avatar
Liam committed
24
25
26
27
            }
        }
        .card-footer,
        .card-body,
28
        .card-header,
29
        .card-header a {
30
            border-color: $state-success-border;
Liam's avatar
Liam committed
31
        }
32
        .card-header a,
Liam's avatar
Liam committed
33
34
35
36
37
38
        .card-body:not(.no-footer) {
            border-bottom-width:0;
        }
    }

    &.bg-info {
39
        border-color: $state-info-border;
Liam's avatar
Liam committed
40
41
        background-color: $card-bg !important;
        .card-header {
42
43
            background-color: $state-info-bg;
            color: $state-info-text;
Liam's avatar
Liam committed
44
45
        }
        .card-body,
46
        table {
Liam's avatar
Liam committed
47
            background-color: $card-bg;
48
49
50
51
52
53
54
55
56
            &.table {
                table-layout: fixed;
                tr:not(:first-of-type) {
                    td,
                    th {
                        border-top: $table-border-width solid $table-border-color;
                    }
                }
            }
Liam's avatar
Liam committed
57
58
        }
        .card-footer {
59
            background-color: scale-color($state-info-bg, $lightness: 70%);
60
            color: $state-info-text;
Liam's avatar
Liam committed
61
62
            &:hover,
            &:focus {
63
64
65
66
                background-color: scale-color($state-info-bg, $lightness: 80%);
                .icon {
                    color: $state-info-text;
                }
67
            }
68
            .icon {
69
                color: $state-info-text;
Liam's avatar
Liam committed
70
71
72
73
            }
        }
        .card-footer,
        .card-body,
74
        .card-header,
75
        .card-header a {
76
            border-color: $state-info-border;
Liam's avatar
Liam committed
77
        }
78
        .card-header a,
Liam's avatar
Liam committed
79
80
81
82
83
        .card-body:not(.no-footer) {
            border-bottom-width:0;
        }
    }

84
    &.bg-warning {
85
        border-color: $state-warning-border;
Liam's avatar
Liam committed
86
87
        background-color: $card-bg !important;
        .card-header {
88
89
            background-color: $state-warning-bg;
            color: $state-warning-text;
Liam's avatar
Liam committed
90
91
        }
        .card-body {
92
            background-color: $state-warning-bg;
Liam's avatar
Liam committed
93
94
        }
        .card-footer {
95
            background-color: scale-color($state-warning-bg, $lightness: 70%);
96
            color: $state-warning-text;
97
98
            &:hover,
            &:focus {
99
100
101
102
103
104
105
                background-color: scale-color($state-warning-bg, $lightness: 80%);
                .icon {
                    color: $state-warning-text;
                }
            }
            .icon {
                color: $state-warning-text;
106
            }
Liam's avatar
Liam committed
107
108
109
        }
        .card-footer,
        .card-body,
110
        .card-header,
111
        .card-header a {
112
            border-color: $state-warning-border;
Liam's avatar
Liam committed
113
        }
114
        .card-header a,
Liam's avatar
Liam committed
115
116
117
118
119
120
        .card-body:not(.no-footer) {
            border-bottom-width:0;
        }
    }

    &.bg-danger {
121
        border-color: $state-danger-border;
Liam's avatar
Liam committed
122
123
        // background-color: $card-bg;
        .card-header {
124
125
            background-color: $state-danger-bg;
            color: $state-danger-text;
Liam's avatar
Liam committed
126
127
128
129
130
        }
        .card-body {
            background-color: $card-bg;
        }
        .card-footer {
131
            background-color: scale-color($state-danger-bg, $lightness: 70%);
132
            color: $state-danger-text;
Liam's avatar
Liam committed
133
134
            &:hover,
            &:focus {
135
136
137
138
139
140
141
                background-color: scale-color($state-danger-bg, $lightness: 80%);
                .icon {
                    color: $state-danger-text;
                }
            }
            .icon {
                color: $state-danger-text;
Liam's avatar
Liam committed
142
143
144
145
            }
        }
        .card-footer,
        .card-body,
146
        .card-header,
147
        .card-header a {
148
            border-color: $state-danger-border;
Liam's avatar
Liam committed
149
        }
150
        .card-header a,
Liam's avatar
Liam committed
151
152
153
154
155
        .card-body:not(.no-footer) {
            border-bottom-width:0;
        }
    }
}