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 
// Basic Bootstrap table
 2 
// Basic Bootstrap table
3 
//
 3 
//
Línea 4... Línea 4...
4 
 
 4 
 
- 
 
 5 
.table {
- 
 
 6 
  // Reset needed for nesting tables
- 
 
 7 
  --#{$prefix}table-color-type: initial;
- 
 
 8 
  --#{$prefix}table-bg-type: initial;
- 
 
 9 
  --#{$prefix}table-color-state: initial;
- 
 
 10 
  --#{$prefix}table-bg-state: initial;
- 
 
 11 
  // End of reset
- 
 
 12 
  --#{$prefix}table-color: #{$table-color};
- 
 
 13 
  --#{$prefix}table-bg: #{$table-bg};
- 
 
 14 
  --#{$prefix}table-border-color: #{$table-border-color};
- 
 
 15 
  --#{$prefix}table-accent-bg: #{$table-accent-bg};
- 
 
 16 
  --#{$prefix}table-striped-color: #{$table-striped-color};
- 
 
 17 
  --#{$prefix}table-striped-bg: #{$table-striped-bg};
- 
 
 18 
  --#{$prefix}table-active-color: #{$table-active-color};
- 
 
 19 
  --#{$prefix}table-active-bg: #{$table-active-bg};
- 
 
 20 
  --#{$prefix}table-hover-color: #{$table-hover-color};
- 
 
 21 
  --#{$prefix}table-hover-bg: #{$table-hover-bg};
5 
.table {
 22 
 
6 
  width: 100%;
 23 
  width: 100%;
7 
  margin-bottom: $spacer;
 24 
  margin-bottom: $spacer;
8 
  color: $table-color;
 25 
  vertical-align: $table-cell-vertical-align;
Línea 9... Línea 26...
9 
  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
 26 
  border-color: var(--#{$prefix}table-border-color);
- 
 
 27 
 
- 
 
 28 
  // Target th & td
- 
 
 29 
  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
- 
 
 30 
  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
10 
 
 31 
  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
11 
  th,
 32 
  // stylelint-disable-next-line selector-max-universal
- 
 
 33 
  > :not(caption) > * > * {
- 
 
 34 
    padding: $table-cell-padding-y $table-cell-padding-x;
12 
  td {
 35 
    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
13 
    padding: $table-cell-padding;
 36 
    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
- 
 
 37 
    background-color: var(--#{$prefix}table-bg);
14 
    vertical-align: top;
 38 
    border-bottom-width: $table-border-width;
Línea 15... Línea 39...
15 
    border-top: $table-border-width solid $table-border-color;
 39 
    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
16 
  }
 40 
  }
17 
 
 - 
 
18 
  thead th {
 41 
 
Línea 19... Línea 42...
19 
    vertical-align: bottom;
 42 
  > tbody {
20 
    border-bottom: (2 * $table-border-width) solid $table-border-color;
 43 
    vertical-align: inherit;
21 
  }
 44 
  }
22 
 
 45 
 
Línea -... Línea 46...
- 
 
 46 
  > thead {
- 
 
 47 
    vertical-align: bottom;
- 
 
 48 
  }
- 
 
 49 
}
- 
 
 50 
 
- 
 
 51 
.table-group-divider {
- 
 
 52 
  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
- 
 
 53 
}
- 
 
 54 
 
- 
 
 55 
//
- 
 
 56 
// Change placement of captions with a class
- 
 
 57 
//
Línea 23... Línea 58...
23 
  tbody + tbody {
 58 
 
24 
    border-top: (2 * $table-border-width) solid $table-border-color;
 59 
.caption-top {
25 
  }
 60 
  caption-side: top;
Línea 26... Línea 61...
26 
}
 61 
}
27 
 
 - 
 
- 
 
 62 
 
28 
 
 63 
 
29 
//
 64 
//
30 
// Condensed table w/ half padding
 65 
// Condensed table w/ half padding
31 
//
 66 
//
Línea 32... Línea 67...
32 
 
 67 
 
33 
.table-sm {
 68 
.table-sm {
34 
  th,
 69 
  // stylelint-disable-next-line selector-max-universal
- 
 
 70 
  > :not(caption) > * > * {
- 
 
 71 
    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
- 
 
 72 
  }
- 
 
 73 
}
- 
 
 74 
 
Línea 35... Línea 75...
35 
  td {
 75 
 
- 
 
 76 
// Border versions
36 
    padding: $table-cell-padding-sm;
 77 
//
Línea 37... Línea -...
37 
  }
 - 
 
38 
}
 - 
 
39 
 
 78 
// Add or remove borders all around the table and between all the columns.
40 
 
 - 
 
41 
// Border versions
 - 
 
42 
//
 - 
 
43 
// Add or remove borders all around the table and between all the columns.
 - 
 
44 
 
 79 
//
45 
.table-bordered {
 80 
// When borders are added on all sides of the cells, the corners can render odd when
46 
  border: $table-border-width solid $table-border-color;
 81 
// these borders do not have the same color or if they are semi-transparent.
47 
 
 82 
// Therefore we add top and border bottoms to the `tr`s and left and right borders
48 
  th,
 83 
// to the `td`s or `th`s
Línea 49... Línea 84...
49 
  td {
 84 
 
- 
 
 85 
.table-bordered {
- 
 
 86 
  > :not(caption) > * {
- 
 
 87 
    border-width: $table-border-width 0;
50 
    border: $table-border-width solid $table-border-color;
 88 
 
51 
  }
 89 
    // stylelint-disable-next-line selector-max-universal
52 
 
 - 
 
53 
  thead {
 90 
    > * {
54 
    th,
 91 
      border-width: 0 $table-border-width;
55 
    td {
 92 
    }
56 
      border-bottom-width: 2 * $table-border-width;
 93 
  }
Línea 57... Línea 94...
57 
    }
 94 
}
58 
  }
 95 
 
59 
}
 96 
.table-borderless {
Línea -... Línea 97...
- 
 
 97 
  // stylelint-disable-next-line selector-max-universal
60 
 
 98 
  > :not(caption) > * > * {
61 
.table-borderless {
 99 
    border-bottom-width: 0;
- 
 
 100 
  }
62 
  th,
 101 
 
63 
  td,
 102 
  > :not(:first-child) {
64 
  thead th,
 103 
    border-top-width: 0;
Línea 65... Línea -...
65 
  tbody + tbody {
 - 
 
66 
    border: 0;
 104 
  }
67 
  }
 - 
 
68 
}
 - 
 
69 
 
 - 
 
70 
// Zebra-striping
 105 
}
71 
//
 - 
 
72 
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
 106 
 
73 
 
 107 
// Zebra-striping
74 
.table-striped {
 108 
//
75 
  tbody tr:nth-of-type(#{$table-striped-order}) {
 - 
 
76 
    background-color: $table-accent-bg;
 109 
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
77 
  }
 110 
 
Línea 78... Línea -...
78 
}
 - 
 
79 
 
 111 
// For rows
80 
 
 112 
.table-striped {
81 
// Hover effect
 113 
  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
82 
//
 - 
 
Línea -... Línea 114...
- 
 
 114 
    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
83 
// Placed here since it has to come after the potential zebra striping
 115 
    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
84 
 
 116 
  }
85 
.table-hover {
 117 
}
Línea 86... Línea -...
86 
  tbody tr {
 - 
 
87 
    @include hover() {
 - 
 
88 
      color: $table-hover-color;
 - 
 
89 
      background-color: $table-hover-bg;
 118 
 
90 
    }
 119 
// For columns
91 
  }
 120 
.table-striped-columns {
92 
}
 - 
 
93 
 
 - 
 
94 
 
 - 
 
95 
// Table backgrounds
 - 
 
96 
//
 - 
 
97 
// Exact selectors below required to override `.table-striped` and prevent
 - 
 
98 
// inheritance to nested tables.
 - 
 
99 
 
 - 
 
100 
@each $color, $value in $theme-colors {
 - 
 
101 
  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
 - 
 
Línea 102... Línea 121...
102 
}
 121 
  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
103 
 
 - 
 
104 
@include table-row-variant(active, $table-active-bg);
 122 
    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
105 
 
 123 
    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
106 
 
 124 
  }
107 
// Dark styles
 - 
 
108 
//
 125 
}
109 
// Same table markup, but inverted color scheme: dark background and light text.
 126 
 
