Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
//
2 
// Base styles
3 
//
4 
 
5 
.alert {
6 
  position: relative;
7 
  margin: 1rem 0;
8 
  padding: $alert-padding-y $alert-padding-x;
9 
  border: $alert-border-width solid transparent;
10 
  @include border-radius($alert-border-radius);
11 
 
12 
  font-size: $font-size-sm;
13 
  font-weight: $font-weight-medium;
14 
 
15 
  #page-maintenance & {
16 
    width: max-content;
17 
    max-width: 100%;
18 
    margin: 3px 0;
19 
  }
20 
 
21 
  .close[aria-hidden="true"] {
22 
    display: none;
23 
  }
24 
 
25 
  .close {
26 
    &:before {
27 
      #page-maintenance & {
28 
        background-size: 14px;
29 
      }
30 
    }
31 
  }
32 
 
33 
  p {
34 
    margin-bottom: .25rem;
35 
 
36 
    &:last-child {
37 
      margin-top: 0;
38 
      margin-bottom: 0;
39 
    }
40 
  }
41 
 
42 
  label {
43 
    margin-bottom: 0;
44 
    color: inherit;
45 
  }
46 
 
47 
  h1, h2, h3, h4, h5 {
48 
    color: inherit;
49 
  }
50 
 
51 
  h2 {
52 
    font-size: 1.5rem;
53 
    font-weight: $font-weight-bold;
54 
  }
55 
 
56 
  h3 {
57 
    font-size: 1rem;
58 
    font-weight: $font-weight-bold;
59 
  }
60 
 
61 
  & + .alert {
62 
    margin-top: 5px;
63 
  }
64 
 
65 
  .close {
66 
    background-color: $container-bg;
67 
  }
68 
 
69 
  // Advanced Notifications Plugin.
70 
  .notification_aicon {
71 
    width: 18px;
72 
    height: 18px;
73 
  }
74 
 
75 
  .notification-block-close {
76 
    position: absolute;
77 
    top: 10px;
78 
    right: 10px;
79 
  }
80 
 
81 
}
82 
 
83 
  .alert:first-of-type {
84 
    margin-top: 0;
85 
  }
86 
 
87 
  h2 + .alert {
88 
    margin-top: 1.5rem;
89 
    margin-bottom: 1.5rem;
90 
  }
91 
 
92 
  .alert--close {
93 
    padding-right: 40px;
94 
 
95 
    .close {
96 
      margin: 0;
97 
    }
98 
  }
99 
 
100 
 
101 
// Headings for larger alerts
102 
.alert-heading {
103 
  // Specified to prevent conflicts of changing $headings-color
104 
  color: inherit;
105 
}
106 
 
107 
// Provide class for links that match alerts
108 
.alert-link {
109 
  font-weight: $alert-link-font-weight;
110 
}
111 
 
112 
 
113 
// Dismissible alerts
114 
//
115 
// Expand the right padding and account for the close button's positioning.
116 
 
117 
.alert-dismissible {
118 
  padding-right: $close-font-size + $alert-padding-x * 2;
119 
 
120 
  // Adjust close link position
121 
  .close {
122 
    position: absolute;
123 
    top: 0;
124 
    right: 0;
125 
    z-index: 2;
126 
    padding: $alert-padding-y $alert-padding-x;
127 
    color: inherit;
128 
  }
129 
}
130 
 
131 
 
132 
// Alternate styles
133 
//
134 
// Generate contextual modifier classes for colorizing the alert.
135 
 
136 
.alert-primary {
137 
  background-color: $blue-100;
138 
  color: $blue-900;
139 
 
140 
  .theme-dark & {
141 
    background-color: #335094;
142 
    color: $blue-100;
143 
  }
144 
}
145 
 
146 
.alert-secondary {
147 
  background-color: $gray-100;
148 
  color: $gray-900;
149 
 
150 
  .theme-dark & {
151 
    background-color: $dm-gray-100;
152 
    color: $dm-gray-900;
153 
  }
154 
}
155 
 
156 
.alert-success {
157 
  background-color: $green-100;
158 
  color: $green-900;
159 
 
160 
  .theme-dark & {
161 
    background-color: #0a6457;
162 
    color: $green-100;
163 
  }
164 
}
165 
 
166 
.que .validationerror,
167 
.alert-danger {
168 
  background-color: $red-100;
169 
  color: $red-900;
170 
 
171 
  .theme-dark & {
172 
    background-color: #B13A3A;
173 
    color: $red-100;
174 
  }
175 
}
176 
 
177 
.alert-warning {
178 
  background-color: $yellow-100;
179 
  color: $yellow-900;
180 
 
181 
  .theme-dark & {
182 
    background-color: #7E6E4E;
183 
    color: $yellow-100;
184 
 
185 
    a {
186 
      color: $yellow-200;
187 
    }
188 
  }
189 
}
190 
 
191 
.alert-info {
192 
  background-color: $blue-100;
193 
  color: $blue-900;
194 
 
195 
  .theme-dark & {
196 
    background-color: #525ea9;
197 
    color: #dde1f8;
198 
 
199 
    a {
200 
      color: $blue-100;
201 
    }
202 
  }
203 
}
204 
 
205 
.alert-light {
206 
  background-color: $gray-100;
207 
  color: $gray-900;
208 
 
209 
  .theme-dark & {
210 
    background-color: #212121;
211 
    color: $dm-gray-900;
212 
 
213 
    .icon {
214 
      filter: invert(1);
215 
    }
216 
  }
217 
}
218 
 
219 
.alert-dark {
220 
  background-color: $gray-900;
221 
  color: $gray-100;
222 
 
223 
  .theme-dark & {
224 
    background-color: $dm-gray-900;
225 
    color: $dm-gray-100;
226 
  }
227 
}