topcoat-range/src/range.css

Topcoat default range skin

/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

@import "topcoat-range-base";
/* topdoc
  name: Range
  description: Range input
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <input type="range" class="topcoat-range">
    <input type="range" class="topcoat-range" disabled>
  examples:
    mobile range: http://codepen.io/Topcoat/pen/BskEn
  tags:
    - desktop
    - mobile
    - range
*/

.range {
  extend: %range;
  border-radius: var(border-radius);
  border: var(border);
  background-color: var(background-color--input);
  height: var(height--range__track);
  border-radius: var(border-radius--large);
}

.range::-moz-range-track {
  border-radius: var(border-radius);
  border: var(border);
  background-color: var(background-color--input);
  height: var(height--range__track);
  border-radius: var(border-radius--large);
}

.range::-webkit-slider-thumb {
  extend: %range__thumb--webkit;
  height: var(height);
  width: var(width--range__thumb);
  background-color: var(background-color);
  border: var(border);
  border-radius: var(border-radius);
  box-shadow: var(box-shadow);
}

.range::-moz-range-thumb {
  extend: %range__thumb;
  height: var(height);
  width: var(width--range__thumb);
  background-color: var(background-color);
  border: var(border);
  border-radius: var(border-radius);
  box-shadow: var(box-shadow);
}

.range:focus::-webkit-slider-thumb {
  border: var(border--focus);
  box-shadow: var(box-shadow--cta), var(box-shadow--focus);
}

.range:focus::-moz-range-thumb {
  border: var(border--focus);
  box-shadow: var(box-shadow--cta), var(box-shadow--focus);
}

.range:active::-webkit-slider-thumb {
  border: var(border);
  box-shadow: var(box-shadow);
}

.range:active::-moz-range-thumb {
  border: var(border);
  box-shadow: var(box-shadow);
}

.range:disabled {
  extend: %range--disabled;
}