~ubuntu-branches/ubuntu/utopic/horizon/utopic-updates

« back to all changes in this revision

Viewing changes to xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_panels.scss

  • Committer: Package Import Robot
  • Author(s): James Page, Chris Johnston, James Page
  • Date: 2014-10-03 17:54:18 UTC
  • mfrom: (0.4.1) (1.1.44) (70.1.2 utopic)
  • Revision ID: package-import@ubuntu.com-20141003175418-1jomx0azdvnl5fxz
Tags: 1:2014.2~rc1-0ubuntu1
[ Chris Johnston ]
* d/theme/css/ubuntu.css: Fix Ubuntu theme for Instances "more" dropdown
  (LP: #1308651).

[ James Page ]
* New upstream release candidate:
  - d/p/*: Refresh.
* d/watch: Use tarballs.openstack.org for upstream releases. 

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
//
 
2
// Panels
 
3
// --------------------------------------------------
 
4
 
 
5
 
 
6
// Base class
 
7
.panel {
 
8
  margin-bottom: $line-height-computed;
 
9
  background-color: $panel-bg;
 
10
  border: 1px solid transparent;
 
11
  border-radius: $panel-border-radius;
 
12
  @include box-shadow(0 1px 1px rgba(0,0,0,.05));
 
13
}
 
14
 
 
15
// Panel contents
 
16
.panel-body {
 
17
  padding: $panel-body-padding;
 
18
  @include clearfix();
 
19
}
 
20
 
 
21
// Optional heading
 
22
.panel-heading {
 
23
  padding: $panel-heading-padding;
 
24
  border-bottom: 1px solid transparent;
 
25
  @include border-top-radius(($panel-border-radius - 1));
 
26
 
 
27
  > .dropdown .dropdown-toggle {
 
28
    color: inherit;
 
29
  }
 
30
}
 
31
 
 
32
// Within heading, strip any `h*` tag of its default margins for spacing.
 
33
.panel-title {
 
34
  margin-top: 0;
 
35
  margin-bottom: 0;
 
36
  font-size: ceil(($font-size-base * 1.125));
 
37
  color: inherit;
 
38
 
 
39
  > a {
 
40
    color: inherit;
 
41
  }
 
42
}
 
43
 
 
44
// Optional footer (stays gray in every modifier class)
 
45
.panel-footer {
 
46
  padding: $panel-footer-padding;
 
47
  background-color: $panel-footer-bg;
 
48
  border-top: 1px solid $panel-inner-border;
 
49
  @include border-bottom-radius(($panel-border-radius - 1));
 
50
}
 
51
 
 
52
 
 
53
// List groups in panels
 
54
//
 
55
// By default, space out list group content from panel headings to account for
 
56
// any kind of custom content between the two.
 
57
 
 
58
.panel {
 
59
  > .list-group {
 
60
    margin-bottom: 0;
 
61
 
 
62
    .list-group-item {
 
63
      border-width: 1px 0;
 
64
      border-radius: 0;
 
65
    }
 
66
 
 
67
    // Add border top radius for first one
 
68
    &:first-child {
 
69
      .list-group-item:first-child {
 
70
        border-top: 0;
 
71
        @include border-top-radius(($panel-border-radius - 1));
 
72
      }
 
73
    }
 
74
    // Add border bottom radius for last one
 
75
    &:last-child {
 
76
      .list-group-item:last-child {
 
77
        border-bottom: 0;
 
78
        @include border-bottom-radius(($panel-border-radius - 1));
 
79
      }
 
80
    }
 
81
  }
 
82
}
 
83
// Collapse space between when there's no additional content.
 
84
.panel-heading + .list-group {
 
85
  .list-group-item:first-child {
 
86
    border-top-width: 0;
 
87
  }
 
88
}
 
89
.list-group + .panel-footer {
 
90
  border-top-width: 0;
 
91
}
 
92
 
 
93
// Tables in panels
 
94
//
 
95
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
 
96
// watch it go full width.
 
97
 
 
98
.panel {
 
99
  > .table,
 
100
  > .table-responsive > .table,
 
101
  > .panel-collapse > .table {
 
102
    margin-bottom: 0;
 
103
  }
 
104
  // Add border top radius for first one
 
105
  > .table:first-child,
 
106
  > .table-responsive:first-child > .table:first-child {
 
107
    @include border-top-radius(($panel-border-radius - 1));
 
108
 
 
109
    > thead:first-child,
 
110
    > tbody:first-child {
 
111
      > tr:first-child {
 
112
        td:first-child,
 
113
        th:first-child {
 
114
          border-top-left-radius: ($panel-border-radius - 1);
 
115
        }
 
116
        td:last-child,
 
117
        th:last-child {
 
118
          border-top-right-radius: ($panel-border-radius - 1);
 
119
        }
 
120
      }
 
121
    }
 
122
  }
 
123
  // Add border bottom radius for last one
 
124
  > .table:last-child,
 
125
  > .table-responsive:last-child > .table:last-child {
 
126
    @include border-bottom-radius(($panel-border-radius - 1));
 
127
 
 
128
    > tbody:last-child,
 
129
    > tfoot:last-child {
 
130
      > tr:last-child {
 
131
        td:first-child,
 
132
        th:first-child {
 
133
          border-bottom-left-radius: ($panel-border-radius - 1);
 
134
        }
 
135
        td:last-child,
 
136
        th:last-child {
 
137
          border-bottom-right-radius: ($panel-border-radius - 1);
 
138
        }
 
139
      }
 
140
    }
 
141
  }
 
142
  > .panel-body + .table,
 
143
  > .panel-body + .table-responsive {
 
144
    border-top: 1px solid $table-border-color;
 
145
  }
 
146
  > .table > tbody:first-child > tr:first-child th,
 
147
  > .table > tbody:first-child > tr:first-child td {
 
148
    border-top: 0;
 
149
  }
 
150
  > .table-bordered,
 
151
  > .table-responsive > .table-bordered {
 
152
    border: 0;
 
153
    > thead,
 
154
    > tbody,
 
155
    > tfoot {
 
156
      > tr {
 
157
        > th:first-child,
 
158
        > td:first-child {
 
159
          border-left: 0;
 
160
        }
 
161
        > th:last-child,
 
162
        > td:last-child {
 
163
          border-right: 0;
 
164
        }
 
165
      }
 
166
    }
 
167
    > thead,
 
168
    > tbody {
 
169
      > tr:first-child {
 
170
        > td,
 
171
        > th {
 
172
          border-bottom: 0;
 
173
        }
 
174
      }
 
175
    }
 
176
    > tbody,
 
177
    > tfoot {
 
178
      > tr:last-child {
 
179
        > td,
 
180
        > th {
 
181
          border-bottom: 0;
 
182
        }
 
183
      }
 
184
    }
 
185
  }
 
186
  > .table-responsive {
 
187
    border: 0;
 
188
    margin-bottom: 0;
 
189
  }
 
190
}
 
191
 
 
192
 
 
193
// Collapsable panels (aka, accordion)
 
194
//
 
195
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
 
196
// the help of our collapse JavaScript plugin.
 
197
 
 
198
.panel-group {
 
199
  margin-bottom: $line-height-computed;
 
200
 
 
201
  // Tighten up margin so it's only between panels
 
202
  .panel {
 
203
    margin-bottom: 0;
 
204
    border-radius: $panel-border-radius;
 
205
    + .panel {
 
206
      margin-top: 5px;
 
207
    }
 
208
  }
 
209
 
 
210
  .panel-heading {
 
211
    border-bottom: 0;
 
212
    + .panel-collapse > .panel-body {
 
213
      border-top: 1px solid $panel-inner-border;
 
214
    }
 
215
  }
 
216
  .panel-footer {
 
217
    border-top: 0;
 
218
    + .panel-collapse .panel-body {
 
219
      border-bottom: 1px solid $panel-inner-border;
 
220
    }
 
221
  }
 
222
}
 
223
 
 
224
 
 
225
// Contextual variations
 
226
.panel-default {
 
227
  @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
 
228
}
 
229
.panel-primary {
 
230
  @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
 
231
}
 
232
.panel-success {
 
233
  @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
 
234
}
 
235
.panel-info {
 
236
  @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
 
237
}
 
238
.panel-warning {
 
239
  @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
 
240
}
 
241
.panel-danger {
 
242
  @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
 
243
}