diff options
Diffstat (limited to 'addons/web/static/src/less/utils.less')
| -rw-r--r-- | addons/web/static/src/less/utils.less | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less new file mode 100644 index 00000000000..8b8d02898e6 --- /dev/null +++ b/addons/web/static/src/less/utils.less @@ -0,0 +1,189 @@ +// ------------------------------------------------------------------ +// Margin +// ------------------------------------------------------------------ +.utils-margin-loop(@index) when (@index < 256) { + .o-mt@{index} {margin-top: @index px;} + .o-mb@{index} {margin-bottom: @index px;} + .o-mr@{index} {margin-right: @index px;} + .o-ml@{index} {margin-left: @index px;} + + .utils-margin-loop(@index * 2); +} +.utils-margin-loop(2); + +// ------------------------------------------------------------------ +// Padding +// ------------------------------------------------------------------ +.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) { + padding-top: @top; + padding-right: @right; + padding-bottom: @bottom; + padding-left: @left; +} + +// ------------------------------------------------------------------ +// Caret +// ------------------------------------------------------------------ +.utils-caret-boilerplate() { + content: ""; + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; +} +.o-caret-down(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: 0; + border-left: @caret-width solid transparent; + border-right: @caret-width solid transparent; + border-top: @caret-width solid; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +.o-caret-up(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: @caret-width solid; + border-left: @caret-width solid transparent; + border-right: @caret-width solid transparent; + border-top: 0; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +.o-caret-left(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: @caret-width solid transparent; + border-left: 0; + border-right: @caret-width solid; + border-top: @caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +.o-caret-right(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: @caret-width solid transparent; + border-left: @caret-width solid; + border-right: 0; + border-top: @caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} + +// ------------------------------------------------------------------ +// Vendor prefixes +// ------------------------------------------------------------------ +// Flex +.o-flex-display() { + display: -ms-flexbox; + display: -moz-box; + display: -webkit-box; + display: -webkit-flex; + + display: flex; +} +.o-inline-flex-display() { + display: -ms-inline-flexbox; + display: -moz-inline-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + + display: inline-flex; +} +.o-flex-flow(@direction, @wrap) { + -ms-flex-flow: @direction @wrap; + -moz-flex-flow: @direction @wrap; + -webkit-flex-flow: @direction @wrap; + + flex-flow: @direction @wrap; +} +.o-flex(@grow, @schrink, @basis) { + -ms-flex: @grow @schrink @basis; + -moz-flex: @grow @schrink @basis; + -webkit-box-flex: @grow; + -webkit-flex: @grow @schrink @basis; + + flex: @grow @schrink @basis; +} +.o-justify-content(@justify) { + -moz-justify-content: @justify; + -webkit-justify-content: @justify; + + justify-content: @justify; +} +.o-align-content(@align) { + -webkit-align-content: @align; + + align-content: @align; +} +.o-align-items(@align) { + -webkit-align-items: @align; + + align-items: @align; +} +.o-align-self(@align) { + -webkit-align-self: @align; + + align-self: @align; +} + +// Background-size +// https://css-tricks.com/perfect-full-page-background-image/ +.o-background-size(@size) { + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; +} + +// ------------------------------------------------------------------ +// Dropdowns +// ------------------------------------------------------------------ +.o-selected-li() { + li { + position: relative; + > a { + padding: 3px 25px; + color: @odoo-main-text-color; + &:hover { + color: darken(@odoo-main-text-color, 10%); + } + } + &.selected { + > a { + color: darken(@odoo-main-text-color, 10%); + font-weight: bold; + &:before { + font-family: FontAwesome; + position: absolute; + left: 6px; + content: "\f00c"; + } + } + } + } +} + +// ------------------------------------------------------------------ +// Select Appearance +// ------------------------------------------------------------------ +.o-appearance(@value) { + -webkit-appearance: @value; + -moz-appearance: @value; + appearance: @value; +} + +// ------------------------------------------------------------------ +// Transform +// ------------------------------------------------------------------ +.o-transform-origin(@x: 50%, @y: 50%, @z: 0) { + -ms-transform-origin: @x @y @z; + -webkit-transform-origin: @x @y @z; + -moz-transform-origin: @x @y @z; + transform-origin: @x @y @z; +} + +// ------------------------------------------------------------------ +// Position absolute +// ------------------------------------------------------------------ +.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) { + position: absolute; + top: @top; + left: @left; + bottom: @bottom; + right: @right; +}
\ No newline at end of file |