From 0f265bb81e6610c83118f82694e0ff2d89303581 Mon Sep 17 00:00:00 2001 From: Jon Price Date: Thu, 8 Aug 2013 11:31:34 +1000 Subject: [PATCH] added more strength to the css to override site styles, focus on buttons and tabs and form prepend --- .../static/fancypages/less/buttons.less | 5 +- fancypages/static/fancypages/less/editor.less | 4 +- fancypages/static/fancypages/less/forms.less | 67 +++++++++++++++---- fancypages/static/fancypages/less/modal.less | 8 ++- fancypages/static/fancypages/less/tabs.less | 8 +-- .../static/fancypages/less/widgets.less | 12 ++-- 6 files changed, 77 insertions(+), 27 deletions(-) diff --git a/fancypages/static/fancypages/less/buttons.less b/fancypages/static/fancypages/less/buttons.less index 264e16c..38684fc 100644 --- a/fancypages/static/fancypages/less/buttons.less +++ b/fancypages/static/fancypages/less/buttons.less @@ -1,4 +1,6 @@ -.fp-btn { +.fp-btn, +button.fp-btn, +a.fp-btn { display: inline-block; *display: inline; *zoom: 1; @@ -6,6 +8,7 @@ margin-bottom: 0; font-size: 14px; line-height: 20px; + height:auto; text-align: center; text-transform: capitalize; vertical-align: middle; diff --git a/fancypages/static/fancypages/less/editor.less b/fancypages/static/fancypages/less/editor.less index 2f77f58..040d6be 100644 --- a/fancypages/static/fancypages/less/editor.less +++ b/fancypages/static/fancypages/less/editor.less @@ -90,6 +90,7 @@ border-bottom:1px solid @grayLight; margin-bottom:@baseLineHeight; font-size:@baseFontSize + 4; + text-transform: capitalize; span { font-size:18px; } @@ -137,10 +138,11 @@ } } //Editor CLose +//!importants are here because these tabs are inside a modal in the site markup .fp-editor-controls { border-bottom:1px solid @grayDarker; .clearfix(); - .fp-close { + button.fp-close { color: #fff; padding: 15px; background: #555; diff --git a/fancypages/static/fancypages/less/forms.less b/fancypages/static/fancypages/less/forms.less index 6e41e01..78fb47d 100644 --- a/fancypages/static/fancypages/less/forms.less +++ b/fancypages/static/fancypages/less/forms.less @@ -1,10 +1,10 @@ // Set font for forms #block_input_wrapper { - label, - input, - button, - select, - textarea { + label, + input, + button, + select, + textarea { #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here } input, @@ -18,6 +18,7 @@ label { display: block; margin-bottom: 5px; + text-transform: capitalize; } // Form controls @@ -184,7 +185,8 @@ // ------------ // Allow us to put symbols and text within the input field for a cleaner look - .input-append { + .input-append, + .input-prepend { display: inline-block; margin-bottom: @baseLineHeight / 2; vertical-align: middle; @@ -193,12 +195,14 @@ // Reset the white space collapse hack input, - select { + select, + .uneditable-input { font-size: @baseFontSize; } input, - select { + select, + .uneditable-input { position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms *margin-left: 0; @@ -210,26 +214,61 @@ z-index: 2; } } - - .fp-btn { + .add-on { + display: inline-block; + width: auto; + height: @baseLineHeight; + min-width: 16px; + padding: 4px 5px; + font-size: @baseFontSize; + font-weight: normal; + line-height: @baseLineHeight; + text-align: center; + text-shadow: 0 1px 0 @white; + background-color: @grayLighter; + border: 1px solid #ccc; + } + .add-on, + .fp-btn, + .fp-btn-group > .dropdown-toggle { vertical-align: top; .border-radius(0); } + .active { + background-color: lighten(@green, 30); + border-color: @green; + } } + .input-prepend { + .add-on, + .fp-btn { + margin-right: -1px; + } + .add-on:first-child, + .fp-btn:first-child { + // FYI, `.btn:first-child` accounts for a button group that's prepended + .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); + } + } .input-append { input, - select { + select, + .uneditable-input { .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - + .fp-btn-group .btn:last-child { + + .fp-btn-group .fp-btn:last-child { .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } } - .fp-btn { + .add-on, + .fp-btn, + .fp-btn-group { margin-left: -1px; } - .fp-btn:last-child { + .add-on:last-child, + .fp-btn:last-child, + .fp-btn-group:last-child > .dropdown-toggle { .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } } diff --git a/fancypages/static/fancypages/less/modal.less b/fancypages/static/fancypages/less/modal.less index 751113f..af08d6b 100644 --- a/fancypages/static/fancypages/less/modal.less +++ b/fancypages/static/fancypages/less/modal.less @@ -56,6 +56,7 @@ margin: 0; line-height: 30px; font-size:@baseFontSize + 4; + text-transform: capitalize; } } @@ -97,12 +98,14 @@ } } -.fp-close { +.fp-close, +button.fp-close { float: right; font-size: 20px; font-weight: bold; line-height: @baseLineHeight; color: @black; + height:auto; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); &:hover, @@ -110,6 +113,9 @@ color: @black; text-decoration: none; cursor: pointer; + background:none; + .box-shadow(none); + .border-radius(0); .opacity(40); } } diff --git a/fancypages/static/fancypages/less/tabs.less b/fancypages/static/fancypages/less/tabs.less index 42d7902..bb5fd51 100644 --- a/fancypages/static/fancypages/less/tabs.less +++ b/fancypages/static/fancypages/less/tabs.less @@ -1,10 +1,9 @@ // BASE CLASS // ---------- - +//!importants are here because these tabs are inside a modal in the site markup .fp-nav-tabs { - margin-left: 0; + margin: 0 0 @baseLineHeight!important; padding-left:0; - margin-bottom: @baseLineHeight; list-style: none; .clearfix(); } @@ -21,7 +20,8 @@ max-width: none; } .fp-nav-tabs > li { - float: left; + float: left!important; + width:auto!important; } .fp-nav-tabs > li > a { display: block; diff --git a/fancypages/static/fancypages/less/widgets.less b/fancypages/static/fancypages/less/widgets.less index b8926db..289d52d 100644 --- a/fancypages/static/fancypages/less/widgets.less +++ b/fancypages/static/fancypages/less/widgets.less @@ -85,15 +85,15 @@ //Widget Modal Add Content Labels .fp-widget-list { - margin: 0; - padding:0; + margin: 0!important; + padding:0!important; .clearfix(); > li { - display: block; + display: block!important; list-style: none; - float: left; - margin: 0 10px 20px; - width: 200px; + float: left!important; + margin: 0 10px 20px!important; + width: 200px!important; } span { min-height:45px;