From 008a031493e25b3dfe44204da33a43585e4753f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 14:07:41 +0100 Subject: [PATCH] ux(sass): fixes and tweaks --- public/app/core/components/navbar/navbar.html | 37 +++-- public/app/core/components/navbar/navbar.ts | 1 + .../app/features/org/partials/orgDetails.html | 3 +- .../app/features/org/partials/orgUsers.html | 10 +- public/sass/_old_responsive.scss | 2 +- public/sass/_variables.dark.scss | 1 - public/sass/_variables.scss | 6 +- public/sass/base/_forms.scss | 143 ++++++++---------- public/sass/components/_gf-form.scss | 82 +++++----- public/sass/components/_navbar.scss | 2 +- public/sass/components/_navs.scss | 141 ++--------------- public/sass/components/_tabs.scss | 5 +- public/sass/components/_tightform.scss | 6 +- public/sass/layout/_page.scss | 5 +- 14 files changed, 149 insertions(+), 295 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index aeb2c8b04fd..41757d54cc1 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,22 +1,19 @@ -
-
-
- - - - - - - -
- - -
- - -
- -
+
+
+ + + + + + +
-
+ +
+ + +
+ +
+
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 044c2579820..9332f43542c 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -25,6 +25,7 @@ export function navbarDirective() { }, link: function(scope, elem, attrs, ctrl) { ctrl.icon = attrs.icon; + elem.addClass('navbar'); } }; } diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index a5f6c9305e7..dcac1de7935 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -17,9 +17,10 @@
-

Address

+

Address

+
Address1 diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index e765be865d4..d6845f6f327 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -2,15 +2,13 @@
-
- - - -

Organization users

