diff options
Diffstat (limited to 'www/lib/angular-awesome-slider/src/css/scss/skins')
4 files changed, 293 insertions, 0 deletions
diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-blue.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-blue.scss new file mode 100644 index 00000000..57011bea --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-blue.scss @@ -0,0 +1,60 @@ +// Blue Skin + +.jslider_blue { + .jslider-bg i, + .jslider-pointer { + background: url("../img/jslider.blue.png") no-repeat 0 0; + } + .jslider-bg { + i { + background-position: 2px -20px; + &.default { + background-color: $color-skin-pointers-default-value; + } + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: 2px -60px; + z-index: 2; + } + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.blue.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: (-37px) 0; + } + &.before, + &.after { + background: none; + } + &.default { + background-color: $color-skin-pointers-default-value; + } + } + } + div.jslider-pointer { + top: -6px; + width: 20px; + height: 17px; + background-position: (-7px) 0; + &.jslider-pointer-hover { + background-position: (-7px) -20px; + } + } + div.jslider-value { + left: 0; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-css.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-css.scss new file mode 100644 index 00000000..dc0c68d4 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-css.scss @@ -0,0 +1,116 @@ +$skin-gray: #777575; +$skin-gray-2: #615959; + +// Main slider custom overrided js css rules + +.sliderCSS { + div.jslider-bg { + i { + &.left { + left: 0; + width: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.right { + width: 50%; + left: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.before { + left: 0; + width: 1px; + background-color: $color-skin-css-pointers-before-value; + background-image: none; + } + &.default { + left: 0; + width: 1px; + z-index: 1; + background-color: $color-skin-css-pointers-default-value; + background-image: none; + } + &.after { + left: 0; + background-color: $color-skin-css-pointers-after-value; + background-image: none; + } + &.range { + @include position(absolute, 0 null 20% null); + @include size(60% 5px); + background-image: none; + background-color: $skin-gray; + z-index: 1; + } + } + } + div.jslider-pointer { + top: -3px; + left: 15px; + @include size(10px); + background-color: silver; + background-color: $skin-gray-2; + border-radius: 50%; + } + div.jslider-bg i, div.jslider-pointer { + background: none; + } + // vertical + &.vertical { + td { + height: 100%; + } + div.jslider-bg { + i { + left: 50%; + width: 5px; + &.left { + top: 0; + height: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.right { + height: 50%; + top: 50%; + background-color: $color-skin-background; + background-image: none; + } + &.range { + height: 100%; + z-index: 1; + background-color: $skin-gray; + background-image: none; + } + &.before { + background-color: $color-skin-css-pointers-before-value; + background-image: none; + } + &.default { + height: 1px; + background-color: $color-skin-css-pointers-default-value; + background-image: none; + z-index: 2; + } + &.after { + background-color: $color-skin-css-pointers-after-value; + background-image: none; + } + } + } + div.jslider-bg i, div.jslider-pointer { + background: none; + } + div.jslider-pointer { + left: 50%; + @include size(10px); + background-color: $skin-gray-2; + border-radius: 50%; + margin-left: -3px; + &.jslider-pointer-to { + left: 50%; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-plastic.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-plastic.scss new file mode 100644 index 00000000..04a18bf2 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-plastic.scss @@ -0,0 +1,56 @@ +// Plastic Skin + +.jslider_plastic { + .jslider-bg i, + .jslider-pointer { + background: url("../img/jslider.plastic.png") no-repeat 0 0; + } + .jslider-bg { + i { + background-position: 2px -20px; + &.default { + background-color: $color-skin-pointers-default-value; + } + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + .jslider-pointer { + z-index: 2; + @include size(20px 17px); + top: -6px; + background-position: 2px -60px; + } + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.plastic.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: (-35px) 0; + } + &.before, + &.after { + background: none; + } + &.default { + background-color: $color-skin-pointers-default-value; + } + } + } + div.jslider-pointer { + top: -6px; + margin-left: -6px; + @include size(20px 17px); + background-position: (-7px) -1px; + &.jslider-pointer-hover { + background-position: (-7px) -21px; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-round.scss b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-round.scss new file mode 100644 index 00000000..10ce3395 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/skins/_skin-round.scss @@ -0,0 +1,61 @@ +// Round Skin + +.jslider_round { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.round.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: 0 -20px; + &.default { + background-color: $gray2; + } + &.range { + z-index: 1; + background-position: 0 -40px; + } + } + } + div.jslider-pointer { + top: -6px; + @include size(20px 17px); + background-position: 0 -60px; + z-index: 2; + } + &.vertical { + div.jslider-bg i, + div.jslider-pointer { + background: url("../img/jslider.round.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + i { + background-position: right 0; + &.range { + background-position: (-37px) 0; + } + &.before, + &.after { + background: none; + } + &.default { + background-color: $color-skin-pointers-default-value; + } + } + } + div.jslider-pointer { + top: -6px; + @include size(20px 17px); + background-position: (-4px) -3px; + &.jslider-pointer-hover { + background-position: (-4px) -23px; + } + &.jslider-value-to { + left: 80%; + } + } + div.jslider-value { + left: 0; + } + } +} |