diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/themes/apex/tools.less')
| -rw-r--r-- | vendor/oojs/oojs-ui/src/themes/apex/tools.less | 422 |
1 files changed, 422 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/themes/apex/tools.less b/vendor/oojs/oojs-ui/src/themes/apex/tools.less new file mode 100644 index 00000000..913bb516 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/themes/apex/tools.less @@ -0,0 +1,422 @@ +@import 'common'; + +.theme-oo-ui-toolbar () { + &-bar { + border-bottom: 1px solid #ccc; + .oo-ui-vertical-gradient(#fff, #F1F7FB); + + .oo-ui-toolbar-bar { + border: none; + background: none; + } + } + + &-actions { + > .oo-ui-buttonElement { + margin-top: 0.4em; + margin-bottom: 0.4em; + } + + > .oo-ui-buttonElement:last-child { + margin-right: 0.5em; + } + } + + &-shadow { + .oo-ui-background-image('@{oo-ui-default-image-path}/toolbar-shadow.png'); + bottom: -9px; + height: 9px; + opacity: 0.5; + .oo-ui-transition(opacity 500ms ease-in-out); + } +} + +.theme-oo-ui-tool () {} + +.theme-oo-ui-popupTool () { + .oo-ui-popupWidget { + /* @noflip */ + margin-left: 1.25em; + } +} + +.theme-oo-ui-toolGroupTool () { + > .oo-ui-popupToolGroup { + border: 0; + border-radius: 0; + margin: 0; + } + + // Like .oo-ui-tool in barToolGroup + &:first-child > .oo-ui-popupToolGroup { + border-top-left-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; + } + + &:last-child > .oo-ui-popupToolGroup { + border-top-right-radius: 0.3125em; + border-bottom-right-radius: 0.3125em; + } + + // Like .oo-ui-tool-link in barToolGroup + > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle { + height: 1.875em; + padding: 0.3125em; + + .oo-ui-iconElement-icon { + height: 1.875em; + width: 1.875em; + } + } + + > .oo-ui-popupToolGroup.oo-ui-labelElement > .oo-ui-popupToolGroup-handle { + .oo-ui-labelElement-label { + line-height: 2.1em; // 0.5em less + } + } +} + +.theme-oo-ui-toolGroup () { + margin: 0.375em; + border-radius: 0.3125em; + border: 1px solid transparent; + .oo-ui-transition(border-color 300ms ease-in-out); + + .oo-ui-toolbar-narrow & { + + .oo-ui-toolGroup { + margin-left: 0; + } + } + + &.oo-ui-widget-enabled { + &:hover { + border-color: rgba(0,0,0,0.1); + } + + .oo-ui-tool-link .oo-ui-tool-title { + color: #000; + } + } +} + +.theme-oo-ui-barToolGroup () { + > .oo-ui-toolGroup-tools > .oo-ui-tool { + margin: -1px 0 -1px -1px; + border: 1px solid transparent; + + &:first-child { + border-top-left-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; + } + + &:last-child { + margin-right: -1px; + border-top-right-radius: 0.3125em; + border-bottom-right-radius: 0.3125em; + } + + > .oo-ui-tool-link { + height: 1.875em; + padding: 0.3125em; + + .oo-ui-iconElement-icon { + height: 1.875em; + width: 1.875em; + } + + .oo-ui-tool-title { + line-height: 2.1em; // 0.5em less + } + } + } + + &.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool { + &.oo-ui-widget-enabled:hover { + border-color: rgba(0,0,0,0.2); + } + + &.oo-ui-tool-active { + &.oo-ui-widget-enabled { + border-color: rgba(0,0,0,0.2); + box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07); + .oo-ui-vertical-gradient(#F1F7FB, #fff); + } + + &.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled { + border-left-color: rgba(0,0,0,0.1); + } + } + + &.oo-ui-widget-disabled > .oo-ui-tool-link { + .oo-ui-iconElement-icon { + opacity: 0.2; + } + } + + &.oo-ui-widget-enabled { + &:hover > .oo-ui-tool-link .oo-ui-iconElement-icon { + opacity: 1; + } + } + } + + &.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool { + > .oo-ui-tool-link { + .oo-ui-iconElement-icon { + opacity: 0.2; + } + } + } +} + +.theme-oo-ui-popupToolGroup () { + height: 2.5em; + min-width: 2.5em; + + .oo-ui-toolbar-narrow & { + min-width: 1.875em; + } + + &.oo-ui-iconElement { + min-width: 3.125em; + + .oo-ui-toolbar-narrow & { + min-width: 2.5em; + } + } + + &.oo-ui-indicatorElement.oo-ui-iconElement { + min-width: 4.375em; + + .oo-ui-toolbar-narrow & { + min-width: 3.75em; + } + } + + &.oo-ui-labelElement { + .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label { + line-height: 2.6em; + margin: 0 1em; + + .oo-ui-toolbar-narrow & { + margin: 0 0.5em; + } + } + + &.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label { + margin-left: 3em; + + .oo-ui-toolbar-narrow & { + margin-left: 2.5em; + } + } + + &.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label { + margin-right: 2.25em; + + .oo-ui-toolbar-narrow & { + margin-right: 1.75em; + } + } + } + + &-handle { + .oo-ui-indicatorElement-indicator { + width: 0.9375em; + height: 0.9375em; + margin: 0.78125em; + top: 0; + right: 0; + + .oo-ui-toolbar-narrow & { + right: -0.3125em; + } + } + .oo-ui-iconElement-icon { + width: 1.875em; + height: 1.875em; + margin: 0.3125em; + top: 0; + left: 0.3125em; + + .oo-ui-toolbar-narrow & { + left: 0; + } + } + } + + &-header { + line-height: 2.6em; + 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.0875em 0.0875em 0 rgba(0, 0, 0, 0.07); + + .oo-ui-vertical-gradient(#F1F7FB, #fff); + } + + .oo-ui-toolGroup-tools { + top: 2.5em; + margin: 0 -1px; + border: 1px solid #ccc; + background-color: white; + box-shadow: 0 0.3125em 1.25em rgba(0,0,0,0.25); + } + + .oo-ui-tool-link { + padding: 0.3125em 0 0.3125em 0.3125em; + + .oo-ui-iconElement-icon { + height: 1.875em; + width: 1.875em; + min-width: 1.875em; + } + + .oo-ui-tool-title { + padding-left: 0.5em; + } + + .oo-ui-tool-accel, + .oo-ui-tool-title { + line-height: 2em; + } + + .oo-ui-tool-accel { + color: #888; + } + } +} + +.theme-oo-ui-listToolGroup () { + .oo-ui-toolGroup-tools { + padding: 0.3125em; + } + + &.oo-ui-popupToolGroup-active { + border-color: rgba(0,0,0,0.2); + } + + .oo-ui-tool { + border: 1px solid transparent; + margin: -1px 0; + padding: 0 0.625em 0 0; + + &-active { + &.oo-ui-widget-enabled { + border-color: rgba(0,0,0,0.1); + box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07); + .oo-ui-vertical-gradient(#F1F7FB, #fff); + + + .oo-ui-tool-active.oo-ui-widget-enabled { + border-top-color: rgba(0,0,0,0.1); + } + &:hover { + border-color: rgba(0,0,0,0.2); + } + } + } + + &.oo-ui-widget-enabled { + &:hover { + border-color: rgba(0,0,0,0.2); + } + &:hover .oo-ui-tool-link .oo-ui-iconElement-icon { + opacity: 1; + } + } + + &.oo-ui-widget-disabled { + .oo-ui-tool-link { + .oo-ui-tool-title { + color: #ccc; + } + + .oo-ui-tool-accel { + color: #ddd; + } + + .oo-ui-iconElement-icon { + opacity: 0.2; + } + } + } + } + + &.oo-ui-widget-disabled { + color: #ccc; + .oo-ui-indicatorElement-indicator, + .oo-ui-iconElement-icon { + opacity: 0.2; + } + } +} + +.theme-oo-ui-menuToolGroup () { + border-color: rgba(0,0,0,0.1); + + .oo-ui-popupToolGroup-handle { + min-width: 10em; + + .oo-ui-toolbar-narrow & { + min-width: 8.125em; + } + } + + .oo-ui-toolGroup-tools { + padding: 0.3125em 0 0.3125em 0; + } + + &.oo-ui-widget-enabled { + &:hover { + border-color: rgba(0,0,0,0.2); + } + } + + &.oo-ui-popupToolGroup-active { + border-color: rgba(0,0,0,0.25); + } + + .oo-ui-tool { + padding: 0 1.25em 0 0.3125em; + + &-link { + .oo-ui-iconElement-icon { + background-image: none; + } + } + + &-active .oo-ui-tool-link .oo-ui-iconElement-icon { + .oo-ui-background-image-svg('@{oo-ui-default-image-path}/icons/check'); + } + + &.oo-ui-widget-enabled { + &:hover { + background-color: #e1f3ff; + } + } + + &.oo-ui-widget-disabled { + .oo-ui-tool-link .oo-ui-tool-title { + color: #ccc; + } + + .oo-ui-tool-link .oo-ui-iconElement-icon { + opacity: 0.2; + } + } + } + + &.oo-ui-widget-disabled { + color: #ccc; + border-color: rgba(0,0,0,0.05); + + .oo-ui-indicatorElement-indicator, + .oo-ui-iconElement-icon { + opacity: 0.2; + } + } +} |