Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
// stylelint-disable selector-no-qualifying-type
2 
 
3 
//
4 
// Base styles
5 
//
6 
 
7 
.btn {
8 
  display: inline-block;
9 
  font-family: $btn-font-family;
10 
  font-weight: $btn-font-weight;
11 
  color: $body-color;
12 
  text-align: center;
13 
  text-decoration: if($link-decoration == none, null, none);
14 
  white-space: $btn-white-space;
15 
  vertical-align: middle;
16 
  user-select: none;
17 
  background-color: transparent;
18 
  border: $btn-border-width solid transparent;
19 
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
20 
  @include transition($btn-transition);
21 
 
22 
  @include hover() {
23 
    color: $body-color;
24 
    text-decoration: none;
25 
  }
26 
 
27 
  &:focus,
28 
  &.focus {
29 
    outline: 0;
30 
    box-shadow: $btn-focus-box-shadow;
31 
  }
32 
 
33 
  // Disabled comes first so active can properly restyle
34 
  &.disabled,
35 
  &:disabled {
36 
    opacity: $btn-disabled-opacity;
37 
    @include box-shadow(none);
38 
  }
39 
 
40 
  &:not(:disabled):not(.disabled) {
41 
    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
42 
 
43 
    &:active,
44 
    &.active {
45 
      @include box-shadow($btn-active-box-shadow);
46 
 
47 
      &:focus {
48 
        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
49 
      }
50 
    }
51 
  }
52 
}
53 
 
54 
// Future-proof disabling of clicks on `<a>` elements
55 
a.btn.disabled,
56 
fieldset:disabled a.btn {
57 
  pointer-events: none;
58 
}
59 
 
60 
 
61 
//
62 
// Alternate buttons
63 
//
64 
 
65 
@each $color, $value in $theme-colors {
66 
  .btn-#{$color} {
67 
    @include button-variant($value, $value);
68 
  }
69 
}
70 
 
71 
@each $color, $value in $theme-colors {
72 
  .btn-outline-#{$color} {
73 
    @include button-outline-variant($value);
74 
  }
75 
}
76 
 
77 
 
78 
//
79 
// Link buttons
80 
//
81 
 
82 
// Make a button look and behave like a link
83 
.btn-link {
84 
  font-weight: $font-weight-normal;
85 
  color: $link-color;
86 
  text-decoration: $link-decoration;
87 
 
88 
  @include hover() {
89 
    color: $link-hover-color;
90 
    text-decoration: $link-hover-decoration;
91 
  }
92 
 
93 
  &:focus,
94 
  &.focus {
95 
    text-decoration: $link-hover-decoration;
96 
  }
97 
 
98 
  &:disabled,
99 
  &.disabled {
100 
    color: $btn-link-disabled-color;
101 
    pointer-events: none;
102 
  }
103 
 
104 
  // No need for an active state here
105 
}
106 
 
107 
 
108 
//
109 
// Button Sizes
110 
//
111 
 
112 
.btn-lg {
113 
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
114 
}
115 
 
116 
.btn-sm {
117 
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
118 
}
119 
 
120 
 
121 
//
122 
// Block button
123 
//
124 
 
125 
.btn-block {
126 
  display: block;
127 
  width: 100%;
128 
 
129 
  // Vertically space out multiple block buttons
130 
  + .btn-block {
131 
    margin-top: $btn-block-spacing-y;
132 
  }
133 
}
134 
 
135 
// Specificity overrides
136 
input[type="submit"],
137 
input[type="reset"],
138 
input[type="button"] {
139 
  &.btn-block {
140 
    width: 100%;
141 
  }
142 
}