mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-28 02:21:06 +08:00
114 lines
2.5 KiB
Text
114 lines
2.5 KiB
Text
//
|
|
// Mixins
|
|
// --------------------------------------------------
|
|
|
|
|
|
// UTILITY MIXINS
|
|
// --------------------------------------------------
|
|
|
|
// Clearfix
|
|
// --------
|
|
// For clearing floats like a boss h5bp.com/q
|
|
.clearfix {
|
|
&::before,
|
|
&::after {
|
|
display: table;
|
|
content: "";
|
|
// Fixes Opera/contenteditable bug:
|
|
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
|
line-height: 0;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
// Webkit-style focus
|
|
// ------------------
|
|
.tab-focus() {
|
|
// Default
|
|
outline: thin dotted #333;
|
|
// Webkit
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
// FORMS
|
|
// --------------------------------------------------
|
|
|
|
// Block level inputs
|
|
.input-block-level {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 30px; // Make inputs at least the height of their button counterpart
|
|
box-sizing: border-box; // Makes inputs behave like true block-level elements
|
|
}
|
|
|
|
|
|
|
|
// Mixin for form field states
|
|
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
|
|
// Set the text color
|
|
> label {
|
|
color: @textColor;
|
|
}
|
|
// Style inputs accordingly
|
|
input,
|
|
select,
|
|
textarea {
|
|
color: @textColor;
|
|
border-color: @borderColor;
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
|
|
&:focus {
|
|
border-color: darken(@borderColor, 10%);
|
|
// Write out in full since the lighten() function isn't easily escaped
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// COMPONENT MIXINS
|
|
// --------------------------------------------------
|
|
|
|
// Grid System
|
|
// -----------
|
|
|
|
// Table columns
|
|
.tableColumns(@columnSpan: 1) {
|
|
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
|
}
|
|
|
|
// The Grid
|
|
#grid {
|
|
|
|
.core (@gridColumnWidth, @gridGutterWidth) {
|
|
|
|
.spanX (@index) when (@index > 0) {
|
|
// (~".span@{index}") { .span(@index); }
|
|
.span@{index} { .span(@index); }
|
|
.spanX(@index - 1);
|
|
}
|
|
.spanX (0) {}
|
|
|
|
.span (@columns) {
|
|
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
|
}
|
|
|
|
.row {
|
|
margin-left: @gridGutterWidth * -1;
|
|
}
|
|
|
|
[class*="span"] {
|
|
display: inline-block;
|
|
margin-left: @gridGutterWidth;
|
|
vertical-align: top;
|
|
}
|
|
|
|
// Set the container width
|
|
.container { .span(@gridColumns); }
|
|
|
|
// generate .spanX
|
|
.spanX (@gridColumns);
|
|
}
|
|
|
|
}
|