Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/156211
Change subject: Divide CSS properties between base styles and themes
......................................................................
Divide CSS properties between base styles and themes
Base styles should not include size, padding or positioning properties that are
likely to be overriden by the theme.
Change-Id: I056fc9c8f3ca5e9bde003ededb8e96e024311e20
---
M build/modules.json
R src/styles/Dialog.less
M src/styles/ToolGroup.less
M src/styles/dialogs/ProcessDialog.less
M src/styles/elements/ButtonedElement.less
M src/styles/layouts/FieldLayout.less
M src/styles/layouts/FieldsetLayout.less
M src/styles/toolgroups/BarToolgroup.less
M src/styles/toolgroups/ListToolgroup.less
M src/styles/toolgroups/MenuToolgroup.less
M src/styles/toolgroups/PopupToolgroup.less
M src/styles/tools/PopupTool.less
M src/styles/widgets/ButtonOptionWidget.less
M src/styles/widgets/ComboBoxWidget.less
M src/styles/widgets/DecoratedOptionWidget.less
M src/styles/widgets/IconWidget.less
M src/styles/widgets/IndicatorWidget.less
M src/styles/widgets/InlineMenuWidget.less
M src/styles/widgets/LabelWidget.less
M src/styles/widgets/OptionWidget.less
M src/styles/widgets/OutlineControlsWidget.less
M src/styles/widgets/OutlineItemWidget.less
M src/styles/widgets/PopupWidget.less
M src/styles/widgets/SearchWidget.less
M src/styles/widgets/ToggleSwitchWidget.less
A src/themes/agora/ToolGroup.less
M src/themes/agora/elements/ButtonedElement.less
A src/themes/agora/layouts/FieldLayout.less
A src/themes/agora/layouts/FieldsetLayout.less
A src/themes/agora/toolgroups/BarToolgroup.less
A src/themes/agora/toolgroups/ListToolgroup.less
A src/themes/agora/toolgroups/MenuToolgroup.less
A src/themes/agora/toolgroups/PopupToolgroup.less
A src/themes/agora/tools/PopupTool.less
R src/themes/agora/widgets/ButtonGroupWidget.less
M src/themes/agora/widgets/ButtonOptionWidget.less
A src/themes/agora/widgets/ComboBoxWidget.less
A src/themes/agora/widgets/DecoratedOptionWidget.less
A src/themes/agora/widgets/IconWidget.less
A src/themes/agora/widgets/IndicatorWidget.less
A src/themes/agora/widgets/InlineMenuWidget.less
A src/themes/agora/widgets/LabelWidget.less
M src/themes/agora/widgets/OptionWidget.less
A src/themes/agora/widgets/OutlineControlsWidget.less
A src/themes/agora/widgets/OutlineItemWidget.less
A src/themes/agora/widgets/PopupWidget.less
A src/themes/agora/widgets/SearchWidget.less
R src/themes/agora/widgets/SelectWidget.less
A src/themes/agora/widgets/ToggleSwitchWidget.less
M src/themes/apex/Dialog.less
M src/themes/apex/ToolGroup.less
M src/themes/apex/elements/ButtonedElement.less
M src/themes/apex/layouts/FieldLayout.less
M src/themes/apex/layouts/FieldsetLayout.less
M src/themes/apex/toolgroups/BarToolgroup.less
M src/themes/apex/toolgroups/ListToolgroup.less
M src/themes/apex/toolgroups/MenuToolgroup.less
M src/themes/apex/toolgroups/PopupToolgroup.less
A src/themes/apex/tools/PopupTool.less
M src/themes/apex/widgets/ButtonGroupWidget.less
M src/themes/apex/widgets/ButtonOptionWidget.less
M src/themes/apex/widgets/ComboBoxWidget.less
A src/themes/apex/widgets/DecoratedOptionWidget.less
A src/themes/apex/widgets/IconWidget.less
A src/themes/apex/widgets/IndicatorWidget.less
M src/themes/apex/widgets/InlineMenuWidget.less
A src/themes/apex/widgets/LabelWidget.less
M src/themes/apex/widgets/OptionWidget.less
M src/themes/apex/widgets/OutlineControlsWidget.less
M src/themes/apex/widgets/OutlineItemWidget.less
M src/themes/apex/widgets/PopupWidget.less
M src/themes/apex/widgets/SearchWidget.less
M src/themes/apex/widgets/ToggleSwitchWidget.less
M src/widgets/LabelWidget.js
M src/widgets/OptionWidget.js
M src/widgets/SelectWidget.js
76 files changed, 817 insertions(+), 281 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/11/156211/1
diff --git a/build/modules.json b/build/modules.json
index 209e295..1a773b9 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -88,6 +88,7 @@
"styles": [
"src/styles/core.less",
+ "src/styles/Dialog.less",
"src/styles/Toolbar.less",
"src/styles/ToolGroup.less",
"src/styles/Window.less",
@@ -118,13 +119,12 @@
"src/styles/widgets/IconWidget.less",
"src/styles/widgets/IndicatorWidget.less",
- "src/styles/widgets/SelectWidget.less",
+ "src/styles/widgets/LabelWidget.less",
"src/styles/widgets/OptionWidget.less",
"src/styles/widgets/DecoratedOptionWidget.less",
"src/styles/widgets/MenuWidget.less",
"src/styles/widgets/ComboBoxWidget.less",
"src/styles/widgets/PopupWidget.less",
- "src/styles/widgets/ButtonGroupWidget.less",
"src/styles/widgets/ButtonOptionWidget.less",
"src/styles/widgets/ButtonSelectWidget.less",
"src/styles/widgets/ButtonWidget.less",
@@ -162,12 +162,18 @@
"src/themes/apex/layouts/FieldsetLayout.less",
"src/themes/apex/layouts/PanelLayout.less",
+ "src/themes/apex/tools/PopupTool.less",
+
"src/themes/apex/toolgroups/BarToolgroup.less",
"src/themes/apex/toolgroups/ListToolgroup.less",
"src/themes/apex/toolgroups/MenuToolgroup.less",
"src/themes/apex/toolgroups/PopupToolgroup.less",
"src/themes/apex/widgets/OptionWidget.less",
+ "src/themes/apex/widgets/DecoratedOptionWidget.less",
+ "src/themes/apex/widgets/IconWidget.less",
+ "src/themes/apex/widgets/IndicatorWidget.less",
+ "src/themes/apex/widgets/LabelWidget.less",
"src/themes/apex/widgets/MenuWidget.less",
"src/themes/apex/widgets/PopupWidget.less",
"src/themes/apex/widgets/ButtonGroupWidget.less",
@@ -186,7 +192,7 @@
},
"oojs-ui-agora": {
"styles": [
- "src/themes/agora/Dialog.less",
+ "src/themes/agora/ToolGroup.less",
"src/themes/agora/WindowManager.less",
"src/themes/agora/dialogs/MessageDialog.less",
@@ -195,14 +201,34 @@
"src/themes/agora/elements/ButtonedElement.less",
"src/themes/agora/layouts/BookletLayout.less",
+ "src/themes/agora/layouts/FieldLayout.less",
+ "src/themes/agora/layouts/FieldsetLayout.less",
"src/themes/agora/layouts/PanelLayout.less",
+ "src/themes/agora/tools/PopupTool.less",
+
+ "src/themes/agora/toolgroups/BarToolgroup.less",
+ "src/themes/agora/toolgroups/ListToolgroup.less",
+ "src/themes/agora/toolgroups/MenuToolgroup.less",
+ "src/themes/agora/toolgroups/PopupToolgroup.less",
+
"src/themes/agora/widgets/OptionWidget.less",
+ "src/themes/agora/widgets/DecoratedOptionWidget.less",
+ "src/themes/agora/widgets/IconWidget.less",
+ "src/themes/agora/widgets/IndicatorWidget.less",
+ "src/themes/agora/widgets/LabelWidget.less",
+ "src/themes/agora/widgets/PopupWidget.less",
"src/themes/agora/widgets/ButtonOptionWidget.less",
+ "src/themes/agora/widgets/ComboBoxWidget.less",
+ "src/themes/agora/widgets/InlineMenuWidget.less",
"src/themes/agora/widgets/LookupWidget.less",
"src/themes/agora/widgets/MenuItemWidget.less",
"src/themes/agora/widgets/MenuSectionItemWidget.less",
+ "src/themes/agora/widgets/OutlineControlsWidget.less",
+ "src/themes/agora/widgets/OutlineItemWidget.less",
+ "src/themes/agora/widgets/SearchWidget.less",
"src/themes/agora/widgets/TextInputWidget.less",
+ "src/themes/agora/widgets/ToggleSwitchWidget.less",
"src/themes/agora/images/vector.less"
]
diff --git a/src/themes/agora/Dialog.less b/src/styles/Dialog.less
similarity index 100%
rename from src/themes/agora/Dialog.less
rename to src/styles/Dialog.less
diff --git a/src/styles/ToolGroup.less b/src/styles/ToolGroup.less
index 825cfad..05f4e4d 100644
--- a/src/styles/ToolGroup.less
+++ b/src/styles/ToolGroup.less
@@ -2,7 +2,6 @@
.oo-ui-toolGroup {
display: inline-block;
- margin: 0.3em;
vertical-align: middle;
&-empty {
diff --git a/src/styles/dialogs/ProcessDialog.less
b/src/styles/dialogs/ProcessDialog.less
index 79aa3a0..58207c7 100644
--- a/src/styles/dialogs/ProcessDialog.less
+++ b/src/styles/dialogs/ProcessDialog.less
@@ -43,7 +43,6 @@
left: 0;
right: 0;
bottom: 0;
- padding: 3em 3em 1.5em 3em;
z-index: 2;
overflow-x: hidden;
overflow-y: auto;
diff --git a/src/styles/elements/ButtonedElement.less
b/src/styles/elements/ButtonedElement.less
index ba0d5b4..a7e8592 100644
--- a/src/styles/elements/ButtonedElement.less
+++ b/src/styles/elements/ButtonedElement.less
@@ -9,12 +9,10 @@
> .oo-ui-iconedElement-icon {
display: none;
- margin-left: 0;
}
> .oo-ui-indicatedElement-indicator {
display: none;
- margin-right: -0.75em;
}
}
@@ -38,7 +36,6 @@
> .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
display: inline-block;
vertical-align: middle;
- margin-left: 0.25em;
}
}
@@ -51,7 +48,6 @@
> .oo-ui-labeledElement-label {
display: inline-block;
vertical-align: middle;
- line-height: 1.9em;
}
}
diff --git a/src/styles/layouts/FieldLayout.less
b/src/styles/layouts/FieldLayout.less
index 414cbcd..bdf3f9a 100644
--- a/src/styles/layouts/FieldLayout.less
+++ b/src/styles/layouts/FieldLayout.less
@@ -1,12 +1,6 @@
@import '../common';
.oo-ui-fieldLayout {
- margin-bottom: 1em;
-
- &:last-child {
- margin-bottom: 0;
- }
-
&:before,
&:after {
content: " ";
@@ -22,15 +16,11 @@
> .oo-ui-labeledElement-label {
display: block;
float: left;
- width: 35%;
- padding-top: 0.5em;
- margin-right: 5%;
}
> .oo-ui-fieldLayout-field {
display: block;
float: left;
- width: 60%;
}
}
@@ -42,29 +32,21 @@
> .oo-ui-labeledElement-label {
display: inline-block;
vertical-align: middle;
- padding: 0.75em 0.5em 0.5em 0.5em;
}
> .oo-ui-fieldLayout-field {
display: inline-block;
vertical-align: middle;
- padding: 0.5em 0;
}
}
&.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label {
display: inline-block;
- padding: 0.5em 0;
}
> .oo-ui-popupButtonWidget {
- > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
- margin-top: 0.25em;
- }
-
> .oo-ui-popupWidget > .oo-ui-popupWidget-popup {
z-index: 1;
}
}
-
}
diff --git a/src/styles/layouts/FieldsetLayout.less
b/src/styles/layouts/FieldsetLayout.less
index 8e22868..d0a5fc6 100644
--- a/src/styles/layouts/FieldsetLayout.less
+++ b/src/styles/layouts/FieldsetLayout.less
@@ -2,30 +2,10 @@
.oo-ui-fieldsetLayout {
position: relative;
- margin: 0;
- padding: 0;
-
- + .oo-ui-fieldsetLayout {
- margin-top: 2em;
- }
-
- > .oo-ui-labeledElement-label {
- margin-bottom: 0.5em;
- padding: 0.25em 0;
- }
-
- &.oo-ui-iconedElement > .oo-ui-labeledElement-label {
- padding-left: 1.75em;
- line-height: 1.33em;
- }
&.oo-ui-iconedElement > .oo-ui-iconedElement-icon {
display: block;
position: absolute;
- left: 0;
- top: 0.25em;
- width: 2em;
- height: 2em;
background-position: center center;
background-repeat: no-repeat;
}
diff --git a/src/styles/toolgroups/BarToolgroup.less
b/src/styles/toolgroups/BarToolgroup.less
index b413f4f..b175aeb 100644
--- a/src/styles/toolgroups/BarToolgroup.less
+++ b/src/styles/toolgroups/BarToolgroup.less
@@ -13,13 +13,9 @@
&-link {
display: block;
- height: 1.5em;
- padding: 0.25em;
.oo-ui-iconedElement-icon {
display: block;
- height: 1.5em;
- width: 1.5em;
}
.oo-ui-tool-title {
diff --git a/src/styles/toolgroups/ListToolgroup.less
b/src/styles/toolgroups/ListToolgroup.less
index 6c50e98..f46977b 100644
--- a/src/styles/toolgroups/ListToolgroup.less
+++ b/src/styles/toolgroups/ListToolgroup.less
@@ -1,20 +1,16 @@
@import '../common';
.oo-ui-listToolGroup {
- .oo-ui-toolGroup-tools {
- padding: 0.25em;
- }
-
.oo-ui-tool {
display: inline-block;
width: 100%;
+
.oo-ui-box-sizing(border-box);
&-link {
display: block;
cursor: pointer;
white-space: nowrap;
- padding-right: 0.5em;
}
&.oo-ui-widget-disabled {
diff --git a/src/styles/toolgroups/MenuToolgroup.less
b/src/styles/toolgroups/MenuToolgroup.less
index 0c49840..904e60c 100644
--- a/src/styles/toolgroups/MenuToolgroup.less
+++ b/src/styles/toolgroups/MenuToolgroup.less
@@ -1,14 +1,6 @@
@import '../common';
.oo-ui-menuToolGroup {
- .oo-ui-popupToolGroup-handle {
- min-width: 8em;
- }
-
- .oo-ui-toolGroup-tools {
- padding: 0.25em 0 0.25em 0;
- }
-
.oo-ui-tool {
display: block;
@@ -16,7 +8,6 @@
display: block;
cursor: pointer;
white-space: nowrap;
- padding: 0 1em 0 0.25em;
.oo-ui-iconedElement-icon {
background-image: none;
diff --git a/src/styles/toolgroups/PopupToolgroup.less
b/src/styles/toolgroups/PopupToolgroup.less
index 23a6dd3..b47b68f 100644
--- a/src/styles/toolgroups/PopupToolgroup.less
+++ b/src/styles/toolgroups/PopupToolgroup.less
@@ -2,12 +2,6 @@
.oo-ui-popupToolGroup {
position: relative;
- height: 2em;
- min-width: 2.5em;
-
- &.oo-ui-indicatedElement.oo-ui-iconedElement {
- min-width: 3.5em;
- }
&-handle {
display: block;
@@ -16,33 +10,9 @@
.oo-ui-indicatedElement-indicator,
.oo-ui-iconedElement-icon {
position: absolute;
- top: 0;
- width: 2em;
- height: 2em;
background-position: center center;
background-repeat: no-repeat;
}
-
- .oo-ui-indicatedElement-indicator {
- right: 0;
- }
-
- .oo-ui-iconedElement-icon {
- left: 0.25em;
- }
-
- .oo-ui-labeledElement-label {
- line-height: 2.6em;
- font-size: 0.8em;
- margin: 0 1em;
- }
- }
-
- &-header {
- line-height: 2.6em;
- font-size: 0.8em;
- margin: 0 0.6em;
- font-weight: bold;
}
&.oo-ui-widget-disabled {
@@ -51,19 +21,9 @@
}
}
- &.oo-ui-iconedElement .oo-ui-popupToolGroup-handle
.oo-ui-labeledElement-label {
- margin-left: 3em;
- }
-
- &.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle
.oo-ui-labeledElement-label {
- margin-right: 2.25em;
- }
-
.oo-ui-toolGroup-tools {
display: none;
position: absolute;
- top: 2em;
- left: -1px;
z-index: 4;
.oo-ui-iconedElement-icon {
@@ -82,16 +42,11 @@
.oo-ui-iconedElement-icon {
display: inline-block;
vertical-align: middle;
- height: 2em;
- width: 2em;
- margin-right: 0.25em;
}
.oo-ui-tool-title {
display: inline-block;
vertical-align: middle;
- line-height: 2em;
- font-size: 0.8em;
}
}
diff --git a/src/styles/tools/PopupTool.less b/src/styles/tools/PopupTool.less
index b382f7e..bbee438 100644
--- a/src/styles/tools/PopupTool.less
+++ b/src/styles/tools/PopupTool.less
@@ -1,9 +1,6 @@
@import '../common';
.oo-ui-popupTool .oo-ui-popupWidget {
- margin-left: 1.25em;
- font-size: 0.8em;
-
&-popup,
&-anchor {
z-index: 4;
diff --git a/src/styles/widgets/ButtonOptionWidget.less
b/src/styles/widgets/ButtonOptionWidget.less
index a9cb8d2..a0345fd 100644
--- a/src/styles/widgets/ButtonOptionWidget.less
+++ b/src/styles/widgets/ButtonOptionWidget.less
@@ -2,11 +2,9 @@
.oo-ui-buttonOptionWidget {
display: inline-block;
- background-color: transparent;
.oo-ui-buttonedElement-button {
position: relative;
- height: 1.9em;
}
&.oo-ui-iconedElement .oo-ui-iconedElement-icon,
@@ -14,7 +12,5 @@
position: static;
display: inline-block;
vertical-align: middle;
- height: 1.9em;
- margin-top: 0;
}
}
diff --git a/src/styles/widgets/ComboBoxWidget.less
b/src/styles/widgets/ComboBoxWidget.less
index a6f4584..252297d 100644
--- a/src/styles/widgets/ComboBoxWidget.less
+++ b/src/styles/widgets/ComboBoxWidget.less
@@ -2,5 +2,4 @@
.oo-ui-comboBoxWidget > .oo-ui-selectWidget {
z-index: 1;
- min-width: 20em;
}
diff --git a/src/styles/widgets/DecoratedOptionWidget.less
b/src/styles/widgets/DecoratedOptionWidget.less
index f492ca6..67b39bc 100644
--- a/src/styles/widgets/DecoratedOptionWidget.less
+++ b/src/styles/widgets/DecoratedOptionWidget.less
@@ -4,19 +4,7 @@
.oo-ui-iconedElement-icon,
.oo-ui-indicatedElement-indicator {
position: absolute;
- top: 50%;
- width: 2em;
- height: 2em;
- margin-top: -1em;
background-repeat: no-repeat;
background-position: center center;
- }
-
- .oo-ui-iconedElement-icon {
- left: 0.5em;
- }
-
- .oo-ui-indicatedElement-indicator {
- right: 0.5em;
}
}
diff --git a/src/styles/widgets/IconWidget.less
b/src/styles/widgets/IconWidget.less
index cc73603..bb6a97a 100644
--- a/src/styles/widgets/IconWidget.less
+++ b/src/styles/widgets/IconWidget.less
@@ -3,14 +3,6 @@
.oo-ui-iconWidget {
display: inline-block;
vertical-align: middle;
- line-height: 2.5em;
- height: 1.9em;
- width: 1.9em;
background-position: center center;
background-repeat: no-repeat;
- opacity: 0.8;
-
- &.oo-ui-widget-disabled {
- opacity: 0.2;
- }
}
\ No newline at end of file
diff --git a/src/styles/widgets/IndicatorWidget.less
b/src/styles/widgets/IndicatorWidget.less
index e2be7d1..cd0efdc 100644
--- a/src/styles/widgets/IndicatorWidget.less
+++ b/src/styles/widgets/IndicatorWidget.less
@@ -3,14 +3,6 @@
.oo-ui-indicatorWidget {
display: inline-block;
vertical-align: middle;
- line-height: 2.5em;
- height: 1.9em;
- width: 1.9em;
background-position: center center;
background-repeat: no-repeat;
- opacity: 0.8;
-
- &.oo-ui-widget-disabled {
- opacity: 0.2;
- }
}
diff --git a/src/styles/widgets/InlineMenuWidget.less
b/src/styles/widgets/InlineMenuWidget.less
index 7aaa450..2d47960 100644
--- a/src/styles/widgets/InlineMenuWidget.less
+++ b/src/styles/widgets/InlineMenuWidget.less
@@ -3,56 +3,33 @@
.oo-ui-inlineMenuWidget {
position: relative;
display: inline-block;
- margin: 0.25em 0;
- min-width: 20em;
&-handle {
- display: inline-block;
width: 100%;
- height: 2.5em;
+ display: inline-block;
cursor: pointer;
+
.oo-ui-unselectable();
.oo-ui-box-sizing(border-box);
+
.oo-ui-indicatedElement-indicator,
.oo-ui-iconedElement-icon {
position: absolute;
- top: 0;
- width: 2.5em;
- height: 2.5em;
background-position: center center;
background-repeat: no-repeat;
}
-
- .oo-ui-indicatedElement-indicator {
- right: 0;
- }
-
- .oo-ui-iconedElement-icon {
- left: 0.25em;
- }
-
- .oo-ui-labeledElement-label {
- line-height: 2.5em;
- margin: 0 0.5em;
- }
-
- }
-
- &.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle
.oo-ui-labeledElement-label {
- margin-left: 3em;
- }
-
- &.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle
.oo-ui-labeledElement-label {
- margin-right: 2em;
}
.oo-ui-menuWidget {
- width: 100%;
z-index: 1;
}
&.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle {
cursor: default;
}
+
+ .oo-ui-menuWidget {
+ width: 100%;
+ }
}
diff --git a/src/styles/widgets/LabelWidget.less
b/src/styles/widgets/LabelWidget.less
index f90118c..2f16071 100644
--- a/src/styles/widgets/LabelWidget.less
+++ b/src/styles/widgets/LabelWidget.less
@@ -2,5 +2,4 @@
.oo-ui-labelWidget {
display: inline-block;
- padding: 0.5em 0;
}
diff --git a/src/styles/widgets/OptionWidget.less
b/src/styles/widgets/OptionWidget.less
index 6fb6a96..e7f1512 100644
--- a/src/styles/widgets/OptionWidget.less
+++ b/src/styles/widgets/OptionWidget.less
@@ -3,9 +3,6 @@
.oo-ui-optionWidget {
position: relative;
display: block;
- border: none;
- list-style: none;
- margin: 0;
cursor: pointer;
&.oo-ui-widget-disabled {
@@ -14,7 +11,6 @@
.oo-ui-labeledElement-label {
display: block;
- line-height: 1.5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/styles/widgets/OutlineControlsWidget.less
b/src/styles/widgets/OutlineControlsWidget.less
index 1aa6cb3..f0b34cb 100644
--- a/src/styles/widgets/OutlineControlsWidget.less
+++ b/src/styles/widgets/OutlineControlsWidget.less
@@ -1,29 +1,20 @@
@import '../common';
.oo-ui-outlineControlsWidget {
- height: 3em;
-
&-items,
&-movers {
float: left;
- height: 2em;
- margin: 0.5em;
- padding: 0;
.oo-ui-box-sizing(border-box);
}
> .oo-ui-iconedElement-icon {
float: left;
- width: 1.5em;
- height: 2em;
- margin: 0.5em 0 0.5em 0.5em;
background-position: right center;
background-repeat: no-repeat;
}
&-items {
float: left;
- margin-left: 0;
.oo-ui-buttonWidget {
float: left;
diff --git a/src/styles/widgets/OutlineItemWidget.less
b/src/styles/widgets/OutlineItemWidget.less
index 6228914..a108cdb 100644
--- a/src/styles/widgets/OutlineItemWidget.less
+++ b/src/styles/widgets/OutlineItemWidget.less
@@ -2,7 +2,6 @@
.oo-ui-outlineItemWidget {
position: relative;
- padding: 0.75em;
cursor: pointer;
.oo-ui-unselectable();
}
diff --git a/src/styles/widgets/PopupWidget.less
b/src/styles/widgets/PopupWidget.less
index e0e4efb..cfdc6b6 100644
--- a/src/styles/widgets/PopupWidget.less
+++ b/src/styles/widgets/PopupWidget.less
@@ -13,10 +13,6 @@
}
&-anchored {
- .oo-ui-popupWidget-popup {
- margin-top: 7px;
- }
-
.oo-ui-popupWidget-anchor {
display: block;
position: absolute;
@@ -25,17 +21,14 @@
}
&-head {
- height: 2.5em;
.oo-ui-unselectable();
.oo-ui-buttonWidget {
float: right;
- margin: 0.25em;
}
.oo-ui-labeledElement-label {
float: left;
- margin: 0.75em 1em;
cursor: default;
}
}
@@ -43,9 +36,5 @@
&-body {
clear: both;
overflow: hidden;
-
- &-padded {
- padding: 0 1em;
- }
}
}
diff --git a/src/styles/widgets/SearchWidget.less
b/src/styles/widgets/SearchWidget.less
index 5b1e199..af23092 100644
--- a/src/styles/widgets/SearchWidget.less
+++ b/src/styles/widgets/SearchWidget.less
@@ -6,24 +6,18 @@
top: 0;
left: 0;
right: 0;
- height: 4em;
- padding: 0 1em;
.oo-ui-textInputWidget {
width: 100%;
- margin: 0.75em 0;
}
}
&-results {
position: absolute;
- top: 4em;
bottom: 0;
left: 0;
right: 0;
- padding: 1em;
overflow-x: hidden;
overflow-y: auto;
- line-height: 0;
}
}
diff --git a/src/styles/widgets/ToggleSwitchWidget.less
b/src/styles/widgets/ToggleSwitchWidget.less
index e50d911..47d8c24 100644
--- a/src/styles/widgets/ToggleSwitchWidget.less
+++ b/src/styles/widgets/ToggleSwitchWidget.less
@@ -1,15 +1,12 @@
@import '../common';
.oo-ui-toggleSwitchWidget {
- @travelDistance: 2em;
-
position: relative;
display: inline-block;
vertical-align: middle;
- height: 2em;
- width: @travelDistance + 2em;
overflow: hidden;
cursor: pointer;
+
.oo-ui-box-sizing(border-box);
.oo-ui-transform(translateZ(0px));
@@ -20,13 +17,8 @@
&-grip {
position: absolute;
display: block;
- top: 0.25em;
- left: 0.25em;
- width: 1.5em;
- height: 1.5em;
- margin-top: -1px;
+
.oo-ui-box-sizing(border-box);
- .oo-ui-transition(left 200ms ease-in-out, margin-left 200ms
ease-in-out);
}
.oo-ui-toggleSwitchWidget-glow {
@@ -35,22 +27,11 @@
bottom: 0;
right: 0;
left: 0;
- .oo-ui-unselectable();
- .oo-ui-transition(opacity 200ms ease-in-out);
- }
- .oo-ui-toggleWidget-on & {
- &-grip {
- left: @travelDistance + 0.25em;
- margin-left: -2px;
- }
+ .oo-ui-unselectable();
}
.oo-ui-toggleWidget-off & {
- &-grip {
- left: 0.25em;
- margin-left: 0;
- }
&-glow {
display: none;
}
diff --git a/src/themes/agora/ToolGroup.less b/src/themes/agora/ToolGroup.less
new file mode 100644
index 0000000..d5d86d2
--- /dev/null
+++ b/src/themes/agora/ToolGroup.less
@@ -0,0 +1,5 @@
+@import 'common';
+
+.oo-ui-toolGroup {
+ margin: 0.3em;
+}
diff --git a/src/themes/agora/elements/ButtonedElement.less
b/src/themes/agora/elements/ButtonedElement.less
index ecf6990..1ed6b84 100644
--- a/src/themes/agora/elements/ButtonedElement.less
+++ b/src/themes/agora/elements/ButtonedElement.less
@@ -1,6 +1,16 @@
@import '../common';
.oo-ui-buttonedElement {
+ > .oo-ui-buttonedElement-button {
+ > .oo-ui-iconedElement-icon {
+ margin-left: 0;
+ }
+
+ > .oo-ui-indicatedElement-indicator {
+ margin-right: -0.75em;
+ }
+ }
+
&.oo-ui-indicatedElement .oo-ui-buttonedElement-button >
.oo-ui-indicatedElement-indicator,
&.oo-ui-iconedElement .oo-ui-buttonedElement-button >
.oo-ui-iconedElement-icon {
.icon();
diff --git a/src/themes/agora/layouts/FieldLayout.less
b/src/themes/agora/layouts/FieldLayout.less
new file mode 100644
index 0000000..03e139e
--- /dev/null
+++ b/src/themes/agora/layouts/FieldLayout.less
@@ -0,0 +1,46 @@
+@import '../common';
+
+.oo-ui-fieldLayout {
+ margin-bottom: 1em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &.oo-ui-fieldLayout-align-left,
+ &.oo-ui-fieldLayout-align-right {
+ > .oo-ui-labeledElement-label {
+ padding-top: 0.5em;
+ margin-right: 5%;
+ width: 35%;
+ }
+
+ > .oo-ui-fieldLayout-field {
+ width: 60%;
+ }
+ }
+
+ &.oo-ui-fieldLayout-align-inline {
+ > .oo-ui-labeledElement-label {
+ padding: 0.75em 0.5em 0.5em 0.5em;
+ }
+
+ > .oo-ui-fieldLayout-field {
+ padding: 0.5em 0;
+ }
+ }
+
+ &.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label {
+ padding: 0.5em 0;
+ }
+
+ > .oo-ui-popupButtonWidget {
+ > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
+ margin-top: 0.25em;
+ }
+ }
+
+ &-disabled .oo-ui-labeledElement-label {
+ color: #ccc;
+ }
+}
diff --git a/src/themes/agora/layouts/FieldsetLayout.less
b/src/themes/agora/layouts/FieldsetLayout.less
new file mode 100644
index 0000000..c8b2ad1
--- /dev/null
+++ b/src/themes/agora/layouts/FieldsetLayout.less
@@ -0,0 +1,27 @@
+@import '../common';
+
+.oo-ui-fieldsetLayout {
+ margin: 0;
+ padding: 0;
+
+ + .oo-ui-fieldsetLayout {
+ margin-top: 2em;
+ }
+
+ > .oo-ui-labeledElement-label {
+ margin-bottom: 0.5em;
+ padding: 0.25em 0;
+ }
+
+ &.oo-ui-iconedElement > .oo-ui-labeledElement-label {
+ padding-left: 1.75em;
+ line-height: 1.33em;
+ }
+
+ &.oo-ui-iconedElement > .oo-ui-iconedElement-icon {
+ left: 0;
+ top: 0.25em;
+ width: 2em;
+ height: 2em;
+ }
+}
diff --git a/src/themes/agora/toolgroups/BarToolgroup.less
b/src/themes/agora/toolgroups/BarToolgroup.less
new file mode 100644
index 0000000..f5001ed
--- /dev/null
+++ b/src/themes/agora/toolgroups/BarToolgroup.less
@@ -0,0 +1,15 @@
+@import '../common';
+
+.oo-ui-barToolGroup {
+ .oo-ui-tool {
+ &-link {
+ height: 1.5em;
+ padding: 0.25em;
+
+ .oo-ui-iconedElement-icon {
+ height: 1.5em;
+ width: 1.5em;
+ }
+ }
+ }
+}
diff --git a/src/themes/agora/toolgroups/ListToolgroup.less
b/src/themes/agora/toolgroups/ListToolgroup.less
new file mode 100644
index 0000000..a4c07ba
--- /dev/null
+++ b/src/themes/agora/toolgroups/ListToolgroup.less
@@ -0,0 +1,13 @@
+@import '../common';
+
+.oo-ui-listToolGroup {
+ .oo-ui-toolGroup-tools {
+ padding: 0.25em;
+ }
+
+ .oo-ui-tool {
+ &-link {
+ padding-right: 0.5em;
+ }
+ }
+}
diff --git a/src/themes/agora/toolgroups/MenuToolgroup.less
b/src/themes/agora/toolgroups/MenuToolgroup.less
new file mode 100644
index 0000000..119e2b7
--- /dev/null
+++ b/src/themes/agora/toolgroups/MenuToolgroup.less
@@ -0,0 +1,17 @@
+@import '../common';
+
+.oo-ui-menuToolGroup {
+ .oo-ui-popupToolGroup-handle {
+ min-width: 8em;
+ }
+
+ .oo-ui-toolGroup-tools {
+ padding: 0.25em 0 0.25em 0;
+ }
+
+ .oo-ui-tool {
+ &-link {
+ padding: 0 1em 0 0.25em;
+ }
+ }
+}
diff --git a/src/themes/agora/toolgroups/PopupToolgroup.less
b/src/themes/agora/toolgroups/PopupToolgroup.less
new file mode 100644
index 0000000..5bde7f7
--- /dev/null
+++ b/src/themes/agora/toolgroups/PopupToolgroup.less
@@ -0,0 +1,66 @@
+@import '../common';
+
+.oo-ui-popupToolGroup {
+ height: 2em;
+ min-width: 2.5em;
+
+ &.oo-ui-indicatedElement.oo-ui-iconedElement {
+ min-width: 3.5em;
+ }
+
+ &-handle {
+ .oo-ui-indicatedElement-indicator,
+ .oo-ui-iconedElement-icon {
+ top: 0;
+ width: 2em;
+ height: 2em;
+ }
+
+ .oo-ui-indicatedElement-indicator {
+ right: 0;
+ }
+
+ .oo-ui-iconedElement-icon {
+ left: 0.25em;
+ }
+
+ .oo-ui-labeledElement-label {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 1em;
+ }
+ }
+
+ &-header {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 0.6em;
+ font-weight: bold;
+ }
+
+ &.oo-ui-iconedElement .oo-ui-popupToolGroup-handle
.oo-ui-labeledElement-label {
+ margin-left: 3em;
+ }
+
+ &.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle
.oo-ui-labeledElement-label {
+ margin-right: 2.25em;
+ }
+
+ .oo-ui-toolGroup-tools {
+ top: 2em;
+ left: -1px;
+ }
+
+ .oo-ui-tool-link {
+ .oo-ui-iconedElement-icon {
+ height: 2em;
+ width: 2em;
+ margin-right: 0.25em;
+ }
+
+ .oo-ui-tool-title {
+ line-height: 2em;
+ font-size: 0.8em;
+ }
+ }
+}
diff --git a/src/themes/agora/tools/PopupTool.less
b/src/themes/agora/tools/PopupTool.less
new file mode 100644
index 0000000..d3f7cf3
--- /dev/null
+++ b/src/themes/agora/tools/PopupTool.less
@@ -0,0 +1,6 @@
+@import '../common';
+
+.oo-ui-popupTool .oo-ui-popupWidget {
+ margin-left: 1.25em;
+ font-size: 0.8em;
+}
diff --git a/src/styles/widgets/ButtonGroupWidget.less
b/src/themes/agora/widgets/ButtonGroupWidget.less
similarity index 100%
rename from src/styles/widgets/ButtonGroupWidget.less
rename to src/themes/agora/widgets/ButtonGroupWidget.less
diff --git a/src/themes/agora/widgets/ButtonOptionWidget.less
b/src/themes/agora/widgets/ButtonOptionWidget.less
index fd46b69..1feee13 100644
--- a/src/themes/agora/widgets/ButtonOptionWidget.less
+++ b/src/themes/agora/widgets/ButtonOptionWidget.less
@@ -2,4 +2,15 @@
.oo-ui-buttonOptionWidget {
padding: 0;
+ background-color: transparent;
+
+ .oo-ui-buttonedElement-button {
+ height: 1.9em;
+ }
+
+ &.oo-ui-iconedElement .oo-ui-iconedElement-icon,
+ &.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator {
+ height: 1.9em;
+ margin-top: 0;
+ }
}
diff --git a/src/themes/agora/widgets/ComboBoxWidget.less
b/src/themes/agora/widgets/ComboBoxWidget.less
new file mode 100644
index 0000000..47a8de5
--- /dev/null
+++ b/src/themes/agora/widgets/ComboBoxWidget.less
@@ -0,0 +1,5 @@
+@import '../common';
+
+.oo-ui-comboBoxWidget > .oo-ui-selectWidget {
+ min-width: 20em;
+}
diff --git a/src/themes/agora/widgets/DecoratedOptionWidget.less
b/src/themes/agora/widgets/DecoratedOptionWidget.less
new file mode 100644
index 0000000..8cbf559
--- /dev/null
+++ b/src/themes/agora/widgets/DecoratedOptionWidget.less
@@ -0,0 +1,19 @@
+@import '../common';
+
+.oo-ui-decoratedOptionWidget {
+ .oo-ui-iconedElement-icon,
+ .oo-ui-indicatedElement-indicator {
+ top: 50%;
+ width: 2em;
+ height: 2em;
+ margin-top: -1em;
+ }
+
+ .oo-ui-iconedElement-icon {
+ left: 0.5em;
+ }
+
+ .oo-ui-indicatedElement-indicator {
+ right: 0.5em;
+ }
+}
diff --git a/src/themes/agora/widgets/IconWidget.less
b/src/themes/agora/widgets/IconWidget.less
new file mode 100644
index 0000000..5bf54ef
--- /dev/null
+++ b/src/themes/agora/widgets/IconWidget.less
@@ -0,0 +1,12 @@
+@import '../common';
+
+.oo-ui-iconWidget {
+ line-height: 2.5em;
+ height: 1.9em;
+ width: 1.9em;
+ opacity: 0.8;
+
+ &.oo-ui-widget-disabled {
+ opacity: 0.2;
+ }
+}
diff --git a/src/themes/agora/widgets/IndicatorWidget.less
b/src/themes/agora/widgets/IndicatorWidget.less
new file mode 100644
index 0000000..6660399
--- /dev/null
+++ b/src/themes/agora/widgets/IndicatorWidget.less
@@ -0,0 +1,12 @@
+@import '../common';
+
+.oo-ui-indicatorWidget {
+ line-height: 2.5em;
+ height: 1.9em;
+ width: 1.9em;
+ opacity: 0.8;
+
+ &.oo-ui-widget-disabled {
+ opacity: 0.2;
+ }
+}
diff --git a/src/themes/agora/widgets/InlineMenuWidget.less
b/src/themes/agora/widgets/InlineMenuWidget.less
new file mode 100644
index 0000000..f7e6326
--- /dev/null
+++ b/src/themes/agora/widgets/InlineMenuWidget.less
@@ -0,0 +1,39 @@
+@import '../common';
+
+.oo-ui-inlineMenuWidget {
+ margin: 0.25em 0;
+ min-width: 20em;
+
+ &-handle {
+ height: 2.5em;
+
+ .oo-ui-indicatedElement-indicator,
+ .oo-ui-iconedElement-icon {
+ top: 0;
+ width: 2.5em;
+ height: 2.5em;
+ }
+
+ .oo-ui-indicatedElement-indicator {
+ right: 0;
+ }
+
+ .oo-ui-iconedElement-icon {
+ left: 0.25em;
+ }
+
+ .oo-ui-labeledElement-label {
+ line-height: 2.5em;
+ margin: 0 0.5em;
+ }
+
+ }
+
+ &.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle
.oo-ui-labeledElement-label {
+ margin-left: 3em;
+ }
+
+ &.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle
.oo-ui-labeledElement-label {
+ margin-right: 2em;
+ }
+}
diff --git a/src/themes/agora/widgets/LabelWidget.less
b/src/themes/agora/widgets/LabelWidget.less
new file mode 100644
index 0000000..52c2174
--- /dev/null
+++ b/src/themes/agora/widgets/LabelWidget.less
@@ -0,0 +1,5 @@
+@import '../common';
+
+.oo-ui-labelWidget {
+ padding: 0.5em 0;
+}
diff --git a/src/themes/agora/widgets/OptionWidget.less
b/src/themes/agora/widgets/OptionWidget.less
index f31b509..f635f46 100644
--- a/src/themes/agora/widgets/OptionWidget.less
+++ b/src/themes/agora/widgets/OptionWidget.less
@@ -1,9 +1,14 @@
@import '../common';
.oo-ui-optionWidget {
- padding: .8em 1em .8em @window-header-height;
- font-weight: bold;
+ padding: 0.8em 1em 0.8em @window-header-height;
+ border: none;
border-bottom: 1px solid @color-shadow;
+ font-weight: bold;
+
+ .oo-ui-labeledElement-label {
+ line-height: 1.5em;
+ }
&.oo-ui-indicatedElement .oo-ui-labeledElement-label {
padding-right: 1.5em;
diff --git a/src/themes/agora/widgets/OutlineControlsWidget.less
b/src/themes/agora/widgets/OutlineControlsWidget.less
new file mode 100644
index 0000000..46e17d0
--- /dev/null
+++ b/src/themes/agora/widgets/OutlineControlsWidget.less
@@ -0,0 +1,22 @@
+@import '../common';
+
+.oo-ui-outlineControlsWidget {
+ height: 3em;
+
+ &-items,
+ &-movers {
+ height: 2em;
+ margin: 0.5em;
+ padding: 0;
+ }
+
+ > .oo-ui-iconedElement-icon {
+ width: 1.5em;
+ height: 2em;
+ margin: 0.5em 0 0.5em 0.5em;
+ }
+
+ &-items {
+ margin-left: 0;
+ }
+}
diff --git a/src/themes/agora/widgets/OutlineItemWidget.less
b/src/themes/agora/widgets/OutlineItemWidget.less
new file mode 100644
index 0000000..111625d
--- /dev/null
+++ b/src/themes/agora/widgets/OutlineItemWidget.less
@@ -0,0 +1,5 @@
+@import '../common';
+
+.oo-ui-outlineItemWidget {
+ padding: 0.75em;
+}
diff --git a/src/themes/agora/widgets/PopupWidget.less
b/src/themes/agora/widgets/PopupWidget.less
new file mode 100644
index 0000000..b4ea45c
--- /dev/null
+++ b/src/themes/agora/widgets/PopupWidget.less
@@ -0,0 +1,25 @@
+@import '../common';
+
+.oo-ui-popupWidget {
+ &-anchored {
+ .oo-ui-popupWidget-popup {
+ margin-top: 7px;
+ }
+ }
+
+ &-head {
+ height: 2.5em;
+
+ .oo-ui-buttonWidget {
+ margin: 0.25em;
+ }
+
+ .oo-ui-labeledElement-label {
+ margin: 0.75em 1em;
+ }
+ }
+
+ &-body-padded {
+ padding: 0 1em;
+ }
+}
diff --git a/src/themes/agora/widgets/SearchWidget.less
b/src/themes/agora/widgets/SearchWidget.less
new file mode 100644
index 0000000..86f777d
--- /dev/null
+++ b/src/themes/agora/widgets/SearchWidget.less
@@ -0,0 +1,18 @@
+@import '../common';
+
+.oo-ui-searchWidget {
+ &-query {
+ height: 4em;
+ padding: 0 1em;
+
+ .oo-ui-textInputWidget {
+ margin: 0.75em 0;
+ }
+ }
+
+ &-results {
+ top: 4em;
+ padding: 1em;
+ line-height: 0;
+ }
+}
diff --git a/src/styles/widgets/SelectWidget.less
b/src/themes/agora/widgets/SelectWidget.less
similarity index 78%
rename from src/styles/widgets/SelectWidget.less
rename to src/themes/agora/widgets/SelectWidget.less
index 2887ec8..be25c9e 100644
--- a/src/styles/widgets/SelectWidget.less
+++ b/src/themes/agora/widgets/SelectWidget.less
@@ -1,7 +1,6 @@
@import '../common';
.oo-ui-selectWidget {
- list-style: none;
margin: 0;
padding: 0;
}
diff --git a/src/themes/agora/widgets/ToggleSwitchWidget.less
b/src/themes/agora/widgets/ToggleSwitchWidget.less
new file mode 100644
index 0000000..ce62aa4
--- /dev/null
+++ b/src/themes/agora/widgets/ToggleSwitchWidget.less
@@ -0,0 +1,36 @@
+@import '../common';
+
+.oo-ui-toggleSwitchWidget {
+ @travelDistance: 2em;
+
+ height: 2em;
+ width: @travelDistance + 2em;
+
+ &-grip {
+ top: 0.25em;
+ left: 0.25em;
+ width: 1.5em;
+ height: 1.5em;
+ margin-top: -1px;
+
+ .oo-ui-transition(left 200ms ease-in-out, margin-left 200ms
ease-in-out);
+ }
+
+ .oo-ui-toggleSwitchWidget-glow {
+ .oo-ui-transition(opacity 200ms ease-in-out);
+ }
+
+ .oo-ui-toggleWidget-on & {
+ &-grip {
+ left: @travelDistance + 0.25em;
+ margin-left: -2px;
+ }
+ }
+
+ .oo-ui-toggleWidget-off & {
+ &-grip {
+ left: 0.25em;
+ margin-left: 0;
+ }
+ }
+}
diff --git a/src/themes/apex/Dialog.less b/src/themes/apex/Dialog.less
index fe126e1..0b2525c 100644
--- a/src/themes/apex/Dialog.less
+++ b/src/themes/apex/Dialog.less
@@ -1,38 +1,5 @@
@import 'common';
-.oo-ui-dialog {
- &-content {
- > .oo-ui-window {
- &-head,
- &-body,
- &-foot {
- position: absolute;
- left: 0;
- right: 0;
- overflow: hidden;
- .oo-ui-box-sizing(border-box);
- }
-
- &-head {
- z-index: 1;
- top: 0;
- }
-
- &-body {
- z-index: 2;
- top: 0;
- bottom: 0;
- box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
- }
-
- &-foot {
- z-index: 1;
- bottom: 0;
- }
-
- &-overlay {
- z-index: 3;
- }
- }
- }
-}
+.oo-ui-dialog-content > .oo-ui-window-body {
+ box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
+}
\ No newline at end of file
diff --git a/src/themes/apex/ToolGroup.less b/src/themes/apex/ToolGroup.less
index 489bca5..d7b15c0 100644
--- a/src/themes/apex/ToolGroup.less
+++ b/src/themes/apex/ToolGroup.less
@@ -1,6 +1,7 @@
@import 'common';
.oo-ui-toolGroup {
+ margin: 0.3em;
border-radius: 0.25em;
border: solid 1px transparent;
.oo-ui-transition(border-color 300ms ease-in-out);
diff --git a/src/themes/apex/elements/ButtonedElement.less
b/src/themes/apex/elements/ButtonedElement.less
index 8cce8a0..4954d0c 100644
--- a/src/themes/apex/elements/ButtonedElement.less
+++ b/src/themes/apex/elements/ButtonedElement.less
@@ -3,6 +3,14 @@
.oo-ui-buttonedElement {
> .oo-ui-buttonedElement-button {
color: #333;
+
+ > .oo-ui-iconedElement-icon {
+ margin-left: 0;
+ }
+
+ > .oo-ui-indicatedElement-indicator {
+ margin-right: -0.75em;
+ }
}
&.oo-ui-indicatedElement > .oo-ui-buttonedElement-button >
.oo-ui-indicatedElement-indicator,
@@ -32,6 +40,7 @@
> .oo-ui-labeledElement-label {
color: #333;
+ margin-left: 0.25em;
}
}
@@ -73,6 +82,10 @@
&:focus {
border-color: #aaa;
}
+
+ > .oo-ui-labeledElement-label {
+ line-height: 1.9em;
+ }
}
&.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button,
diff --git a/src/themes/apex/layouts/FieldLayout.less
b/src/themes/apex/layouts/FieldLayout.less
index 64ec87f..03e139e 100644
--- a/src/themes/apex/layouts/FieldLayout.less
+++ b/src/themes/apex/layouts/FieldLayout.less
@@ -1,6 +1,45 @@
@import '../common';
.oo-ui-fieldLayout {
+ margin-bottom: 1em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &.oo-ui-fieldLayout-align-left,
+ &.oo-ui-fieldLayout-align-right {
+ > .oo-ui-labeledElement-label {
+ padding-top: 0.5em;
+ margin-right: 5%;
+ width: 35%;
+ }
+
+ > .oo-ui-fieldLayout-field {
+ width: 60%;
+ }
+ }
+
+ &.oo-ui-fieldLayout-align-inline {
+ > .oo-ui-labeledElement-label {
+ padding: 0.75em 0.5em 0.5em 0.5em;
+ }
+
+ > .oo-ui-fieldLayout-field {
+ padding: 0.5em 0;
+ }
+ }
+
+ &.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label {
+ padding: 0.5em 0;
+ }
+
+ > .oo-ui-popupButtonWidget {
+ > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
+ margin-top: 0.25em;
+ }
+ }
+
&-disabled .oo-ui-labeledElement-label {
color: #ccc;
}
diff --git a/src/themes/apex/layouts/FieldsetLayout.less
b/src/themes/apex/layouts/FieldsetLayout.less
index 9722a3c..dd98527 100644
--- a/src/themes/apex/layouts/FieldsetLayout.less
+++ b/src/themes/apex/layouts/FieldsetLayout.less
@@ -1,9 +1,29 @@
@import '../common';
.oo-ui-fieldsetLayout {
+ margin: 0;
+ padding: 0;
border: none;
+
+ + .oo-ui-fieldsetLayout {
+ margin-top: 2em;
+ }
> .oo-ui-labeledElement-label {
font-size: 1.5em;
+ margin-bottom: 0.5em;
+ padding: 0.25em 0;
+ }
+
+ &.oo-ui-iconedElement > .oo-ui-labeledElement-label {
+ padding-left: 1.75em;
+ line-height: 1.33em;
+ }
+
+ &.oo-ui-iconedElement > .oo-ui-iconedElement-icon {
+ left: 0;
+ top: 0.25em;
+ width: 2em;
+ height: 2em;
}
}
diff --git a/src/themes/apex/toolgroups/BarToolgroup.less
b/src/themes/apex/toolgroups/BarToolgroup.less
index cd2a324..5f302ff 100644
--- a/src/themes/apex/toolgroups/BarToolgroup.less
+++ b/src/themes/apex/toolgroups/BarToolgroup.less
@@ -17,7 +17,12 @@
}
&-link {
+ height: 1.5em;
+ padding: 0.25em;
+
.oo-ui-iconedElement-icon {
+ height: 1.5em;
+ width: 1.5em;
opacity: 0.8;
}
}
diff --git a/src/themes/apex/toolgroups/ListToolgroup.less
b/src/themes/apex/toolgroups/ListToolgroup.less
index c501798..060ebf9 100644
--- a/src/themes/apex/toolgroups/ListToolgroup.less
+++ b/src/themes/apex/toolgroups/ListToolgroup.less
@@ -1,6 +1,10 @@
@import '../common';
.oo-ui-listToolGroup {
+ .oo-ui-toolGroup-tools {
+ padding: 0.25em;
+ }
+
&.oo-ui-popupToolGroup-active {
border-color: rgba(0,0,0,0.2);
}
@@ -9,6 +13,10 @@
border: solid 1px transparent;
margin: -1px 0;
+ &-link {
+ padding-right: 0.5em;
+ }
+
&-active {
&.oo-ui-widget-enabled {
border-color: rgba(0,0,0,0.1);
diff --git a/src/themes/apex/toolgroups/MenuToolgroup.less
b/src/themes/apex/toolgroups/MenuToolgroup.less
index 012a63c..c5252f5 100644
--- a/src/themes/apex/toolgroups/MenuToolgroup.less
+++ b/src/themes/apex/toolgroups/MenuToolgroup.less
@@ -3,6 +3,14 @@
.oo-ui-menuToolGroup {
border-color: rgba(0,0,0,0.1);
+ .oo-ui-popupToolGroup-handle {
+ min-width: 8em;
+ }
+
+ .oo-ui-toolGroup-tools {
+ padding: 0.25em 0 0.25em 0;
+ }
+
&.oo-ui-widget-enabled {
&:hover {
border-color: rgba(0,0,0,0.2);
@@ -14,6 +22,10 @@
}
.oo-ui-tool {
+ &-link {
+ padding: 0 1em 0 0.25em;
+ }
+
&.oo-ui-widget-enabled {
&:hover {
background-color: #e1f3ff;
diff --git a/src/themes/apex/toolgroups/PopupToolgroup.less
b/src/themes/apex/toolgroups/PopupToolgroup.less
index 570b5a6..3bd7f9e 100644
--- a/src/themes/apex/toolgroups/PopupToolgroup.less
+++ b/src/themes/apex/toolgroups/PopupToolgroup.less
@@ -1,23 +1,78 @@
@import '../common';
.oo-ui-popupToolGroup {
+ height: 2em;
+ min-width: 2.5em;
+
+ &.oo-ui-indicatedElement.oo-ui-iconedElement {
+ min-width: 3.5em;
+ }
+
&-handle {
.oo-ui-indicatedElement-indicator,
.oo-ui-iconedElement-icon {
+ top: 0;
+ width: 2em;
+ height: 2em;
opacity: 0.8;
+ }
+
+ .oo-ui-indicatedElement-indicator {
+ right: 0;
+ }
+
+ .oo-ui-iconedElement-icon {
+ left: 0.25em;
+ }
+
+ .oo-ui-labeledElement-label {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 1em;
}
}
- .oo-ui-toolGroup-tools {
- border: solid 1px #ccc;
- background-color: white;
- box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
+ &-header {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 0.6em;
+ font-weight: bold;
}
&-active.oo-ui-widget-enabled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
+
.oo-ui-vertical-gradient(#F1F7FB, #fff);
}
+
+ &.oo-ui-iconedElement .oo-ui-popupToolGroup-handle
.oo-ui-labeledElement-label {
+ margin-left: 3em;
+ }
+
+ &.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle
.oo-ui-labeledElement-label {
+ margin-right: 2.25em;
+ }
+
+ .oo-ui-toolGroup-tools {
+ top: 2em;
+ left: -1px;
+ border: solid 1px #ccc;
+ background-color: white;
+ box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
+ }
+
+ .oo-ui-tool-link {
+ .oo-ui-iconedElement-icon {
+ height: 2em;
+ width: 2em;
+ margin-right: 0.25em;
+ }
+
+ .oo-ui-tool-title {
+ line-height: 2em;
+ font-size: 0.8em;
+ }
+ }
}
diff --git a/src/themes/apex/tools/PopupTool.less
b/src/themes/apex/tools/PopupTool.less
new file mode 100644
index 0000000..d3f7cf3
--- /dev/null
+++ b/src/themes/apex/tools/PopupTool.less
@@ -0,0 +1,6 @@
+@import '../common';
+
+.oo-ui-popupTool .oo-ui-popupWidget {
+ margin-left: 1.25em;
+ font-size: 0.8em;
+}
diff --git a/src/themes/apex/widgets/ButtonGroupWidget.less
b/src/themes/apex/widgets/ButtonGroupWidget.less
index 2309326..d160a3b 100644
--- a/src/themes/apex/widgets/ButtonGroupWidget.less
+++ b/src/themes/apex/widgets/ButtonGroupWidget.less
@@ -3,4 +3,24 @@
.oo-ui-buttonGroupWidget {
display: inline-block;
white-space: nowrap;
+ border-radius: 0.3em;
+
+ .oo-ui-buttonedElement-framed {
+ .oo-ui-buttonedElement-button {
+ border-radius: 0;
+ margin-bottom: -1px;
+ margin-left: -1px;
+ }
+
+ &:first-child .oo-ui-buttonedElement-button {
+ border-bottom-left-radius: 0.3em;
+ border-top-left-radius: 0.3em;
+ margin-left: 0;
+ }
+
+ &:last-child .oo-ui-buttonedElement-button {
+ border-bottom-right-radius: 0.3em;
+ border-top-right-radius: 0.3em;
+ }
+ }
}
diff --git a/src/themes/apex/widgets/ButtonOptionWidget.less
b/src/themes/apex/widgets/ButtonOptionWidget.less
index b773862..021ea12 100644
--- a/src/themes/apex/widgets/ButtonOptionWidget.less
+++ b/src/themes/apex/widgets/ButtonOptionWidget.less
@@ -2,6 +2,17 @@
.oo-ui-buttonOptionWidget {
padding: 0;
+ background-color: transparent;
+
+ .oo-ui-buttonedElement-button {
+ height: 1.9em;
+ }
+
+ &.oo-ui-iconedElement .oo-ui-iconedElement-icon,
+ &.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator {
+ height: 1.9em;
+ margin-top: 0;
+ }
&.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-pressed,
diff --git a/src/themes/apex/widgets/ComboBoxWidget.less
b/src/themes/apex/widgets/ComboBoxWidget.less
index 125dee0..c99f1d4 100644
--- a/src/themes/apex/widgets/ComboBoxWidget.less
+++ b/src/themes/apex/widgets/ComboBoxWidget.less
@@ -1,6 +1,8 @@
@import '../common';
.oo-ui-comboBoxWidget {
+ min-width: 20em;
+
&-handle {
border: solid 1px rgba(0,0,0,0.1);
border-radius: 0.25em;
diff --git a/src/themes/apex/widgets/DecoratedOptionWidget.less
b/src/themes/apex/widgets/DecoratedOptionWidget.less
new file mode 100644
index 0000000..8cbf559
--- /dev/null
+++ b/src/themes/apex/widgets/DecoratedOptionWidget.less
@@ -0,0 +1,19 @@
+@import '../common';
+
+.oo-ui-decoratedOptionWidget {
+ .oo-ui-iconedElement-icon,
+ .oo-ui-indicatedElement-indicator {
+ top: 50%;
+ width: 2em;
+ height: 2em;
+ margin-top: -1em;
+ }
+
+ .oo-ui-iconedElement-icon {
+ left: 0.5em;
+ }
+
+ .oo-ui-indicatedElement-indicator {
+ right: 0.5em;
+ }
+}
diff --git a/src/themes/apex/widgets/IconWidget.less
b/src/themes/apex/widgets/IconWidget.less
new file mode 100644
index 0000000..5bf54ef
--- /dev/null
+++ b/src/themes/apex/widgets/IconWidget.less
@@ -0,0 +1,12 @@
+@import '../common';
+
+.oo-ui-iconWidget {
+ line-height: 2.5em;
+ height: 1.9em;
+ width: 1.9em;
+ opacity: 0.8;
+
+ &.oo-ui-widget-disabled {
+ opacity: 0.2;
+ }
+}
diff --git a/src/themes/apex/widgets/IndicatorWidget.less
b/src/themes/apex/widgets/IndicatorWidget.less
new file mode 100644
index 0000000..6660399
--- /dev/null
+++ b/src/themes/apex/widgets/IndicatorWidget.less
@@ -0,0 +1,12 @@
+@import '../common';
+
+.oo-ui-indicatorWidget {
+ line-height: 2.5em;
+ height: 1.9em;
+ width: 1.9em;
+ opacity: 0.8;
+
+ &.oo-ui-widget-disabled {
+ opacity: 0.2;
+ }
+}
diff --git a/src/themes/apex/widgets/InlineMenuWidget.less
b/src/themes/apex/widgets/InlineMenuWidget.less
index beb629e..175d1ea 100644
--- a/src/themes/apex/widgets/InlineMenuWidget.less
+++ b/src/themes/apex/widgets/InlineMenuWidget.less
@@ -1,7 +1,11 @@
@import '../common';
.oo-ui-inlineMenuWidget {
+ margin: 0.25em 0;
+ min-width: 20em;
+
&-handle {
+ height: 2.5em;
border: solid 1px rgba(0,0,0,0.1);
border-radius: 0.25em;
@@ -9,8 +13,24 @@
border-color: rgba(0,0,0,0.2);
}
+ .oo-ui-indicatedElement-indicator {
+ right: 0;
+ }
+
+ .oo-ui-iconedElement-icon {
+ left: 0.25em;
+ }
+
+ .oo-ui-labeledElement-label {
+ line-height: 2.5em;
+ margin: 0 0.5em;
+ }
+
.oo-ui-indicatedElement-indicator,
.oo-ui-iconedElement-icon {
+ top: 0;
+ width: 2.5em;
+ height: 2.5em;
opacity: 0.8;
}
}
@@ -26,4 +46,12 @@
opacity: 0.2;
}
}
+
+ &.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle
.oo-ui-labeledElement-label {
+ margin-left: 3em;
+ }
+
+ &.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle
.oo-ui-labeledElement-label {
+ margin-right: 2em;
+ }
}
diff --git a/src/themes/apex/widgets/LabelWidget.less
b/src/themes/apex/widgets/LabelWidget.less
new file mode 100644
index 0000000..52c2174
--- /dev/null
+++ b/src/themes/apex/widgets/LabelWidget.less
@@ -0,0 +1,5 @@
+@import '../common';
+
+.oo-ui-labelWidget {
+ padding: 0.5em 0;
+}
diff --git a/src/themes/apex/widgets/OptionWidget.less
b/src/themes/apex/widgets/OptionWidget.less
index a5cf98e..e8ed39d 100644
--- a/src/themes/apex/widgets/OptionWidget.less
+++ b/src/themes/apex/widgets/OptionWidget.less
@@ -2,11 +2,16 @@
.oo-ui-optionWidget {
padding: 0.5em 2em 0.5em 3em;
+ border: none;
&-highlighted {
background-color: #e1f3ff;
}
+ .oo-ui-labeledElement-label {
+ line-height: 1.5em;
+ }
+
.oo-ui-selectWidget-depressed &-selected {
background-color: #a7dcff;
}
diff --git a/src/themes/apex/widgets/OutlineControlsWidget.less
b/src/themes/apex/widgets/OutlineControlsWidget.less
index eb9676c..68620e2 100644
--- a/src/themes/apex/widgets/OutlineControlsWidget.less
+++ b/src/themes/apex/widgets/OutlineControlsWidget.less
@@ -1,9 +1,28 @@
@import '../common';
.oo-ui-outlineControlsWidget {
+ height: 3em;
background-color: #fff;
> .oo-ui-iconedElement-icon {
opacity: 0.2;
}
+
+ &-items,
+ &-movers {
+ height: 2em;
+ margin: 0.5em;
+ padding: 0;
+ }
+
+ > .oo-ui-iconedElement-icon {
+ width: 1.5em;
+ height: 2em;
+ margin: 0.5em 0 0.5em 0.5em;
+ opacity: 0.2;
+ }
+
+ &-items {
+ margin-left: 0;
+ }
}
diff --git a/src/themes/apex/widgets/OutlineItemWidget.less
b/src/themes/apex/widgets/OutlineItemWidget.less
index 5c08aa5..1b61fe8 100644
--- a/src/themes/apex/widgets/OutlineItemWidget.less
+++ b/src/themes/apex/widgets/OutlineItemWidget.less
@@ -2,6 +2,7 @@
.oo-ui-outlineItemWidget {
font-size: 1.1em;
+ padding: 0.75em;
&.oo-ui-indicatedElement .oo-ui-labeledElement-label {
padding-right: 1.5em;
diff --git a/src/themes/apex/widgets/PopupWidget.less
b/src/themes/apex/widgets/PopupWidget.less
index f64e48c..b948957 100644
--- a/src/themes/apex/widgets/PopupWidget.less
+++ b/src/themes/apex/widgets/PopupWidget.less
@@ -9,11 +9,16 @@
}
&-anchored {
+ .oo-ui-popupWidget-popup {
+ margin-top: 7px;
+ }
+
.oo-ui-popupWidget-anchor {
- .oo-ui-background-image('images/anchor.svg');
width: 15px;
height: 8px;
margin-left: -7px;
+
+ .oo-ui-background-image('images/anchor.svg');
}
}
@@ -23,7 +28,23 @@
);
}
+ &-head {
+ height: 2.5em;
+
+ .oo-ui-buttonWidget {
+ margin: 0.25em;
+ }
+
+ .oo-ui-labeledElement-label {
+ margin: 0.75em 1em;
+ }
+ }
+
&-body {
box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
+
+ &-padded {
+ padding: 0 1em;
+ }
}
}
diff --git a/src/themes/apex/widgets/SearchWidget.less
b/src/themes/apex/widgets/SearchWidget.less
index 9407787..dbf21c2 100644
--- a/src/themes/apex/widgets/SearchWidget.less
+++ b/src/themes/apex/widgets/SearchWidget.less
@@ -2,6 +2,18 @@
.oo-ui-searchWidget {
&-query {
+ height: 4em;
+ padding: 0 1em;
box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
+
+ .oo-ui-textInputWidget {
+ margin: 0.75em 0;
+ }
+ }
+
+ &-results {
+ top: 4em;
+ padding: 1em;
+ line-height: 0;
}
}
diff --git a/src/themes/apex/widgets/ToggleSwitchWidget.less
b/src/themes/apex/widgets/ToggleSwitchWidget.less
index 0ba5c53..960263e 100644
--- a/src/themes/apex/widgets/ToggleSwitchWidget.less
+++ b/src/themes/apex/widgets/ToggleSwitchWidget.less
@@ -1,9 +1,13 @@
@import '../common';
.oo-ui-toggleSwitchWidget {
+ @travelDistance: 2em;
+ height: 2em;
+ width: @travelDistance + 2em;
border-radius: 1em;
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
border: solid 1px #ccc;
+
.oo-ui-vertical-gradient(#ddd, #fff);
&.oo-ui-widget-disabled {
@@ -11,9 +15,16 @@
}
&-grip {
+ top: 0.25em;
+ left: 0.25em;
+ width: 1.5em;
+ height: 1.5em;
+ margin-top: -1px;
border-radius: 1em;
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
border: 1px #c9c9c9 solid;
+
+ .oo-ui-transition(left 200ms ease-in-out, margin-left 200ms
ease-in-out);
.oo-ui-vertical-gradient(#fff, #ddd);
}
@@ -27,6 +38,8 @@
.oo-ui-toggleSwitchWidget-glow {
border-radius: 1em;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
+
+ .oo-ui-transition(opacity 200ms ease-in-out);
.oo-ui-vertical-gradient(#b0d9ee, #eaf4fa);
}
@@ -34,6 +47,10 @@
&-glow {
opacity: 1;
}
+ &-grip {
+ left: @travelDistance + 0.25em;
+ margin-left: -2px;
+ }
}
.oo-ui-toggleWidget-off & {
@@ -41,5 +58,9 @@
display: block;
opacity: 0;
}
+ &-grip {
+ left: 0.25em;
+ margin-left: 0;
+ }
}
}
diff --git a/src/widgets/LabelWidget.js b/src/widgets/LabelWidget.js
index f6fc6c5..c9d6585 100644
--- a/src/widgets/LabelWidget.js
+++ b/src/widgets/LabelWidget.js
@@ -37,7 +37,7 @@
/* Static Properties */
-OO.ui.LabelWidget.static.tagName = 'label';
+OO.ui.LabelWidget.static.tagName = 'span';
/* Methods */
diff --git a/src/widgets/OptionWidget.js b/src/widgets/OptionWidget.js
index 0e2a032..fe9d4e8 100644
--- a/src/widgets/OptionWidget.js
+++ b/src/widgets/OptionWidget.js
@@ -50,8 +50,6 @@
/* Static Properties */
-OO.ui.OptionWidget.static.tagName = 'li';
-
OO.ui.OptionWidget.static.selectable = true;
OO.ui.OptionWidget.static.highlightable = true;
diff --git a/src/widgets/SelectWidget.js b/src/widgets/SelectWidget.js
index 8391c8e..cfea84f 100644
--- a/src/widgets/SelectWidget.js
+++ b/src/widgets/SelectWidget.js
@@ -86,10 +86,6 @@
* @param {OO.ui.OptionWidget[]} items Removed items
*/
-/* Static Properties */
-
-OO.ui.SelectWidget.static.tagName = 'ul';
-
/* Methods */
/**
--
To view, visit https://gerrit.wikimedia.org/r/156211
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I056fc9c8f3ca5e9bde003ededb8e96e024311e20
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
