tests/org.eclipse.rap.rwt.themes.test/src/org/eclipse/rap/rwt/themes/test/fancy/ScrollBar.test.css

/*******************************************************************************
 * Copyright (c) 2011 EclipseSource and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     EclipseSource - initial API and implementation
 ******************************************************************************/

ScrollBar {
  border: none;
  background-color: #f3f3f4;
  border-radius: 3px 3px 3px 3px;
  width: 15px;
}

/* Thumb */

ScrollBar-Thumb[VERTICAL] {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  border-radius: 0px;
  background-image: gradient(
    linear, left top, right top,
    from( #ffffff ),
    color-stop( 38%, #f0f0f0 ),
    color-stop( 62%, #e0e0e0 ),
    to( #ffffff )
  );
}

ScrollBar-Thumb[HORIZONTAL] {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  border-radius: 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 38%, #f0f0f0 ),
    color-stop( 62%, #e0e0e0 ),
    to( #ffffff )
  );
}

ScrollBar-Thumb[VERTICAL]:hover {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  border-radius: 0px;
  background-image: gradient(
    linear, left top, right top,
    from( #ffffff ),
    color-stop( 42%, #f0f0f0 ),
    color-stop( 58%, #e0e0e0 ),
    to( #cccccc )
  );
}

ScrollBar-Thumb[HORIZONTAL]:hover {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  border-radius: 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 42%, #f0f0f0 ),
    color-stop( 58%, #e0e0e0 ),
    to( #cccccc )
  );
}

ScrollBar-Thumb[VERTICAL]:pressed {
  background-color: transparent;
  border: 1px solid #999999;
  border-radius: 0px;
  background-image: gradient(
    linear, left top, right top,
    from( #e0e0e0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}

ScrollBar-Thumb[HORIZONTAL]:pressed {
  background-color: transparent;
  border: 1px solid #999999;
  border-radius: 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #e0e0e0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}

/* Buttons */

ScrollBar-UpButton[HORIZONTAL] {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 0px 3px 3px 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 38%, #f0f0f0 ),
    color-stop( 62%, #e0e0e0 ),
    to( #ffffff )
  );
}

ScrollBar-UpButton[VERTICAL] {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 0px 0px 3px 3px;
  background-image: gradient(
    linear, left top, right top,
    from( #ffffff ),
    color-stop( 38%, #f0f0f0 ),
    color-stop( 62%, #e0e0e0 ),
    to( #ffffff )
  );
}

ScrollBar-DownButton[HORIZONTAL] {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 3px 0px 0px 3px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 38%, #f0f0f0 ),
    color-stop( 62%, #e0e0e0 ),
    to( #ffffff )
  );
}

ScrollBar-DownButton[VERTICAL] {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 3px 3px 0px 0px;
  background-image: gradient(
    linear, left top, right top,
    from( #ffffff ),
    color-stop( 38%, #f0f0f0 ),
    color-stop( 62%, #e0e0e0 ),
    to( #ffffff )
  );
}

ScrollBar-UpButton[HORIZONTAL]:hover {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 0px 3px 3px 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 42%, #f0f0f0 ),
    color-stop( 58%, #e0e0e0 ),
    to( #cccccc )
  );
}

ScrollBar-UpButton[VERTICAL]:hover {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 0px 0px 3px 3px;
  background-image: gradient(
    linear, left top, right top,
    from( #ffffff ),
    color-stop( 42%, #f0f0f0 ),
    color-stop( 58%, #e0e0e0 ),
    to( #cccccc )
  );
}

ScrollBar-DownButton[HORIZONTAL]:hover {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 3px 0px 0px 3px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 42%, #f0f0f0 ),
    color-stop( 58%, #e0e0e0 ),
    to( #cccccc )
  );
}

ScrollBar-DownButton[VERTICAL]:hover {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 3px 3px 0px 0px;
  background-image: gradient(
    linear, left top, right top,
    from( #ffffff ),
    color-stop( 42%, #f0f0f0 ),
    color-stop( 58%, #e0e0e0 ),
    to( #cccccc )
  );
}

ScrollBar-UpButton[HORIZONTAL]:pressed {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 0px 3px 3px 0px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #e0e0e0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}

ScrollBar-UpButton[VERTICAL]:pressed {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 0px 0px 3px 3px;
  background-image: gradient(
    linear, left top, right top,
    from( #e0e0e0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}

ScrollBar-DownButton[HORIZONTAL]:pressed {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 3px 0px 0px 3px;
  background-image: gradient(
    linear, left top, left bottom,
    from( #e0e0e0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}

ScrollBar-DownButton[VERTICAL]:pressed {
  background-color: transparent;
  border: 1px solid #b4b4b4;
  cursor: default;
  border-radius: 3px 3px 0px 0px;
  background-image: gradient(
    linear, left top, right top,
    from( #e0e0e0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #b0b0b0 )
  );
}