--- /dev/null
+// ----------------------------------------------------------------------------
+// Form styling mixins
+// ----------------------------------------------------------------------------
+
+// Font is not included.
+// For Vector, that should be layered on top with vector-type
+.agora-field-styling() {
+
+ border: 1px solid @colorGrayLight;
+
+ &:focus {
+ // Styling focus of native checkboxes etc on Mac is almost impossible.
+ &:not([type=checkbox]):not([type=radio]) {
+ outline: 0; // Removes OS field focus
+ }
+
+ box-shadow: @colorProgressiveShadow 0 0 5px;
+
+ border-color: @colorProgressiveShadow;
+ }
+
+ color: @colorText;
+ padding: 0.35em 0.5em 0.35em 0.5em;
+
+ // Ensure that buttons and inputs are nicely aligned when they have differing heights
+ vertical-align: middle;
+}
+
+.agora-label-styling() {
+ //font-weight: bold;
+ font-size: 0.9em;
+ color: darken(@colorGrayLight, 50%);
+
+ * {
+ font-weight: normal;
+ }
+}
+
+.agora-inline-label-styling() {
+ margin-bottom: 0.5em;
+ cursor: pointer;
+ vertical-align: bottom;
+ line-height: normal;
+
+ font-weight: normal;
+
+ & > input[type="checkbox"],
+ & > input[type="radio"] {
+ width: auto;
+ height: auto;
+ margin: 0 0.1em 0 0;
+ padding: 0;
+ border: 1px solid @colorGrayLight;
+ cursor: pointer;
+ }
+}
+
+// ----------------------------------------------------------------------------
+// Button styling
+// ----------------------------------------------------------------------------
+
+.button-colors(@bgColor) {
+ background: @bgColor;
+
+ &:hover,
+ &:focus {
+ // The inner bottom bevel should match the active background color.
+ box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
+ border-bottom-color: mix(#000, @bgColor, 20%);
+ outline: none;
+ // remove outline in Firefox
+ &::-moz-focus-inner {
+ border-color: transparent;
+ }
+ }
+
+ &:active,
+ &.mw-ui-checked {
+ // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
+ // it passes it through, then ResourceLoader drops it.
+ // background: shade(@bgColor, 20%);
+ background: mix(#000, @bgColor, 20%);
+ box-shadow: none;
+ }
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+ color: @colorGrayDark;
+ border: 1px solid @colorGrayLight;
+
+ &:disabled {
+ color: @colorGrayLight;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active {
+ background: @bgColor;
+ box-shadow: none;
+ }
+ }
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
+ color: @colorWhite;
+ // border of the same color as background so that light background and
+ // dark background buttons are the same height (only top and bottom to
+ // make box shadow on hover cover the corners too)
+ border: 1px solid @bgColor;
+ border-left: none;
+ border-right: none;
+ text-shadow: 0 1px rgba(0, 0, 0, .1);
+
+ &:disabled {
+ background: @colorGrayLight;
+ border-color: @colorGrayLight;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active,
+ &.mw-ui-checked {
+ box-shadow: none;
+ }
+ }
+}
+
+.button-colors-quiet(@textColor) {
+ // Quiet buttons all start gray, and reveal
+ // constructive/progressive/destructive color on hover and active.
+ color: @colorGrayDark;
+
+ &:hover,
+ &:focus {
+ // lessphp doesn't implement tint, see above
+ // color: tint(@textColor, 20%);
+ color: mix(#fff, @textColor, 20%);
+ }
+
+ &:active,
+ &.mw-ui-checked {
+ // lessphp doesn't implement shade, see above
+ // color: shade(@textColor, 20%);
+ color: mix(#000, @textColor, 20%);
+ }
+
+ &:disabled {
+ color: @colorGrayLight;
+ }
+}
+++ /dev/null
-// ----------------------------------------------------------------------------
-// Button styling
-// ----------------------------------------------------------------------------
-
-.button-colors(@bgColor) {
- background: @bgColor;
-
- &:hover,
- &:focus {
- // The inner bottom bevel should match the active background color.
- box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
- border-bottom-color: mix(#000, @bgColor, 20%);
- outline: none;
- // remove outline in Firefox
- &::-moz-focus-inner {
- border-color: transparent;
- }
- }
-
- &:active,
- &.mw-ui-checked {
- // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
- // it passes it through, then ResourceLoader drops it.
- // background: shade(@bgColor, 20%);
- background: mix(#000, @bgColor, 20%);
- box-shadow: none;
- }
-}
-
-.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
- color: @colorGrayDark;
- border: 1px solid @colorGrayLight;
-
- &:disabled {
- color: @colorGrayLight;
-
- // make sure disabled buttons don't have hover and active states
- &:hover,
- &:active {
- background: @bgColor;
- box-shadow: none;
- }
- }
-}
-
-.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
- color: @colorWhite;
- // border of the same color as background so that light background and
- // dark background buttons are the same height (only top and bottom to
- // make box shadow on hover cover the corners too)
- border: 1px solid @bgColor;
- border-left: none;
- border-right: none;
- text-shadow: 0 1px rgba(0, 0, 0, .1);
-
- &:disabled {
- background: @colorGrayLight;
- border-color: @colorGrayLight;
-
- // make sure disabled buttons don't have hover and active states
- &:hover,
- &:active,
- &.mw-ui-checked {
- box-shadow: none;
- }
- }
-}
-
-.button-colors-quiet(@textColor) {
- // Quiet buttons all start gray, and reveal
- // constructive/progressive/destructive color on hover and active.
- color: @colorGrayDark;
-
- &:hover,
- &:focus {
- // lessphp doesn't implement tint, see above
- // color: tint(@textColor, 20%);
- color: mix(#fff, @textColor, 20%);
- }
-
- &:active,
- &.mw-ui-checked {
- // lessphp doesn't implement shade, see above
- // color: shade(@textColor, 20%);
- color: mix(#000, @textColor, 20%);
- }
-
- &:disabled {
- color: @colorGrayLight;
- }
-}
+++ /dev/null
-// Font is not included.
-// For Vector, that should be layered on top with vector-type
-.agora-field-styling() {
-
- border: 1px solid @colorGrayLight;
-
- &:focus {
- // Styling focus of native checkboxes etc on Mac is almost impossible.
- &:not([type=checkbox]):not([type=radio]) {
- outline: 0; // Removes OS field focus
- }
-
- box-shadow: @colorProgressiveShadow 0 0 5px;
-
- border-color: @colorProgressiveShadow;
- }
-
- color: @colorText;
- padding: 0.35em 0.5em 0.35em 0.5em;
-
- // Ensure that buttons and inputs are nicely aligned when they have differing heights
- vertical-align: middle;
-}
-
-.agora-label-styling() {
- //font-weight: bold;
- font-size: 0.9em;
- color: darken(@colorGrayLight, 50%);
-
- * {
- font-weight: normal;
- }
-}
-
-.agora-inline-label-styling() {
- margin-bottom: 0.5em;
- cursor: pointer;
- vertical-align: bottom;
- line-height: normal;
-
- font-weight: normal;
-
- & > input[type="checkbox"],
- & > input[type="radio"] {
- width: auto;
- height: auto;
- margin: 0 0.1em 0 0;
- padding: 0;
- border: 1px solid @colorGrayLight;
- cursor: pointer;
- }
-}
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
-@import "mediawiki.ui/mixins/effects";
+@import "mediawiki.ui/mixins";
// Buttons
//
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
-@import "mediawiki.ui/mixins/forms";
+@import "mediawiki.ui/mixins";
// --------------------------------------------------------------------------
// Layouts