VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/311356
Change subject: [WIP] Reorder Less elements & widgets rules alphabetically
......................................................................
[WIP] Reorder Less elements & widgets rules alphabetically
Reordering Less elements & widgets rules alphabetically to address
historically grown clutter
Bug: T145995
Change-Id: If6305c530088acc559bd0d65578e460210b8cd3f
---
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
2 files changed, 1,022 insertions(+), 1,022 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/56/311356/1
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 91804b1..8dd42b1 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -375,15 +375,15 @@
.theme-oo-ui-clippableElement () {}
+.theme-oo-ui-draggableElement () {}
+
+.theme-oo-ui-draggableGroupElement () {}
+
.theme-oo-ui-floatableElement () {}
.theme-oo-ui-flaggedElement () {}
-.theme-oo-ui-draggableElement () {}
-
.theme-oo-ui-groupElement () {}
-
-.theme-oo-ui-draggableGroupElement () {}
.theme-oo-ui-iconElement () {}
@@ -397,14 +397,14 @@
.theme-oo-ui-lookupElement () {}
-.theme-oo-ui-popupElement () {}
-
-.theme-oo-ui-tabIndexedElement () {}
-
-.theme-oo-ui-titledElement () {}
-
.theme-oo-ui-pendingElement () {
&-pending {
.oo-ui-background-image(
'@{oo-ui-default-image-path}/textures/pending.gif' );
}
}
+
+.theme-oo-ui-popupElement () {}
+
+.theme-oo-ui-tabIndexedElement () {}
+
+.theme-oo-ui-titledElement () {}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 80d3a92..9fe2b6f 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -2,26 +2,11 @@
.theme-oo-ui-widget () {}
-.theme-oo-ui-outlineControlsWidget () {
- height: 3em;
- background-color: @background-color-default;
+.theme-oo-ui-actionWidget () {}
- &-items,
- &-movers {
- height: 2em;
- margin: 0.5em 0.5em 0.5em 0;
- padding: 0;
- }
-
- > .oo-ui-iconElement-icon {
- width: 1.5em;
- height: 2em;
- margin: 0.5em 0 0.5em 0.5em;
- opacity: 0.2;
- }
+.theme-oo-ui-buttonWidget () {
+ .oo-ui-inline-spacing( 0.5em );
}
-
-.theme-oo-ui-toggleWidget () {}
.theme-oo-ui-buttonGroupWidget () {
display: inline-block;
@@ -61,46 +46,413 @@
}
}
-.theme-oo-ui-buttonWidget () {
- .oo-ui-inline-spacing( 0.5em );
-}
+.theme-oo-ui-buttonInputWidget () {}
-.theme-oo-ui-actionWidget () {}
+.theme-oo-ui-buttonOptionWidget () {
+ padding: 0;
-.theme-oo-ui-popupButtonWidget () {
- &.oo-ui-buttonElement-frameless > .oo-ui-popupWidget {
- // Compensate for icon being inset
- /* @noflip */
- left: @size-icon / 2;
- }
-
- &.oo-ui-buttonElement-framed > .oo-ui-popupWidget {
- // Compensate for icon being inset
- // elements.less positions the icon with left: 1.5em -
@size-icon / 2; , so we need:
- // @size-icon / 2 + ( 1.5em - @size-icon / 2 ) which is 1.5em.
- /* @noflip */
- left: 1.5em;
+ &.oo-ui-optionWidget-selected,
+ &.oo-ui-optionWidget-pressed,
+ &.oo-ui-optionWidget-highlighted {
+ background-color: transparent;
}
}
-.theme-oo-ui-toggleButtonWidget () {
+.theme-oo-ui-buttonSelectWidget () {
+ border-radius: @border-radius-default;
.oo-ui-inline-spacing( 0.5em );
+
+ &:focus {
+ outline: 0;
+ }
+
+ .oo-ui-buttonOptionWidget {
+ .oo-ui-buttonElement-button {
+ border-radius: 0;
+ margin-left: -1px;
+ }
+
+ &:first-child .oo-ui-buttonElement-button {
+ border-bottom-left-radius: @border-radius-default;
+ border-top-left-radius: @border-radius-default;
+ margin-left: 0;
+ }
+
+ &:last-child .oo-ui-buttonElement-button {
+ border-bottom-right-radius: @border-radius-default;
+ border-top-right-radius: @border-radius-default;
+ }
+
+ }
+
+ &.oo-ui-widget-enabled {
+ &:focus {
+ .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
+ .oo-ui-buttonElement-button {
+ border-color:
@border-color-default-focus;
+ box-shadow: @box-shadow-focus-inset;
+ }
+ }
+ }
+ }
}
-.theme-oo-ui-iconWidget () {
- line-height: 2.5;
+.theme-oo-ui-capsuleItemWidget () {
+ width: auto;
+ max-width: 100%;
+ .oo-ui-box-sizing( border-box );
+ vertical-align: middle;
+ height: 1.7em;
+ line-height: 1.7;
+ background-color: #eee;
+ color: @color-default;
+ margin: 0.1em;
+ border: @border-default;
+ border-radius: @border-radius-default;
+ padding: 0 0.4em;
+
+ &:focus {
+ outline: 0;
+ border-color: @color-progressive;
+ box-shadow: @box-shadow-focus-default;
+ }
&.oo-ui-widget-disabled {
- opacity: @opacity-disabled;
+ background-color: @background-color-disabled;
+ color: @color-disabled;
+ border-color: @border-color-disabled;
+ text-shadow: @text-shadow-disabled;
+ }
+
+ // Clear button
+ & > .oo-ui-buttonElement {
+ display: none;
+ }
+
+ &.oo-ui-widget-enabled {
+ padding-right: @size-indicator + 0.6em;
+
+ > .oo-ui-buttonElement {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ & .oo-ui-buttonElement-button {
+ display: block;
+ width: @size-indicator + 0.6em; // Padding on each side
of the indicator
+ height: 100%; // Firefox height calculation fix
+
+ & .oo-ui-indicator-clear {
+ position: absolute;
+ top: 0;
+ right: 0.3em;
+ bottom: 0;
+ height: auto;
+ }
+ }
}
}
-.theme-oo-ui-indicatorWidget () {
- line-height: 2.5;
- margin: @size-indicator / 2;
+.theme-oo-ui-capsuleMultiselectWidget () {
+ width: 100%;
+ max-width: @max-width-input;
+
+ &-handle {
+ min-height: 2.4em;
+ .oo-ui-inline-spacing( 0.5em );
+ padding: 0.15em 0.25em;
+ border: @border-default;
+ border-radius: @border-radius-default;
+ .oo-ui-box-sizing( border-box );
+
+ &:hover {
+ border-color: @border-color-input-hover;
+ }
+
+ > .oo-ui-indicatorElement-indicator,
+ > .oo-ui-iconElement-icon {
+ position: absolute;
+ }
+
+ > .oo-ui-capsuleMultiselectWidget-content > input {
+ border: 0;
+ line-height: 1.675;
+ margin: 0 0 0 0.2em;
+ padding: 0;
+ font-size: inherit;
+ font-family: inherit;
+ background-color: transparent;
+ color: @color-emphasized;
+ vertical-align: middle;
+
+ &:focus {
+ // Chrome
+ outline: 0;
+ }
+ }
+ }
+
+ &.oo-ui-indicatorElement &-handle {
+ padding-right: @size-indicator + 2 * 0.775em;
+
+ > .oo-ui-indicatorElement-indicator {
+ right: 0;
+ top: 0;
+ margin: 0.775em;
+ }
+ }
+
+ &.oo-ui-iconElement &-handle {
+ padding-left: @size-icon + 2 * 0.3em;
+
+ > .oo-ui-iconElement-icon {
+ left: 0;
+ top: 0;
+ margin: 0.3em;
+ }
+ }
+
+ // CapsuleMultiselectWidget with child widget
+ .oo-ui-popupWidget {
+ width: 100%;
+ margin-top: -1px;
+ }
+
+ .oo-ui-popupWidget-popup {
+ min-width: 100%;
+ .oo-ui-box-sizing( border-box );
+ border-width: 0 1px;
+ border-radius: 0 0 2px 2px;
+ }
+
+ &.oo-ui-widget-enabled &-handle {
+ background-color: @background-color-default;
+ cursor: text;
+ .oo-ui-transition(
+ border-color @transition-ease-out-sine-medium,
+ box-shadow @transition-ease-out-sine-medium
+ );
+ }
+ &.oo-ui-widget-enabled:hover &-handle {
+ border-color: @border-color-default-hover;
+ }
+ &.oo-ui-widget-enabled.oo-ui-capsuleMultiselectWidget-open &-handle {
+ border-color: @border-color-default-focus;
+ outline: 0;
+ box-shadow: @box-shadow-focus-default;
+ }
+
+ &.oo-ui-widget-disabled &-handle {
+ color: @color-disabled;
+ text-shadow: @text-shadow-disabled;
+ border-color: @border-color-disabled;
+ background-color: @background-color-disabled;
+
+ > .oo-ui-iconElement-icon {
+ opacity: @opacity-disabled;
+ }
+
+ > .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-disabled-indicator;
+ }
+ }
+}
+
+.theme-oo-ui-checkboxInputWidget () {
+ position: relative;
+ line-height: @size-input-binary;
+ // Prevent the fake span from jumping to the next line of text
+ white-space: nowrap;
+
+ * {
+ font: inherit;
+ vertical-align: middle;
+ }
+
+ // `<input type=checkbox>` element is visually replaced by `span` that
follows
+ [type='checkbox'] {
+ position: relative;
+ // Needed for Firefox mobile (See bug 71750 to workaround
default Firefox stylesheet)
+ max-width: none;
+ // Ensure the invisible input takes up the required width
+ width: @size-input-binary;
+ height: @size-input-binary;
+ // Having margin would offset the input from where the span is
absolutely positioned,
+ // making only the overlap region receive events
+ margin: 0;
+ // Use opacity so that VoiceOver can still identify it
+ opacity: 0;
+ // Render "on top of" the span, so that it's still clickable
+ z-index: 1;
+
+ & + span {
+ background-color: @background-color-default;
+ background-origin: border-box;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 0 0;
+ .oo-ui-box-sizing( border-box );
+ position: absolute;
+ left: 0;
+ width: @size-input-binary;
+ height: @size-input-binary;
+ border: @border-input-binary;
+ border-radius: @border-radius-default;
+ }
+
+ &:checked {
+ & + span {
+ .oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/check-invert' );
+ .oo-ui-background-image-safari(
'@{oo-ui-default-image-path}/icons/check-invert' );
+ background-size: 90% 90%;
+ }
+ }
+
+ &:disabled {
+ & + span {
+ background-color:
@background-color-disabled-filled;
+ border-color: @border-color-disabled;
+ }
+ &:hover + span {
+ background-color:
@background-color-disabled-filled;
+ border-color: @border-color-disabled;
+ }
+ }
+ }
+
+ &.oo-ui-widget-enabled [type='checkbox'] {
+ cursor: pointer;
+
+ & + span {
+ cursor: pointer;
+ .oo-ui-transition(
+ background-color @transition-ease-quick,
+ background-size @transition-ease-quick,
+ border-color @transition-ease-quick,
+ box-shadow @transition-ease-quick
+ );
+ }
+
+ &:hover + span,
+ &:focus:hover + span {
+ border-color: @color-progressive;
+ }
+
+ &:active + span {
+ background-color: @color-progressive-active;
+ border-color: @border-color-input-binary-active;
+ }
+
+ &:focus + span {
+ border-color: @color-progressive;
+ box-shadow: @box-shadow-focus-default;
+ }
+
+ &:checked {
+ & + span {
+ background-color: @color-progressive-active;
+ border-color: @border-color-input-binary-active;
+ }
+
+ &:hover + span,
+ &:focus:hover + span {
+ background-color:
@color-progressive-active-hover;
+ border-color: @color-progressive-active-hover;
+ }
+
+ &:active + span,
+ &:active:hover + span {
+ background-color: @color-progressive-active;
+ border-color: @border-color-input-binary-active;
+ }
+
+ &:focus + span {
+ background-color: @color-progressive-active;
+ border-color: @color-progressive-active;
+ box-shadow: @box-shadow-focus-inset;
+ }
+ }
+ }
+}
+
+.theme-oo-ui-checkboxMultioptionWidget () {
+ padding: 0.25em 0;
+
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
+ padding: @padding-input-binary-label;
+ }
+
+ .oo-ui-checkboxInputWidget {
+ margin-right: 0;
+ }
+}
+
+.theme-oo-ui-checkboxMultiselectWidget () {}
+
+.theme-oo-ui-checkboxMultiselectInputWidget () {
+ .oo-ui-fieldLayout {
+ margin-bottom: 0;
+
+ .oo-ui-fieldLayout-body {
+ padding: 0.25em 0;
+
+ .oo-ui-labelElement-label {
+ line-height: 1.5;
+ }
+ }
+ }
+}
+
+.theme-oo-ui-comboBoxInputWidget () {
+ // inherits from `inputWidget` & `textInputWidget`
+
+ input,
+ textarea {
+ height: 2.35em;
+ }
+
+ &.oo-ui-widget-enabled:hover {
+ input,
+ textarea {
+ border-color: @border-color-default-hover;
+
+ &:focus {
+ border-color: @border-color-default-focus;
+ }
+ }
+ }
&.oo-ui-widget-disabled {
- opacity: @opacity-disabled;
+ .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-disabled-indicator;
+ }
+ }
+}
+
+.theme-oo-ui-decoratedOptionWidget () {
+ padding: 0.5em 2em 0.5em 3em;
+
+ &.oo-ui-iconElement .oo-ui-iconElement-icon,
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ top: 0;
+ height: 100%;
+ }
+
+ &.oo-ui-iconElement .oo-ui-iconElement-icon {
+ left: 0.5em;
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ right: 0.5em;
+ }
+
+ &.oo-ui-widget-disabled {
+ .oo-ui-iconElement-icon,
+ .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-disabled;
+ }
}
}
@@ -204,6 +556,591 @@
margin-right: 2em;
}
}
+
+.theme-oo-ui-dropdownInputWidget () {
+ width: 100%;
+ max-width: @max-width-input;
+
+ select {
+ background-color: @background-color-default;
+ height: 2.275em;
+ font-size: inherit;
+ font-family: inherit;
+ .oo-ui-box-sizing( border-box );
+ border: @border-default;
+ border-radius: @border-radius-default;
+ padding-left: 1em;
+ vertical-align: middle;
+ }
+
+ option {
+ font-size: inherit;
+ font-family: inherit;
+ height: 1.5em;
+ padding: 0.5em 1em;
+ }
+
+ &.oo-ui-widget-enabled {
+ select:hover,
+ select:focus {
+ border-color: @border-color-dialog;
+ outline: 0;
+ }
+ }
+
+ &.oo-ui-widget-disabled {
+ select {
+ color: @color-disabled;
+ border-color: @border-color-disabled;
+ background-color: @background-color-disabled;
+ }
+ }
+}
+
+.theme-oo-ui-floatingMenuSelectWidget () {}
+
+.theme-oo-ui-iconWidget () {
+ line-height: 2.5;
+
+ &.oo-ui-widget-disabled {
+ opacity: @opacity-disabled;
+ }
+}
+
+.theme-oo-ui-indicatorWidget () {
+ line-height: 2.5;
+ margin: @size-indicator / 2;
+
+ &.oo-ui-widget-disabled {
+ opacity: @opacity-disabled;
+ }
+}
+
+.theme-oo-ui-inputWidget () {
+ .oo-ui-inline-spacing( 0.5em );
+}
+
+.theme-oo-ui-labelWidget () {}
+
+.theme-oo-ui-menuOptionWidget () {
+ padding: 0.5em 1em;
+ .oo-ui-transition(
+ background-color @transition-ease-quick,
+ color @transition-ease-quick
+ );
+
+ &.oo-ui-optionWidget {
+ &-highlighted {
+ background-color: @background-color-default-hover;
+ color: @color-emphasized;
+ }
+ &-selected {
+ background-color: @background-color-progressive;
+ color: @color-progressive;
+
+ .oo-ui-iconElement-icon {
+ display: none;
+ }
+ }
+ &-selected&-highlighted,
+ &-pressed&-highlighted {
+ background-color: @background-color-progressive-hover;
+ color: @color-progressive;
+ }
+ }
+}
+
+.theme-oo-ui-menuSectionOptionWidget () {
+ padding: 0.33em 0.75em;
+ color: #888;
+}
+
+.theme-oo-ui-menuSelectWidget () {
+ background-color: @background-color-default;
+ margin-top: -1px;
+ border: @border-menu;
+ border-radius: 0 0 @border-radius-default @border-radius-default;
+ box-shadow: @box-shadow-menu;
+}
+
+.theme-oo-ui-multioptionWidget () {
+ .oo-ui-labelElement-label {
+ line-height: 1.5;
+ }
+
+ &.oo-ui-widget-disabled {
+ color: @color-disabled;
+ }
+}
+
+.theme-oo-ui-multiselectWidget () {}
+
+.theme-oo-ui-numberInputWidget () {
+ max-width: @max-width-input;
+
+ &-buttoned {
+ .oo-ui-buttonWidget {
+ width: 2.5em;
+ }
+
+ .oo-ui-buttonElement-button {
+ display: block;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .oo-ui-textInputWidget input {
+ border-radius: 0;
+ }
+ }
+
+ &-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-width: 0;
+ }
+
+ &-plusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-width: 0;
+ }
+}
+
+.theme-oo-ui-optionWidget () {
+ border: 0;
+ padding: 0.25em 0.5em;
+
+ .oo-ui-labelElement-label {
+ line-height: 1.5;
+ }
+
+ // Don't add `highlighted` or `selected` modifications here
+ // as it inherits to various visually opposite widgets.
+
+ &-selected .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
+ opacity: @opacity-icon-default-selected;
+ }
+
+ &.oo-ui-widget-disabled {
+ color: @color-disabled;
+ }
+}
+
+.theme-oo-ui-outlineControlsWidget () {
+ height: 3em;
+ background-color: @background-color-default;
+
+ &-items,
+ &-movers {
+ height: 2em;
+ margin: 0.5em 0.5em 0.5em 0;
+ padding: 0;
+ }
+
+ > .oo-ui-iconElement-icon {
+ width: 1.5em;
+ height: 2em;
+ margin: 0.5em 0 0.5em 0.5em;
+ opacity: 0.2;
+ }
+}
+
+.theme-oo-ui-outlineOptionWidget () {
+ font-size: 1.1em;
+ padding: 0.75em;
+ .oo-ui-transition(
+ background-color @transition-ease-quick,
+ color @transition-ease-quick
+ );
+
+ &.oo-ui-optionWidget-highlighted {
+ background-color: @background-color-default-hover;
+ color: @color-emphasized;
+ }
+
+ &.oo-ui-optionWidget-selected {
+ background-color: @background-color-progressive;
+ color: @color-progressive;
+ }
+
+ &.oo-ui-optionWidget-pressed {
+ background-color: @background-color-progressive-hover;
+ color: @color-progressive;
+ }
+
+ .oo-ui-iconElement-icon {
+ // Undoes the parent change, because the theme's icons expect
to be
+ // 24px, and don't scale incredibly well.
+ font-size: 90.90909%;
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-labelElement-label {
+ padding-right: 1.5em;
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ opacity: 0.5;
+ }
+
+ &-level-0 {
+ padding-left: 3.5em;
+
+ .oo-ui-iconElement-icon {
+ left: 1em;
+ }
+ }
+ &-level-1 {
+ padding-left: 5em;
+
+ .oo-ui-iconElement-icon {
+ left: 2.5em;
+ }
+ }
+
+ &-level-2 {
+ padding-left: 6.5em;
+
+ .oo-ui-iconElement-icon {
+ left: 4em;
+ }
+ }
+
+ &.oo-ui-flaggedElement-important {
+ font-weight: bold;
+ }
+
+ &.oo-ui-flaggedElement-empty {
+ .oo-ui-iconElement-icon {
+ opacity: 0.5;
+ }
+ .oo-ui-labelElement-label {
+ color: #777;
+ }
+ }
+}
+
+.theme-oo-ui-outlineSelectWidget () {}
+
+.theme-oo-ui-popupWidget () {
+ &-popup {
+ background-color: @background-color-default;
+ border: @border-menu;
+ border-radius: @border-radius-default;
+ box-shadow: @box-shadow-menu;
+ }
+
+ @anchor-size: 9px;
+
+ &-anchored {
+ .oo-ui-popupWidget-popup {
+ margin-top: @anchor-size;
+ }
+
+ .oo-ui-popupWidget-anchor:before,
+ .oo-ui-popupWidget-anchor:after {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-color: transparent;
+ border-top: 0;
+ }
+
+ .oo-ui-popupWidget-anchor:before {
+ bottom: -@anchor-size - 1px;
+ left: -@anchor-size;
+ border-bottom-color: #888;
+ border-width: @anchor-size + 1px;
+ }
+
+ .oo-ui-popupWidget-anchor:after {
+ bottom: -@anchor-size - 1px;
+ left: -@anchor-size + 1px;
+ border-bottom-color: @border-color-disabled-filled;
+ border-width: @anchor-size;
+ }
+ }
+
+ &-transitioning .oo-ui-popupWidget-popup {
+ .oo-ui-transition(
+ width @transition-ease-quick,
+ height @transition-ease-quick,
+ left @transition-ease-quick
+ );
+ }
+
+ &-head {
+ height: 2.5em;
+
+ > .oo-ui-buttonWidget {
+ margin: 0.25em;
+ }
+
+ > .oo-ui-labelElement-label {
+ margin: 0.75em 1em;
+ }
+ }
+
+ &-body-padded {
+ padding: 0 1em;
+ }
+}
+
+.theme-oo-ui-popupButtonWidget () {
+ &.oo-ui-buttonElement-frameless > .oo-ui-popupWidget {
+ // Compensate for icon being inset
+ /* @noflip */
+ left: @size-icon / 2;
+ }
+
+ &.oo-ui-buttonElement-framed > .oo-ui-popupWidget {
+ // Compensate for icon being inset
+ // elements.less positions the icon with left: 1.5em -
@size-icon / 2; , so we need:
+ // @size-icon / 2 + ( 1.5em - @size-icon / 2 ) which is 1.5em.
+ /* @noflip */
+ left: 1.5em;
+ }
+}
+
+.theme-oo-ui-progressBarWidget () {
+ max-width: @max-width-default;
+ background-color: @background-color-default;
+ border: @border-default;
+ border-radius: @border-radius-default;
+ overflow: hidden;
+
+ &-bar {
+ background-color: #ddd;
+ height: 1em;
+ .oo-ui-transition(
+ width 200ms,
+ margin-left 200ms
+ );
+ }
+ &-indeterminate {
+ .oo-ui-progressBarWidget-bar {
+ .oo-ui-animation( oo-ui-progressBarWidget-slide 2s
infinite linear );
+ width: 40%;
+ margin-left: -10%;
+ border-left-width: @border-width-default;
+ }
+ }
+ &.oo-ui-widget-disabled {
+ opacity: 0.6;
+ }
+
+ .oo-ui-progressBarWidget-slide-frames () {
+ from {
+ margin-left: -40%;
+ }
+ to {
+ margin-left: 100%;
+ }
+ }
+ @-webkit-keyframes oo-ui-progressBarWidget-slide {
+ .oo-ui-progressBarWidget-slide-frames;
+ }
+ @-moz-keyframes oo-ui-progressBarWidget-slide {
+ .oo-ui-progressBarWidget-slide-frames;
+ }
+ @keyframes oo-ui-progressBarWidget-slide {
+ .oo-ui-progressBarWidget-slide-frames;
+ }
+}
+
+.theme-oo-ui-radioInputWidget () {
+ position: relative;
+ line-height: @size-input-binary;
+ // Prevent the fake span from jumping to the next line of text
+ white-space: nowrap;
+
+ * {
+ font: inherit;
+ vertical-align: middle;
+ }
+
+ // `<input type=radio>` element is visually replaced by `span` that
follows
+ [type='radio'] {
+ position: relative;
+ // Needed for Firefox mobile (See bug 71750 to workaround
default Firefox stylesheet)
+ max-width: none;
+ // Ensure the invisible input takes up the required width
+ width: @size-input-binary;
+ height: @size-input-binary;
+ // Having margin would offset the input from where the span is
absolutely positioned,
+ // making only the overlap region receive events
+ margin: 0;
+ // Use opacity so that VoiceOver can still identify it
+ opacity: 0;
+ // Render "on top of" the span, so that it's still clickable
+ z-index: 1;
+
+ & + span {
+ background-color: @background-color-default;
+ position: absolute;
+ left: 0;
+ .oo-ui-box-sizing( border-box );
+ width: @size-input-binary;
+ height: @size-input-binary;
+ border: @border-input-binary;
+ border-radius: 100%;
+
+ // Needed for `:focus` state's inner white circle
+ &:before {
+ content: ' ';
+ position: absolute;
+ top: -4px; // `px` unit due to pixel rounding
error when using `@size-input-binary / 4`
+ left: -4px;
+ right: -4px;
+ bottom: -4px;
+ border: @border-width-default solid transparent;
+ border-radius: 100%;
+ }
+ }
+
+ &:checked {
+ & + span {
+ border-width: @size-input-binary / 4;
+ }
+
+ &:hover + span,
+ &:focus:hover + span {
+ border-width: @size-input-binary / 4;
+ }
+ }
+
+ &:disabled {
+ & + span {
+ background-color:
@background-color-disabled-filled;
+ border-color: @border-color-disabled;
+ }
+
+ &:checked + span {
+ background-color: @background-color-default;
+ }
+ }
+ }
+
+ &.oo-ui-widget-enabled [type='radio'] {
+ cursor: pointer;
+
+ & + span {
+ cursor: pointer;
+ .oo-ui-transition(
+ background-color @transition-ease-quick,
+ border-color @transition-ease-quick,
+ border-width @transition-ease-quick
+ );
+ }
+
+ &:hover + span {
+ border-color: @color-progressive;
+ }
+
+ &:active + span {
+ background-color: @color-progressive-active;
+ border-color: @color-progressive-active;
+ }
+
+ &:checked {
+ & + span {
+ border-color: @color-progressive-active;
+ }
+
+ &:hover + span {
+ border-color: @color-progressive;
+ }
+
+ &:hover:focus + span {
+ border-color: @color-progressive;
+ box-shadow: inset 0 0 0 1px @color-progressive;
+ }
+
+ &:active + span,
+ &:active:focus + span {
+ border-color: @color-progressive-active;
+ box-shadow: inset 0 0 0 1px
@color-progressive-active;
+ }
+
+ &:focus + span {
+ box-shadow: @box-shadow-focus-default;
+
+ &:before {
+ border-color: @background-color-default;
+ top: -3px;
+ right: -3px;
+ bottom: -3px;
+ left: -3px;
+ }
+ }
+ }
+ }
+}
+
+.theme-oo-ui-radioOptionWidget () {
+ padding: 0.25em 0;
+ background-color: transparent;
+
+ &.oo-ui-optionWidget-selected,
+ &.oo-ui-optionWidget-pressed,
+ &.oo-ui-optionWidget-highlighted {
+ background-color: transparent;
+ }
+
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
+ padding: @padding-input-binary-label;
+ }
+
+ .oo-ui-radioInputWidget {
+ margin-right: 0;
+ }
+}
+
+.theme-oo-ui-radioSelectWidget () {
+ &:focus {
+ outline: 0;
+
+ [type='radio']:checked + span:before {
+ border-color: @background-color-default;
+ }
+ }
+}
+
+.theme-oo-ui-radioSelectInputWidget () {
+ .oo-ui-fieldLayout {
+ margin-bottom: 0;
+
+ .oo-ui-fieldLayout-body {
+ padding: 0.25em 0;
+
+ .oo-ui-labelElement-label {
+ line-height: 1.5;
+ }
+ }
+ }
+}
+
+.theme-oo-ui-searchWidget () {
+ &-query {
+ height: 4em;
+ padding: 0 1em;
+ border-bottom: @border-default;
+
+ .oo-ui-textInputWidget {
+ margin: 0.75em 0;
+ }
+ }
+
+ &-results {
+ top: 4em;
+ padding: 1em;
+ line-height: 0;
+ }
+}
+
+.theme-oo-ui-selectWidget () {}
.theme-oo-ui-selectFileWidget () {
width: 100%;
@@ -353,324 +1290,44 @@
}
}
-.theme-oo-ui-inputWidget () {
- .oo-ui-inline-spacing( 0.5em );
-}
-
-.theme-oo-ui-buttonInputWidget () {}
-
-.theme-oo-ui-checkboxInputWidget () {
- position: relative;
- line-height: @size-input-binary;
- // Prevent the fake span from jumping to the next line of text
- white-space: nowrap;
-
- * {
- font: inherit;
- vertical-align: middle;
- }
-
- // `<input type=checkbox>` element is visually replaced by `span` that
follows
- [type='checkbox'] {
- position: relative;
- // Needed for Firefox mobile (See bug 71750 to workaround
default Firefox stylesheet)
- max-width: none;
- // Ensure the invisible input takes up the required width
- width: @size-input-binary;
- height: @size-input-binary;
- // Having margin would offset the input from where the span is
absolutely positioned,
- // making only the overlap region receive events
- margin: 0;
- // Use opacity so that VoiceOver can still identify it
- opacity: 0;
- // Render "on top of" the span, so that it's still clickable
- z-index: 1;
-
- & + span {
- background-color: @background-color-default;
- background-origin: border-box;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 0 0;
- .oo-ui-box-sizing( border-box );
- position: absolute;
- left: 0;
- width: @size-input-binary;
- height: @size-input-binary;
- border: @border-input-binary;
- border-radius: @border-radius-default;
- }
-
- &:checked {
- & + span {
- .oo-ui-background-image-svg(
'@{oo-ui-default-image-path}/icons/check-invert' );
- .oo-ui-background-image-safari(
'@{oo-ui-default-image-path}/icons/check-invert' );
- background-size: 90% 90%;
- }
- }
-
- &:disabled {
- & + span {
- background-color:
@background-color-disabled-filled;
- border-color: @border-color-disabled;
- }
- &:hover + span {
- background-color:
@background-color-disabled-filled;
- border-color: @border-color-disabled;
- }
- }
- }
-
- &.oo-ui-widget-enabled [type='checkbox'] {
- cursor: pointer;
-
- & + span {
- cursor: pointer;
- .oo-ui-transition(
- background-color @transition-ease-quick,
- background-size @transition-ease-quick,
- border-color @transition-ease-quick,
- box-shadow @transition-ease-quick
- );
- }
-
- &:hover + span,
- &:focus:hover + span {
- border-color: @color-progressive;
- }
-
- &:active + span {
- background-color: @color-progressive-active;
- border-color: @border-color-input-binary-active;
- }
-
- &:focus + span {
- border-color: @color-progressive;
- box-shadow: @box-shadow-focus-default;
- }
-
- &:checked {
- & + span {
- background-color: @color-progressive-active;
- border-color: @border-color-input-binary-active;
- }
-
- &:hover + span,
- &:focus:hover + span {
- background-color:
@color-progressive-active-hover;
- border-color: @color-progressive-active-hover;
- }
-
- &:active + span,
- &:active:hover + span {
- background-color: @color-progressive-active;
- border-color: @border-color-input-binary-active;
- }
-
- &:focus + span {
- background-color: @color-progressive-active;
- border-color: @color-progressive-active;
- box-shadow: @box-shadow-focus-inset;
- }
- }
- }
-}
-
-.theme-oo-ui-checkboxMultiselectInputWidget () {
- .oo-ui-fieldLayout {
- margin-bottom: 0;
-
- .oo-ui-fieldLayout-body {
- padding: 0.25em 0;
-
- .oo-ui-labelElement-label {
- line-height: 1.5;
- }
- }
- }
-}
-
-.theme-oo-ui-dropdownInputWidget () {
- width: 100%;
- max-width: @max-width-input;
-
- select {
- background-color: @background-color-default;
- height: 2.275em;
- font-size: inherit;
- font-family: inherit;
- .oo-ui-box-sizing( border-box );
- border: @border-default;
- border-radius: @border-radius-default;
- padding-left: 1em;
- vertical-align: middle;
- }
-
- option {
- font-size: inherit;
- font-family: inherit;
- height: 1.5em;
- padding: 0.5em 1em;
- }
+.theme-oo-ui-tabOptionWidget () {
+ padding: 0.35em 1em;
+ margin: 0.5em 0 0 0.75em;
+ border: 1px solid transparent;
+ border-bottom: 0;
+ border-top-left-radius: @border-radius-default;
+ border-top-right-radius: @border-radius-default;
+ color: @color-default;
+ font-weight: bold;
&.oo-ui-widget-enabled {
- select:hover,
- select:focus {
- border-color: @border-color-dialog;
- outline: 0;
+ &:hover {
+ background-color: rgba( 255, 255, 255, 0.3 );
+ }
+
+ &:active {
+ background-color: rgba( 255, 255, 255, 0.8 );
}
}
- &.oo-ui-widget-disabled {
- select {
- color: @color-disabled;
- border-color: @border-color-disabled;
- background-color: @background-color-disabled;
- }
+ &.oo-ui-indicatorElement .oo-ui-labelElement-label {
+ padding-right: 1.5em;
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ opacity: 0.5;
+ }
+
+ .oo-ui-selectWidget-pressed &.oo-ui-optionWidget-selected,
+ .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected,
+ &.oo-ui-optionWidget-selected:hover {
+ background-color: @background-color-default;
+ color: #333;
}
}
-.theme-oo-ui-radioInputWidget () {
- position: relative;
- line-height: @size-input-binary;
- // Prevent the fake span from jumping to the next line of text
- white-space: nowrap;
-
- * {
- font: inherit;
- vertical-align: middle;
- }
-
- // `<input type=radio>` element is visually replaced by `span` that
follows
- [type='radio'] {
- position: relative;
- // Needed for Firefox mobile (See bug 71750 to workaround
default Firefox stylesheet)
- max-width: none;
- // Ensure the invisible input takes up the required width
- width: @size-input-binary;
- height: @size-input-binary;
- // Having margin would offset the input from where the span is
absolutely positioned,
- // making only the overlap region receive events
- margin: 0;
- // Use opacity so that VoiceOver can still identify it
- opacity: 0;
- // Render "on top of" the span, so that it's still clickable
- z-index: 1;
-
- & + span {
- background-color: @background-color-default;
- position: absolute;
- left: 0;
- .oo-ui-box-sizing( border-box );
- width: @size-input-binary;
- height: @size-input-binary;
- border: @border-input-binary;
- border-radius: 100%;
-
- // Needed for `:focus` state's inner white circle
- &:before {
- content: ' ';
- position: absolute;
- top: -4px; // `px` unit due to pixel rounding
error when using `@size-input-binary / 4`
- left: -4px;
- right: -4px;
- bottom: -4px;
- border: @border-width-default solid transparent;
- border-radius: 100%;
- }
- }
-
- &:checked {
- & + span {
- border-width: @size-input-binary / 4;
- }
-
- &:hover + span,
- &:focus:hover + span {
- border-width: @size-input-binary / 4;
- }
- }
-
- &:disabled {
- & + span {
- background-color:
@background-color-disabled-filled;
- border-color: @border-color-disabled;
- }
-
- &:checked + span {
- background-color: @background-color-default;
- }
- }
- }
-
- &.oo-ui-widget-enabled [type='radio'] {
- cursor: pointer;
-
- & + span {
- cursor: pointer;
- .oo-ui-transition(
- background-color @transition-ease-quick,
- border-color @transition-ease-quick,
- border-width @transition-ease-quick
- );
- }
-
- &:hover + span {
- border-color: @color-progressive;
- }
-
- &:active + span {
- background-color: @color-progressive-active;
- border-color: @color-progressive-active;
- }
-
- &:checked {
- & + span {
- border-color: @color-progressive-active;
- }
-
- &:hover + span {
- border-color: @color-progressive;
- }
-
- &:hover:focus + span {
- border-color: @color-progressive;
- box-shadow: inset 0 0 0 1px @color-progressive;
- }
-
- &:active + span,
- &:active:focus + span {
- border-color: @color-progressive-active;
- box-shadow: inset 0 0 0 1px
@color-progressive-active;
- }
-
- &:focus + span {
- box-shadow: @box-shadow-focus-default;
-
- &:before {
- border-color: @background-color-default;
- top: -3px;
- right: -3px;
- bottom: -3px;
- left: -3px;
- }
- }
- }
- }
-}
-
-.theme-oo-ui-radioSelectInputWidget () {
- .oo-ui-fieldLayout {
- margin-bottom: 0;
-
- .oo-ui-fieldLayout-body {
- padding: 0.25em 0;
-
- .oo-ui-labelElement-label {
- line-height: 1.5;
- }
- }
- }
+.theme-oo-ui-tabSelectWidget () {
+ background-color: #ddd;
}
.theme-oo-ui-textInputWidget () {
@@ -830,595 +1487,10 @@
}
}
-.theme-oo-ui-comboBoxInputWidget () {
- // inherits from `inputWidget` & `textInputWidget`
+.theme-oo-ui-toggleWidget () {}
- input,
- textarea {
- height: 2.35em;
- }
-
- &.oo-ui-widget-enabled:hover {
- input,
- textarea {
- border-color: @border-color-default-hover;
-
- &:focus {
- border-color: @border-color-default-focus;
- }
- }
- }
-
- &.oo-ui-widget-disabled {
- .oo-ui-indicatorElement-indicator {
- opacity: @opacity-disabled-indicator;
- }
- }
-}
-
-.theme-oo-ui-capsuleMultiselectWidget () {
- width: 100%;
- max-width: @max-width-input;
-
- &-handle {
- min-height: 2.4em;
- .oo-ui-inline-spacing( 0.5em );
- padding: 0.15em 0.25em;
- border: @border-default;
- border-radius: @border-radius-default;
- .oo-ui-box-sizing( border-box );
-
- &:hover {
- border-color: @border-color-input-hover;
- }
-
- > .oo-ui-indicatorElement-indicator,
- > .oo-ui-iconElement-icon {
- position: absolute;
- }
-
- > .oo-ui-capsuleMultiselectWidget-content > input {
- border: 0;
- line-height: 1.675;
- margin: 0 0 0 0.2em;
- padding: 0;
- font-size: inherit;
- font-family: inherit;
- background-color: transparent;
- color: @color-emphasized;
- vertical-align: middle;
-
- &:focus {
- // Chrome
- outline: 0;
- }
- }
- }
-
- &.oo-ui-indicatorElement &-handle {
- padding-right: @size-indicator + 2 * 0.775em;
-
- > .oo-ui-indicatorElement-indicator {
- right: 0;
- top: 0;
- margin: 0.775em;
- }
- }
-
- &.oo-ui-iconElement &-handle {
- padding-left: @size-icon + 2 * 0.3em;
-
- > .oo-ui-iconElement-icon {
- left: 0;
- top: 0;
- margin: 0.3em;
- }
- }
-
- // CapsuleMultiselectWidget with child widget
- .oo-ui-popupWidget {
- width: 100%;
- margin-top: -1px;
- }
-
- .oo-ui-popupWidget-popup {
- min-width: 100%;
- .oo-ui-box-sizing( border-box );
- border-width: 0 1px;
- border-radius: 0 0 2px 2px;
- }
-
- &.oo-ui-widget-enabled &-handle {
- background-color: @background-color-default;
- cursor: text;
- .oo-ui-transition(
- border-color @transition-ease-out-sine-medium,
- box-shadow @transition-ease-out-sine-medium
- );
- }
- &.oo-ui-widget-enabled:hover &-handle {
- border-color: @border-color-default-hover;
- }
- &.oo-ui-widget-enabled.oo-ui-capsuleMultiselectWidget-open &-handle {
- border-color: @border-color-default-focus;
- outline: 0;
- box-shadow: @box-shadow-focus-default;
- }
-
- &.oo-ui-widget-disabled &-handle {
- color: @color-disabled;
- text-shadow: @text-shadow-disabled;
- border-color: @border-color-disabled;
- background-color: @background-color-disabled;
-
- > .oo-ui-iconElement-icon {
- opacity: @opacity-disabled;
- }
-
- > .oo-ui-indicatorElement-indicator {
- opacity: @opacity-disabled-indicator;
- }
- }
-}
-
-.theme-oo-ui-capsuleItemWidget () {
- width: auto;
- max-width: 100%;
- .oo-ui-box-sizing( border-box );
- vertical-align: middle;
- height: 1.7em;
- line-height: 1.7;
- background-color: #eee;
- color: @color-default;
- margin: 0.1em;
- border: @border-default;
- border-radius: @border-radius-default;
- padding: 0 0.4em;
-
- &:focus {
- outline: 0;
- border-color: @color-progressive;
- box-shadow: @box-shadow-focus-default;
- }
-
- &.oo-ui-widget-disabled {
- background-color: @background-color-disabled;
- color: @color-disabled;
- border-color: @border-color-disabled;
- text-shadow: @text-shadow-disabled;
- }
-
- // Clear button
- & > .oo-ui-buttonElement {
- display: none;
- }
-
- &.oo-ui-widget-enabled {
- padding-right: @size-indicator + 0.6em;
-
- > .oo-ui-buttonElement {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- }
- & .oo-ui-buttonElement-button {
- display: block;
- width: @size-indicator + 0.6em; // Padding on each side
of the indicator
- height: 100%; // Firefox height calculation fix
-
- & .oo-ui-indicator-clear {
- position: absolute;
- top: 0;
- right: 0.3em;
- bottom: 0;
- height: auto;
- }
- }
- }
-}
-
-.theme-oo-ui-labelWidget () {}
-
-.theme-oo-ui-optionWidget () {
- border: 0;
- padding: 0.25em 0.5em;
-
- .oo-ui-labelElement-label {
- line-height: 1.5;
- }
-
- // Don't add `highlighted` or `selected` modifications here
- // as it inherits to various visually opposite widgets.
-
- &-selected .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
- opacity: @opacity-icon-default-selected;
- }
-
- &.oo-ui-widget-disabled {
- color: @color-disabled;
- }
-}
-
-.theme-oo-ui-decoratedOptionWidget () {
- padding: 0.5em 2em 0.5em 3em;
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon,
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- top: 0;
- height: 100%;
- }
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- left: 0.5em;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- right: 0.5em;
- }
-
- &.oo-ui-widget-disabled {
- .oo-ui-iconElement-icon,
- .oo-ui-indicatorElement-indicator {
- opacity: @opacity-disabled;
- }
- }
-}
-
-.theme-oo-ui-buttonOptionWidget () {
- padding: 0;
-
- &.oo-ui-optionWidget-selected,
- &.oo-ui-optionWidget-pressed,
- &.oo-ui-optionWidget-highlighted {
- background-color: transparent;
- }
-}
-
-.theme-oo-ui-radioOptionWidget () {
- padding: 0.25em 0;
- background-color: transparent;
-
- &.oo-ui-optionWidget-selected,
- &.oo-ui-optionWidget-pressed,
- &.oo-ui-optionWidget-highlighted {
- background-color: transparent;
- }
-
- &.oo-ui-labelElement .oo-ui-labelElement-label {
- padding: @padding-input-binary-label;
- }
-
- .oo-ui-radioInputWidget {
- margin-right: 0;
- }
-}
-
-.theme-oo-ui-menuOptionWidget () {
- padding: 0.5em 1em;
- .oo-ui-transition(
- background-color @transition-ease-quick,
- color @transition-ease-quick
- );
-
- &.oo-ui-optionWidget {
- &-highlighted {
- background-color: @background-color-default-hover;
- color: @color-emphasized;
- }
- &-selected {
- background-color: @background-color-progressive;
- color: @color-progressive;
-
- .oo-ui-iconElement-icon {
- display: none;
- }
- }
- &-selected&-highlighted,
- &-pressed&-highlighted {
- background-color: @background-color-progressive-hover;
- color: @color-progressive;
- }
- }
-}
-
-.theme-oo-ui-menuSectionOptionWidget () {
- padding: 0.33em 0.75em;
- color: #888;
-}
-
-.theme-oo-ui-outlineOptionWidget () {
- font-size: 1.1em;
- padding: 0.75em;
- .oo-ui-transition(
- background-color @transition-ease-quick,
- color @transition-ease-quick
- );
-
- &.oo-ui-optionWidget-highlighted {
- background-color: @background-color-default-hover;
- color: @color-emphasized;
- }
-
- &.oo-ui-optionWidget-selected {
- background-color: @background-color-progressive;
- color: @color-progressive;
- }
-
- &.oo-ui-optionWidget-pressed {
- background-color: @background-color-progressive-hover;
- color: @color-progressive;
- }
-
- .oo-ui-iconElement-icon {
- // Undoes the parent change, because the theme's icons expect
to be
- // 24px, and don't scale incredibly well.
- font-size: 90.90909%;
- }
-
- &.oo-ui-indicatorElement .oo-ui-labelElement-label {
- padding-right: 1.5em;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- opacity: 0.5;
- }
-
- &-level-0 {
- padding-left: 3.5em;
-
- .oo-ui-iconElement-icon {
- left: 1em;
- }
- }
- &-level-1 {
- padding-left: 5em;
-
- .oo-ui-iconElement-icon {
- left: 2.5em;
- }
- }
-
- &-level-2 {
- padding-left: 6.5em;
-
- .oo-ui-iconElement-icon {
- left: 4em;
- }
- }
-
- &.oo-ui-flaggedElement-important {
- font-weight: bold;
- }
-
- &.oo-ui-flaggedElement-empty {
- .oo-ui-iconElement-icon {
- opacity: 0.5;
- }
- .oo-ui-labelElement-label {
- color: #777;
- }
- }
-}
-
-.theme-oo-ui-tabOptionWidget () {
- padding: 0.35em 1em;
- margin: 0.5em 0 0 0.75em;
- border: 1px solid transparent;
- border-bottom: 0;
- border-top-left-radius: @border-radius-default;
- border-top-right-radius: @border-radius-default;
- color: @color-default;
- font-weight: bold;
-
- &.oo-ui-widget-enabled {
- &:hover {
- background-color: rgba( 255, 255, 255, 0.3 );
- }
-
- &:active {
- background-color: rgba( 255, 255, 255, 0.8 );
- }
- }
-
- &.oo-ui-indicatorElement .oo-ui-labelElement-label {
- padding-right: 1.5em;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- opacity: 0.5;
- }
-
- .oo-ui-selectWidget-pressed &.oo-ui-optionWidget-selected,
- .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected,
- &.oo-ui-optionWidget-selected:hover {
- background-color: @background-color-default;
- color: #333;
- }
-}
-
-.theme-oo-ui-popupWidget () {
- &-popup {
- background-color: @background-color-default;
- border: @border-menu;
- border-radius: @border-radius-default;
- box-shadow: @box-shadow-menu;
- }
-
- @anchor-size: 9px;
-
- &-anchored {
- .oo-ui-popupWidget-popup {
- margin-top: @anchor-size;
- }
-
- .oo-ui-popupWidget-anchor:before,
- .oo-ui-popupWidget-anchor:after {
- content: '';
- position: absolute;
- width: 0;
- height: 0;
- border-style: solid;
- border-color: transparent;
- border-top: 0;
- }
-
- .oo-ui-popupWidget-anchor:before {
- bottom: -@anchor-size - 1px;
- left: -@anchor-size;
- border-bottom-color: #888;
- border-width: @anchor-size + 1px;
- }
-
- .oo-ui-popupWidget-anchor:after {
- bottom: -@anchor-size - 1px;
- left: -@anchor-size + 1px;
- border-bottom-color: @border-color-disabled-filled;
- border-width: @anchor-size;
- }
- }
-
- &-transitioning .oo-ui-popupWidget-popup {
- .oo-ui-transition(
- width @transition-ease-quick,
- height @transition-ease-quick,
- left @transition-ease-quick
- );
- }
-
- &-head {
- height: 2.5em;
-
- > .oo-ui-buttonWidget {
- margin: 0.25em;
- }
-
- > .oo-ui-labelElement-label {
- margin: 0.75em 1em;
- }
- }
-
- &-body-padded {
- padding: 0 1em;
- }
-}
-
-.theme-oo-ui-searchWidget () {
- &-query {
- height: 4em;
- padding: 0 1em;
- border-bottom: @border-default;
-
- .oo-ui-textInputWidget {
- margin: 0.75em 0;
- }
- }
-
- &-results {
- top: 4em;
- padding: 1em;
- line-height: 0;
- }
-}
-
-.theme-oo-ui-selectWidget () {}
-
-.theme-oo-ui-buttonSelectWidget () {
- border-radius: @border-radius-default;
+.theme-oo-ui-toggleButtonWidget () {
.oo-ui-inline-spacing( 0.5em );
-
- &:focus {
- outline: 0;
- }
-
- .oo-ui-buttonOptionWidget {
- .oo-ui-buttonElement-button {
- border-radius: 0;
- margin-left: -1px;
- }
-
- &:first-child .oo-ui-buttonElement-button {
- border-bottom-left-radius: @border-radius-default;
- border-top-left-radius: @border-radius-default;
- margin-left: 0;
- }
-
- &:last-child .oo-ui-buttonElement-button {
- border-bottom-right-radius: @border-radius-default;
- border-top-right-radius: @border-radius-default;
- }
-
- }
-
- &.oo-ui-widget-enabled {
- &:focus {
- .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
- .oo-ui-buttonElement-button {
- border-color:
@border-color-default-focus;
- box-shadow: @box-shadow-focus-inset;
- }
- }
- }
- }
-}
-
-.theme-oo-ui-radioSelectWidget () {
- &:focus {
- outline: 0;
-
- [type='radio']:checked + span:before {
- border-color: @background-color-default;
- }
- }
-}
-
-.theme-oo-ui-menuSelectWidget () {
- background-color: @background-color-default;
- margin-top: -1px;
- border: @border-menu;
- border-radius: 0 0 @border-radius-default @border-radius-default;
- box-shadow: @box-shadow-menu;
-}
-
-.theme-oo-ui-floatingMenuSelectWidget () {}
-
-.theme-oo-ui-outlineSelectWidget () {}
-
-.theme-oo-ui-tabSelectWidget () {
- background-color: #ddd;
-}
-
-.theme-oo-ui-numberInputWidget () {
- max-width: @max-width-input;
-
- &-buttoned {
- .oo-ui-buttonWidget {
- width: 2.5em;
- }
-
- .oo-ui-buttonElement-button {
- display: block;
- padding-left: 0;
- padding-right: 0;
- }
-
- .oo-ui-textInputWidget input {
- border-radius: 0;
- }
- }
-
- &-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- border-right-width: 0;
- }
-
- &-plusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left-width: 0;
- }
}
.theme-oo-ui-toggleSwitchWidget () {
@@ -1562,77 +1634,5 @@
&.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
background-color: @background-color-default;
}
- }
-}
-
-.theme-oo-ui-progressBarWidget () {
- max-width: @max-width-default;
- background-color: @background-color-default;
- border: @border-default;
- border-radius: @border-radius-default;
- overflow: hidden;
-
- &-bar {
- background-color: #ddd;
- height: 1em;
- .oo-ui-transition(
- width 200ms,
- margin-left 200ms
- );
- }
- &-indeterminate {
- .oo-ui-progressBarWidget-bar {
- .oo-ui-animation( oo-ui-progressBarWidget-slide 2s
infinite linear );
- width: 40%;
- margin-left: -10%;
- border-left-width: @border-width-default;
- }
- }
- &.oo-ui-widget-disabled {
- opacity: 0.6;
- }
-
- .oo-ui-progressBarWidget-slide-frames () {
- from {
- margin-left: -40%;
- }
- to {
- margin-left: 100%;
- }
- }
- @-webkit-keyframes oo-ui-progressBarWidget-slide {
- .oo-ui-progressBarWidget-slide-frames;
- }
- @-moz-keyframes oo-ui-progressBarWidget-slide {
- .oo-ui-progressBarWidget-slide-frames;
- }
- @keyframes oo-ui-progressBarWidget-slide {
- .oo-ui-progressBarWidget-slide-frames;
- }
-}
-
-.theme-oo-ui-multiselectWidget () {}
-
-.theme-oo-ui-multioptionWidget () {
- .oo-ui-labelElement-label {
- line-height: 1.5;
- }
-
- &.oo-ui-widget-disabled {
- color: @color-disabled;
- }
-}
-
-.theme-oo-ui-checkboxMultiselectWidget () {}
-
-.theme-oo-ui-checkboxMultioptionWidget () {
- padding: 0.25em 0;
-
- &.oo-ui-labelElement .oo-ui-labelElement-label {
- padding: @padding-input-binary-label;
- }
-
- .oo-ui-checkboxInputWidget {
- margin-right: 0;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/311356
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If6305c530088acc559bd0d65578e460210b8cd3f
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
