Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 1... Línea 1...
1 
//
 1 
//
2 
// Base styles
 2 
// Base styles
3 
//
 3 
//
Línea 4... Línea 4...
4 
 
 4 
 
- 
 
 5 
.card {
- 
 
 6 
  // scss-docs-start card-css-vars
- 
 
 7 
  --#{$prefix}card-spacer-y: #{$card-spacer-y};
- 
 
 8 
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
- 
 
 9 
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
- 
 
 10 
  --#{$prefix}card-title-color: #{$card-title-color};
- 
 
 11 
  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
- 
 
 12 
  --#{$prefix}card-border-width: #{$card-border-width};
- 
 
 13 
  --#{$prefix}card-border-color: #{$card-border-color};
- 
 
 14 
  --#{$prefix}card-border-radius: #{$card-border-radius};
- 
 
 15 
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
- 
 
 16 
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
- 
 
 17 
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
- 
 
 18 
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
- 
 
 19 
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
- 
 
 20 
  --#{$prefix}card-cap-color: #{$card-cap-color};
- 
 
 21 
  --#{$prefix}card-height: #{$card-height};
- 
 
 22 
  --#{$prefix}card-color: #{$card-color};
- 
 
 23 
  --#{$prefix}card-bg: #{$card-bg};
- 
 
 24 
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
- 
 
 25 
  --#{$prefix}card-group-margin: #{$card-group-margin};
- 
 
 26 
  // scss-docs-end card-css-vars
5 
.card {
 27 
 
6 
  position: relative;
 28 
  position: relative;
7 
  display: flex;
 29 
  display: flex;
8 
  flex-direction: column;
 30 
  flex-direction: column;
9 
  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
 31 
  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
- 
 
 32 
  height: var(--#{$prefix}card-height);
10 
  height: $card-height;
 33 
  color: var(--#{$prefix}body-color);
11 
  word-wrap: break-word;
 34 
  word-wrap: break-word;
12 
  background-color: $card-bg;
 35 
  background-color: var(--#{$prefix}card-bg);
13 
  background-clip: border-box;
 36 
  background-clip: border-box;
14 
  border: $card-border-width solid $card-border-color;
 37 
  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
- 
 
 38 
  @include border-radius(var(--#{$prefix}card-border-radius));
Línea 15... Línea 39...
15 
  @include border-radius($card-border-radius);
 39 
  @include box-shadow(var(--#{$prefix}card-box-shadow));
16 
 
 40 
 
17 
  > hr {
 41 
  > hr {
18 
    margin-right: 0;
 42 
    margin-right: 0;
Línea 23... Línea 47...
23 
    border-top: inherit;
 47 
    border-top: inherit;
24 
    border-bottom: inherit;
 48 
    border-bottom: inherit;
Línea 25... Línea 49...
25 
 
 49 
 
26 
    &:first-child {
 50 
    &:first-child {
27 
      border-top-width: 0;
 51 
      border-top-width: 0;
28 
      @include border-top-radius($card-inner-border-radius);
 52 
      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
Línea 29... Línea 53...
29 
    }
 53 
    }
30 
 
 54 
 
31 
    &:last-child  {
 55 
    &:last-child  {
32 
      border-bottom-width: 0;
 56 
      border-bottom-width: 0;
33 
      @include border-bottom-radius($card-inner-border-radius);
 57 
      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
Línea 34... Línea 58...
34 
    }
 58 
    }
35 
  }
 59 
  }
Línea 44... Línea 68...
44 
 
 68 
 
45 
.card-body {
 69 
.card-body {
46 
  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
 70 
  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
47 
  // as much space as possible, ensuring footers are aligned to the bottom.
 71 
  // as much space as possible, ensuring footers are aligned to the bottom.
48 
  flex: 1 1 auto;
 - 
 
49 
  // Workaround for the image size bug in IE
 - 
 
50 
  // See: https://github.com/twbs/bootstrap/pull/28855
 - 
 
51 
  min-height: 1px;
 72 
  flex: 1 1 auto;
52 
  padding: $card-spacer-x;
 73 
  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
53 
  color: $card-color;
 74 
  color: var(--#{$prefix}card-color);
Línea 54... Línea 75...
54 
}
 75 
}
55 
 
 76 
 
- 
 
 77 
.card-title {
56 
.card-title {
 78 
  margin-bottom: var(--#{$prefix}card-title-spacer-y);
Línea 57... Línea 79...
57 
  margin-bottom: $card-spacer-y;
 79 
  color: var(--#{$prefix}card-title-color);
58 
}
 80 
}
59 
 
 81 
 
- 
 
 82 
.card-subtitle {
60 
.card-subtitle {
 83 
  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
Línea 61... Línea 84...
61 
  margin-top: -$card-spacer-y * .5;
 84 
  margin-bottom: 0;
62 
  margin-bottom: 0;
 85 
  color: var(--#{$prefix}card-subtitle-color);
63 
}
 86 
}
Línea 64... Línea 87...
64 
 
 87 
 
65 
.card-text:last-child {
 88 
.card-text:last-child {
66 
  margin-bottom: 0;
 89 
  margin-bottom: 0;
67 
}
 90 
}
Línea 68... Línea 91...
68 
 
 91 
 
69 
.card-link {
 92 
.card-link {
70 
  @include hover() {
 93 
  &:hover {
71 
    text-decoration: none;
 94 
    text-decoration: if($link-hover-decoration == underline, none, null);
Línea 72... Línea 95...
72 
  }
 95 
  }
73 
 
 96 
 
74 
  + .card-link {
 97 
  + .card-link {
Línea 75... Línea 98...
75 
    margin-left: $card-spacer-x;
 98 
    margin-left: var(--#{$prefix}card-spacer-x);
76 
  }
 99 
  }
77 
}
 100 
}
78 
 
 101 
 
79 
//
 102 
//
80 
// Optional textual caps
 103 
// Optional textual caps
Línea 81... Línea 104...
81 
//
 104 
//
82 
 
 105 
 
83 
.card-header {
 106 
.card-header {
84 
  padding: $card-spacer-y $card-spacer-x;
 107 
  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
Línea 85... Línea 108...
85 
  margin-bottom: 0; // Removes the default margin-bottom of <hN>
 108 
  margin-bottom: 0; // Removes the default margin-bottom of <hN>
86 
  color: $card-cap-color;
 109 
  color: var(--#{$prefix}card-cap-color);
87 
  background-color: $card-cap-bg;
 110 
  background-color: var(--#{$prefix}card-cap-bg);
88 
  border-bottom: $card-border-width solid $card-border-color;
 111 
  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
89 
 
 112 
 
Línea 90... Línea 113...
90 
  &:first-child {
 113 
  &:first-child {
91 
    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
 114 
    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
92 
  }
 115 
  }
93 
}
 116 
}
Línea 94... Línea 117...
94 
 
 117 
 
95 
.card-footer {
 118 
.card-footer {
96 
  padding: $card-spacer-y $card-spacer-x;
 119 
  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
Línea 97... Línea 120...
97 
  color: $card-cap-color;
 120 
  color: var(--#{$prefix}card-cap-color);
98 
  background-color: $card-cap-bg;
 121 
  background-color: var(--#{$prefix}card-cap-bg);
99 
  border-top: $card-border-width solid $card-border-color;
 122 
  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
100 
 
 123 
 
101 
  &:last-child {
 124 
  &:last-child {
- 
 
 125 
    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
- 
 
 126 
  }
- 
 
 127 
}
- 
 
 128 
 
- 
 
 129 
 
102 
    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
 130 
//
Línea 103... Línea 131...
103 
  }
 131 
// Header navs
104 
}
 132 
//
105 
 
 133 
 
106 
 
 134 
.card-header-tabs {
Línea 107... Línea 135...
107 
//
 135 
  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
108 
// Header navs
 136 
  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
109 
//
 137 
  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
110 
 
 138 
  border-bottom: 0;
111 
.card-header-tabs {
 139 
 
112 
  margin-right: -$card-spacer-x * .5;
 140 
  .nav-link.active {
113 
  margin-bottom: -$card-spacer-y;
 141 
    background-color: var(--#{$prefix}card-bg);
114 
  margin-left: -$card-spacer-x * .5;
 142 
    border-bottom-color: var(--#{$prefix}card-bg);
115 
  border-bottom: 0;
 143 
  }
116 
}
 144 
}
Línea 117... Línea 145...
117 
 
 145 
 
118 
.card-header-pills {
 146 
.card-header-pills {
119 
  margin-right: -$card-spacer-x * .5;
 147 
  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
120 
  margin-left: -$card-spacer-x * .5;
 - 
 
121 
}
 148 
  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
122 
 
 149 
}
Línea 123... Línea 150...
123 
// Card image
 150 
 
124 
.card-img-overlay {
 151 
// Card image
125 
  position: absolute;
 152 
.card-img-overlay {
126 
  top: 0;
 153 
  position: absolute;
Línea 127... Línea 154...
127 
  right: 0;
 154 
  top: 0;
128 
  bottom: 0;
 155 
  right: 0;
129 
  left: 0;
 156 
  bottom: 0;
130 
  padding: $card-img-overlay-padding;
 - 
 
131 
  @include border-radius($card-inner-border-radius);
 - 
 
132 
}
 - 
 
133 
 
 - 
 
134 
.card-img,
 - 
 
135 
.card-img-top,
 - 
 
136 
.card-img-bottom {
 - 
 
137 
  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
 - 
 
138 
  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 - 
 
139 
}
 - 
 
140 
 
 - 
 
141 
.card-img,
 - 
 
142 
.card-img-top {
 - 
 
143 
  @include border-top-radius($card-inner-border-radius);
 - 
 
144 
}
 - 
 
145 
 
 - 
 
146 
.card-img,
 - 
 
147 
.card-img-bottom {
 - 
 
148 
  @include border-bottom-radius($card-inner-border-radius);
 - 
 
149 
}
 - 
 
150 
 
 - 
 
151 
 
 - 
 
152 
// Card deck
 - 
 
153 
 
 - 
 
154 
.card-deck {
 157 
  left: 0;
Línea 155... Línea 158...
155 
  .card {
 158 
  padding: var(--#{$prefix}card-img-overlay-padding);
156 
    margin-bottom: $card-deck-margin;
 159 
  @include border-radius(var(--#{$prefix}card-inner-border-radius));
Línea 179... Línea 182...
179 
 
 182 
 
180 
.card-group {
 183 
.card-group {
181 
  // The child selector allows nested `.card` within `.card-group`
 184 
  // The child selector allows nested `.card` within `.card-group`
182 
  // to display properly.
 185 
  // to display properly.
183 
  > .card {
 186 
  > .card {
184 
    margin-bottom: $card-group-margin;
 187 
    margin-bottom: var(--#{$prefix}card-group-margin);
Línea 185... Línea 188...
185 
  }
 188 
  }
186 
 
 189 
 
187 
  @include media-breakpoint-up(sm) {
 190 
  @include media-breakpoint-up(sm) {
Línea 200... Línea 203...
200 
      }
 203 
      }
Línea 201... Línea 204...
201 
 
 204 
 
202 
      // Handle rounded corners
 205 
      // Handle rounded corners
203 
      @if $enable-rounded {
 206 
      @if $enable-rounded {
204 
        &:not(:last-child) {
 207 
        &:not(:last-child) {
Línea 205... Línea 208...
205 
          @include border-right-radius(0);
 208 
          @include border-end-radius(0);
206 
 
 209 
 
207 
          .card-img-top,
 210 
          .card-img-top,
208 
          .card-header {
 211 
          .card-header {
Línea 215... Línea 218...
215 
            border-bottom-right-radius: 0;
 218 
            border-bottom-right-radius: 0;
216 
          }
 219 
          }
217 
        }
 220 
        }
Línea 218... Línea 221...
218 
 
 221 
 
219 
        &:not(:first-child) {
 222 
        &:not(:first-child) {
Línea 220... Línea 223...
220 
          @include border-left-radius(0);
 223 
          @include border-start-radius(0);
221 
 
 224 
 
222 
          .card-img-top,
 225 
          .card-img-top,
223 
          .card-header {
 226 
          .card-header {
Línea 232... Línea 235...
232 
        }
 235 
        }
233 
      }
 236 
      }
234 
    }
 237 
    }
235 
  }
 238 
  }
236 
}
 239 
}
237 
 
 - 
 
238 
 
 - 
 
239 
//
 - 
 
240 
// Columns
 - 
 
241 
//
 - 
 
242 
 
 - 
 
243 
.card-columns {
 - 
 
244 
  .card {
 - 
 
245 
    margin-bottom: $card-columns-margin;
 - 
 
246 
  }
 - 
 
247 
 
 - 
 
248 
  @include media-breakpoint-up(sm) {
 - 
 
249 
    column-count: $card-columns-count;
 - 
 
250 
    column-gap: $card-columns-gap;
 - 
 
251 
    orphans: 1;
 - 
 
252 
    widows: 1;
 - 
 
253 
 
 - 
 
254 
    .card {
 - 
 
255 
      display: inline-block; // Don't let them vertically span multiple columns
 - 
 
256 
      width: 100%; // Don't let their width change
 - 
 
257 
    }
 - 
 
258 
  }
 - 
 
259 
}
 - 
 
260 
 
 - 
 
261 
 
 - 
 
262 
//
 - 
 
263 
// Accordion
 - 
 
264 
//
 - 
 
265 
 
 - 
 
266 
.accordion {
 - 
 
267 
  overflow-anchor: none;
 - 
 
268 
 
 - 
 
269 
  > .card {
 - 
 
270 
    overflow: hidden;
 - 
 
271 
 
 - 
 
272 
    &:not(:last-of-type) {
 - 
 
273 
      border-bottom: 0;
 - 
 
274 
      @include border-bottom-radius(0);
 - 
 
275 
    }
 - 
 
276 
 
 - 
 
277 
    &:not(:first-of-type) {
 - 
 
278 
      @include border-top-radius(0);
 - 
 
279 
    }
 - 
 
280 
 
 - 
 
281 
    > .card-header {
 - 
 
282 
      @include border-radius(0);
 - 
 
283 
      margin-bottom: -$card-border-width;
 - 
 
284 
    }
 - 
 
285 
  }
 - 
 
286 
}
 -