annotate themes/contrib/mayo/sass/partials/_normalize.scss @ 5:12f9dff5fda9 tip

Update to Drupal core 8.7.1
author Chris Cannam
date Thu, 09 May 2019 15:34:47 +0100
parents 5311817fb629
children
rev   line source
Chris@2 1 // =============================================================================
Chris@2 2 // Normalize.scss settings
Chris@2 3 // =============================================================================
Chris@2 4
Chris@2 5 // Set to false if you want to drop support for IE6 and IE7
Chris@2 6 // Notice: setting to false might render some elements
Chris@2 7 // slightly differently than when set to true
Chris@2 8
Chris@2 9 $support-for-ie6-and-ie7: false;
Chris@2 10
Chris@2 11 // =============================================================================
Chris@2 12 // HTML5 display definitions
Chris@2 13 // =============================================================================
Chris@2 14
Chris@2 15 // Corrects block display not defined in IE6/7/8/9 & FF3
Chris@2 16
Chris@2 17 article,
Chris@2 18 aside,
Chris@2 19 details,
Chris@2 20 figcaption,
Chris@2 21 figure,
Chris@2 22 footer,
Chris@2 23 header,
Chris@2 24 hgroup,
Chris@2 25 nav,
Chris@2 26 section,
Chris@2 27 summary {
Chris@2 28 display: block;
Chris@2 29 }
Chris@2 30
Chris@2 31 // Corrects inline-block display not defined in IE6/7/8/9 & FF3
Chris@2 32
Chris@2 33 audio,
Chris@2 34 canvas,
Chris@2 35 video {
Chris@2 36 display: inline-block;
Chris@2 37 @if $support-for-ie6-and-ie7 {
Chris@2 38 *display: inline;
Chris@2 39 *zoom: 1;
Chris@2 40 }
Chris@2 41 }
Chris@2 42
Chris@2 43 // 1. Prevents modern browsers from displaying 'audio' without controls
Chris@2 44 // 2. Remove excess height in iOS5 devices
Chris@2 45
Chris@2 46 audio:not([controls]) {
Chris@2 47 display: none; // 1
Chris@2 48 height: 0; // 2
Chris@2 49 }
Chris@2 50
Chris@2 51 // Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
Chris@2 52 // Known issue: no IE6 support
Chris@2 53
Chris@2 54 [hidden] {
Chris@2 55 display: none;
Chris@2 56 }
Chris@2 57
Chris@2 58 // =============================================================================
Chris@2 59 // Base
Chris@2 60 // =============================================================================
Chris@2 61
Chris@2 62 // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
Chris@2 63 // http://clagnut.com/blog/348/#c790
Chris@2 64 // 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
Chris@2 65 // www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
Chris@2 66
Chris@2 67 html {
Chris@2 68 @if $support-for-ie6-and-ie7 {
Chris@2 69 font-size: 100%; // 1
Chris@2 70 }
Chris@2 71 -webkit-text-size-adjust: 100%; // 2
Chris@2 72 -ms-text-size-adjust: 100%; // 2
Chris@2 73 }
Chris@2 74
Chris@2 75 // Addresses font-family inconsistency between 'textarea' and other form elements.
Chris@2 76
Chris@2 77 html,
Chris@2 78 button,
Chris@2 79 input,
Chris@2 80 select,
Chris@2 81 textarea {
Chris@2 82 font-family: sans-serif;
Chris@2 83 }
Chris@2 84
Chris@2 85 // Addresses margins handled incorrectly in IE6/7
Chris@2 86
Chris@2 87 body {
Chris@2 88 margin: 0;
Chris@2 89 }
Chris@2 90
Chris@2 91 // =============================================================================
Chris@2 92 // Typography
Chris@2 93 // =============================================================================
Chris@2 94
Chris@2 95 // Addresses font sizes and margins set differently in IE6/7
Chris@2 96 // Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
Chris@2 97
Chris@2 98 h1 {
Chris@2 99 font-size: 2em;
Chris@2 100 margin: 0.67em 0;
Chris@2 101 }
Chris@2 102
Chris@2 103 #header h1 {
Chris@2 104 margin: 0 0;
Chris@2 105 }
Chris@2 106
Chris@2 107 h2 {
Chris@2 108 font-size: 1.5em;
Chris@2 109 margin: 0.83em 0;
Chris@2 110 }
Chris@2 111
Chris@2 112 h3 {
Chris@2 113 font-size: 1.17em;
Chris@2 114 margin: 1em 0;
Chris@2 115 }
Chris@2 116
Chris@2 117 h4 {
Chris@2 118 font-size: 1em;
Chris@2 119 margin: 1.33em 0;
Chris@2 120 }
Chris@2 121
Chris@2 122 h5 {
Chris@2 123 font-size: 0.83em;
Chris@2 124 margin: 1.67em 0;
Chris@2 125 }
Chris@2 126
Chris@2 127 h6 {
Chris@2 128 font-size: 0.75em;
Chris@2 129 margin: 2.33em 0;
Chris@2 130 }
Chris@2 131
Chris@2 132 // Addresses styling not present in IE7/8/9, S5, Chrome
Chris@2 133
Chris@2 134 abbr[title] {
Chris@2 135 border-bottom: 1px dotted;
Chris@2 136 }
Chris@2 137
Chris@2 138 // Addresses style set to 'bolder' in FF3+, S4/5, Chrome
Chris@2 139
Chris@2 140 b,
Chris@2 141 strong {
Chris@2 142 font-weight: bold;
Chris@2 143 }
Chris@2 144
Chris@2 145 @if $support-for-ie6-and-ie7 {
Chris@2 146 blockquote {
Chris@2 147 margin: 1em 40px;
Chris@2 148 }
Chris@2 149 }
Chris@2 150
Chris@2 151 // Addresses styling not present in S5, Chrome
Chris@2 152
Chris@2 153 dfn {
Chris@2 154 font-style: italic;
Chris@2 155 }
Chris@2 156
Chris@2 157 // Addresses styling not present in IE6/7/8/9
Chris@2 158
Chris@2 159 mark {
Chris@2 160 background: #ff0;
Chris@2 161 color: #000;
Chris@2 162 }
Chris@2 163
Chris@2 164 // Addresses margins set differently in IE6/7
Chris@2 165 @if $support-for-ie6-and-ie7 {
Chris@2 166 p,
Chris@2 167 pre {
Chris@2 168 margin: 1em 0;
Chris@2 169 }
Chris@2 170 }
Chris@2 171
Chris@2 172 // Corrects font family set oddly in IE6, S4/5, Chrome
Chris@2 173 // en.wikipedia.org/wiki/User:Davidgothberg/Test59
Chris@2 174
Chris@2 175 pre,
Chris@2 176 code,
Chris@2 177 kbd,
Chris@2 178 samp {
Chris@2 179 font-family: monospace, serif;
Chris@2 180 @if $support-for-ie6-and-ie7 {
Chris@2 181 _font-family: 'courier new', monospace;
Chris@2 182 }
Chris@2 183 font-size: 1em;
Chris@2 184 }
Chris@2 185
Chris@2 186 // Improves readability of pre-formatted text in all browsers
Chris@2 187
Chris@2 188 pre {
Chris@2 189 white-space: pre;
Chris@2 190 white-space: pre-wrap;
Chris@2 191 word-wrap: break-word;
Chris@2 192 }
Chris@2 193
Chris@2 194 // 1. Addresses CSS quotes not supported in IE6/7
Chris@2 195 // 2. Addresses quote property not supported in S4
Chris@2 196
Chris@2 197 // 1
Chris@2 198 @if $support-for-ie6-and-ie7 {
Chris@2 199 q {
Chris@2 200 quotes: none;
Chris@2 201 }
Chris@2 202 }
Chris@2 203
Chris@2 204 // 2
Chris@2 205
Chris@2 206 q:before,
Chris@2 207 q:after {
Chris@2 208 content: '';
Chris@2 209 content: none;
Chris@2 210 }
Chris@2 211
Chris@2 212 small {
Chris@2 213 font-size: 75%;
Chris@2 214 }
Chris@2 215
Chris@2 216 // Prevents sub and sup affecting line-height in all browsers
Chris@2 217 // gist.github.com/413930
Chris@2 218
Chris@2 219 sub,
Chris@2 220 sup {
Chris@2 221 font-size: 75%;
Chris@2 222 line-height: 0;
Chris@2 223 position: relative;
Chris@2 224 vertical-align: baseline;
Chris@2 225 }
Chris@2 226
Chris@2 227 sup {
Chris@2 228 top: -0.5em;
Chris@2 229 }
Chris@2 230
Chris@2 231 sub {
Chris@2 232 bottom: -0.25em;
Chris@2 233 }
Chris@2 234
Chris@2 235 // =============================================================================
Chris@2 236 // Lists
Chris@2 237 // =============================================================================
Chris@2 238
Chris@2 239 // Addresses margins set differently in IE6/7
Chris@2 240 @if $support-for-ie6-and-ie7 {
Chris@2 241 dl,
Chris@2 242 menu,
Chris@2 243 ol,
Chris@2 244 ul {
Chris@2 245 margin: 0;
Chris@2 246 padding: 0;
Chris@2 247 }
Chris@2 248 }
Chris@2 249
Chris@2 250 @if $support-for-ie6-and-ie7 {
Chris@2 251 dd {
Chris@2 252 margin: 0 0 0 40px;
Chris@2 253 }
Chris@2 254 }
Chris@2 255
Chris@2 256 // Addresses paddings set differently in IE6/7
Chris@2 257 @if $support-for-ie6-and-ie7 {
Chris@2 258 menu,
Chris@2 259 ol,
Chris@2 260 ul {
Chris@2 261 padding: 0 0 0 40px;
Chris@2 262 }
Chris@2 263 }
Chris@2 264
Chris@2 265 // Corrects list images handled incorrectly in IE7
Chris@2 266
Chris@2 267 nav {
Chris@2 268 ul,
Chris@2 269 ol {
Chris@2 270 list-style: none;
Chris@2 271 padding: 0;
Chris@2 272 @if $support-for-ie6-and-ie7 {
Chris@2 273 list-style-image: none;
Chris@2 274 }
Chris@2 275 }
Chris@2 276 }
Chris@2 277
Chris@2 278 // =============================================================================
Chris@2 279 // Embedded content
Chris@2 280 // =============================================================================
Chris@2 281
Chris@2 282 // 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
Chris@2 283 // 2. Improves image quality when scaled in IE7
Chris@2 284 // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
Chris@2 285
Chris@2 286 img {
Chris@2 287 border: 0; // 1
Chris@2 288 @if $support-for-ie6-and-ie7 {
Chris@2 289 -ms-interpolation-mode: bicubic; // 2
Chris@2 290 }
Chris@2 291 }
Chris@2 292
Chris@2 293 // Corrects overflow displayed oddly in IE9
Chris@2 294
Chris@2 295 svg:not(:root) {
Chris@2 296 overflow: hidden;
Chris@2 297 }
Chris@2 298
Chris@2 299 // =============================================================================
Chris@2 300 // Figures
Chris@2 301 // =============================================================================
Chris@2 302
Chris@2 303 // Addresses margin not present in IE6/7/8/9, S5, O11
Chris@2 304
Chris@2 305 figure {
Chris@2 306 margin: 0;
Chris@2 307 }
Chris@2 308
Chris@2 309 // =============================================================================
Chris@2 310 // Forms
Chris@2 311 // =============================================================================
Chris@2 312
Chris@2 313 // Corrects margin displayed oddly in IE6/7
Chris@2 314 @if $support-for-ie6-and-ie7 {
Chris@2 315 form {
Chris@2 316 margin: 0;
Chris@2 317 }
Chris@2 318 }
Chris@2 319
Chris@2 320 // Define consistent border, margin, and padding
Chris@2 321
Chris@2 322 fieldset {
Chris@2 323 border: 1px solid #c0c0c0;
Chris@2 324 margin: 0 2px;
Chris@2 325 padding: 0.35em 0.625em 0.75em;
Chris@2 326 }
Chris@2 327
Chris@2 328 // 1. Corrects color not being inherited in IE6/7/8/9
Chris@2 329 // 2. Corrects text not wrapping in FF3
Chris@2 330 // 3. Corrects alignment displayed oddly in IE6/7
Chris@2 331
Chris@2 332 legend {
Chris@2 333 border: 0; // 1
Chris@2 334 padding: 0;
Chris@2 335 white-space: normal; // 2
Chris@2 336 @if $support-for-ie6-and-ie7 {
Chris@2 337 *margin-left: -7px; // 3
Chris@2 338 }
Chris@2 339 }
Chris@2 340
Chris@2 341 // 1. Corrects font size not being inherited in all browsers
Chris@2 342 // 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
Chris@2 343 // 3. Improves appearance and consistency in all browsers
Chris@2 344
Chris@2 345 button,
Chris@2 346 input,
Chris@2 347 select,
Chris@2 348 textarea {
Chris@2 349 font-size: 100%; // 1
Chris@2 350 margin: 0; // 2
Chris@2 351 vertical-align: baseline; // 3
Chris@2 352 @if $support-for-ie6-and-ie7 {
Chris@2 353 *vertical-align: middle; // 3
Chris@2 354 }
Chris@2 355 }
Chris@2 356
Chris@2 357 // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
Chris@2 358
Chris@2 359 button,
Chris@2 360 input {
Chris@2 361 line-height: normal; // 1
Chris@2 362 }
Chris@2 363
Chris@2 364 // 1. Improves usability and consistency of cursor style between image-type 'input' and others
Chris@2 365 // 2. Corrects inability to style clickable 'input' types in iOS
Chris@2 366 // 3. Removes inner spacing in IE7 without affecting normal text inputs
Chris@2 367 // Known issue: inner spacing remains in IE6
Chris@2 368
Chris@2 369 button,
Chris@2 370 input[type="button"],
Chris@2 371 input[type="reset"],
Chris@2 372 input[type="submit"] {
Chris@2 373 cursor: pointer; // 1
Chris@2 374 -webkit-appearance: button; // 2
Chris@2 375 @if $support-for-ie6-and-ie7 {
Chris@2 376 *overflow: visible; // 3
Chris@2 377 }
Chris@2 378 }
Chris@2 379
Chris@2 380 // Re-set default cursor for disabled elements
Chris@2 381
Chris@2 382 button[disabled],
Chris@2 383 input[disabled] {
Chris@2 384 cursor: default;
Chris@2 385 }
Chris@2 386
Chris@2 387 // 1. Addresses box sizing set to content-box in IE8/9
Chris@2 388 // 2. Removes excess padding in IE8/9
Chris@2 389 // 3. Removes excess padding in IE7
Chris@2 390 // Known issue: excess padding remains in IE6
Chris@2 391
Chris@2 392 input[type="checkbox"],
Chris@2 393 input[type="radio"] {
Chris@2 394 box-sizing: border-box; // 1
Chris@2 395 padding: 0; // 2
Chris@2 396 @if $support-for-ie6-and-ie7 {
Chris@2 397 *height: 13px; // 3
Chris@2 398 *width: 13px; // 3
Chris@2 399 }
Chris@2 400 }
Chris@2 401
Chris@2 402 // 1. Addresses appearance set to searchfield in S5, Chrome
Chris@2 403 // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
Chris@2 404 // 3. Removes inner padding and search cancel button in S5, Chrome on OS X
Chris@2 405
Chris@2 406 input[type="search"] {
Chris@2 407 -webkit-appearance: textfield; // 1
Chris@2 408 -moz-box-sizing: content-box;
Chris@2 409 -webkit-box-sizing: content-box; // 2
Chris@2 410 box-sizing: content-box;
Chris@2 411 &::-webkit-search-decoration, &::-webkit-search-cancel-button { // 3
Chris@2 412 -webkit-appearance: none;
Chris@2 413 }
Chris@2 414 }
Chris@2 415
Chris@2 416 // Removes inner padding and border in FF3+
Chris@2 417 // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
Chris@2 418
Chris@2 419 button, input {
Chris@2 420 &::-moz-focus-inner {
Chris@2 421 border: 0;
Chris@2 422 padding: 0;
Chris@2 423 }
Chris@2 424 }
Chris@2 425
Chris@2 426 // 1. Removes default vertical scrollbar in IE6/7/8/9
Chris@2 427 // 2. Improves readability and alignment in all browsers
Chris@2 428
Chris@2 429 textarea {
Chris@2 430 overflow: auto; // 1
Chris@2 431 vertical-align: top; // 2
Chris@2 432 }
Chris@2 433
Chris@2 434 // =============================================================================
Chris@2 435 // Tables
Chris@2 436 // =============================================================================
Chris@2 437
Chris@2 438 // Remove most spacing between table cells
Chris@2 439
Chris@2 440 table {
Chris@2 441 border-collapse: collapse;
Chris@2 442 border-spacing: 0;
Chris@2 443 }