Merge pull request #1348 from jitsi/restyle-range-inputs
Re-styles range inputs for Chrome and FF.
This commit is contained in:
Дамян Минков
GitHub
commit
554595acd7
200
css/_mixins.scss
200
css/_mixins.scss
|
|
@ -2,52 +2,52 @@
|
||||||
* Animation mixin.
|
* Animation mixin.
|
||||||
*/
|
*/
|
||||||
@mixin animation($animate...) {
|
@mixin animation($animate...) {
|
||||||
$max: length($animate);
|
$max: length($animate);
|
||||||
$animations: '';
|
$animations: '';
|
||||||
|
|
||||||
@for $i from 1 through $max {
|
@for $i from 1 through $max {
|
||||||
$animations: #{$animations + nth($animate, $i)};
|
$animations: #{$animations + nth($animate, $i)};
|
||||||
|
|
||||||
@if $i < $max {
|
@if $i < $max {
|
||||||
$animations: #{$animations + ", "};
|
$animations: #{$animations + ", "};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
-webkit-animation: $animations;
|
||||||
-webkit-animation: $animations;
|
-moz-animation: $animations;
|
||||||
-moz-animation: $animations;
|
-o-animation: $animations;
|
||||||
-o-animation: $animations;
|
animation: $animations;
|
||||||
animation: $animations;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin flex() {
|
@mixin flex() {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -moz-box;
|
display: -moz-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Keyframes mixin.
|
* Keyframes mixin.
|
||||||
*/
|
*/
|
||||||
@mixin keyframes($animationName) {
|
@mixin keyframes($animationName) {
|
||||||
@-webkit-keyframes #{$animationName} {
|
@-webkit-keyframes #{$animationName} {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
@-moz-keyframes #{$animationName} {
|
@-moz-keyframes #{$animationName} {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
@-o-keyframes #{$animationName} {
|
@-o-keyframes #{$animationName} {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
@keyframes #{$animationName} {
|
@keyframes #{$animationName} {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin circle($diameter) {
|
@mixin circle($diameter) {
|
||||||
width: $diameter;
|
width: $diameter;
|
||||||
height: $diameter;
|
height: $diameter;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -60,10 +60,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin absoluteAligning() {
|
@mixin absoluteAligning() {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@include transform(translate(-50%, -50%));
|
@include transform(translate(-50%, -50%));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -75,81 +75,115 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin transform($func) {
|
@mixin transform($func) {
|
||||||
-moz-transform: $func;
|
-moz-transform: $func;
|
||||||
-ms-transform: $func;
|
-ms-transform: $func;
|
||||||
-webkit-transform: $func;
|
-webkit-transform: $func;
|
||||||
-o-transform: $func;
|
-o-transform: $func;
|
||||||
transform: $func;
|
transform: $func;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin transition($transition...) {
|
@mixin transition($transition...) {
|
||||||
-moz-transition: $transition;
|
-moz-transition: $transition;
|
||||||
-o-transition: $transition;
|
-o-transition: $transition;
|
||||||
-webkit-transition: $transition;
|
-webkit-transition: $transition;
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Mixin styling placeholder
|
* Mixin styling a placeholder.
|
||||||
**/
|
**/
|
||||||
@mixin placeholder() {
|
@mixin placeholder() {
|
||||||
$selectors: (
|
$selectors: (
|
||||||
"::-webkit-input-placeholder",
|
"::-webkit-input-placeholder",
|
||||||
"::-moz-placeholder",
|
"::-moz-placeholder",
|
||||||
":-moz-placeholder",
|
":-moz-placeholder",
|
||||||
":-ms-input-placeholder"
|
":-ms-input-placeholder"
|
||||||
);
|
);
|
||||||
|
|
||||||
@each $selector in $selectors {
|
@each $selector in $selectors {
|
||||||
#{$selector} {
|
#{$selector} {
|
||||||
@content;
|
@content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mixin styling a slider track for different browsers.
|
||||||
|
**/
|
||||||
|
@mixin slider() {
|
||||||
|
$selectors: (
|
||||||
|
"input[type=range]::-webkit-slider-runnable-track",
|
||||||
|
"input[type=range]::-moz-range-track",
|
||||||
|
"input[type=range]::-ms-track"
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $selector in $selectors {
|
||||||
|
#{$selector} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mixin styling a slider thumb for different browsers.
|
||||||
|
**/
|
||||||
|
@mixin slider-thumb() {
|
||||||
|
$selectors: (
|
||||||
|
"input[type=range]::-webkit-slider-thumb",
|
||||||
|
"input[type=range]::-moz-range-thumb",
|
||||||
|
"input[type=range]::-ms-thumb"
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $selector in $selectors {
|
||||||
|
#{$selector} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
|
@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
|
||||||
@if $inset {
|
@if $inset {
|
||||||
-webkit-box-shadow: inset $h $y $blur $color;
|
-webkit-box-shadow: inset $h $y $blur $color;
|
||||||
-moz-box-shadow: inset $h $y $blur $color;
|
-moz-box-shadow: inset $h $y $blur $color;
|
||||||
box-shadow: inset $h $y $blur $color;
|
box-shadow: inset $h $y $blur $color;
|
||||||
} @else {
|
} @else {
|
||||||
-webkit-box-shadow: $h $y $blur $color;
|
-webkit-box-shadow: $h $y $blur $color;
|
||||||
-moz-box-shadow: $h $y $blur $color;
|
-moz-box-shadow: $h $y $blur $color;
|
||||||
box-shadow: $h $y $blur $color;
|
box-shadow: $h $y $blur $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin no-box-shadow {
|
@mixin no-box-shadow {
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
-moz-box-shadow: none;
|
-moz-box-shadow: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin box-sizing($box-model) {
|
@mixin box-sizing($box-model) {
|
||||||
-webkit-box-sizing: $box-model; // Safari <= 5
|
-webkit-box-sizing: $box-model; // Safari <= 5
|
||||||
-moz-box-sizing: $box-model; // Firefox <= 19
|
-moz-box-sizing: $box-model; // Firefox <= 19
|
||||||
box-sizing: $box-model;
|
box-sizing: $box-model;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-radius($radius) {
|
@mixin border-radius($radius) {
|
||||||
-webkit-border-radius: $radius;
|
-webkit-border-radius: $radius;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
/* stops bg color from leaking outside the border: */
|
/* stops bg color from leaking outside the border: */
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin opacity($opacity) {
|
@mixin opacity($opacity) {
|
||||||
opacity: $opacity;
|
opacity: $opacity;
|
||||||
$opacity-ie: $opacity * 100;
|
$opacity-ie: $opacity * 100;
|
||||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
|
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
|
||||||
filter: alpha(opacity=$opacity-ie); //IE8
|
filter: alpha(opacity=$opacity-ie); //IE8
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin text-truncate {
|
@mixin text-truncate {
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -157,5 +191,5 @@
|
||||||
* (opacity) value.
|
* (opacity) value.
|
||||||
*/
|
*/
|
||||||
@mixin transparentBg($color, $alpha) {
|
@mixin transparentBg($color, $alpha) {
|
||||||
background-color: rgba(red($color), green($color), blue($color), $alpha);
|
background-color: rgba(red($color), green($color), blue($color), $alpha);
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
/**
|
||||||
|
* Disable the default webkit styles for range inputs (sliders).
|
||||||
|
*/
|
||||||
|
input[type=range]{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable the default focus styles for webkit range inputs (sliders).
|
||||||
|
*/
|
||||||
|
input[type=range]:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Include the mixin for a range input style.
|
||||||
|
*/
|
||||||
|
@include slider {
|
||||||
|
background: $sliderTrackBackground;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 6px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Include the mixin for a range input thumb style.
|
||||||
|
*/
|
||||||
|
@include slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid $sliderThumbBackground;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0px 0px 1px $sliderThumbBackground;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 14px;
|
||||||
|
margin-top: -4px;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
|
@ -60,7 +60,8 @@
|
||||||
@import 'components/link';
|
@import 'components/link';
|
||||||
@import 'shortcuts/main';
|
@import 'shortcuts/main';
|
||||||
@import 'components/button-control';
|
@import 'components/button-control';
|
||||||
@import 'components/_input-control.scss';
|
@import 'components/input-control';
|
||||||
|
@import 'components/input-slider';
|
||||||
@import "modals/invite/invite";
|
@import "modals/invite/invite";
|
||||||
@import "connection-info";
|
@import "connection-info";
|
||||||
@import 'aui-components/dropdown';
|
@import 'aui-components/dropdown';
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,8 @@ $baseLight: #FFFFFF;
|
||||||
*/
|
*/
|
||||||
$controlBackground: $baseLight;
|
$controlBackground: $baseLight;
|
||||||
$controlColor: #333333;
|
$controlColor: #333333;
|
||||||
|
$sliderTrackBackground: #474747;
|
||||||
|
$sliderThumbBackground: #3572b0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Buttons
|
* Buttons
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue