scout.style.mixins.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
******************************************************************************/
#scout {
.vendor(@property, @value) {
-webkit-@{property}: @value;
-moz-@{property}: @value;
-ms-@{property}: @value;
-o-@{property}: @value;
@{property}: @value;
}
.glow(@color, @radius: 5px) {
box-shadow: 0 0 @radius @color;
}
.inner-glow(@color, @radius: 4px) {
box-shadow: inset 0 0 @radius @color;
}
.drop-shadow(@x: 2px, @y: 6px, @blur: 14px, @spread: -6px, @alpha: 0.2) {
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.drop-shadow-large() {
#scout.drop-shadow(@x: 4px, @y: 10px, @blur: 18px, @alpha: 0.5);
}
.focus-border(@bordersize: 1px) {
outline: none;
border: @bordersize solid @focus-border-color;
#scout.glow(@focus-glow-color);
}
.focus-border-inverted(@bordersize: 1px) {
outline: none;
border: @bordersize solid @focus-border-color-inverted;
#scout.glow(@focus-glow-color-inverted);
}
.no-focus-border() {
outline: none;
border: 0;
box-shadow: 0 0 0 0;
}
.transform(@args) {
-webkit-transform: @args;
-ms-transform: @args;
transform: @args;
}
.transform-origin(@args) {
-webkit-transform-origin: @args;
-moz-transform-origin: @args;
-ms-transform-origin: @args;
transform-origin: @args;
}
.text-selection() {
background: @text-selection-background-color;
color: @text-selection-color;
}
.text-selection-disabled() {
background: @text-selection-disabled-background-color;
color: @text-selection-disabled-color;
}
.placeholder() {
color: @text-field-placeholder-color;
opacity: 1; /* necessary for firefox */
}
.placeholder-disabled() {
/* Fade a little to make it distinguishable from real text. Don't use opacity here because it affects background as well (IE). */
color: fade(@disabled-color, 70%);
}
.fake-placeholder() {
/* placeholder only works for input elements -> this fake placeholder is intended for a before element*/
#scout.placeholder();
content: attr(placeholder);
}
.overlay(@left: 0px, @top: 0px, @diffW: 0px, @diffH: 0px) {
position: absolute;
content: '';
left: @left;
top: @top;
width: calc(~'100% +' @diffW);
height: calc(~'100% +' @diffH);
}
/* Expects a sibling html element with class 'icon' **/
.text-field-with-icon(@icon; @className: ~'') {
padding-right: @text-field-padding-x + 15px;
& ~ .icon@{className} {
position: absolute;
margin-right: @text-field-padding-x;
cursor: text;
}
& ~ .icon@{className}::before {
#scout.font-icon();
font-size: 13px;
content: @icon;
color: @text-field-icon-color;
}
&:focus ~ .icon@{className}::before {
color: @text-field-icon-focus-color;
}
&.has-error ~ .icon@{className}::before {
color: @text-field-icon-error-color;
}
&.disabled {
padding-right: @text-field-padding-x;
}
&.disabled ~ .icon@{className} {
display: none;
}
/* When field is too small, hide the icon */
&.compact {
padding-right: @text-field-padding-x;
& ~ .icon {
display: none;
}
}
}
.status {
&::before {
#scout.font-icon();
font-size: 16px;
}
}
.menu-status {
visibility: visible;
cursor: pointer;
&::before {
content: @icon-ellipsis-v;
color: @icon-light-color;
}
&:hover::before {
color: @icon-color;
}
&:active::before {
color: @icon-color;
}
}
.tooltip-status,
.info-status {
visibility: visible;
cursor: pointer;
&::before {
content: @icon-info;
color: @status-info-color;
}
&:hover::before {
color: @status-info-hover-color;
}
&:active::before {
color: @status-info-hover-color;
}
}
.warning-status {
visibility: visible;
cursor: pointer;
&::before {
content: @icon-error;
color: @status-warning-color;
}
&:hover::before {
color: @status-warning-hover-color;
}
&:active::before {
color: @status-warning-hover-color;
}
}
.error-status {
visibility: visible;
cursor: pointer;
&::before {
content: @icon-error;
color: @status-error-color;
}
&:hover::before {
color: @status-error-hover-color;
}
&:active::before {
color: @status-error-hover-color;
}
}
.loading-indicator(@loading-animation-size: 30px) {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(@loading-animation-size / 2);
margin-left: -(@loading-animation-size / 2);
#scout.animation(fadeIn 0.15s);
&::before {
#scout.animation(rotation 0.9s linear infinite);
content: '';
display: inline-block;
vertical-align: middle;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0);
border-top-color: @border-color;
border-left-color: @border-color;
border-bottom-color: @border-color;
width: @loading-animation-size;
height: @loading-animation-size;
}
}
.user-select(@mode) {
-webkit-user-select: @mode;
-moz-user-select: @mode;
-ms-user-select: @mode;
user-select: @mode;
}
.checkbox() {
display: inline-block;
width: @check-box-size;
height: @check-box-size;
border: 2px solid @border-color;
border-radius: 3px;
background-color: @control-background-color;
text-align: center;
}
.checkbox-disabled() {
background-color: @control-disabled-background-color;
}
.checkbox-before() {
content: '';
position: relative;
padding-left: 1px;
}
.checkbox-before-checked() {
#scout.font-icon();
content: @icon-checked;
color: @palette-blue-6;
font-size: 11px;
}
.checkbox-before-disabled() {
color: @checkbox-disabled-color;
}
.checkbox-after-children-checked() {
content: '';
display: inline-block;
height: 8px;
width: 8px;
background-color: @palette-blue-6;
border-radius: 2px;
position: absolute;
top: 3px;
left: 3px;
}
.checkbox-after-children-checked-disabled() {
background-color: @checkbox-disabled-color;
}
.overflow-ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
}
.overflow-ellipsis-nowrap() {
#scout.overflow-ellipsis();
white-space: nowrap;
}
.overflow-nowrap() {
overflow: hidden;
white-space: nowrap;
}
.white-space-nowrap() {
white-space: nowrap;
}
.button-focus() {
#scout.overlay(-3px, -3px, 6px, 6px);
#scout.focus-border();
border-radius: @border-radius;
}
.triangle-top-left(@size, @color) {
width: 0;
height: 0;
border-style: solid;
border-width: @size @size 0 0;
#scout.triangle-top-left-color(@color);
}
.triangle-top-left-color(@color) {
border-color: @color transparent transparent transparent;
}
/* Font Mixins */
.font-text-small(@font-weight: @font-weight-normal) {
font-family: @font-default-family;
font-weight: @font-weight;
font-size: @font-size-small;
}
.font-text-normal(@font-weight: @font-weight-normal) {
font-family: @font-default-family;
font-weight: @font-weight;
font-size: @font-size-normal;
}
.font-text-plus(@font-weight: @font-weight-normal) {
font-family: @font-default-family;
font-weight: @font-weight;
font-size: @font-size-plus;
}
.font-text-large(@font-weight: @font-weight-normal) {
font-family: @font-default-family;
font-weight: @font-weight;
font-size: @font-size-large;
}
.font-icon() {
font-family: scoutIcons, @font-default-family;
font-weight: @font-weight-normal;
speak: none;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sub-menu-icon(@icon: @icon-angle-down) {
display: block;
#scout.font-icon();
font-size: 18px;
content: @icon;
height: 18px;
line-height: 18px;
position: relative;
top: -1px; /* optically center the arrow icon (see also: Popup.css) */
}
/* Invisible pseudo element that enables vertical-align if container has height set */
.vertical-align-helper() {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.vertical-align-helper-before() {
&::before {
#scout.vertical-align-helper();
}
}
.vertical-align-helper-after() {
&::after {
#scout.vertical-align-helper();
}
}
.loading-indicator() {
@loading-animation-size: 30px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(@loading-animation-size / 2);
margin-left: -(@loading-animation-size / 2);
#scout.animation(fadeIn 0.15s);
&::before {
#scout.animation(rotation 0.9s linear infinite);
content: '';
display: inline-block;
vertical-align: middle;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0);
border-top-color: @border-color;
border-left-color: @border-color;
border-bottom-color: @border-color;
width: @loading-animation-size;
height: @loading-animation-size;
}
}
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy