From d31472750692ce7976800665ea6ce899b72634b0 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Sun, 26 Oct 2014 17:07:35 +0000 Subject: [PATCH] Var cleanup --- .../client/assets/sass/components/modals.scss | 2 +- .../assets/sass/components/navigation.scss | 6 +- .../assets/sass/components/notifications.scss | 6 +- .../assets/sass/components/pagination.scss | 10 +- .../assets/sass/components/settings-menu.scss | 6 +- .../assets/sass/components/uploader.scss | 4 +- core/client/assets/sass/layouts/about.scss | 2 +- core/client/assets/sass/layouts/default.scss | 4 +- core/client/assets/sass/layouts/editor.scss | 6 +- core/client/assets/sass/layouts/user.scss | 6 +- core/client/assets/sass/modules/icons.scss | 59 ++++----- core/client/assets/sass/modules/mixins.scss | 115 ++++-------------- .../client/assets/sass/modules/variables.scss | 73 +++-------- core/client/assets/sass/patterns/buttons.scss | 4 +- core/client/assets/sass/patterns/forms.scss | 4 +- core/client/assets/sass/patterns/navlist.scss | 10 +- core/client/assets/sass/screen.scss | 2 +- 17 files changed, 94 insertions(+), 225 deletions(-) diff --git a/core/client/assets/sass/components/modals.scss b/core/client/assets/sass/components/modals.scss index 0c4a351f64..4d20db3b3b 100644 --- a/core/client/assets/sass/components/modals.scss +++ b/core/client/assets/sass/components/modals.scss @@ -87,7 +87,7 @@ padding: 18px; background-clip: padding-box; background-color: #FFFFFF; - border-radius: $rounded; + border-radius: $border-radius; box-shadow: rgba(0,0,0,0.2) 0 0 0 6px; .close { diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss index 82260a5eb1..926c305d12 100644 --- a/core/client/assets/sass/components/navigation.scss +++ b/core/client/assets/sass/components/navigation.scss @@ -12,7 +12,7 @@ left: 0; z-index: 800; background: $darkgrey; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); i:before { display: inline-block; @@ -190,7 +190,7 @@ -webkit-overflow-scrolling: touch; transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); .thing, .thing2 { display: block; @@ -317,7 +317,7 @@ bottom: 0; left: 0; z-index: 600; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); transform: translate3d(260px, 0px, 0px); // Not off the screen, to give a parallax effect }//.nav-cover }//body.global-nav-expanded diff --git a/core/client/assets/sass/components/notifications.scss b/core/client/assets/sass/components/notifications.scss index 1d4de59d08..1b2ff699bd 100644 --- a/core/client/assets/sass/components/notifications.scss +++ b/core/client/assets/sass/components/notifications.scss @@ -11,7 +11,7 @@ left: 0; z-index: 980; width: 300px; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); // This selector ends up being `body.settings-menu-expanded .notifications` body.settings-menu-expanded & { @@ -25,7 +25,7 @@ left: 0; right: 0; z-index: 9999; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); // This selector ends up being `body.settings-menu-expanded .notifications` body.settings-menu-expanded & { @@ -62,7 +62,7 @@ color: rgba(255,255,255,0.9); background: $blue; position: relative; - box-shadow: $shadow; + box-shadow: $box-shadow; transform: translateZ(0); @media (max-width: 400px) { diff --git a/core/client/assets/sass/components/pagination.scss b/core/client/assets/sass/components/pagination.scss index e62f3bac8f..882b099232 100644 --- a/core/client/assets/sass/components/pagination.scss +++ b/core/client/assets/sass/components/pagination.scss @@ -5,7 +5,7 @@ display: inline-block; padding-left: 0; margin: 20px 0; - border-radius: $rounded; + border-radius: $border-radius; > li { display: inline; // Remove list-style and block-level defaults @@ -25,15 +25,15 @@ > a, > span { margin-left: 0; - border-top-left-radius: $rounded; - border-bottom-left-radius: $rounded; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; } } &:last-child { > a, > span { - border-top-right-radius: $rounded; - border-bottom-right-radius: $rounded; + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; } } } diff --git a/core/client/assets/sass/components/settings-menu.scss b/core/client/assets/sass/components/settings-menu.scss index f738a0df6b..ac53ca5c2c 100644 --- a/core/client/assets/sass/components/settings-menu.scss +++ b/core/client/assets/sass/components/settings-menu.scss @@ -13,7 +13,7 @@ right: 0; bottom: 0; overflow: hidden; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); transform: translate3d(60px, 0px, 0px); // This selector ends up being `body.settings-menu-expanded .settings-menu-container` @@ -32,7 +32,7 @@ -webkit-overflow-scrolling: touch; @media (min-width: 901px) { - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); } &.settings-menu-pane-out-left { @@ -164,7 +164,7 @@ body.settings-menu-expanded { bottom: 0; left: 0; z-index: 600; - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect }//.editor-cover diff --git a/core/client/assets/sass/components/uploader.scss b/core/client/assets/sass/components/uploader.scss index fce5d1f80e..93921abfa1 100644 --- a/core/client/assets/sass/components/uploader.scss +++ b/core/client/assets/sass/components/uploader.scss @@ -43,7 +43,7 @@ left: 0; color: $brown; text-decoration: none; - @include user-select(none); + user-select: none; &:hover { cursor: pointer; @@ -189,7 +189,7 @@ color: #fff; text-decoration: none; line-height: 0; - border-radius: $rounded; + border-radius: $border-radius; background: rgba(0,0,0,0.6); box-shadow: rgba(255,255,255,0.2) 0 0 0 1px; diff --git a/core/client/assets/sass/layouts/about.scss b/core/client/assets/sass/layouts/about.scss index 417a16bf8a..46f8f33e0b 100644 --- a/core/client/assets/sass/layouts/about.scss +++ b/core/client/assets/sass/layouts/about.scss @@ -179,7 +179,7 @@ background: $darkgrey; color: #fff; padding: 2px 6px 3px; - border-radius: $rounded; + border-radius: $border-radius; transition: opacity 0.15s ease-in-out; font-size: 1rem; pointer-events: none; diff --git a/core/client/assets/sass/layouts/default.scss b/core/client/assets/sass/layouts/default.scss index 44c7af92db..3ffab74c3c 100644 --- a/core/client/assets/sass/layouts/default.scss +++ b/core/client/assets/sass/layouts/default.scss @@ -24,10 +24,10 @@ left: 0; overflow: hidden; z-index: 500; // Above the .global-nav when collapsed - transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier); @media (max-width: 900px) { - transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1); + transition: transform 0.4s cubic-bezier($settings-menu-bezier); } // This selector ends up being `body.settings-menu-expanded .viewport` diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index fccdcfd53b..e33931de35 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -272,7 +272,7 @@ -webkit-overflow-scrolling: touch; word-break: break-word; hyphens: auto; - @include user-select(none); + user-select: none; cursor: default; // Tweak padding for smaller screens @@ -521,10 +521,10 @@ body.zen { color: $lightgrey; white-space: nowrap; background: lighten($grey, 15%); - border-radius: $rounded; + border-radius: $border-radius; box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, #000 0 1px 3px; - @include user-select(none); + user-select: none; &:hover { cursor: pointer; diff --git a/core/client/assets/sass/layouts/user.scss b/core/client/assets/sass/layouts/user.scss index a9c495621e..d2f36de8df 100644 --- a/core/client/assets/sass/layouts/user.scss +++ b/core/client/assets/sass/layouts/user.scss @@ -51,7 +51,7 @@ color: rgba(255,255,255,0.8); z-index: 2; border-width: 0; - border-radius: $rounded; + border-radius: $border-radius; transition: color 0.3s ease, background 0.3s ease; @media (max-width: 1000px) { right: 15px; @@ -135,7 +135,7 @@ .user-image { display: block; position: absolute; - + @media (min-width: 651px) { top: -19px; left: -98px; @@ -145,7 +145,7 @@ top: -159px; left: 21px; } - + width: 126px; height: 126px; float: left; diff --git a/core/client/assets/sass/modules/icons.scss b/core/client/assets/sass/modules/icons.scss index 3c81b51fe3..2d73cb4bac 100755 --- a/core/client/assets/sass/modules/icons.scss +++ b/core/client/assets/sass/modules/icons.scss @@ -15,24 +15,32 @@ } + +// +// The Icon (before) Mixin +// -------------------------------------------------- + +%icon-base { + font-family: "GhostIcons"; + font-weight: normal; + font-style: normal; + vertical-align: -7%; + text-transform:none; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + // // The Icon (before) Mixin // -------------------------------------------------- @mixin icon($char, $size: '', $color: '') { &:before { - // Base - font-family: "GhostIcons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform:none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + @extend %icon-base; - //Function content: '#{$char}'; @if $size != '' { font-size: $size; @@ -54,18 +62,8 @@ @mixin icon-after($char, $size: '', $color: '') { &:after { - // Base - font-family: "GhostIcons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform:none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + @extend %icon-base; - // Function content: '#{$char}'; @if $size != '' { font-size: $size; @@ -89,7 +87,7 @@ // Private Use Area characters. This means that screen readers won't attempt to // read them out loud. For code maintainability, we then store these Unicode // references inside Sass variables. -// +// // Placeholder $i: \e018; @@ -168,15 +166,7 @@ $i-code: \e03e; [class*=icon-] { &:before { - // Base - font-family: "GhostIcons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform:none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; + @extend %icon-base; } &:hover { @@ -189,11 +179,6 @@ $i-code: \e03e; // Icon Classes // -------------------------------------------------- -[class*='icon-'] { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - .icon-ghost:before { content: '#{$i-ghost}'; } diff --git a/core/client/assets/sass/modules/mixins.scss b/core/client/assets/sass/modules/mixins.scss index 4b58757359..e8e6b26fe4 100644 --- a/core/client/assets/sass/modules/mixins.scss +++ b/core/client/assets/sass/modules/mixins.scss @@ -1,109 +1,38 @@ // -// Styles +// Mixins // -------------------------------------------------- + +// Baseline margin @mixin baseline { margin: 1.6em 0; } + +// Fix for clearing float-based overflows @mixin clearfix { - &:after { - content:""; - display:table; - clear:both; - } + &:after { + content: ""; + display: table; + clear: both; + } } -// User select -// For selecting text on the page - -@mixin user-select($select) { - -webkit-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; // IE10+ - user-select: $select; -} // WebKit-style focus - +// From Bootstrap @mixin tab-focus() { - // Default - outline: thin dotted; - // WebKit - outline: 0px auto -webkit-focus-ring-color; - outline-offset: -2px; + // Default + outline: thin dotted; + // WebKit + outline: 0px auto -webkit-focus-ring-color; + outline-offset: -2px; } -@mixin form-control-focus($color: #66afe9) { - $color-rgba: rgba(red($color), green($color), blue($color), .6); - &:focus { - border-color: $color; - outline: 0; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba; - } -} - -@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { - #{$parent} { - height: $input-height; - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - line-height: $line-height; - border-radius: $border-radius; - } - - select#{$parent} { - height: $input-height; - line-height: $input-height; - } - - textarea#{$parent}, - select[multiple]#{$parent} { - height: auto; - } -} - -@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { - // Color the label and help text - .help-block, - .control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - color: $text-color; - } - // Set the border and box shadow on specific inputs to match - .form-control { - border-color: $border-color; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work - &:focus { - border-color: darken($border-color, 10%); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - } - } - // Set validation states also for addons - .input-group-addon { - color: $text-color; - border-color: $border-color; - background-color: $background-color; - } - // Optional feedback icon - .form-control-feedback { - color: $text-color; - } -} - -@mixin make-row($gutter: 30px) { - margin-left: ($gutter / -2); - margin-right: ($gutter / -2); - @include clearfix(); -} - -//==== Simple SCSS mixin to create CSS triangles -//==== Example: @include css-triangle (10px, #fff, "up"); -@mixin triangle ($size: 20px, $color: #000, $direction: "down", $type: "normal") { +// Simple SCSS mixin to create CSS triangles +// Example: @include css-triangle (10px, #fff, "up"); +@mixin triangle($size: 20px, $color: #000, $direction: "down", $type: "normal") { $verticalSize: $size; width: 0; height: 0; @@ -135,12 +64,11 @@ border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)}; border-top: $size solid #{setTriangleColor($direction, "top", $color)}; } - } -//Utility function to return the relevant colour depending on what type of arrow it is -@function setTriangleColor($direction, $side, $color) { +// Utility function to return the relevant colour depending on what type of arrow it is +@function setTriangleColor($direction, $side, $color) { @if $direction == "left" and $side == "right" or $direction == "right" and $side == "left" or $direction == "down" and $side == "top" @@ -149,5 +77,4 @@ } @else { @return "transparent"; } - } \ No newline at end of file diff --git a/core/client/assets/sass/modules/variables.scss b/core/client/assets/sass/modules/variables.scss index 42dc6232c1..f9ae2a1db7 100644 --- a/core/client/assets/sass/modules/variables.scss +++ b/core/client/assets/sass/modules/variables.scss @@ -1,7 +1,13 @@ +// ------------------------------------------------------------ +// Variables // -// Colours -// -------------------------------------------------- +// * Colours +// * Default style values +// * Dropdown & Popover triangles +// ------------------------------------------------------------ + +// Colours $darkgrey: #242628; $grey: #35393b; $midgrey: #7d878a; @@ -15,68 +21,19 @@ $red: #e25440; $orange: #F2A925; $green: #9FBB58; -$list-colours: - ('darkgrey' $darkgrey) - ('grey' $grey) - ('midgrey' $midgrey) - ('lightgrey' $lightgrey) - ('brown' $brown) - ('midbrown' $midbrown) - ('lightbrown' $lightbrown) - ('blue' $blue) - ('red' $red) - ('orange' $orange) - ('green' $green); - -// -// Styles +// Default style values // -------------------------------------------------- -$rounded: 3px; -$shadow: rgba(0,0,0,0.05) 0 1px 5px; -$default-transition-duration: 0.3s; -$side-outlet-transition-duration: 0.4s; - +$border-radius: 3px; +$box-shadow: rgba(0,0,0,0.05) 0 1px 5px; +$settings-menu-transition: 0.4s; +$settings-menu-bezier: 0.1, 0.7, 0.1, 1; $font-family: 'Open Sans', sans-serif; $font-family-mono: monospace; -$at2x: 2 device-pixel-ratio; +// Dropdown & Popover triangles $dropdown_triangle: 8px; - $popover_triangle: 14px; -$popover_triangle_shallow_multiplier: 0.8; - - - - - - - -$padding-small-horizontal: 10px !default; -$padding-large-horizontal: 16px !default; - -$input-height-base: (20px + (6px * 2) + 2) !default; -$input-height-small: (floor(12px * 1.5) + (5px * 2) + 2) !default; -$input-height-large: (ceil(18px * 1.33) + (10px * 2) + 2) !default; - -$border-radius-large: 6px !default; -$border-radius-small: 3px !default; - -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; - -$state-warning-text: #8a6d3b !default; -$state-warning-bg: #fcf8e3 !default; - -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; - -$screen-md: 992px !default; -$screen-md-min: $screen-md !default; - -$screen-sm: 768px !default; -$screen-sm-min: $screen-sm !default; - -$grid-gutter-width: 30px !default; +$popover_triangle_shallow_multiplier: 0.8; // Adjusts the height of the triangle relative to its width, so it's 0.8x the height of the width \ No newline at end of file diff --git a/core/client/assets/sass/patterns/buttons.scss b/core/client/assets/sass/patterns/buttons.scss index 9cbf17c022..21f13df159 100644 --- a/core/client/assets/sass/patterns/buttons.scss +++ b/core/client/assets/sass/patterns/buttons.scss @@ -22,8 +22,8 @@ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid transparent; white-space: nowrap; - border-radius: $rounded; - @include user-select(none); + border-radius: $border-radius; + user-select: none; &, &:active, diff --git a/core/client/assets/sass/patterns/forms.scss b/core/client/assets/sass/patterns/forms.scss index 0c5ff86044..25eb5a3659 100644 --- a/core/client/assets/sass/patterns/forms.scss +++ b/core/client/assets/sass/patterns/forms.scss @@ -151,7 +151,7 @@ select { padding: 8px 10px; width: 100%; border: 1px solid #E0DFD7; - border-radius: $rounded; + border-radius: $border-radius; font-size: 1.4rem; font-weight: normal; @@ -190,7 +190,7 @@ textarea { // .for-checkbox { .input-toggle-component { - border-radius: $rounded; + border-radius: $border-radius; } label { .input-toggle-component { diff --git a/core/client/assets/sass/patterns/navlist.scss b/core/client/assets/sass/patterns/navlist.scss index 955249a935..f4030cd221 100644 --- a/core/client/assets/sass/patterns/navlist.scss +++ b/core/client/assets/sass/patterns/navlist.scss @@ -7,7 +7,7 @@ padding: 0; border: 1px solid #E0DFD7; max-width: 500px; - border-radius: $rounded; + border-radius: $border-radius; background: #FFF; &.nav-list-block { @@ -31,12 +31,12 @@ } &:first-of-type { - border-top-left-radius: $rounded; - border-top-right-radius: $rounded; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; } &:last-of-type { - border-bottom-left-radius: $rounded; - border-bottom-right-radius: $rounded; + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; } &:not(:last-of-type) { diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss index cab7ce5188..727607dcc3 100644 --- a/core/client/assets/sass/screen.scss +++ b/core/client/assets/sass/screen.scss @@ -19,7 +19,7 @@ // -// Patterns: Groups of styles +// Patterns: Groups of Styles // -------------------------------------------------- @import "patterns/global";