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 
// Contents
 - 
 
2 
//
 - 
 
3 
// Navbar
 - 
 
4 
// Navbar brand
 - 
 
5 
// Navbar nav
 - 
 
6 
// Navbar text
 - 
 
7 
// Navbar divider
 - 
 
8 
// Responsive navbar
 - 
 
9 
// Navbar position
 - 
 
10 
// Navbar themes
 - 
 
11 
 
 - 
 
12 
 
 - 
 
13 
// Navbar
 1 
// Navbar
14 
//
 2 
//
15 
// Provide a static navbar from which we expand to create full-width, fixed, and
 3 
// Provide a static navbar from which we expand to create full-width, fixed, and
16 
// other navbar variations.
 4 
// other navbar variations.
Línea 17... Línea 5...
17 
 
 5 
 
- 
 
 6 
.navbar {
- 
 
 7 
  // scss-docs-start navbar-css-vars
- 
 
 8 
  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
- 
 
 9 
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
- 
 
 10 
  --#{$prefix}navbar-color: #{$navbar-light-color};
- 
 
 11 
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
- 
 
 12 
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
- 
 
 13 
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
- 
 
 14 
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
- 
 
 15 
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
- 
 
 16 
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
- 
 
 17 
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
- 
 
 18 
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
- 
 
 19 
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
- 
 
 20 
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
- 
 
 21 
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
- 
 
 22 
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
- 
 
 23 
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
- 
 
 24 
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
- 
 
 25 
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
- 
 
 26 
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
- 
 
 27 
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
- 
 
 28 
  // scss-docs-end navbar-css-vars
18 
.navbar {
 29 
 
19 
  position: relative;
 30 
  position: relative;
20 
  display: flex;
 31 
  display: flex;
21 
  flex-wrap: wrap; // allow us to do the line break for collapsing content
 32 
  flex-wrap: wrap; // allow us to do the line break for collapsing content
22 
  align-items: center;
 33 
  align-items: center;
23 
  justify-content: space-between; // space out brand from logo
 34 
  justify-content: space-between; // space out brand from logo
- 
 
 35 
  padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
Línea 24... Línea 36...
24 
  padding: $navbar-padding-y $navbar-padding-x;
 36 
  @include gradient-bg();
25 
 
 37 
 
- 
 
 38 
  // Because flex properties aren't inherited, we need to redeclare these first
26 
  // Because flex properties aren't inherited, we need to redeclare these first
 39 
  // few properties so that content nested within behave properly.
27 
  // few properties so that content nested within behave properly.
 40 
  // The `flex-wrap` property is inherited to simplify the expanded navbars
28 
  %container-flex-properties {
 41 
  %container-flex-properties {
29 
    display: flex;
 42 
    display: flex;
30 
    flex-wrap: wrap;
 43 
    flex-wrap: inherit;
31 
    align-items: center;
 44 
    align-items: center;
Línea 32... Línea 45...
32 
    justify-content: space-between;
 45 
    justify-content: space-between;
33 
  }
 46 
  }
34 
 
 47 
 
35 
  .container,
 48 
  > .container,
Línea 36... Línea 49...
36 
  .container-fluid {
 49 
  > .container-fluid {
37 
    @extend %container-flex-properties;
 50 
    @extend %container-flex-properties;
Línea 48... Línea 61...
48 
// Navbar brand
 61 
// Navbar brand
49 
//
 62 
//
50 
// Used for brand, project, or site names.
 63 
// Used for brand, project, or site names.
Línea 51... Línea 64...
51 
 
 64 
 
52 
.navbar-brand {
 - 
 
53 
  display: inline-block;
 65 
.navbar-brand {
54 
  padding-top: $navbar-brand-padding-y;
 66 
  padding-top: var(--#{$prefix}navbar-brand-padding-y);
55 
  padding-bottom: $navbar-brand-padding-y;
 67 
  padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
56 
  margin-right: $navbar-padding-x;
 68 
  margin-right: var(--#{$prefix}navbar-brand-margin-end);
57 
  @include font-size($navbar-brand-font-size);
 69 
  @include font-size(var(--#{$prefix}navbar-brand-font-size));
- 
 
 70 
  color: var(--#{$prefix}navbar-brand-color);
58 
  line-height: inherit;
 71 
  text-decoration: if($link-decoration == none, null, none);
Línea -... Línea 72...
- 
 
 72 
  white-space: nowrap;
59 
  white-space: nowrap;
 73 
 
- 
 
 74 
  &:hover,
60 
 
 75 
  &:focus {
61 
  @include hover-focus() {
 76 
    color: var(--#{$prefix}navbar-brand-hover-color);
62 
    text-decoration: none;
 77 
    text-decoration: if($link-hover-decoration == underline, none, null);
Línea 63... Línea 78...
63 
  }
 78 
  }
64 
}
 79 
}
65 
 
 80 
 
Línea 66... Línea 81...
66 
 
 81 
 
- 
 
 82 
// Navbar nav
- 
 
 83 
//
- 
 
 84 
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
- 
 
 85 
 
- 
 
 86 
.navbar-nav {
- 
 
 87 
  // scss-docs-start navbar-nav-css-vars
- 
 
 88 
  --#{$prefix}nav-link-padding-x: 0;
- 
 
 89 
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
- 
 
 90 
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
- 
 
 91 
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
67 
// Navbar nav
 92 
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
68 
//
 93 
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
69 
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
 94 
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
70 
 
 95 
  // scss-docs-end navbar-nav-css-vars
71 
.navbar-nav {
 96 
 
Línea 72... Línea 97...
72 
  display: flex;
 97 
  display: flex;
73 
  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
 98 
  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
74 
  padding-left: 0;
 99 
  padding-left: 0;
- 
 
 100 
  margin-bottom: 0;
- 
 
 101 
  list-style: none;
75 
  margin-bottom: 0;
 102 
 
Línea 76... Línea 103...
76 
  list-style: none;
 103 
  .nav-link {
77 
 
 104 
    &.active,
78 
  .nav-link {
 - 
 
79 
    padding-right: 0;
 105 
    &.show {
80 
    padding-left: 0;
 106 
      color: var(--#{$prefix}navbar-active-color);
Línea 81... Línea 107...
81 
  }
 107 
    }
82 
 
 108 
  }
83 
  .dropdown-menu {
 109 
 
Línea 84... Línea 110...
84 
    position: static;
 110 
  .dropdown-menu {
85 
    float: none;
 - 
 
86 
  }
 111 
    position: static;
87 
}
 112 
  }
- 
 
 113 
}
- 
 
 114 
 
- 
 
 115 
 
- 
 
 116 
// Navbar text
- 
 
 117 
//
- 
 
 118 
//
- 
 
 119 
 
88 
 
 120 
.navbar-text {
Línea 89... Línea 121...
89 
 
 121 
  padding-top: $nav-link-padding-y;
90 
// Navbar text
 122 
  padding-bottom: $nav-link-padding-y;
Línea 114... Línea 146...
114 
  align-items: center;
 146 
  align-items: center;
115 
}
 147 
}
Línea 116... Línea 148...
116 
 
 148 
 
117 
// Button for toggling the navbar when in its collapsed state
 149 
// Button for toggling the navbar when in its collapsed state
118 
.navbar-toggler {
 150 
.navbar-toggler {
119 
  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
 151 
  padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
120 
  @include font-size($navbar-toggler-font-size);
 152 
  @include font-size(var(--#{$prefix}navbar-toggler-font-size));
- 
 
 153 
  line-height: 1;
121 
  line-height: 1;
 154 
  color: var(--#{$prefix}navbar-color);
122 
  background-color: transparent; // remove default button style
 155 
  background-color: transparent; // remove default button style
123 
  border: $border-width solid transparent; // remove default button style
 156 
  border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
- 
 
 157 
  @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
Línea 124... Línea 158...
124 
  @include border-radius($navbar-toggler-border-radius);
 158 
  @include transition(var(--#{$prefix}navbar-toggler-transition));
125 
 
 159 
 
126 
  @include hover-focus() {
 160 
  &:hover {
- 
 
 161 
    text-decoration: none;
- 
 
 162 
  }
- 
 
 163 
 
- 
 
 164 
  &:focus {
- 
 
 165 
    text-decoration: none;
- 
 
 166 
    outline: 0;
127 
    text-decoration: none;
 167 
    box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
Línea 128... Línea 168...
128 
  }
 168 
  }
129 
}
 169 
}
130 
 
 170 
 
131 
// Keep as a separate element so folks can easily override it with another icon
 171 
// Keep as a separate element so folks can easily override it with another icon
132 
// or image file as needed.
 172 
// or image file as needed.
133 
.navbar-toggler-icon {
 173 
.navbar-toggler-icon {
134 
  display: inline-block;
 174 
  display: inline-block;
- 
 
 175 
  width: 1.5em;
135 
  width: 1.5em;
 176 
  height: 1.5em;
- 
 
 177 
  vertical-align: middle;
136 
  height: 1.5em;
 178 
  background-image: var(--#{$prefix}navbar-toggler-icon-bg);
137 
  vertical-align: middle;
 179 
  background-repeat: no-repeat;
Línea 138... Línea 180...
138 
  content: "";
 180 
  background-position: center;
139 
  background: 50% / 100% 100% no-repeat;
 181 
  background-size: 100%;
140 
}
 182 
}
141 
 
 183 
 
Línea -... Línea 184...
- 
 
 184 
.navbar-nav-scroll {
142 
.navbar-nav-scroll {
 185 
  max-height: var(--#{$prefix}scroll-height, 75vh);
143 
  max-height: $navbar-nav-scroll-max-height;
 186 
  overflow-y: auto;
144 
  overflow-y: auto;
 187 
}
145 
}
 188 
 
146 
 
 189 
// scss-docs-start navbar-expand-loop
147 
// Generate series of `.navbar-expand-*` responsive classes for configuring
 190 
// Generate series of `.navbar-expand-*` responsive classes for configuring
Línea -... Línea 191...
- 
 
 191 
// where your navbar collapses.
148 
// where your navbar collapses.
 192 
.navbar-expand {
149 
.navbar-expand {
 - 
 
150 
  @each $breakpoint in map-keys($grid-breakpoints) {
 - 
 
151 
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
 - 
 
152 
    $infix: breakpoint-infix($next, $grid-breakpoints);
 - 
 
153 
 
 - 
 
154 
    &#{$infix} {
 - 
 
155 
      @include media-breakpoint-down($breakpoint) {
 - 
 
156 
        %container-navbar-expand-#{$breakpoint} {
 - 
 
157 
          padding-right: 0;
 - 
 
158 
          padding-left: 0;
 - 
 
159 
        }
 - 
 
160 
 
 - 
 
161 
        > .container,
 - 
 
162 
        > .container-fluid {
 - 
 
163 
          @extend %container-navbar-expand-#{$breakpoint};
 - 
 
164 
        }
 - 
 
165 
 
 - 
 
166 
        @each $size, $container-max-width in $container-max-widths {
 - 
 
167 
          > .container#{breakpoint-infix($size, $container-max-widths)} {
 193 
  @each $breakpoint in map-keys($grid-breakpoints) {
168 
            @extend %container-navbar-expand-#{$breakpoint};
 194 
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
169 
          }
 195 
    $infix: breakpoint-infix($next, $grid-breakpoints);
Línea 170... Línea 196...
170 
        }
 196 
 
171 
      }
 197 
    // stylelint-disable-next-line scss/selector-no-union-class-name
Línea 172... Línea 198...
172 
 
 198 
    &#{$infix} {
173 
      @include media-breakpoint-up($next) {
 199 
      @include media-breakpoint-up($next) {
174 
        flex-flow: row nowrap;
 200 
        flex-wrap: nowrap;
Línea 175... Línea 201...
175 
        justify-content: flex-start;
 201 
        justify-content: flex-start;
176 
 
 202 
 
177 
        .navbar-nav {
 203 
        .navbar-nav {
178 
          flex-direction: row;
 - 
 
179 
 
 - 
 
180 
          .dropdown-menu {
 - 
 
181 
            position: absolute;
 - 
 
182 
          }
 - 
 
183 
 
 - 
 
184 
          .nav-link {
 - 
 
185 
            padding-right: $navbar-nav-link-padding-x;
 - 
 
186 
            padding-left: $navbar-nav-link-padding-x;
 - 
 
187 
          }
 - 
 
188 
        }
 - 
 
189 
 
 - 
 
190 
        // For nesting containers, have to redeclare for alignment purposes
 - 
 
191 
        %container-nesting-#{$breakpoint} {
 - 
 
192 
          flex-wrap: nowrap;
 - 
 
193 
        }
 - 
 
194 
 
 204 
          flex-direction: row;
195 
        > .container,
 205 
 
Línea 196... Línea 206...
196 
        > .container-fluid {
 206 
          .dropdown-menu {
197 
          @extend %container-nesting-#{$breakpoint};
 207 
            position: absolute;
198 
        }
 208 
          }
Línea 199... Línea 209...
199 
 
 209 
 
200 
        @each $size, $container-max-width in $container-max-widths {
 210 
          .nav-link {
201 
          > .container#{breakpoint-infix($size, $container-max-widths)} {
 - 
 
202 
            @extend %container-nesting-#{$breakpoint};
 - 
 
203 
          }
 211 
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
204 
        }
 212 
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
Línea 205... Línea 213...
205 
 
 213 
          }
206 
        .navbar-nav-scroll {
 214 
        }
207 
          overflow: visible;
 215 
 
- 
 
 216 
        .navbar-nav-scroll {
- 
 
 217 
          overflow: visible;
- 
 
 218 
        }
- 
 
 219 
 
- 
 
 220 
        .navbar-collapse {
- 
 
 221 
          display: flex !important; // stylelint-disable-line declaration-no-important
- 
 
 222 
          flex-basis: auto;
- 
 
 223 
        }
- 
 
 224 
 
- 
 
 225 
        .navbar-toggler {
- 
 
 226 
          display: none;
- 
 
 227 
        }
- 
 
 228 
 
- 
 
 229 
        .offcanvas {
- 
 
 230 
          // stylelint-disable declaration-no-important
- 
 
 231 
          position: static;
- 
 
 232 
          z-index: auto;
- 
 
 233 
          flex-grow: 1;
- 
 
 234 
          width: auto !important;
- 
 
 235 
          height: auto !important;
- 
 
 236 
          visibility: visible !important;
- 
 
 237 
          background-color: transparent !important;
- 
 
 238 
          border: 0 !important;
- 
 
 239 
          transform: none !important;
- 
 
 240 
          @include box-shadow(none);
- 
 
 241 
          @include transition(none);
- 
 
 242 
          // stylelint-enable declaration-no-important
208 
        }
 243 
 
209 
 
 244 
          .offcanvas-header {
210 
        .navbar-collapse {
 245 
            display: none;
211 
          display: flex !important; // stylelint-disable-line declaration-no-important
 246 
          }
212 
 
 - 
 
- 
 
 247 
 
Línea 213... Línea 248...
213 
          // Changes flex-bases to auto because of an IE10 bug
 248 
          .offcanvas-body {
214 
          flex-basis: auto;
 249 
            display: flex;
215 
        }
 250 
            flex-grow: 0;
Línea 216... Línea -...
216 
 
 - 
 
217 
        .navbar-toggler {
 251 
            padding: 0;
218 
          display: none;
 - 
 
219 
        }
 - 
 
220 
      }
 - 
 
221 
    }
 - 
 
222 
  }
 - 
 
223 
}
 - 
 
224 
 
 - 
 
225 
 
 - 
 
226 
// Navbar themes
 - 
 
227 
//
 - 
 
228 
// Styles for switching between navbars with light or dark background.
 - 
 
229 
 
 - 
 
230 
// Dark links against a light background
 - 
 
231 
.navbar-light {
 - 
 
232 
  .navbar-brand {
 - 
 
233 
    color: $navbar-light-brand-color;
 - 
 
234 
 
 - 
 
235 
    @include hover-focus() {
 - 
 
236 
      color: $navbar-light-brand-hover-color;
 - 
 
237 
    }
 - 
 
238 
  }
 - 
 
239 
 
 - 
 
240 
  .navbar-nav {
 - 
 
241 
    .nav-link {
 - 
 
242 
      color: $navbar-light-color;
 - 
 
243 
 
 - 
 
244 
      @include hover-focus() {
 - 
 
245 
        color: $navbar-light-hover-color;
 - 
 
246 
      }
 - 
 
247 
 
 - 
 
248 
      &.disabled {
 - 
 
249 
        color: $navbar-light-disabled-color;
 252 
            overflow-y: visible;
250 
      }
 - 
 
251 
    }
 - 
 
252 
 
 - 
 
253 
    .show > .nav-link,
 - 
 
254 
    .active > .nav-link,
 - 
 
255 
    .nav-link.show,
 - 
 
256 
    .nav-link.active {
 - 
 
257 
      color: $navbar-light-active-color;
 - 
 
258 
    }
 - 
 
259 
  }
 - 
 
260 
 
 - 
 
261 
  .navbar-toggler {
 - 
 
262 
    color: $navbar-light-color;
 - 
 
263 
    border-color: $navbar-light-toggler-border-color;
 - 
 
264 
  }
 - 
 
265 
 
 - 
 
266 
  .navbar-toggler-icon {
 253 
          }
Línea 267... Línea -...
267 
    background-image: escape-svg($navbar-light-toggler-icon-bg);
 - 
 
268 
  }
 254 
        }
269 
 
 255 
      }
270 
  .navbar-text {
 256 
    }
271 
    color: $navbar-light-color;
 - 
 
272 
    a {
 - 
 
273 
      color: $navbar-light-active-color;
 - 
 
274 
 
 - 
 
275 
      @include hover-focus() {
 - 
 
276 
        color: $navbar-light-active-color;
 - 
 
277 
      }
 - 
 
278 
    }
 - 
 
279 
  }
 257 
  }
280 
}
 - 
 
281 
 
 - 
 
282 
// White links against a dark background
 258 
}
283 
.navbar-dark {
 - 
 
284 
  .navbar-brand {
 - 
 
285 
    color: $navbar-dark-brand-color;
 - 
 
286 
 
 259 
// scss-docs-end navbar-expand-loop
287 
    @include hover-focus() {
 - 
 
288 
      color: $navbar-dark-brand-hover-color;
 - 
 
289 
    }
 - 
 
290 
  }
 - 
 
291 
 
 - 
 
292 
  .navbar-nav {
 - 
 
293 
    .nav-link {
 - 
 
294 
      color: $navbar-dark-color;
 260 
 
295 
 
 - 
 
296 
      @include hover-focus() {
 - 
 
297 
        color: $navbar-dark-hover-color;
 - 
 
298 
      }
 261 
// Navbar themes
299 
 
 262 
//
300 
      &.disabled {
 263 
// Styles for switching between navbars with light or dark background.
301 
        color: $navbar-dark-disabled-color;
 - 
 
302 
      }
 - 
 
303 
    }
 264 
 
304 
 
 265 
.navbar-light {
305 
    .show > .nav-link,
 266 
  @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
306 
    .active > .nav-link,
 267 
}
307 
    .nav-link.show,
 268 
 
308 
    .nav-link.active {
 269 
.navbar-dark,
309 
      color: $navbar-dark-active-color;
 - 
 
310 
    }
 - 
 
311 
  }
 - 
 
312 
 
 270 
.navbar[data-bs-theme="dark"] {
313 
  .navbar-toggler {
 271 
  // scss-docs-start navbar-dark-css-vars
314 
    color: $navbar-dark-color;
 - 
 
315 
    border-color: $navbar-dark-toggler-border-color;
 272 
  --#{$prefix}navbar-color: #{$navbar-dark-color};
316 
  }
 273 
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
317 
 
 274 
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};