scout.main.css Maven / Gradle / Ivy
/*******************************************************************************
* Copyright (c) 2014-2015 BSI Business Systems Integration AG.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
* BSI Business Systems Integration AG - initial API and implementation
******************************************************************************/
/* global section, narrow to .scout for usage as portlet */
/* TODO awe, cgu: (css) YUI compressor destroys calc(100% + x) expressions (only with plus operator)
* This bug will be fixed with YUI compressor 2.4.9 which is not released yet:
* https://github.com/yui/yuicompressor/commits/master
* We must update maven-yui-compressor-plugin (v >= 1.6.0, with YUI >= 2.4.9) or...
* Hack the old maven plugin wo work with a new YUI version or...
* Download YUI 2.4.9 and call as Java program from maven.
*/
body {
#scout.font-text-normal();
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
cursor: default;
color: @text-color;
#scout.user-select(none);
-moz-user-select: -moz-none;
/* Prevent mobile safari from adjusting text, due to our dynamic layouting it will be always wrong */
-webkit-text-size-adjust: none;
/* Disable highlight color. May be enabled for specific elements if required */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* -moz variant is required, see https://bugzilla.mozilla.org/show_bug.cgi?id=509958 */
::-moz-selection {
#scout.text-selection();
}
::selection {
#scout.text-selection();
}
::-webkit-input-placeholder {
#scout.placeholder();
}
:-moz-placeholder { /* older versions of firefox */
#scout.placeholder();
}
::-moz-placeholder {
#scout.placeholder();
}
:-ms-input-placeholder {
#scout.placeholder();
}
/* Hide IE decorations for text input fields: */
/* - Clear button ("X"): https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx */
/* - Password reveal button: https://msdn.microsoft.com/en-us/library/windows/apps/hh465773.aspx */
/* Note: Set width/height to 0 instead of "display: none", because of http://stackoverflow.com/a/17986002 */
::-ms-clear {
width : 0;
height: 0;
}
::-ms-reveal {
width : 0;
height: 0;
}
.disabled {
color: @text-disabled-color;
&::-moz-selection {
#scout.text-selection-disabled();
}
&::selection {
#scout.text-selection-disabled();
}
&::-webkit-input-placeholder {
#scout.placeholder-disabled();
}
&:-moz-placeholder { /* older versions of firefox */
#scout.placeholder-disabled();
}
&::-moz-placeholder {
#scout.placeholder-disabled();
}
&:-ms-input-placeholder {
#scout.placeholder-disabled();
}
}
/* Add this class to temporary remove an element from the document flow. */
/* !important is used to override any specific "display" values (because this */
/* call would in most cases be less specific than the element's rules). */
.hidden {
display: none !important;
}
/* Add this class to temporary hide (but not remove from flow) an element. Similar to "hidden". */
.invisible {
visibility: hidden !important;
}
*, *::before, *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Workaround for firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=648624 */
/* use -moz-none to allow child element to set -moz-user-select: text */
/* See also: focusUtil.js, isSelectableText() */
.table-cell,
.table-header-item,
.tree-node,
.table-footer,
.table-control,
.table-info-item,
.table-header-menu-group-text {
-moz-user-select: -moz-none;
}
input, textarea, button {
#scout.font-text-normal();
}
input, .input-field, textarea, .clipboard-field > .field {
background-color: @control-background-color;
color: @control-color;
border: 1px solid @border-color;
border-radius: @border-radius;
&.disabled {
background-color: @control-disabled-background-color;
color: @control-disabled-color;
}
&:focus {
#scout.focus-border();
}
&.has-error {
border-color: @error-border-color;
background-color: @error-background-color;
}
&.has-error:focus {
#scout.glow(@error-glow-color);
}
}
input {
padding: 0 @text-field-padding-x;
/* remove platform specific styling, mainly used to remove shadow on ios safari */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* text inputs on safari have 2px top and bottom margin -> remove*/
margin: 0;
}
input[type="radio"] {
/*radiobutton in activ filter (smartfield) should be displayed as radiobutton */
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
margin: 1px;
}
.input-field {
padding: @text-field-padding-y @text-field-padding-x;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
button {
padding: @button-padding-y @button-padding-x;
margin: 0; /* reset user agent style, e.g. on safari */
}
.button {
position: relative;
color: @button-color;
background-color: @button-background-color;
border: 1px solid @button-border-color;
border-radius: @border-radius;
cursor: pointer;
/* FIXME cgu/BSH: Actually, we wanted to use .overflow-ellipsis-nowrap to support */
/* ellipsis, but this breaks the focus, because the ::before inline element gets */
/* cut off. We should find a better solution for this. */
white-space: nowrap;
padding: @button-padding-y @button-padding-x;
/* Note: no vertical align helper here! this is very dependent on the content of the button */
/* (only text or other DOM nodes), therefore it has to be added manually when desired. */
&:hover {
color: @button-hover-color;
}
&:focus {
outline: none;
overflow: visible; /* without this, IE would cut off the focus glow */
&::before {
#scout.button-focus();
}
}
&:not(.disabled):active {
color: @button-active-color;
background-color: @button-active-background-color;
& > .font-icon {
color: @button-active-color;
}
}
&.default:not(.disabled) {
background-color: @default-button-background-color;
/* border is necessary to align the text with text from buttons with a real border */
border-color: @default-button-background-color;
color: @default-button-color;
&:focus {
color: @default-button-color;
}
&:hover {
background-color: @default-button-hover-background-color;
}
&:active {
background-color: @default-button-active-background-color;
border-color: @default-button-active-background-color;
}
& > .font-icon {
font-weight: normal;
color: @icon-inverted-color;
}
}
&:disabled {
background-color: @button-disabled-background-color;
border-color: @button-disabled-border-color;
color: @button-disabled-color;
cursor: default;
& > .font-icon {
color: @button-font-icon-disabled-color;
}
}
& > .button-label,
& > .submenu-icon,
& > .icon {
vertical-align: middle;
display: inline-block;
}
& > .button-label {
margin-top: 1px; /* SUPER HACK */
}
& > .icon {
/* Padding only relevant for icons larger than the container */
padding-top: 2px;
padding-bottom: 2px;
&.with-label {
margin-right: 8px;
}
&.loading,
&.broken {
.hidden();
}
&.font-icon {
color: @button-font-icon-color;
}
&:not(.font-icon) {
max-height: 100%;
}
}
& > .submenu-icon {
padding-left: 8px;
&::before {
#scout.sub-menu-icon();
}
}
}
textarea {
/* these two properties are required for FF, otherwise the editable textarea is 2px too large, */
/* and the DOM inspector does not include these 2 pixels. */
margin: 0 auto;
padding: @text-field-padding-y @text-field-padding-x;
resize: none;
/* Override default overflow value 'scroll' in IE */
overflow: auto;
/* remove platform specific styling, mainly used to remove shadow on ios safari */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* cursor handling */
/* The following classes are added dynamically while dragging. !important is necessary to override */
/* any cursor an underlying component defines while moving the mouse. */
.col-resize,
.col-resize * {
cursor: col-resize !important;
}
.row-resize,
.row-resize * {
cursor: row-resize !important;
}
/* remove the dotted border in firefox */
button::-moz-focus-inner {
border: 0;
}
.font-preloader {
position: absolute;
top: -999px;
left: -999px;
visibility: hidden;
display: block;
width: auto;
height: auto;
white-space: nowrap;
line-height: normal;
margin: 0;
padding: 0;
font-variant: normal;
font-size: 20em;
}
.drag-handle {
content: '';
width: 100%;
height: 20px;
position: absolute;
top: 0px;
left: 0px;
margin-top: -5px;
cursor: move;
}
.closer {
#scout.font-icon();
font-size: 17px;
cursor: pointer;
color: @icon-light-color;
&::before {
content: @icon-remove;
}
&:active {
color: @active-color;
}
&:hover {
color: @hover-color;
}
}
/* Used to display errors from server when desktop is not available */
.fatal-error {
margin: 10px;
#scout.user-select(text)
}
.application-loading {
@application-loading-size: 50px;
/* Make it use the whole available size, to show the 'wait' mouse cursor */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
&::before {
content: '';
border-radius: @application-loading-size;
border: 3px solid @palette-gray-5;
border-right-color: @palette-blue-6;
width: @application-loading-size;
height: @application-loading-size;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(@application-loading-size / 2);
margin-top: -((@application-loading-size / 2) + 20px);
#scout.animation(rotation 1.0s infinite linear);
}
}
a,
.link,
.app-link {
color: @applink-color;
text-decoration: underline;
cursor: pointer;
&:active {
color: @text-color;
}
&:focus {
outline-color: @applink-color;
}
}
.font-icon {
#scout.font-icon();
}
.white-space-nowrap {
#scout.white-space-nowrap();
}
/* --- z-index --- */
/* Rule: All child elements of .scout get the same z-index 0 assigned. This spawns a new stacking context for each */
/* of these elements (iff they are "positioned"). To bring a new element to the top, add it to the end of the list. */
/* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context */
.scout > .desktop-navigation,
.scout > .desktop-header,
.scout > .desktop-bench,
.scout > .desktop-bench,
.scout > .splitter,
.scout > .glasspane,
.scout > .busyindicator,
.scout > .dialog,
.scout > .form,
.scout > .messagebox,
.scout > .file-chooser,
.scout > .tooltip,
.scout > .popup,
.scout > .form-menu-popup,
.scout > .smart-field-popup,
.scout > .date-picker-popup,
.scout > .table-header-menu,
.scout > .notifications {
z-index: 0;
}
noscript {
display: block;
& > .wrapper > .box-content > h1 {
#scout.font-text-normal(bold);
}
}
/* Internet explorer applies the -ms-user-select setting: none (inherited from body) also to iframe contents.
* Other browsers do not, websites within an iframe should decide on their own if they are selectable (or not).
* Reset to default.
*/
iframe {
-ms-user-select: element;
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy