forked from enviPath/enviPy
469 lines
9.2 KiB
Plaintext
469 lines
9.2 KiB
Plaintext
// Workaround less issue:
|
|
// https://github.com/less/less.js/issues/2004
|
|
|
|
.set-size(inherit) {
|
|
}
|
|
.set-size(small) {
|
|
#small-dim;
|
|
}
|
|
.set-size(large) {
|
|
#large-dim;
|
|
}
|
|
|
|
/////////////////////
|
|
|
|
.canvas(@dim: inherit) {
|
|
position: absolute;
|
|
border: @border-color 1px solid;
|
|
border-radius: 5px;
|
|
overflow: auto;
|
|
.canvas-size(@dim);
|
|
// svg {
|
|
// display: block;
|
|
// }
|
|
}
|
|
|
|
.canvas-size(@dim) {
|
|
.set-size(@dim);
|
|
top: @canvas-padding;
|
|
left: @canvas-padding;
|
|
right: @canvas-padding;
|
|
bottom: @canvas-padding;
|
|
}
|
|
|
|
/////////////////////
|
|
|
|
.toolbar(@dir, @dim: inherit) {
|
|
.orientation(@dir);
|
|
position: absolute;
|
|
@{dir}: @app-gap;
|
|
.toolbar-size(@dir, @dim);
|
|
&>menu {
|
|
@{main-dim}: 100%;
|
|
}
|
|
}
|
|
|
|
.toolbar-size(@dir, @dim) {
|
|
.orientation(@dir);
|
|
.set-size(@dim);
|
|
@{main-lose}: @canvas-padding;
|
|
@{main-rise}: @canvas-padding;
|
|
@{cross-dim}: @toolbar-size;
|
|
}
|
|
|
|
.toolbar-pos(@icon-count, @separator-count: 0, @loose-pad: 0,
|
|
@rise-pad: @loose-pad, @dim: inherit) {
|
|
.set-size(@dim);
|
|
@offset: @icon-count * @toolbar-size +
|
|
(@loose-pad + @rise-pad) * @separator-count;
|
|
}
|
|
|
|
/////////////////////
|
|
|
|
.toolbutton(@dim: inherit) {
|
|
display: block;
|
|
border: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
background: inherit;
|
|
background-color: white;
|
|
//background-image: none;
|
|
|
|
//text-align: center;
|
|
//overflow: hidden;
|
|
//font: ~"0/0" a;
|
|
//.text-hide(transparent);
|
|
|
|
&:before, &:after {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-family: 'ketcher';
|
|
}
|
|
&:after {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
&:hover { // &:hover:not(:active)
|
|
.highlight-scale;
|
|
.highlight-shadow(black);
|
|
}
|
|
&:active, &[disabled] {
|
|
.highlight-scale(none);
|
|
.highlight-shadow(none);
|
|
//.shadow-highlight(black, inset);
|
|
}
|
|
.toolbutton-size(@dim);
|
|
}
|
|
|
|
.toolbutton-size(@dim) {
|
|
.set-size(@dim);
|
|
width: @button-size;
|
|
height: @button-size;
|
|
margin: @button-grow;
|
|
//line-height: @toolbar-size;
|
|
|
|
&:before, &:after {
|
|
font-size: @icon-size;
|
|
//padding: @icon-padding;
|
|
}
|
|
}
|
|
|
|
.toolbutton-horizontal(@dim, @width-cells: 1) {
|
|
.set-size(@dim);
|
|
width: @button-size * @width-cells;
|
|
margin-left: @button-grow * @width-cells;
|
|
margin-right: @button-grow * @width-cells;
|
|
}
|
|
////////////////////
|
|
|
|
.collapsed(@dim: inherit) when not (@dim = none) {
|
|
position: relative;
|
|
overflow: hidden;
|
|
.collapsed-size(@dim);
|
|
.collapsed-icon;
|
|
}
|
|
|
|
.collapsed(none) {
|
|
position: static;
|
|
overflow: visible;
|
|
height: auto;
|
|
width: auto;
|
|
// &> menu {
|
|
// margin: 0 !important; // TODO: fix me in js
|
|
// }
|
|
.collapsed-icon(none);
|
|
}
|
|
|
|
.collapsed-size(@dim) {
|
|
.set-size(@dim);
|
|
height: @toolbar-size;
|
|
width: 100%;//@toolbar-size;
|
|
}
|
|
|
|
.collapsed-ifnot(@classname, @dim: inherit) {
|
|
.collapsed(@dim);
|
|
&.@{classname} {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
.collapsed-icon() {
|
|
&:after {
|
|
font-size: 7px;
|
|
width: 7px;
|
|
height: 7px;
|
|
display: block;
|
|
font-family: 'ketcher';
|
|
content: @icon-dropdown;
|
|
position: absolute;
|
|
z-index: 10;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
&:hover:after {
|
|
//.scale-highlight;
|
|
color: @active-color;
|
|
}
|
|
}
|
|
|
|
.collapsed-icon(none) {
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
/////////////////////
|
|
|
|
.expanded(@dim: inherit) {
|
|
.set-size(@dim);
|
|
&>menu {
|
|
margin: 0 !important;
|
|
position: absolute;
|
|
left: @toolbar-size + @menu-pad;
|
|
z-index: 20;
|
|
|
|
//display: table-cell;
|
|
white-space: nowrap;
|
|
word-break: keep-all;
|
|
//width: auto;
|
|
//height: @toolbar-size;
|
|
|
|
padding: 2px;
|
|
.separate-menu(vertical, 3px);
|
|
|
|
background: white;
|
|
border: 1px solid @border-color;
|
|
border-radius: 5px;
|
|
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
}
|
|
}
|
|
|
|
.expanded-size(@dim) {
|
|
&>menu {
|
|
.set-size(@dim);
|
|
left: @toolbar-size + @menu-pad;
|
|
}
|
|
}
|
|
|
|
.expanded-menu(@dim: inherit) {
|
|
.set-size(@dim);
|
|
li {
|
|
display: block;
|
|
}
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 1px 0;
|
|
padding: 0.3em 4.5em 0.3em 0.3em; // 4.5em - place for kbd
|
|
height: 1.7em;
|
|
|
|
font-size: @menu-font-size;
|
|
//line-height: 18px;
|
|
text-align: left;
|
|
&:before, &:after {
|
|
padding-right: 0.4em;
|
|
font-size: @menu-icon-size;
|
|
//padding: @icon-padding;
|
|
}
|
|
&[disabled] { // TODO: general button highlight
|
|
.highlight-invert(disabled); // refactor
|
|
}
|
|
}
|
|
button:hover, .selected button {
|
|
//&:extend(button:active); not extended while in media
|
|
.highlight-scale(none);
|
|
.highlight-shadow(none);
|
|
.highlight-invert;
|
|
}
|
|
kbd {
|
|
display: inline-block;
|
|
position: absolute; // how to align right?
|
|
right: 0.5em;
|
|
}
|
|
}
|
|
|
|
.expanded-menu-size(@dim) {
|
|
.set-size(@dim);
|
|
button {
|
|
font-size: @menu-font-size;
|
|
&:before, &:after {
|
|
font-size: @menu-icon-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
/////////////////////
|
|
|
|
.separator(@orientation, @lose-pad, @rise-pad) {
|
|
.orientation(@orientation);
|
|
margin-@{main-lose}: @lose-pad;
|
|
border-@{main-lose}: 1px solid @border-color;
|
|
padding-@{main-lose}: @rise-pad - 1px; // substract 1px to assert
|
|
// width = lose-pad + rise-pad
|
|
}
|
|
|
|
.separate-item(@orientation, @lose-pad, @rise-pad: @lose-pad) {
|
|
& + li {
|
|
.separator(@orientation, @lose-pad, @rise-pad);
|
|
}
|
|
}
|
|
|
|
.separate-menu(@orientation, @lose-pad, @rise-pad: @lose-pad) {
|
|
li + li>menu {
|
|
.separator(@orientation, @lose-pad, @rise-pad);
|
|
}
|
|
}
|
|
|
|
/////////////////////
|
|
// Highlight effects
|
|
|
|
.highlight-scale() {
|
|
transition: transform, 0.2s, ease-out;
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
.highlight-scale(none) {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.highlight-shadow(inset, @color: @active-color) {
|
|
box-shadow: 0px -1px 6px fade(@color, 5%) inset,
|
|
0px 1px 3px @color inset;
|
|
}
|
|
|
|
.highlight-shadow(@color: @active-color) when (iscolor(@color)) {
|
|
box-shadow: inset 0 0 1px 1px fade(@color, 12%);
|
|
}
|
|
|
|
.highlight-shadow(none) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.highlight-circle(@color: @active-color, @inset: '') {
|
|
border-radius: (@icon-size + @icon-padding) / 2;
|
|
box-shadow: ~'0 0 4px @{color} @{inset}';
|
|
}
|
|
|
|
.highlight-symbol(@color: @active-color) {
|
|
color: @active-color;
|
|
text-shadow: 1px 1px 3px @color;
|
|
}
|
|
|
|
.highlight-symbol-invert() {
|
|
background: #333;
|
|
text-shadow: 0px 1px 10px white, 0px -1px 10px white;
|
|
}
|
|
|
|
.highlight-invert() {
|
|
background: #444;
|
|
color: white;
|
|
}
|
|
|
|
.highlight-invert(disabled) {
|
|
background: inherit;
|
|
color: @disabled-color; // hint for menus
|
|
}
|
|
|
|
/////////////////////
|
|
// Transition effects
|
|
|
|
.transition-twirl(@time: 0.3s) {
|
|
transform: rotateX(0);
|
|
transition: transform @time;
|
|
&.hide {
|
|
transform-style: preserve-3d;
|
|
transform: perspective(350px) rotateX(-70deg);
|
|
}
|
|
}
|
|
|
|
.transition-zoom(@time: 0.3s) {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
transition: transform @time, opacity @time;
|
|
|
|
&.hide {
|
|
opacity: .2;
|
|
transform: scale(.5);
|
|
}
|
|
}
|
|
|
|
//////////////////////////
|
|
// Icon content & coloring
|
|
|
|
.colorize(@color) when not (@color = inherit) {
|
|
color: @color;
|
|
}
|
|
|
|
.monochrome-icons(@names, @color: inherit, @i: 1) when (@i <= length(@names)) {
|
|
@item: extract(@names, @i);
|
|
@icon: 'icon-@{item}';
|
|
#@{item} button:before { content: @@icon; .colorize(@color); }
|
|
.monochrome-icons(@names, @color, (@i + 1));
|
|
}
|
|
|
|
.atom-sketching(@names, @i: 1) when (@i <= length(@names)) {
|
|
@item: extract(@names, @i);
|
|
@color: 'atom-@{item}-sketching-color';
|
|
.atom-@{item} {
|
|
color: @@color;
|
|
}
|
|
.atom-sketching(@names, (@i + 1));
|
|
}
|
|
|
|
////////////////////////////////////////////
|
|
// Little bit jankie directions unification
|
|
|
|
.orientation(horizontal) {
|
|
@main-rise: right;
|
|
@main-lose: left;
|
|
@main-dim: width;
|
|
@cross-rise: bottom;
|
|
@cross-lose: top;
|
|
@cross-dim: height;
|
|
}
|
|
|
|
.orientation(vertical) {
|
|
@main-rise: bottom;
|
|
@main-lose: top;
|
|
@main-dim: height;
|
|
@cross-rise: right;
|
|
@cross-lose: left;
|
|
@cross-dim: width;
|
|
}
|
|
|
|
.orientation(@dir) when (@dir = top), (@dir = bottom) {
|
|
.orientation(horizontal);
|
|
}
|
|
|
|
.orientation(@dir) when (@dir = left), (@dir = right) {
|
|
.orientation(vertical);
|
|
}
|
|
|
|
.direction(@dir) {
|
|
.to-index(top) { @index: 0; }
|
|
.to-index(right) { @index: 1; }
|
|
.to-index(bottom) { @index: 2; }
|
|
.to-index(left) { @index: 3; }
|
|
@directions: top right bottom left;
|
|
@orientations: horizontal vertical;
|
|
.to-index(@dir);
|
|
|
|
@main-start: extract(@directions, mod(@index, 4) + 1);
|
|
@main-end: extract(@directions, mod((@index + 2), 4) + 1);
|
|
|
|
@cross-start: extract(@directions, mod((@index + 3), 4) + 1);
|
|
@cross-end: extract(@directions, mod((@index + 1), 4) + 1);
|
|
|
|
@main-orient: extract(@orientations, mod(@index + 1, 2));
|
|
@cross-orient: extract(@orientations, mod(@index + 1, 2) + 1);
|
|
}
|
|
|
|
/////////////////////
|
|
// Basic mixins
|
|
|
|
.background-opacity(@color, @opacity) {
|
|
@rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);
|
|
background-color: @rgba-color;
|
|
|
|
background: none\9; // Hack for IE8
|
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color), argb(@rgba-color)));
|
|
//zoom: 1;
|
|
&:not([ie9]) {
|
|
// Do not apply to IE9 as it supports rgba
|
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
|
|
}
|
|
}
|
|
|
|
.text-hide(transparent) {
|
|
font: ~"0/0" a;
|
|
color: transparent;
|
|
text-shadow: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.text-hide(indent) {
|
|
@approximate-em-value: 12px / 1em;
|
|
@wider-than-any-screen: -9999em;
|
|
text-indent: @wider-than-any-screen * @approximate-em-value;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
}
|
|
|
|
.text-hide() {
|
|
.text-hide(indent);
|
|
}
|
|
|
|
.reset-button() {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.remove-inline-spacing() {
|
|
// vanish horizontal spacing between inline blocks
|
|
font-size: 0.00001px;
|
|
-webkit-text-size-adjust: none;
|
|
}
|