summaryrefslogtreecommitdiff
path: root/lib/viewers/odf/editor/dijit/themes/claro/form/Button.less
diff options
context:
space:
mode:
Diffstat (limited to 'lib/viewers/odf/editor/dijit/themes/claro/form/Button.less')
-rw-r--r--lib/viewers/odf/editor/dijit/themes/claro/form/Button.less164
1 files changed, 164 insertions, 0 deletions
diff --git a/lib/viewers/odf/editor/dijit/themes/claro/form/Button.less b/lib/viewers/odf/editor/dijit/themes/claro/form/Button.less
new file mode 100644
index 0000000..5d59532
--- /dev/null
+++ b/lib/viewers/odf/editor/dijit/themes/claro/form/Button.less
@@ -0,0 +1,164 @@
+/* Button | DropDownButton | ComboButton | ToggleButton
+ *
+ * Styling Buttons mainly includes:
+ *
+ * 1. Containers
+ * .dijitButton
+ * .dijitDropDownButton
+ * .dijitComboButton
+ * .dijitButtonNode - common button/arrow wrapper shared across all three button types
+ *
+ * 2. Button text
+ * .dijitButtonText
+ *
+ * 3. Arrows - only for DropDownButton and ComboButton
+ * There are total four directions arrows - down, left, right, up:
+ * .dijitArrowButtonInner - down arrow by default
+ * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
+ * .dijitRightArrowButton .dijitArrowButtonInner - right arrow
+ * .dijitUpArrowButton .dijitArrowButtonInner - up arrow
+ *
+ * 4. States - Hover, Active, Disabled, e.g.
+ * .dijitButtonHover .dijitButtonNode
+ * .dijitButtonActive .dijitButtonNode
+ * .dijitButtonDisabled .dijitButtonNode
+ *
+ * .dijitDisabled .dijitArrowButtonInner - disabled arrow states
+ */
+
+@import "../variables";
+
+.claro .dijitButtonNode {
+ /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
+ .transition-property(background-color);
+ .transition-duration(.3s);
+}
+
+.claro .dijitButton .dijitButtonNode,
+.claro .dijitDropDownButton .dijitButtonNode,
+.claro .dijitComboButton .dijitButtonNode,
+.claro .dijitToggleButton .dijitButtonNode {
+ /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
+ border: 1px solid @button-border-color;
+ padding: 2px 4px 4px 4px;
+ color: @text-color;
+ .border-radius(@button-border-radius);
+ .box-shadow(0 1px 1px rgba(0,0,0,0.15));
+
+ background-color: desaturate(darken(@button-background-color, 10), 20);
+
+ // Alpha transparency layer to add gradient to above background color.
+ // Use CSS gradient with fallback to image for IE.
+ background-image: url("images/buttonEnabled.png");
+ background-repeat: repeat-x;
+ .alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%);
+ _background-image: none; // IE6 can't handle background-color and background-image at once.
+}
+
+
+.claro .dijitComboButton .dijitArrowButton {
+ border-left-width: 0;
+ padding: 4px 2px 4px 2px; /* TODO: still needed? */
+}
+
+/*arrow styles for down/up/left/right directions*/
+.claro .dijitArrowButtonInner {
+ width: 15px;
+ height: 15px;
+ margin: 0 auto;
+ background-image:url("../@{image-form-button-arrows}");
+ background-repeat:no-repeat;
+ background-position:-51px 53%;
+}
+.claro .dijitLeftArrowButton .dijitArrowButtonInner {
+ background-position: -77px 53%;
+}
+.claro .dijitRightArrowButton .dijitArrowButtonInner {
+ background-position: -26px 53%;
+}
+.claro .dijitUpArrowButton .dijitArrowButtonInner {
+ background-position: 0 53%;
+}
+.claro .dijitDisabled .dijitArrowButtonInner {
+ background-position: -151px 53%;
+}
+.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
+ background-position: -177px 53%;
+}
+.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
+ background-position: -126px 53%;
+}
+.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
+ background-position: -100px 53%;
+}
+
+.claro .dijitButtonText {
+ padding: 0 0.3em;
+ text-align: center;
+}
+
+
+
+
+
+/* hover status */
+.claro .dijitButtonHover .dijitButtonNode,
+.claro .dijitDropDownButtonHover .dijitButtonNode,
+.claro .dijitComboButton .dijitButtonNodeHover,
+.claro .dijitComboButton .dijitDownArrowButtonHover,
+.claro .dijitToggleButtonHover .dijitButtonNode {
+ background-color: desaturate(darken(@button-hovered-background-color, 10), 20);
+ color:@text-color;
+ .transition-duration(.2s);
+}
+
+/* active, checked status */
+.claro .dijitButtonActive .dijitButtonNode,
+.claro .dijitDropDownButtonActive .dijitButtonNode,
+.claro .dijitComboButtonActive .dijitButtonNode,
+.claro .dijitToggleButtonActive .dijitButtonNode,
+.claro .dijitToggleButtonChecked .dijitButtonNode {
+ background-color: desaturate(darken(@button-pressed-background-color, 10), 20);
+ .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
+ .transition-duration(.1s);
+}
+
+/* disabled status */
+.claro .dijitButtonDisabled,
+.claro .dijitDropDownButtonDisabled,
+.claro .dijitComboButtonDisabled,
+.claro .dijitToggleButtonDisabled {
+ background-image: none;
+ outline: none;
+}
+
+.claro .dijitButtonDisabled .dijitButtonNode,
+.claro .dijitDropDownButtonDisabled .dijitButtonNode,
+.claro .dijitComboButtonDisabled .dijitButtonNode,
+.claro .dijitToggleButtonDisabled .dijitButtonNode {
+ background-color: @disabled-background-color;
+ border: solid 1px @disabled-border-color;
+ color: @disabled-text-color;
+ .box-shadow(0 0 0 rgba(0,0,0,0));
+
+ // Change the gradient from light to dark.
+ // Again using CSS gradient with fallback to image for IE.
+ background-image: url("images/buttonDisabled.png");
+ .alpha-white-gradient(1, 0%, 0, 40%);
+ _background-image: none; // IE6 can't handle background-color and background-image at once.
+}
+
+.claro .dijitComboButtonDisabled .dijitArrowButton{
+ border-left-width: 0;
+}
+/* for ComboButton */
+.claro table.dijitComboButton {
+ border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
+}
+
+.claro .dijitComboButton .dijitStretch {
+ .border-radius(@button-border-radius 0 0 @button-border-radius);
+}
+.claro .dijitComboButton .dijitArrowButton {
+ .border-radius(0 @button-border-radius @button-border-radius 0);
+}