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 
// Gradients
 1 
// Gradients
Línea -... Línea 2...
- 
 
 2 
 
2 
 
 3 
// scss-docs-start gradient-bg-mixin
- 
 
 4 
@mixin gradient-bg($color: null) {
- 
 
 5 
  background-color: $color;
3 
@mixin gradient-bg($color) {
 6 
 
4 
  @if $enable-gradients {
 - 
 
5 
    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
 - 
 
6 
  } @else {
 7 
  @if $enable-gradients {
7 
    background-color: $color;
 8 
    background-image: var(--#{$prefix}gradient);
8 
  }
 9 
  }
- 
 
 10 
}
Línea -... Línea 11...
- 
 
 11 
// scss-docs-end gradient-bg-mixin
9 
}
 12 
 
10 
 
 13 
// scss-docs-start gradient-mixins
11 
// Horizontal gradient, from left to right
 14 
// Horizontal gradient, from left to right
12 
//
 15 
//
13 
// Creates two color stops, start and end, by specifying a color and position for each color stop.
 16 
// Creates two color stops, start and end, by specifying a color and position for each color stop.
14 
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
 - 
 
15 
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
 17 
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
Línea 16... Línea 18...
16 
  background-repeat: repeat-x;
 18 
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
17 
}
 19 
}
18 
 
 20 
 
19 
// Vertical gradient, from top to bottom
 21 
// Vertical gradient, from top to bottom
20 
//
 22 
//
21 
// Creates two color stops, start and end, by specifying a color and position for each color stop.
 - 
 
22 
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
 23 
// Creates two color stops, start and end, by specifying a color and position for each color stop.
Línea 23... Línea 24...
23 
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
 24 
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
24 
  background-repeat: repeat-x;
 25 
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
25 
}
 - 
 
26 
 
 26 
}
- 
 
 27 
 
27 
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
 28 
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
28 
  background-image: linear-gradient($deg, $start-color, $end-color);
 29 
  background-image: linear-gradient($deg, $start-color, $end-color);
29 
  background-repeat: repeat-x;
 - 
 
30 
}
 30 
}
- 
 
 31 
 
31 
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
 32 
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
32 
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
 33 
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
33 
  background-repeat: no-repeat;
 - 
 
34 
}
 34 
}
- 
 
 35 
 
35 
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
 36 
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
36 
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
 37 
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
37 
  background-repeat: no-repeat;
 - 
 
38 
}
 38 
}
- 
 
 39 
 
39 
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
 40 
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
40 
  background-image: radial-gradient(circle, $inner-color, $outer-color);
 41 
  background-image: radial-gradient(circle, $inner-color, $outer-color);
41 
  background-repeat: no-repeat;
 42 
}
- 
 
 43