initial

2026-02-10 16:01:33 +00:00 · 2018-12-04 16:53:01 +03:00
parent f679ec2e6e
commit 563a46f55a
105 changed files with 16731 additions and 4 deletions
@@ -0,0 +1,165 @@
+/* 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 'dijit_form_variables';
+
+.{$theme-name} {
+	/* ----- Button ----- */
+	.dijitButtonText {
+		padding: 0 $padding;
+		text-align: center;
+	}
+
+	.dijitButton,
+	.dijitDropDownButton,
+	.dijitComboButton,
+	.dijitToggleButton {
+		.dijitButtonNode {
+			button-style();
+		}
+	}
+
+	create-alternative-buttons($button-alternative-colors);
+
+	// hover
+	.dijitButtonHover,
+	.dijitDropDownButtonHover,
+	.dijitToggleButtonHover {
+		.dijitButtonNode {
+			button-hover-style();
+		}
+	}
+	.dijitComboButton {
+		.dijitButtonNodeHover, 
+		.dijitDownArrowButtonHover {
+			button-hover-style();
+		}
+	}
+
+	create-alternative-buttons-hover($button-alternative-colors);
+
+	// active and checked
+	.dijitButtonActive, 
+	.dijitDropDownButtonActive,
+	.dijitToggleButtonActive,
+	.dijitToggleButtonChecked {
+		.dijitButtonNode {
+			button-active-style();
+		}
+	}
+	.dijitComboButton {
+		.dijitButtonNodeActive, 
+		.dijitDownArrowButtonActive {
+			button-active-style();
+		}
+	}
+
+	create-alternative-buttons-active($button-alternative-colors);
+
+	// disabled
+	.dijitButtonDisabled,
+	.dijitDropDownButtonDisabled,
+	.dijitComboButtonDisabled,
+	.dijitToggleButtonDisabled {
+		outline: none;
+	}
+
+	.dijitButtonDisabled,
+	.dijitDropDownButtonDisabled,
+	.dijitComboButtonDisabled,
+	.dijitToggleButtonDisabled { 
+		.dijitButtonNode {
+			button-disabled-style();
+		}
+	}
+	
+	create-alternative-buttons-disabled($button-alternative-colors);
+
+	.dijitComboButtonDisabled .dijitArrowButton { 
+		border-left-width: 0;
+	}
+
+	/* ----- DropDownButton ----- */
+	.dijitDropDownButton .dijitButtonNode {
+		padding-right: $padding * 2;
+	}
+	
+	/* ----- ComboButton ----- */
+	table.dijitComboButton {
+		border-collapse: separate;	/* override dijit.css so that ComboBox rounded corners work */
+		.dijitStretch {
+			border-radius: $border-radius 0 0 $border-radius;
+		}
+		.dijitArrowButton {
+			padding: $padding;
+			width: $button-arrow-width;
+			border-radius: 0 $border-radius $border-radius 0;
+			border-left-width: 0;
+		}
+	}
+
+	/* ----- ToggleButton ----- */
+	.dijitToggleButton {
+		.dijitCheckBoxIcon {
+			display: none;
+		}
+	}
+
+	.dijitToggleButtonChecked {
+		.dijitIcon {
+			display: inline-block;
+		}
+	}
+
+	// arrow styles for down/up/left/right directions
+	.dijitDropDownButton .dijitArrowButtonInner{
+		margin-left: $padding * 0.75;
+	}
+
+	.dijitDropDownButton .dijitArrowButtonInner,
+	.dijitArrowButton  {
+		_icon-core-style();
+	}
+
+	.dijitDropDownButton .dijitArrowButtonInner:before,
+	.dijitArrowButton:before {
+		content: $icon-drop-down;
+	}
+
+	.dijitLeftArrowButton:before {
+		content: $icon-drop-left;
+	}
+
+	.dijitRightArrowButton:before {
+		content: $icon-drop-right;
+	}
+
+	.dijitUpArrowButton:before {
+		content: $icon-drop-up;
+	}
+}