-
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 7da5f5c20be..71bc420c4f5 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -28,7 +28,7 @@ display: none; } .page-container { - padding: 10px 20px; + padding: ($spacer * 1) ($spacer * 2); } } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index d62eed99bb0..c2557fc9a65 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -105,7 +105,6 @@ $table-border: $gray-dark; // table and cell border // ------------------------- $btnBackground: $gray-dark; $btnBackgroundHighlight: darken($gray-light, 15%); -$btnBackgroundShadow: darken($gray-light, 15%); $btnBorder: #bbb; $btnPrimaryBackground: $blue-dark; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 85666374912..6a18034273f 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -78,8 +78,8 @@ $grid-gutter-width: 30px !default; $enable-flex: false; $form-sizes: ( - xs: 60px, - sm: 80px, + xs: 80px, + sm: 100px, md: 120px, lg: 150px, xl: 200px, @@ -172,7 +172,7 @@ $table-sm-cell-padding: .3rem !default; // Forms $input-padding-x: .75rem !default; $input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; +$input-line-height: 1.25rem !default; $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index b3d65bc3614..edc73cfcfd6 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -6,17 +6,6 @@ // GENERAL STYLES // -------------- -// Make all forms have space below them -form { - margin: 0 0 $line-height-base; -} - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - // Groups of fields with labels on top (legends) legend { display: block; @@ -56,84 +45,69 @@ label { display: block; } -// Form controls -// ------------------------- +// // Form controls +// // ------------------------- +// +// // Shared size and type resets +// select, +// textarea, +// input[type="text"], +// input[type="password"], +// input[type="datetime"], +// input[type="datetime-local"], +// input[type="date"], +// input[type="month"], +// input[type="time"], +// input[type="week"], +// input[type="number"], +// input[type="email"], +// input[type="url"], +// input[type="search"], +// input[type="tel"], +// input[type="color"], +// .uneditable-input { +// display: inline-block; +// height: $input-height; +// line-height: $input-line-height; +// padding: 4px 6px; +// font-size: $font-size-base; +// color: $input-color; +// vertical-align: top; +// } -// Shared size and type resets -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - display: inline-block; - height: $input-height; - line-height: $input-line-height; - padding: 4px 6px; - font-size: $font-size-base; - color: $input-color; - vertical-align: top; -} - -// Reset appearance properties for textual inputs and textarea -// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) -input, -textarea, -.uneditable-input { - width: 206px; // plus 12px padding and 2px border -} // Reset height since textareas have rows textarea { height: auto; } -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - background-color: $input-bg; - border: 1px solid $input-border-color; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @include transition("border linear .2s, box-shadow linear .2s"); - - // Focus state - &:focus { - border-color: rgba(82,168,236, .8); - outline: 0; - @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; -} +// // Everything else +// textarea, +// input[type="text"], +// input[type="password"], +// input[type="datetime"], +// input[type="datetime-local"], +// input[type="date"], +// input[type="month"], +// input[type="time"], +// input[type="week"], +// input[type="number"], +// input[type="email"], +// input[type="url"], +// input[type="search"], +// input[type="tel"], +// input[type="color"] { +// background-color: $input-bg; +// border: 1px solid $input-border-color; +// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); +// @include transition("border linear .2s, box-shadow linear .2s"); +// +// // Focus state +// &:focus { +// border-color: rgba(82,168,236, .8); +// outline: 0; +// @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); +// } +// } // Reset width of input images, buttons, radios, checkboxes input[type="file"], @@ -207,7 +181,7 @@ textarea[disabled], input[readonly], select[readonly], textarea[readonly] { - cursor: not-allowed; + cursor: $cursor-disabled; background-color: $input-bg-disabled; } @@ -216,6 +190,7 @@ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { + cursor: $cursor-disabled; background-color: transparent; } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index a9a319a64f1..94b89e04336 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -42,12 +42,15 @@ $gf-form-margin: 4px; } .gf-form-label { + padding: $input-padding-y $input-padding-x; + line-height: $input-line-height; flex-shrink: 0; + background-color: $input-label-bg; display: block; - padding: 8px 7px; font-size: $font-size-sm; margin-right: $gf-form-margin; + border: $input-btn-border-width solid transparent; } .gf-form-checkbox { @@ -65,53 +68,46 @@ $gf-form-margin: 4px; .gf-size-max { width: 100%; } .gf-size-auto { width: auto; } +.gf-form-input { + display: block; + width: 100%; + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + background-image: none; + background-clip: padding-box; + border: $input-btn-border-width solid $input-border-color; + @include border-radius($input-border-radius); + @include box-shadow($input-box-shadow); + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -select, -[type=text], -[type=email], -[type=number], -[type=password] { - &.gf-form-input { - display: block; - width: 100%; - padding: $input-padding-y $input-padding-x; - font-size: $font-size-base; - line-height: $input-line-height; - color: $input-color; - background-color: $input-bg; - background-image: none; - background-clip: padding-box; - border: $input-btn-border-width solid $input-border-color; - @include border-radius($input-border-radius); - @include box-shadow($input-box-shadow); - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + // Unstyle the caret on ``s in IE10+. - &::-ms-expand { - background-color: transparent; - border: 0; - } + // Customize the `:focus` state to imitate native WebKit styles. + @include form-control-focus(); - // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus(); + // Placeholder + &::placeholder { + color: $input-color-placeholder; + // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. + opacity: 1; + } - // Placeholder - &::placeholder { - color: $input-color-placeholder; - // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. - opacity: 1; - } + &:disabled, + &[readonly] { + background-color: $input-bg-disabled; + // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. + opacity: 1; + } - &:disabled, - &[readonly] { - background-color: $input-bg-disabled; - // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. - opacity: 1; - } - - &:disabled { - cursor: $cursor-disabled; - } + &:disabled { + cursor: $cursor-disabled; } &.gf-size-auto { width: auto; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9b0f8df4a0a..ebed9c1bca8 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,6 +1,6 @@ - .navbar { + display: block; overflow: visible; position: relative; z-index: 110; diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index 2087feef823..0d904d4d8a8 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -16,78 +16,23 @@ .nav > li > a { display: block; } -.nav > li > a:hover, -.nav > li > a:focus { - text-decoration: none; - background-color: $gray-lighter; -} // Redeclare pull classes because of specifity .nav > .pull-right { float: right; } -// Nav headers (for dropdowns and lists) -.nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: $line-height-base; - color: $gray-light; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} -// Space them out when they follow another list item (link) -.nav li + .nav-header { - margin-top: 9px; -} - - - -// NAV LIST -// -------- - -.nav-list { - padding-left: 15px; - padding-right: 15px; - margin-bottom: 0; -} -.nav-list > li > a, -.nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list > .active > a, -.nav-list > .active > a:hover, -.nav-list > .active > a:focus { - color: $white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: $link-color; -} -.nav-list [class^="icon-"], -.nav-list [class*=" icon-"] { - margin-right: 2px; -} - // TABS AND PILLS // ------------- // Common styles -.nav-tabs, -.nav-pills { +.nav-tabs { @include clearfix(); } -.nav-tabs > li, -.nav-pills > li { +.nav-tabs > li { float: left; } -.nav-tabs > li > a, -.nav-pills > li > a { +.nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; @@ -99,12 +44,16 @@ // Give the tabs something to sit on .nav-tabs { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid $divider-border-color; + padding-left: 10px; + margin: 0 0 10px 0; } + // Make the list-items overlay the bottom border .nav-tabs > li { margin-bottom: -1px; } + // Actual tabs (as links) .nav-tabs > li > a { padding-top: 8px; @@ -114,80 +63,18 @@ @include border-radius(4px 4px 0 0); &:hover, &:focus { - border-color: $gray-lighter $gray-lighter #ddd; + border-color: $divider-border-color; } } // Active state, and it's :hover/:focus to override normal :hover/:focus .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { - color: $gray; - background-color: $body-bg; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} - - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: $link-color; - border-bottom-color: $link-color; - margin-top: 6px; -} -.nav .dropdown-toggle:hover .caret, -.nav .dropdown-toggle:focus .caret { - border-top-color: $link-hover-color; - border-bottom-color: $link-hover-color; -} -/* move down carets for tabs */ -.nav-tabs .dropdown-toggle .caret { - margin-top: 8px; -} - -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: $gray; - border-bottom-color: $gray; -} - -// Active:hover/:focus dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover, -.nav > .dropdown.active > a:focus { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover, -.nav > li.dropdown.open.active > a:focus { - color: $white; - background-color: $gray-light; - border-color: $gray-light; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret, -.nav li.dropdown.open a:focus .caret { - border-top-color: $white; - border-bottom-color: $white; - @include opacity(100); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover, -.tabs-stacked .open > a:focus { - border-color: $gray-light; + @include border-radius(3px); + border: 1px solid $divider-border-color; + background-color: transparent; + border-bottom: 1px solid $panel-bg; + color: $link-color; } // Show/hide tabbable areas diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index f01933927b5..7535d9f44b3 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,8 +1,5 @@ .nav-tabs-alt { - border-bottom: 1px solid $divider-border-color; - padding-left: 10px; - margin: 0 0 10px 0; & > li > a { color: darken($link-color, 20%); @@ -16,7 +13,7 @@ li.active > a:focus, li.active > a:hover { @include border-radius(3px); - border: 1px solid $divider-border-color; + border: 1px solid $divider-border-color; background-color: transparent; border-bottom: 1px solid $panel-bg; color: $link-color; diff --git a/public/sass/components/_tightform.scss b/public/sass/components/_tightform.scss index 1afbadbb63c..efbdd71710e 100644 --- a/public/sass/components/_tightform.scss +++ b/public/sass/components/_tightform.scss @@ -112,7 +112,7 @@ .tight-form-func { background: $tight-form-func-bg; - + &.show-function-controls { padding-top: 5px; min-width: 100px; @@ -131,7 +131,7 @@ input[type=text].tight-form-clear-input { padding: 8px 7px; border: none; margin: 0px; - background: transparent; + background: transparent; border-radius: 0; border-right: 1px solid $tight-form-border; } @@ -141,6 +141,7 @@ input[type=text].tight-form-clear-input { [type=number], [type=password] { &.tight-form-input { + background-color: $input-bg; border: none; border-right: 1px solid $tight-form-border; margin: 0px; @@ -167,6 +168,7 @@ input[type=checkbox].tight-form-checkbox { select.tight-form-input { border: none; border-right: 1px solid $tight-form-border; + background-color: $input-bg; margin: 0px; border-radius: 0; height: 36px; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 4c492b83731..40969799141 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -25,10 +25,11 @@ .page-container { background-color: $page-bg; position: relative; - padding: 25px 56px 10px 56px; + padding: ($spacer * 2) ($spacer * 4); max-width: 1060px; margin-left: 0; - height: 100%; + //min-height: 100%; + padding-bottom: $spacer * 5; } .page-header {