[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 // Range 2 // 3 // Style range inputs the same across browsers. Vendor-specific rules for pseudo 4 // elements cannot be mixed. As such, there are no shared styles for focus or 5 // active states on prefixed selectors. 6 7 .form-range { 8 width: 100%; 9 height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); 10 padding: 0; // Need to reset padding 11 background-color: transparent; 12 appearance: none; 13 14 &:focus { 15 outline: 0; 16 17 // Pseudo-elements must be split across multiple rulesets to have an effect. 18 // No box-shadow() mixin for focus accessibility. 19 &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 20 &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 21 } 22 23 &::-moz-focus-outer { 24 border: 0; 25 } 26 27 &::-webkit-slider-thumb { 28 width: $form-range-thumb-width; 29 height: $form-range-thumb-height; 30 margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific 31 @include gradient-bg($form-range-thumb-bg); 32 border: $form-range-thumb-border; 33 @include border-radius($form-range-thumb-border-radius); 34 @include box-shadow($form-range-thumb-box-shadow); 35 @include transition($form-range-thumb-transition); 36 appearance: none; 37 38 &:active { 39 @include gradient-bg($form-range-thumb-active-bg); 40 } 41 } 42 43 &::-webkit-slider-runnable-track { 44 width: $form-range-track-width; 45 height: $form-range-track-height; 46 color: transparent; // Why? 47 cursor: $form-range-track-cursor; 48 background-color: $form-range-track-bg; 49 border-color: transparent; 50 @include border-radius($form-range-track-border-radius); 51 @include box-shadow($form-range-track-box-shadow); 52 } 53 54 &::-moz-range-thumb { 55 width: $form-range-thumb-width; 56 height: $form-range-thumb-height; 57 @include gradient-bg($form-range-thumb-bg); 58 border: $form-range-thumb-border; 59 @include border-radius($form-range-thumb-border-radius); 60 @include box-shadow($form-range-thumb-box-shadow); 61 @include transition($form-range-thumb-transition); 62 appearance: none; 63 64 &:active { 65 @include gradient-bg($form-range-thumb-active-bg); 66 } 67 } 68 69 &::-moz-range-track { 70 width: $form-range-track-width; 71 height: $form-range-track-height; 72 color: transparent; 73 cursor: $form-range-track-cursor; 74 background-color: $form-range-track-bg; 75 border-color: transparent; // Firefox specific? 76 @include border-radius($form-range-track-border-radius); 77 @include box-shadow($form-range-track-box-shadow); 78 } 79 80 &:disabled { 81 pointer-events: none; 82 83 &::-webkit-slider-thumb { 84 background-color: $form-range-thumb-disabled-bg; 85 } 86 87 &::-moz-range-thumb { 88 background-color: $form-range-thumb-disabled-bg; 89 } 90 } 91 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |