diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less index 41443b68a..a0af74919 100644 --- a/dev/Styles/@Main.less +++ b/dev/Styles/@Main.less @@ -14,7 +14,6 @@ @import "../../vendors/bootstrap/less/alerts.less"; @import "../../vendors/bootstrap/less/code.less"; @import "../../vendors/bootstrap/less/dropdowns.less"; -@import "../../vendors/bootstrap/less/navs.less"; @import "../../vendors/bootstrap/less/utilities.less"; @import "_FontasticToBoot.less"; diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index b316fbe72..7e69a7a06 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -11,7 +11,7 @@ html, body { #rl-app { -webkit-touch-callout: none; - font-size: @baseFontSize; + font-size: var(--main-font-size, 14px); line-height: 1.15; /* 1 */ position: fixed; top: 0; @@ -58,7 +58,7 @@ dialog::backdrop { dialog { border: 0; - background-color: @white; + background-color: var(--dialog-bg-clr, #fff); border: 1px solid rgba(0,0,0,.3); border-radius: 6px; box-shadow: 0 5px 80px rgba(0,0,0,0.3); diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index c55fe3101..74276b35a 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -115,18 +115,17 @@ tr:hover .drag-handle { border-radius: 4px 4px 0 0; cursor: pointer; grid-row-start: 1; - line-height: @baseLineHeight; opacity: 0.6; margin: 0 2px -1px 0; padding: 5px; text-align: center; &:hover { - border-color: @grayLighter; + border-color: var(--tab-hover-border-clr, #eee); opacity: 0.8; } } .tabs > [id^="tab"]:checked + label { - background-color: @white; + background-color: var(--tab-active-bg-clr, #fff); border-color: rgba(128,128,128,.5) rgba(128,128,128,.5) transparent rgba(128,128,128,.5); opacity: 1; z-index: 1; diff --git a/dev/Styles/User/EmailAddresses.less b/dev/Styles/User/EmailAddresses.less index bdde6b0f2..96a6ed5a2 100644 --- a/dev/Styles/User/EmailAddresses.less +++ b/dev/Styles/User/EmailAddresses.less @@ -1,9 +1,10 @@ .emailaddresses { - background-color: #fff; - border: 1px solid #ccc; - border-radius: 3px; + background-color: var(--input-bg-clr, #fff); + border: 1px solid var(--input-border-clr, #ccc); + border-radius: var(--input-border-radius, 3px); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-sizing: border-box; + color: var(--input-clr, #555); cursor: text; font-size: 90%; list-style: none; @@ -15,7 +16,7 @@ } .emailaddresses.emailaddresses-focused { - border: 1px solid darken(@inputBorder, 20%); + border-color: var(--input-focus-border-clr, #999); box-shadow: none; } diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less index 019115a62..c113cc50c 100644 --- a/dev/Styles/User/FolderList.less +++ b/dev/Styles/User/FolderList.less @@ -147,9 +147,9 @@ .b-folders-user a[data-unread]:not(.system)::after { content: attr(data-unread); - background-color: @grayLight; + background-color: var(--unread-count-bg-color, #999); border-radius: 9px; - color: @white; + color: var(--unread-count-color, #fff); font-size: 11px; line-height: 19px; margin-top: 5px; diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index a8a0bcf8f..71db08b84 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -155,7 +155,7 @@ html.rl-side-preview-pane { } .dropdown.show { - box-shadow: 0 0 1px var(--main-color, @dropdownLinkColor); + box-shadow: 0 0 1px var(--main-color, #333); } .btn.btn-transparent { diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less index b7ecb2be4..bb69c7aae 100644 --- a/dev/Styles/_BootstrapFix.less +++ b/dev/Styles/_BootstrapFix.less @@ -1,17 +1,11 @@ .legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 1.5; - color: @grayDark; - border: 0; border-bottom: 1px solid var(--border-color, #ddd); + font-size: 150%; + line-height: 2.1; + margin-bottom: 1.43em; } summary.legend { - display: list-item; cursor: pointer; } @@ -21,15 +15,14 @@ summary.legend { .alert a:not(.close) { text-decoration: underline; - color: @warningText; } .alert.alert-info a:not(.close) { - color: @infoText; + color: var(--info-clr, #3a87ad); } .alert.alert-error a:not(.close) { - color: @errorText; + color: var(--error-clr, #b94a48); } /* mobile and tablet */ diff --git a/snappymail/v/0.0.0/themes/example.css b/snappymail/v/0.0.0/themes/example.css index 9f424091c..0364666d7 100644 --- a/snappymail/v/0.0.0/themes/example.css +++ b/snappymail/v/0.0.0/themes/example.css @@ -6,8 +6,22 @@ --main-bg-image: none; /* url("images/background.png"); */ --main-bg-size: auto; --main-bg-repeat: repeat; + --main-font-size: 14px; --link-color: #369; --border-color: #ddd; + --hr-color: #eee; + + --warning-clr: #c09853; + --warning-bg-clr: #fcf8e3; + --warning-border-clr: #fbeed5; + + --error-clr: #b94a48; + --error-bg-clr: #f2dede; + --error-border-clr: #eed3d7; + + --info-clr: #3a87ad; + --info-bg-clr: #d9edf7; + --info-border-clr: #bce8f1; /* LOADING */ --loading-color: #000; @@ -42,6 +56,8 @@ --folders-hover-bg-color: false; --folders-drop-color: #eee; --folders-drop-bg-color: #333; + --unread-count-color: #fff; + --unread-count-bg-color: #333; /* SETTINGS */ --settings-menu-color: #333; @@ -52,9 +68,32 @@ /* MESSAGE LIST */ --message-list-toolbar-bg-color: #eee; - --message-list-toolbar-gradient-start: none; /* #f4f4f4 */ - --message-list-toolbar-gradient-end: none; /* #dfdfdf */ /* MESSAGE */ --message-bg-color: #fff; + +/* DIALOGS */ + --dialog-bg-clr: #fff; + +/* FORMS */ + --btn-clr: #333; + --btn-bg-clr: #fff; + --btn-border-clr: #fff; + --btn-success-bg-clr: #84AB04; + --btn-danger-bg-clr: #ee5f5b; + + --input-clr: #555; + --input-bg-clr: #fff; + --input-border-clr: #ccc; + --input-border-radius: 3px; + --input-focus-border-clr: #999; + +/* TABLES */ + --tr-hover-bg-clr: #f5f5f5; + --tr-odd-bg-clr: #f9f9f9; /* when striped */ + +/* TABS */ + --tab-active-bg-clr: #fff; + --tab-hover-border-clr: #eee; + } diff --git a/vendors/bootstrap/less/alerts.less b/vendors/bootstrap/less/alerts.less index 71fdbb110..dfd741cc9 100644 --- a/vendors/bootstrap/less/alerts.less +++ b/vendors/bootstrap/less/alerts.less @@ -8,14 +8,14 @@ .alert { padding: 8px 35px 8px 14px; - margin-bottom: @baseLineHeight; + margin-bottom: 1.43em; text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: @warningBackground; - border: 1px solid @warningBorder; + background-color: var(--warning-bg-clr, #fcf8e3); + border: 1px solid var(--warning-border-clr, #fbeed5); border-radius: 4px; - color: @warningText; + color: var(--warning-clr, #c09853); max-width: 800px; - min-height: @baseLineHeight; + min-height: 1.43em; } // Adjust close link position @@ -23,7 +23,7 @@ position: relative; top: -2px; right: -21px; - line-height: @baseLineHeight; + line-height: 1.43em; } @@ -31,12 +31,12 @@ // ------------------------- .alert-error { - background-color: @errorBackground; - border-color: @errorBorder; - color: @errorText; + background-color: var(--error-bg-clr, #f2dede); + border-color: var(--error-border-clr, #eed3d7); + color: var(--error-clr, #b94a48); } .alert-info { - background-color: @infoBackground; - border-color: @infoBorder; - color: @infoText; + background-color: var(--info-bg-clr, #d9edf7); + border-color: var(--info-border-clr, #bce8f1); + color: var(--info-clr, #3a87ad); } diff --git a/vendors/bootstrap/less/buttons.less b/vendors/bootstrap/less/buttons.less index ca865e1c1..8b2b71ead 100644 --- a/vendors/bootstrap/less/buttons.less +++ b/vendors/bootstrap/less/buttons.less @@ -12,16 +12,16 @@ display: inline-block; padding: 4px 12px; - line-height: @baseLineHeight; + line-height: 1.43em; text-align: center; vertical-align: middle; cursor: pointer; - border: 1px solid @btnBorder; + border: 1px solid var(--btn-border-clr, #bbb); border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - color: @grayDark; + color: var(--btn-clr, #333); text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: @btnBackground; + background-color: var(--btn-bg-clr, #fff); text-decoration: none; // Hover state @@ -94,16 +94,16 @@ // Warning appears are orange .btn-warning { color: #fff; - background-color: @btnWarningBackground; + background-color: #fbb450; } // Danger and error appear as red .btn-danger { color: #fff; - background-color: @btnDangerBackground; + background-color: var(--btn-danger-bg-clr, #ee5f5b); } // Success appears as green .btn-success { - background-color: @btnSuccessBackground; + background-color: var(--btn-success-bg-clr, #84AB04); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } diff --git a/vendors/bootstrap/less/close.less b/vendors/bootstrap/less/close.less index d782c271b..7afba005b 100644 --- a/vendors/bootstrap/less/close.less +++ b/vendors/bootstrap/less/close.less @@ -7,7 +7,7 @@ float: right; font-size: 143%; font-weight: bold; - line-height: @baseLineHeight; + line-height: 1.43em; color: inherit; cursor: pointer; text-decoration: none; diff --git a/vendors/bootstrap/less/code.less b/vendors/bootstrap/less/code.less index 2b805dca3..bd4a8d94f 100644 --- a/vendors/bootstrap/less/code.less +++ b/vendors/bootstrap/less/code.less @@ -22,8 +22,8 @@ code { // Blocks of code pre { display: block; - padding: (@baseLineHeight / 2); - margin: 0 0 (@baseLineHeight / 2); + padding: 0.715em; + margin: 0 0 0.715em; white-space: pre-wrap; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; diff --git a/vendors/bootstrap/less/dropdowns.less b/vendors/bootstrap/less/dropdowns.less index 0cb61fad7..7599f5bdc 100644 --- a/vendors/bootstrap/less/dropdowns.less +++ b/vendors/bootstrap/less/dropdowns.less @@ -17,15 +17,15 @@ position: absolute; top: 100%; left: 0; - z-index: @zindexDropdown; + z-index: 1000; display: none; // none by default, but block on "open" of the menu min-width: 160px; padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; color: var(--dropdown-menu-color, inherit); - background-color: var(--dropdown-menu-bg-color, @dropdownBackground); - border: 1px solid @dropdownBorder; + background-color: var(--dropdown-menu-bg-color, #fff); + border: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2); background-clip: padding-box; @@ -38,7 +38,7 @@ // Links within the dropdown menu a { background-color: var(--dropdown-menu-bg-color, #fff); - color: var(--dropdown-menu-color, @dropdownLinkColor); + color: var(--dropdown-menu-color, #333); display: block; padding: 3px 10px; text-decoration: none; @@ -60,7 +60,7 @@ // Gray out text and ensure the hover state remains gray .dropdown-menu .disabled > a, .dropdown-menu .disabled > a:hover { - color: @grayLight; + color: #999; cursor: not-allowed; opacity: 0.5; } diff --git a/vendors/bootstrap/less/forms.less b/vendors/bootstrap/less/forms.less index 5b6ca6dd7..f88683d3e 100644 --- a/vendors/bootstrap/less/forms.less +++ b/vendors/bootstrap/less/forms.less @@ -8,14 +8,14 @@ // Make all forms have space below them form { - margin: 0 0 @baseLineHeight; + margin: 0 0 1.43em; } // Identify controls by their labels label { display: block; font-weight: normal; - line-height: @baseLineHeight; + line-height: 1.43em; margin-bottom: 5px; } @@ -27,8 +27,8 @@ select, .select, textarea { font-family: inherit; - font-size: @baseFontSize; - line-height: @baseLineHeight; + font-size: var(--main-font-size, 14px); + line-height: 1.43em; margin: 0; text-transform: none; } @@ -44,25 +44,26 @@ input { box-sizing: border-box; display: inline-block; padding: 4px 6px; - color: @gray; - border-radius: @inputBorderRadius; + color: var(--input-clr, #555); + border-radius: var(--input-border-radius, 3px); } textarea, input { - background-color: @inputBackground; - border: 1px solid @inputBorder; + background-color: var(--input-bg-clr, #fff); + border: 1px solid var(--input-border-clr, #ccc); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); transition: border linear .2s, box-shadow linear .2s; width: 210px; // Focus state &:focus { - border-color: darken(@inputBorder, 20%); + border-color: var(--input-focus-border-clr, #999); box-shadow: none; } } + // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { @@ -83,8 +84,8 @@ select, .select { // Safari requires -webkit- -webkit-appearance: none; appearance: none; - background: @inputBackground url("data:image/svg+xml,") right center/1em no-repeat border-box; - border: 1px solid @inputBorder; + background: var(--input-bg-clr, #fff) url("data:image/svg+xml,") right center/1em no-repeat border-box; + border: 1px solid var(--input-border-clr, #ccc); cursor: pointer; padding-right: 1.5em; width: 223px; // default input width + 10px of padding that doesn't get applied @@ -139,7 +140,22 @@ textarea[readonly] { // Error .control-group.error { - .formFieldState(@errorText, @errorText, @errorBackground); + > label { + color: var(--error-clr, #b94a48); + } + // Style inputs accordingly + input, + select, + textarea { + color: var(--error-clr, #b94a48); + border-color: var(--error-border-clr, #eed3d7); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work + &:focus { + border-color: var(--error-clr, #b94a48); + // 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 var(--error-border-clr, #eed3d7); + } + } } // HORIZONTAL FORMS @@ -161,7 +177,7 @@ textarea[readonly] { // Margin to space out fieldsets .control-group { - margin-bottom: (@baseLineHeight / 2); + margin-bottom: 0.715em; } // Horizontal-specific styles @@ -170,7 +186,7 @@ textarea[readonly] { .form-horizontal { // Increase spacing between groups .control-group { - margin-bottom: @baseLineHeight; + margin-bottom: 1.43em; > label { display: inline-block; diff --git a/vendors/bootstrap/less/mixins.less b/vendors/bootstrap/less/mixins.less index 6fa1e53de..dd06b8441 100644 --- a/vendors/bootstrap/less/mixins.less +++ b/vendors/bootstrap/less/mixins.less @@ -29,29 +29,6 @@ -// 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 // -------------------------------------------------- diff --git a/vendors/bootstrap/less/navs.less b/vendors/bootstrap/less/navs.less deleted file mode 100644 index 66e1c3fde..000000000 --- a/vendors/bootstrap/less/navs.less +++ /dev/null @@ -1,22 +0,0 @@ -// -// Navs -// -------------------------------------------------- - - -// BASE CLASS -// ---------- - -.nav { - margin-left: 0; - margin-bottom: @baseLineHeight; - list-style: none; -} - -// Make links block level -.nav > li > a { - display: block; -} -.nav > li > a:hover { - text-decoration: none; - background-color: @grayLighter; -} diff --git a/vendors/bootstrap/less/tables.less b/vendors/bootstrap/less/tables.less index 3cc6408d0..b0908eaec 100644 --- a/vendors/bootstrap/less/tables.less +++ b/vendors/bootstrap/less/tables.less @@ -9,19 +9,18 @@ // table { .table { max-width: 100%; - background-color: @tableBackground; border-collapse: collapse; border-spacing: 0; width: 100%; - margin-bottom: @baseLineHeight; + margin-bottom: 1.43em; // Cells th, td { padding: 8px; - line-height: @baseLineHeight; + line-height: 1.43em; text-align: left; vertical-align: text-top; - border-top: 1px solid @tableBorder; + border-top: 1px solid var(--border-color, #ddd); } th { font-weight: bold; @@ -45,12 +44,12 @@ // ---------------- .table-bordered { - border: 1px solid @tableBorder; + border: 1px solid var(--border-color, #ddd); border-collapse: separate; // Done so we can round those corners! border-radius: 4px; th + th, td + td { - border-left: 1px solid @tableBorder; + border-left: 1px solid var(--border-color, #ddd); } // Prevent a double border colgroup + thead tr:first-child th, @@ -105,7 +104,7 @@ tbody { tr:nth-child(odd) td, tr:nth-child(odd) th { - background-color: @tableBackgroundAccent; + background-color: var(--tr-odd-bg-clr, #f9f9f9); } } } @@ -118,7 +117,7 @@ tbody { tr:hover td, tr:hover th { - background-color: @tableBackgroundHover; + background-color: var(--tr-hover-bg-clr, #f5f5f5); } } } diff --git a/vendors/bootstrap/less/type.less b/vendors/bootstrap/less/type.less index aa77999a7..986b5f068 100644 --- a/vendors/bootstrap/less/type.less +++ b/vendors/bootstrap/less/type.less @@ -7,7 +7,7 @@ // ------------------------- p { - margin: (@baseLineHeight / 2) 0; + margin: 0.715em 0; } @@ -33,7 +33,7 @@ cite { h1, h2, h3, h4, h5, h6 { line-height: 40px; - margin: (@baseLineHeight / 2) 0; + margin: 0.715em 0; text-rendering: optimizelegibility; // Fix the character spacing for headings } h1 { font-size: 36px; } @@ -51,7 +51,7 @@ h4, h5, h6 { line-height: 20px; } // Unordered and Ordered lists ul, ol { padding: 0; - margin: 0 0 (@baseLineHeight / 2) 25px; + margin: 0 0 0.715em 25px; } ul ul, ul ol, @@ -60,7 +60,7 @@ ol ul { margin-bottom: 0; } li { - line-height: @baseLineHeight; + line-height: 1.43em; } // MISC @@ -68,29 +68,18 @@ li { // Horizontal rules hr { - margin: @baseLineHeight 0; + margin: 1.43em 0; border: 0; - border-bottom: 1px solid @hrBorder; + border-bottom: 1px solid var(--hr-color, #eee); box-sizing: content-box; height: 0; } -// Abbreviations and acronyms -abbr[title] { - cursor: help; - border-bottom: 1px dotted @grayLight; - text-decoration: none; -} - // Blockquotes blockquote { padding: 0 0 0 15px; - margin: 0 0 @baseLineHeight; - border-left: 5px solid @grayLighter; - p { - margin-bottom: 0; - line-height: (@baseLineHeight * 1.25); - } + margin: 0 0 1.43em; + border-left: 5px solid var(--border-color, #ddd); } // Quotes @@ -104,7 +93,7 @@ blockquote::after { // Addresses address { display: block; - margin-bottom: @baseLineHeight; + margin-bottom: 1.43em; font-style: normal; - line-height: @baseLineHeight; + line-height: 1.43em; } diff --git a/vendors/bootstrap/less/variables.less b/vendors/bootstrap/less/variables.less index 6d2df90a2..e3cfc008e 100644 --- a/vendors/bootstrap/less/variables.less +++ b/vendors/bootstrap/less/variables.less @@ -2,133 +2,9 @@ // Variables // -------------------------------------------------- - -// Global values -// -------------------------------------------------- - - -// Grays -// ------------------------- -@black: #000; -@grayDark: #333; -@gray: #555; -@grayLight: #999; -@grayLighter: #eee; -@white: #fff; - - -// Scaffolding -// ------------------------- -@textColor: @grayDark; - - -// Links -// ------------------------- -@linkColor: #08c; -@linkColorHover: darken(@linkColor, 15%); - - -// Typography -// ------------------------- -@baseFontSize: 14px; -@baseLineHeight: 1.43em; - -// Tables -// ------------------------- -@tableBackground: transparent; // overall background-color -@tableBackgroundAccent: #f9f9f9; // for striping -@tableBackgroundHover: #f5f5f5; // for hover -@tableBorder: var(--border-color, #ddd); // table and cell border - - -// Buttons -// ------------------------- -@btnBackground: @white; -@btnBackgroundHighlight: darken(@white, 10%); -@btnBorder: #bbb; - -@btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); - -@btnInfoBackground: #5bc0de; -@btnInfoBackgroundHighlight: #2f96b4; - -@btnSuccessBackground: #84AB04; -@btnSuccessBackgroundHighlight: #51a351; - -@btnWarningBackground: lighten(#f89406, 15%); -@btnWarningBackgroundHighlight: #f89406; - -@btnDangerBackground: #ee5f5b; -@btnDangerBackgroundHighlight: #bd362f; - - -// Forms -// ------------------------- -@inputBackground: @white; -@inputBorder: #ccc; -@inputBorderRadius: 3px; -@formActionsBackground: #f5f5f5; - -// Dropdowns -// ------------------------- -@dropdownBackground: @white; -@dropdownBorder: rgba(0,0,0,.2); -@dropdownDividerTop: #e5e5e5; -@dropdownDividerBottom: @white; - -@dropdownLinkColor: @grayDark; - -@dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; - -@dropdownLinkColorActive: @dropdownLinkColor; -@dropdownLinkBackgroundActive: @linkColor; - - - -// COMPONENT VARIABLES -// -------------------------------------------------- - -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -@zindexDropdown: 1000; -@zindexPopover: 1010; -@zindexTooltip: 1030; -@zindexFixedNavbar: 1030; -@zindexModal: 1101; - - -// Hr border color -// ------------------------- -@hrBorder: @grayLighter; - - -// Form states and alerts -// ------------------------- -@warningText: #c09853; -@warningBackground: #fcf8e3; -@warningBorder: darken(spin(@warningBackground, -10), 3%); - -@errorText: #b94a48; -@errorBackground: #f2dede; -@errorBorder: darken(spin(@errorBackground, -10), 3%); - -@successText: #468847; -@successBackground: #dff0d8; -@successBorder: darken(spin(@successBackground, -10), 5%); - -@infoText: #3a87ad; -@infoBackground: #d9edf7; -@infoBorder: darken(spin(@infoBackground, -10), 7%); - - // GRID // -------------------------------------------------- - // Default 940px grid // ------------------------- @gridColumns: 12;