diff options
Diffstat (limited to 'www/lib/angular-awesome-slider/src/css/scss')
20 files changed, 600 insertions, 0 deletions
diff --git a/www/lib/angular-awesome-slider/src/css/scss/core/_variables.scss b/www/lib/angular-awesome-slider/src/css/scss/core/_variables.scss new file mode 100644 index 00000000..bb28b9dd --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/core/_variables.scss @@ -0,0 +1,28 @@ +// Colors + +$black: #000000; +$white: #ffffff; +$gray: #999999; +$gray2: #c2c7Ca; +$blue: #185f83; + +// Typography + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-base: $font-family-sans-serif; +$font-size-pointers-label: 9px; +$line-height-pointers-label: 12px; +$font-size-pointers-value: $font-size-pointers-label; +$line-height-pointers-value: $line-height-pointers-label; +$color-pointers-label: $black; +$color-pointers-value: $color-pointers-label; +$color-scale: $gray; +$color-pointers-default-value: $blue; + +// Skin CSS + +$color-skin-pointers-default-value: $gray2; +$color-skin-background: silver; +$color-skin-css-pointers-default-value: $white; +$color-skin-css-pointers-before-value: rgba(92, 98, 203, 0.89); +$color-skin-css-pointers-after-value: rgb(14, 23, 115); diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_horizontal.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_horizontal.scss new file mode 100644 index 00000000..31a36ac7 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_horizontal.scss @@ -0,0 +1,24 @@ +// Horizontal Styles + +.jslider { + @include position(relative, 0.6em null null null); + cursor: pointer; + display: block; + @include size(100% 1em); + font-family: $font-family-base; + &.disabled { + opacity: 0.5; + } + table { + border-collapse: collapse; + border: 0; + width: 100%; + td, th { + width: 100%; + border: 0; + padding: 0; + text-align: left; + vertical-align: top; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_labels.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_labels.scss new file mode 100644 index 00000000..4dfae6ae --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_labels.scss @@ -0,0 +1,19 @@ +div.jslider-label small, +div.jslider-value small { + @include position(relative, -0.4em null null null); +} + +// limits +div.jslider-label { + @include position(absolute, -18px null 0 null); + padding: 0px 2px; + opacity: 0.4; + color: $color-pointers-label; + font-size: $font-size-pointers-label; + line-height: $line-height-pointers-label; + white-space: nowrap; + &.jslider-label-to { + left: auto; + right: 0; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_main.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_main.scss new file mode 100644 index 00000000..d18ae442 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_main.scss @@ -0,0 +1,8 @@ +// Horizontal Styles + +@import "horizontal"; +@import "ranges"; +@import "pointers"; +@import "labels"; +@import "pointers-value"; +@import "scale"; diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers-value.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers-value.scss new file mode 100644 index 00000000..b829c6d1 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers-value.scss @@ -0,0 +1,12 @@ +div.jslider-value { + @include position(absolute, -19px null 0 null); + padding: 1px 2px 0; + // background: white + font-size: $font-size-pointers-value; + line-height: $line-height-pointers-value; + white-space: nowrap; + border-radius: 2px; + &.jslider-value-to { + left: 80%; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers.scss new file mode 100644 index 00000000..0799afa8 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_pointers.scss @@ -0,0 +1,24 @@ +// single value hide to +.jslider-single { + div.jslider-pointer-to, + div.jslider-value-to, + div.jslider-bg .v, + .jslider-limitless .jslider-label { + display: none; + } +} + +div.jslider-pointer { + @include position(absolute, -4px null 20% null); + @include size(15px); + background-position: 2px -60px; + margin-left: -8px; + cursor: hand; + z-index: 2; + &.jslider-pointer-to { + left: 80%; + } + &.jslider-pointer-hover { + background-position: (-19px) -60px; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_ranges.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_ranges.scss new file mode 100644 index 00000000..26fb01f8 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_ranges.scss @@ -0,0 +1,34 @@ +div.jslider-bg i, div.jslider-pointer { + background: url("../img/jslider.png") no-repeat 0 0; +} + +div.jslider-bg { + position: relative; + i { + @include position(absolute, 0 null null null); + height: 5px; + &.left { + left: 0; + width: 50%; + background-position: 0 0; + } + &.right { + left: 50%; + width: 50%; + background-position: right 0; + } + &.range { + @include position(absolute, 0 null null 20%); + @include size(60% 5px); + background-repeat: repeat-x; + background-position: 0 -40px; + z-index: 1; + } + &.default { + left: 0; + width: 1px; + z-index: 1; + background-color: $color-pointers-default-value; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/horizontal/_scale.scss b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_scale.scss new file mode 100644 index 00000000..ca4be2cf --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/horizontal/_scale.scss @@ -0,0 +1,16 @@ +div.jslider-scale { + position: relative; + top: 9px; + span { + position: absolute; + height: 5px; + border-left: 1px solid $gray; + font-size: 0; + } + ins { + @include position(absolute, 5px null 0 null); + font-size: 9px; + text-decoration: none; + color: $gray; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/main.scss b/www/lib/angular-awesome-slider/src/css/scss/main.scss new file mode 100644 index 00000000..d00379b2 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/main.scss @@ -0,0 +1,17 @@ +// Import Bourbon Mixins +@import "../../../bower_components/bourbon/app/assets/stylesheets/bourbon"; + +// Main slider css rules +@import "core/variables"; + +// Horizontal Slider +@import "horizontal/main"; + +// Vertical Slider +@import "vertical/main"; + +// Skins +@import "skins/skin-css"; +@import "skins/skin-round"; +@import "skins/skin-blue"; +@import "skins/skin-plastic"; 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; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_labels.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_labels.scss new file mode 100644 index 00000000..9feca95a --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_labels.scss @@ -0,0 +1,12 @@ +.vertical { + div.jslider-label { + top: -5px; + margin-left: 22px; + &.jslider-label-to { + top: 100%; + left: inherit; + right: inherit; + margin-top: -5px; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_main.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_main.scss new file mode 100644 index 00000000..0267be94 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_main.scss @@ -0,0 +1,8 @@ +// Vertical Styles + +@import "vertical"; +@import "ranges"; +@import "pointers"; +@import "labels"; +@import "pointers-value"; +@import "scales"; diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers-value.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers-value.scss new file mode 100644 index 00000000..3cea3a72 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers-value.scss @@ -0,0 +1,10 @@ +.vertical { + div.jslider-value { + top: 0; + left: 0; + } + div.jslider-value-to { + top: 80%; + left: 0; + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers.scss new file mode 100644 index 00000000..d5d7ed9c --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_pointers.scss @@ -0,0 +1,15 @@ +.vertical { + div.jslider-pointer { + left: 62%; + background-position: (-7px) -1px; + &.jslider-pointer-hover { + background-position: (-7px) -21px; + } + &.jslider-pointer-to { + left: 62%; + } + &.jslider-pointer-to.jslider-pointer-hover { + background-position: (-7px) -21px; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_ranges.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_ranges.scss new file mode 100644 index 00000000..7578ae77 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_ranges.scss @@ -0,0 +1,48 @@ +.vertical { + div.jslider-bg i, + .jslider-pointer { + background: url("../img/jslider.vertical.png") no-repeat 0 0; + } + div.jslider-bg { + position: relative; + height: 100%; + i { + @include position(absolute, 0 null null null); + width: 5px; + font-size: 0; + &.before { + left: 50%; + background: none; + } + &.left { + top: 0; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y; + } + &.right { + top: 50%; + left: 50%; + height: 50%; + background-position: right 0; + background-repeat: repeat-y; + } + &.range { + position: absolute; + top: 0; + left: 50%; + @include size(60% 100%); + z-index: 1; + background-repeat: repeat-y; + background-position: (-36px) 0px; + } + &.default { + left: 50%; + @include size(5px 1px); + z-index: 1; + background-color: $color-pointers-default-value; + } + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_scales.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_scales.scss new file mode 100644 index 00000000..c89e60bb --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_scales.scss @@ -0,0 +1,18 @@ +.vertical { + div.jslider-scale { + position: inherit; + span { + position: absolute; + @include size(5px 1px); + border-left: none; + font-size: 0; + border-top: 1px solid #999; + } + ins { + @include position(absolute, 5px null 0 null); + font-size: 9px; + text-decoration: none; + color: $color-scale; + } + } +} diff --git a/www/lib/angular-awesome-slider/src/css/scss/vertical/_vertical.scss b/www/lib/angular-awesome-slider/src/css/scss/vertical/_vertical.scss new file mode 100644 index 00000000..64b67040 --- /dev/null +++ b/www/lib/angular-awesome-slider/src/css/scss/vertical/_vertical.scss @@ -0,0 +1,14 @@ +.vertical { + @include position(relative, 0.6em null null null); + display: block; + @include size(17px 100%); + font-family: Arial, sans-serif; + table { + height: 100%; + } + &.sliderCSS .jslider-bg i, + &.jslider-pointer { + background-color: silver; + background-image: none; + } +} |