Línea 110... Línea -...
110 
 
 - 
 
111 
// stylelint-disable-next-line no-duplicate-selectors
 - 
 
112 
.table {
 - 
 
Línea 113... Línea -...
113 
  .thead-dark {
 - 
 
114 
    th {
 - 
 
115 
      color: $table-dark-color;
 - 
 
116 
      background-color: $table-dark-bg;
 - 
 
117 
      border-color: $table-dark-border-color;
 - 
 
118 
    }
 - 
 
119 
  }
 127 
// Active table
120 
 
 - 
 
121 
  .thead-light {
 - 
 
122 
    th {
 128 
//
123 
      color: $table-head-color;
 - 
 
124 
      background-color: $table-head-bg;
 129 
// The `.table-active` class can be added to highlight rows or cells
125 
      border-color: $table-border-color;
 130 
 
126 
    }
 - 
 
127 
  }
 - 
 
Línea 128... Línea -...
128 
}
 - 
 
129 
 
 - 
 
130 
.table-dark {
 - 
 
131 
  color: $table-dark-color;
 131 
.table-active {
132 
  background-color: $table-dark-bg;
 132 
  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
133 
 
 - 
 
134 
  th,
 - 
 
135 
  td,
 - 
 
136 
  thead th {
 133 
  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
Línea 137... Línea -...
137 
    border-color: $table-dark-border-color;
 - 
 
138 
  }
 134 
}
139 
 
 135 
 
140 
  &.table-bordered {
 136 
// Hover effect
141 
    border: 0;
 137 
//
Línea 142... Línea -...
142 
  }
 - 
 
143 
 
 138 
// Placed here since it has to come after the potential zebra striping
144 
  &.table-striped {
 139 
 
145 
    tbody tr:nth-of-type(#{$table-striped-order}) {
 - 
 
146 
      background-color: $table-dark-accent-bg;
 140 
.table-hover {
147 
    }
 - 
 
148 
  }
 141 
  > tbody > tr:hover > * {
149 
 
 142 
    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
150 
  &.table-hover {
 - 
 
151 
    tbody tr {
 143 
    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
152 
      @include hover() {
 144 
  }
153 
        color: $table-dark-hover-color;
 - 
 
154 
        background-color: $table-dark-hover-bg;
 - 
 
155 
      }
 - 
 
156 
    }
 - 
 
157 
  }
 - 
 
158 
}
 - 
 
159 
 
 145 
}
160 
 
 146 
 
161 
// Responsive tables
 147