_panel.scss 2.59 KB
Newer Older
Benjamin Kott's avatar
Benjamin Kott committed
1
2
3
4
5
6
7
8
9
10
11
12
13
//
// Panel
// ======
// Additions and enhancements of the bootstrap panel component. This file
// needs to be included directly after the bootstrap panel definitions.
//
//
// Normal Usage
// ------------
//
// <div class="panel panel-default">
//   <div class="panel-heading">
//     <div class="panel-heading-right">
14
//       <a href="#panelContentId" class="panel-heading-collapse" role="button" data-bs-toggle="collapse" aria-expanded="true">
Benjamin Kott's avatar
Benjamin Kott committed
15
16
17
18
19
20
21
22
23
24
25
//         <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-view-list-collapse" data-identifier="actions-view-list-collapse">
//           ... IconAPI ...
//         </span>
//       </a>
//     </div>
//     <div class="panel-heading-left">
//       <a href="#" class="panel-title">
//         ... Title ...
//       </a>
//     </div>
//   </div>
26
//   <div id="panelContentId" class="panel-collapse collapse show" aria-expanded="true">
Benjamin Kott's avatar
Benjamin Kott committed
27
28
29
30
31
32
33
34
35
36
37
//     <div class="panel-body">
//       ... Content ...
//     </div>
//   </div>
// </div>
//
//

//
// Variables
//
38
39
40
$panel-active-text: #fff;
$panel-active-border: #444;
$panel-active-heading-bg: #666;
41
42
$panel-progress-bg: #eee;
$panel-progress-bar: #444;
Benjamin Kott's avatar
Benjamin Kott committed
43

44
45
46
47
//
// Panel
//
.panel {
48
49
50
51
52
53
    display: block;

    &:hover,
    &:focus {
        text-decoration: none;
    }
54
55
}

Benjamin Kott's avatar
Benjamin Kott committed
56
57
58
59
//
// Heading
//
.panel-heading {
60
61
62
63
64
65
66
67
68
    @extend .clearfix;

    a,
    a:hover,
    a:focus,
    a:active {
        text-decoration: none;
        color: inherit;
    }
Benjamin Kott's avatar
Benjamin Kott committed
69
}
70

Benjamin Kott's avatar
Benjamin Kott committed
71
.panel-heading-left {
72
    float: left;
Benjamin Kott's avatar
Benjamin Kott committed
73
}
74

Benjamin Kott's avatar
Benjamin Kott committed
75
.panel-heading-right {
76
    float: right;
Benjamin Kott's avatar
Benjamin Kott committed
77
78
79
80
81
82
}

//
// Title
//
.panel-title {
83
    font-size: $font-size-base;
Benjamin Kott's avatar
Benjamin Kott committed
84
}
85

Benjamin Kott's avatar
Benjamin Kott committed
86
87
.panel-title-icon,
.panel-title-name {
88
89
    display: inline-block;
    vertical-align: middle;
Benjamin Kott's avatar
Benjamin Kott committed
90
91
92
93
94
95
}

//
// Body
//
.panel-body {
96
97
98
99
100
101
102
    > *:first-child {
        margin-top: 0;
    }

    > *:last-child {
        margin-bottom: 0;
    }
Benjamin Kott's avatar
Benjamin Kott committed
103
}
104

105
// $TODO workaround to make links visible
106
.panel-body-highlightlinks {
107
108
109
    > p > a {
        text-decoration: underline;
    }
110
111
112
113
114
115
}

//
// Table
//
.panel-table {
116
117
    th:first-child,
    td:first-child {
118
        padding-left: $card-spacer-x;
119
120
121
122
    }

    th:last-child,
    td:last-child {
123
        padding-right: $card-spacer-x;
124
    }
125
}
Benjamin Kott's avatar
Benjamin Kott committed
126

127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
//
// Progress
//
.panel-progress {
    background-color: $panel-progress-bg;
    height: 3px;
    position: relative;
    width: 100%;

    .panel-progress-bar {
        display: block;
        height: 100%;
        background-color: $panel-progress-bar;
    }
}

Benjamin Kott's avatar
Benjamin Kott committed
143
144
145
146
//
// Additional Variations
//
.panel-active {
147
    @include panel-variant($panel-active-border, $panel-active-text, $panel-active-heading-bg, $panel-active-border);
148
}
149
150
151
152
153
154
155

//
// Tab
//
.panel-body {
    padding: 0.75rem;
}