diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 57fa343b6b..e0e7297c2f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -86,6 +86,7 @@ For more in depth information please read the official [Ghost Coding Standards]( ### HTML & CSS - Two spaces for HTML indentation. Never tabs. +- Four spaces for SASS indentation. Never tabs. - Double quotes only, never single quotes. - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags) - Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/). diff --git a/core/client/assets/sass/ie.scss b/core/client/assets/sass/ie.scss index 5d5779099c..8a4f4767b5 100644 --- a/core/client/assets/sass/ie.scss +++ b/core/client/assets/sass/ie.scss @@ -1 +1 @@ -/* IE specific override styles. */ +/* IE specific override styles. */ \ No newline at end of file diff --git a/core/client/assets/sass/layouts/dashboard.scss b/core/client/assets/sass/layouts/dashboard.scss index 7759da064a..38ff20005b 100644 --- a/core/client/assets/sass/layouts/dashboard.scss +++ b/core/client/assets/sass/layouts/dashboard.scss @@ -36,77 +36,78 @@ padding-bottom: 15px; } -%widget, .widget { - width: 340px; - height: 300px; - float:left; - position:relative; - background-color:#fff; - box-shadow: $shadow; +%widget, .widget { + width: 340px; + height: 300px; + float:left; + position:relative; + background-color:#fff; + box-shadow: $shadow; - @include breakpoint($mobile) { - width: 100%; - } - - .widget-content { - @include box-sizing(border-box); - margin-bottom: 40px; - padding: 20px; - } - - .widget-footer, .widget-header { - @include box-sizing(border-box); - width: 100%; - height: 40px; - font-size: 1.2em; - color: $midbrown; - border-top: 1px solid $lightbrown; - - .widget-title { - display: inline-block; - padding-top: 7px; - padding-left: 15px; - vertical-align: middle; - text-transform: uppercase; + @include breakpoint($mobile) { + width: 100%; } - } - .widget-settings-toggle { - @include box-sizing(border-box); - display: block; - height: 39px; - width: 46px; - float: right; - padding: 7px 14px; - border-left: 1px solid $lightbrown; - cursor: pointer; - @include icon($i-settings, 1em); - } + .widget-content { + @include box-sizing(border-box); + margin-bottom: 40px; + padding: 20px; + } - .widget-footer { - position: absolute; - bottom: 0; - } -} + .widget-footer, .widget-header { + @include box-sizing(border-box); + width: 100%; + height: 40px; + font-size: 1.2em; + color: $midbrown; + border-top: 1px solid $lightbrown; + + .widget-title { + display: inline-block; + padding-top: 7px; + padding-left: 15px; + vertical-align: middle; + text-transform: uppercase; + } + } + + .widget-settings-toggle { + @include box-sizing(border-box); + display: block; + height: 39px; + width: 46px; + float: right; + padding: 7px 14px; + border-left: 1px solid $lightbrown; + cursor: pointer; + @include icon($i-settings, 1em); + } + + .widget-footer { + position: absolute; + bottom: 0; + } + +} //%widget, .widget .ui-draggable-dragging { - z-index: 9999; // Keep dragged Widget ontop + z-index: 9999; // Keep dragged widget on top } /* ========================================================================== Widget Sizes ========================================================================== */ -.widget-1x2 { +.widget-1x2 { height: 610px; } -.widget-2x2 { +.widget-2x2 { width: 690px; height: 610px; } -.widget-2x1 { +.widget-2x1 { width: 690px; } @@ -120,54 +121,54 @@ ========================================================================== */ %widget-number, .widget-number { - @extend %widget; + @extend %widget; - .widget-content { - .info { - margin-top: 30px; - - .count { - display: block; - font-size: 5em; - line-height: 1em; - font-weight: 400; - color: $darkgrey; - } - - .sub { - font-size: 2em; - color: #9b9b9b; - - mark { - background-color: transparent; - font-weight: bold; - - &.up { - color: $green; - } - &.down { - color: $red; - } - } - } - } - } // .widget-content - - &.widget-2x2 { .widget-content { - .info { - margin-top: 100px; + .info { + margin-top: 30px; - .count { - font-size: 9em; - } + .count { + display: block; + font-size: 5em; + line-height: 1em; + font-weight: 400; + color: $darkgrey; + } - .sub { - font-size: 2.5em; + .sub { + font-size: 2em; + color: #9b9b9b; + + mark { + background-color: transparent; + font-weight: bold; + + &.up { + color: $green; + } + &.down { + color: $red; + } + } + } + } + } // .widget-content + + &.widget-2x2 { + .widget-content { + .info { + margin-top: 100px; + + .count { + font-size: 9em; + } + + .sub { + font-size: 2.5em; + } + } } - } } - } } // %widget-number, .widget-number /* ========================================================================== @@ -175,114 +176,114 @@ ========================================================================== */ .widget-settings { - @extend %widget; - background-color: #2d3032; - - .widget-header { - height: 40px; - border-top: none; - border-bottom: 1px solid #4a4a4a; - color: $midgrey; - } - - .widget-content { - padding: 0; - } - - label { - width:100%; - height: 40px; - display: block; - border-bottom: 1px solid #4a4a4a; - font-size: 1.2em; - } - - .title { - @include box-sizing(border-box); - display: inline-block; - width: 100px; - height: 100%; - padding: 8px; - color: #E3EDF2; - text-transform: uppercase; - text-align: right; - } - - input[type="text"] { - @include box-sizing(border-box); - height: 100%; - padding: 8px; - color: $midgrey; - text-transform: none; - background: none; - border: none; - border-left: 1px solid #4a4a4a; - } - - .widget-footer, .widget-header { - border-color: #4a4a4a; - } - - .widget-size-options { - display: inline-block; - height: 100%; - padding-top: 10px; - padding-left: 10px; - - .size-options-container { - @include box-sizing(border-box); - display: inline-block; - width: 20px; - height: 20px; - padding: 3px; - cursor: pointer; + @extend %widget; + background-color: #2d3032; + .widget-header { + height: 40px; + border-top: none; + border-bottom: 1px solid #4a4a4a; + color: $midgrey; } - .mini-widget { - background: $midgrey; - margin: 1px; - float: left; - - &.active { - background: #ffffff; - } + .widget-content { + padding: 0; } - .size-1x1 { - width: 5px; - height: 5px; - } - .size-2x1 { - width: 12px; - height: 5px; - } - .size-1x2 { - width: 5px; - height: 12px; - } - .size-2x2 { - width: 12px; - height: 12px; + label { + width:100%; + height: 40px; + display: block; + border-bottom: 1px solid #4a4a4a; + font-size: 1.2em; } - .active { - background: #171819; + .title { + @include box-sizing(border-box); + display: inline-block; + width: 100px; + height: 100%; + padding: 8px; + color: #E3EDF2; + text-transform: uppercase; + text-align: right; } - } // .widget-size-options - .widget-settings-toggle { - border-color: #4a4a4a; + input[type="text"] { + @include box-sizing(border-box); + height: 100%; + padding: 8px; + color: $midgrey; + text-transform: none; + background: none; + border: none; + border-left: 1px solid #4a4a4a; + } - &.close { - @include icon($i-x, 1em); + .widget-footer, .widget-header { + border-color: #4a4a4a; } - &.done { - background-color: $green; - color: rgba(255,255,255,0.7); - @include icon($i-check, 1em); + + .widget-size-options { + display: inline-block; + height: 100%; + padding-top: 10px; + padding-left: 10px; + + .size-options-container { + @include box-sizing(border-box); + display: inline-block; + width: 20px; + height: 20px; + padding: 3px; + cursor: pointer; + } + + .mini-widget { + background: $midgrey; + margin: 1px; + float: left; + + &.active { + background: #ffffff; + } + } + + .size-1x1 { + width: 5px; + height: 5px; + } + .size-2x1 { + width: 12px; + height: 5px; + } + .size-1x2 { + width: 5px; + height: 12px; + } + .size-2x2 { + width: 12px; + height: 12px; + } + + .active { + background: #171819; + } + + } // .widget-size-options + + .widget-settings-toggle { + border-color: #4a4a4a; + + &.close { + @include icon($i-x, 1em); + } + &.done { + background-color: $green; + color: rgba(255,255,255,0.7); + @include icon($i-check, 1em); + } } - } } // .widget-settings @@ -295,77 +296,78 @@ Clock / Date ========================================================================== */ -.widget-time { - @extend %widget; +.widget-time { + @extend %widget; - .summary { - margin-bottom: 30px; - font-size: 1.4em; - color: #9b9b9b; + .summary { + margin-bottom: 30px; + font-size: 1.4em; + color: #9b9b9b; + + .day { + float: left; + } + .weather { + float: right; + @include icon-after($i-weather-sun); + } - .day { - float: left; - } - .weather { - float: right; - @include icon-after($i-weather-sun); } - } + time { + margin-top: 30px; - time { - margin-top: 30px; + .clock { + display: block; + font-size: 5em; + line-height: 1em; + font-weight: 400; + color: $darkgrey; + } - .clock { - display: block; - font-size: 5em; - line-height: 1em; - font-weight: 400; - color: $darkgrey; + .date { + font-size: 2em; + color: #9b9b9b; + } } - .date { - font-size: 2em; - color: #9b9b9b; - } - } } // .widget-time /* ========================================================================== Ghost Image ========================================================================== */ -.widget-image { - @extend %widget; +.widget-image { + @extend %widget; - .widget-content { - height: 100%; - background-image: url(../img/dash/Image@2x.png); - background-size: 100% 100%; - } - - .widget-footer { - margin-top: -40px; - opacity: 0; - background: #ffffff; - @include transition(opacity 200ms linear); - } - - &:hover { - .widget-footer { - opacity: 1; + .widget-content { + height: 100%; + background-image: url(../img/dash/Image@2x.png); + background-size: 100% 100%; } - } - &.widget-settings { - .widget-content { - background-image: none; - } - .widget-footer { - background: inherit; - opacity: 1; - } - } + .widget-footer { + margin-top: -40px; + opacity: 0; + background: #ffffff; + @include transition(opacity 200ms linear); + } + + &:hover { + .widget-footer { + opacity: 1; + } + } + + &.widget-settings { + .widget-content { + background-image: none; + } + .widget-footer { + background: inherit; + opacity: 1; + } + } } // .widget-image @@ -373,127 +375,128 @@ Unique Visitors ========================================================================== */ -.widget-stats { - @extend %widget-number; +.widget-stats { + @extend %widget-number; } /* ========================================================================== Facebook Likes ========================================================================== */ -.widget-facebook { - @extend %widget-number; +.widget-facebook { + @extend %widget-number; - .info { - .faces { - display: block; - width: 100%; - height: 30px; - margin-top: 25px; - background-image: url("../img/dash/Facebook_Images@2x.png"); - background-size: 100% 100%; + .info { + .faces { + display: block; + width: 100%; + height: 30px; + margin-top: 25px; + background-image: url("../img/dash/Facebook_Images@2x.png"); + background-size: 100% 100%; + } } - } } /* ========================================================================== Google Plus ========================================================================== */ -.widget-gplus { - @extend %widget-number; +.widget-gplus { + @extend %widget-number; } /* ========================================================================== Twitter ========================================================================== */ -.widget-twitter { - @extend %widget; +.widget-twitter { + @extend %widget; } /* ========================================================================== Campaign Monitor ========================================================================== */ -.widget-campaignmonitor { - @extend %widget-number; +.widget-campaignmonitor { + @extend %widget-number; } /* ========================================================================== Upcoming Posts ========================================================================== */ -.widget-posts { - @extend %widget; - position: relative; - - .chart { - @include box-sizing(border-box); - width: 250px; - height: 250px; +.widget-posts { + @extend %widget; position: relative; - z-index: 1; - margin: 0 auto; - background: #242628; - border: #efefef 54px solid; - border-radius: 250px; - .sheen { // Bourbon gradient mixin not appropriate for this use-case. - width: 71px; - height: 142px; - position: absolute; - top: 0; - background-image: -webkit-gradient(linear, left bottom, right top, from(rgba(251, 255, 242, 0.00)), to(rgba(254, 253, 255, 1.00))); - background-image: -webkit-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); - background-image: -moz-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); - background-image: -o-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); - background-image: -ms-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); - background-image: linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fbfff2', EndColorStr='#fefdff'); - border-radius: 71px 0 0 71px; - @include transform(rotate(45deg)); - @include transform-origin(100% 50%); - opacity: 0.05; - } + .chart { + @include box-sizing(border-box); + width: 250px; + height: 250px; + position: relative; + z-index: 1; + margin: 0 auto; + background: #242628; + border: #efefef 54px solid; + border-radius: 250px; - #poststats { - position: relative; - top:-54px; - left: -54px; - } + .sheen { + width: 71px; + height: 142px; + position: absolute; + top: 0; + background-image: -webkit-gradient(linear, left bottom, right top, from(rgba(251, 255, 242, 0.00)), to(rgba(254, 253, 255, 1.00))); + background-image: -webkit-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); + background-image: -moz-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); + background-image: -o-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); + background-image: -ms-linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); + background-image: linear-gradient(left bottom, rgba(251, 255, 242, 0.00), rgba(254, 253, 255, 1.00)); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fbfff2', EndColorStr='#fefdff'); + border-radius: 71px 0 0 71px; + @include transform(rotate(45deg)); + @include transform-origin(100% 50%); + opacity: 0.05; + } - .data { - position: absolute; - top: 5px; - color: $midgrey; - font-size: 13px; - list-style: none; + #poststats { + position: relative; + top:-54px; + left: -54px; + } - .ready { - font-size: 18px; - vertical-align: -5%; - margin-right: 5px; - color: $green; - } + .data { + position: absolute; + top: 5px; + color: $midgrey; + font-size: 13px; + list-style: none; - .pending { - font-size: 18px; - vertical-align: -5%; - margin-right: 5px; - color: #f9e15d; - } + .ready { + font-size: 18px; + vertical-align: -5%; + margin-right: 5px; + color: $green; + } - .draft { - font-size: 18px; - vertical-align: -5%; - margin-right: 5px; - color: $red; - } + .pending { + font-size: 18px; + vertical-align: -5%; + margin-right: 5px; + color: #f9e15d; + } + + .draft { + font-size: 18px; + vertical-align: -5%; + margin-right: 5px; + color: $red; + } + + } } - } } // .widget-posts /* ========================================================================== @@ -501,84 +504,85 @@ ========================================================================== */ .widget-popular { - @extend %widget; - background: none; + @extend %widget; + background: none; - .widget-content { - padding: 0; - } - - .nav { - list-style: none; - width: 100%; - margin: 0; - padding: 0; - } - - .tab { - @include box-sizing(border-box); - display: inline-block; - height: 35px; - margin: 0; - margin-top: 5px; - padding: 5px 15px 0; - float: left; - vertical-align: bottom; - background: #CDCCC5; - border-left: 1px solid $midbrown; - - &:first-child { - border: none; + .widget-content { + padding: 0; } - &.active { - height: 40px; - margin: 0; - padding-top: 10px; - background: #ffffff; + .nav { + list-style: none; + width: 100%; + margin: 0; + padding: 0; } - a { - vertical-align: middle; - display: inline-block; - color: #8D8C85; + .tab { + @include box-sizing(border-box); + display: inline-block; + height: 35px; + margin: 0; + margin-top: 5px; + padding: 5px 15px 0; + float: left; + vertical-align: bottom; + background: #CDCCC5; + border-left: 1px solid $midbrown; + + &:first-child { + border: none; + } + + &.active { + height: 40px; + margin: 0; + padding-top: 10px; + background: #ffffff; + } + + a { + vertical-align: middle; + display: inline-block; + color: #8D8C85; + } } - } - .post-list { - max-height: 538px; // For overflow, dont way to make dynamic - background: #ffffff; - overflow: auto; - } + .post-list { + max-height: 538px; // TODO: What the fuck is this? : For overflow, dont way to make dynamic + background: #ffffff; + overflow: auto; + } - .post-item { - @include box-sizing(border-box); - display: block; - min-height: 80px; - width: 100%; - padding: 20px; - border-bottom: 1px solid $lightbrown; - } + .post-item { + @include box-sizing(border-box); + display: block; + min-height: 80px; + width: 100%; + padding: 20px; + border-bottom: 1px solid $lightbrown; + } - .post-title { - font-size: 1.25em; - font-weight: normal; - } + .post-title { + font-size: 1.25em; + font-weight: normal; + } - .post-date { - @include icon($i-calendar); - margin-right: 20px; - color: $brown; - } + .post-date { + @include icon($i-calendar); + margin-right: 20px; + color: $brown; + } - .post-count { - @include icon($i-stats); - color: $brown; - } + .post-count { + @include icon($i-stats); + color: $brown; + } + + .widget-footer { + background: #ffffff; + } - .widget-footer { - background: #ffffff; - } } // .widget-popular /* ========================================================================== @@ -586,7 +590,7 @@ ========================================================================== */ .widget-postsWeek { - @extend %widget; + @extend %widget; } /* ========================================================================== @@ -594,30 +598,31 @@ ========================================================================== */ .widget-instagram { - @extend %widget; - overflow: hidden; + @extend %widget; + overflow: hidden; - .widget-content { - padding: 0; - } - - .photo { - height: 100%; - width: 100%; - } - - .widget-footer { - background: rgba(0,0,0,0.4); - border: none; - - .widget-title { - color: #fff; + .widget-content { + padding: 0; + } + + .photo { + height: 100%; + width: 100%; + } + + .widget-footer { + background: rgba(0,0,0,0.4); + border: none; + + .widget-title { + color: #fff; + } + } + + .widget-settings-toggle { + border: none; } - } - .widget-settings-toggle { - border: none; - } } // .widget-instagram /* ========================================================================== @@ -625,78 +630,78 @@ ========================================================================== */ .widget-rss { - @extend %widget; + @extend %widget; } /* ========================================================================== Klout ========================================================================== */ -.widget-klout { - @extend %widget-number; +.widget-klout { + @extend %widget-number; } /* ========================================================================== Bounce Rate ========================================================================== */ -.widget-bounce { - @extend %widget-number; +.widget-bounce { + @extend %widget-number; } /* ========================================================================== Average Time On Site ========================================================================== */ -.widget-avgTime { - @extend %widget-number; +.widget-avgTime { + @extend %widget-number; } /* ========================================================================== Last.Fm ========================================================================== */ -.widget-lastfm { - @extend %widget; - overflow: hidden; +.widget-lastfm { + @extend %widget; + overflow: hidden; - .widget-content { - padding: 0; - } - - .cover { - height: 100%; - width: 100%; - } - - .banner { - @include box-sizing(border-box); - display: block; - width: 100%; - padding: 20px; - position: absolute; - top: 80px; - background: rgba(0,0,0,0.7); - - .song-artist, .song-title { - display: block; - color: #ffffff; + .widget-content { + padding: 0; } - .song-artist { - font-size: 2em; - font-weight: bold; - line-height: 1em; + .cover { + height: 100%; + width: 100%; } - .song-title { - font-size: 1.2em; - } - } + .banner { + @include box-sizing(border-box); + display: block; + width: 100%; + padding: 20px; + position: absolute; + top: 80px; + background: rgba(0,0,0,0.7); - .widget-footer { - background: #ffffff; - } + .song-artist, .song-title { + display: block; + color: #ffffff; + } + + .song-artist { + font-size: 2em; + font-weight: bold; + line-height: 1em; + } + + .song-title { + font-size: 1.2em; + } + } + + .widget-footer { + background: #ffffff; + } } // .widget-lastfm @@ -705,34 +710,35 @@ ========================================================================== */ .widget-ideas { - @extend %widget; + @extend %widget; - .widget-content { - padding: 0; - } - .idea-title { - @include box-sizing(border-box); - display: block; - width: 100%; - height: 80px; - margin-bottom: 10px; - padding: 20px; - font-size: 2em; - border: none; - border-bottom: 1px solid $lightbrown; - } - .idea-content { - @include box-sizing(border-box); - width: 100%; - padding: 20px; - font-size: 1.2em; - border: none; - resize: none; - } + .widget-content { + padding: 0; + } + .idea-title { + @include box-sizing(border-box); + display: block; + width: 100%; + height: 80px; + margin-bottom: 10px; + padding: 20px; + font-size: 2em; + border: none; + border-bottom: 1px solid $lightbrown; + } + .idea-content { + @include box-sizing(border-box); + width: 100%; + padding: 20px; + font-size: 1.2em; + border: none; + resize: none; + } + + .idea-title:focus, .idea-content:focus { + outline: none; + } - .idea-title:focus, .idea-content:focus { - outline: none; - } } // .widget-ideas /* ========================================================================== @@ -740,68 +746,70 @@ ========================================================================== */ .widget-tweets { - @extend %widget; + @extend %widget; - .twitter-display-image { - width: 30px; - height: 30px; - margin-right: 10px; - display: inline-block; - float: left; - border-radius: 15px; + .twitter-display-image { + width: 30px; + height: 30px; + margin-right: 10px; + display: inline-block; + float: left; + border-radius: 15px; - img { - width: 100%; - height: 100%; - border-radius: 15px; - } - } - - .twitter-name { - font-weight: bold; - font-size: 1.5em; - margin-right: 5px; - } - - .twitter-handle { - color: $midbrown; - font-size: 1.2em; - } - - .latest-tweet { - margin-top: 15px; - margin-bottom: 15px; - font-size: 1.5em; - - a { - color: $orange; - font-weight: bold; - } - } - - .tweet-time { - color: $midbrown; - } - .twitter-functions { - float: right; - font-size: 1.2em; - - a:hover { - text-decoration: none; + img { + width: 100%; + height: 100%; + border-radius: 15px; + } } - .reply { - @include icon($i-reply, '', $midbrown); - margin-right: 5px; + .twitter-name { + font-weight: bold; + font-size: 1.5em; + margin-right: 5px; } - .retweet { - @include icon($i-repost, '', $midbrown); - margin-right: 5px; + + .twitter-handle { + color: $midbrown; + font-size: 1.2em; } - .favourite { - @include icon($i-unfeatured, '', $midbrown); + + .latest-tweet { + margin-top: 15px; + margin-bottom: 15px; + font-size: 1.5em; + + a { + color: $orange; + font-weight: bold; + } } - } + + .tweet-time { + color: $midbrown; + } + + .twitter-functions { + float: right; + font-size: 1.2em; + + a:hover { + text-decoration: none; + } + + .reply { + @include icon($i-reply, '', $midbrown); + margin-right: 5px; + } + .retweet { + @include icon($i-repost, '', $midbrown); + margin-right: 5px; + } + .favourite { + @include icon($i-unfeatured, '', $midbrown); + } + } + } // .widget-tweets /* ========================================================================== @@ -809,261 +817,5 @@ ========================================================================== */ .widget-backups { - @extend %widget; + @extend %widget; } - -/* - -.dashboard-controls { - @extend %box; - padding:0 15px; - - .text { - padding:12px 0; - } -} - -.controls-nav { - float:left; - margin-left:20px; - ul { - border-left: $lightgrey 1px solid; - - li { - margin: 0; - border-right: 1px solid $lightgrey; - - a { - padding: 12px 15px; - color: $grey; - - span { - color: $darkgrey; - } - - &:hover { - color: $darkgrey; - text-decoration: none; - } - } - } - } -} - -.widget-stats { - span { - display: block; - font-size: 1.6em; - line-height: 1.2em; - color: $grey; - margin-bottom: 15px; - strong { - font-size: 1.2em; - } - } - span:first-child { - font-size: 5.4em; - line-height: 1.4em; - color: #000; - margin-bottom: 0; - } -} - -@media only screen and (min-width: 1200px) { - .span4 .vert2 { - .widget-stats { - span { - font-size: 2.6em; - strong { - font-size: 1.2em; - } - } - span:first-child { - font-size: 12.4em; - } - } - } -} - -// Time & Date Box -.time-date { - .time { - font-size: 7.4em; - line-height: 0.7em; - border-bottom: 1px solid $lightgrey; - span { - font-size: 0.2em; - color: $grey; - text-transform: uppercase; - font-style: normal; - } - @media only screen and (min-width: 1400px) { - span { - font-size: 0.3em; - } - } - } - .date { - font-size: 2.2em; - line-height: 1em; - font-weight: bold; - color: #000; - padding: 15px 0; - span { - font-size: 0.7em; - font-weight: normal; - display: block; - line-height: 1em; - color: $grey; - } - } -} - -// Post Statuses Box -.post-statuses { - .status-levels { - width: 30%; - div { - text-indent: -9999px; - } - } - .status-text { - width: 70%; - text-transform: uppercase; - font-size: 1.2em; - color: $grey; - div { - background: none; - padding: 15px 0; - } - strong { - font-size: 1.6em; - width: 60px; - padding-right: 5px; - text-align: right; - display: inline-block; - } - } - .scheduled { - background: $green; - strong { - color: $green; - } - } - .pending { - background: #fcd039; - strong { - color: #fcd039; - } - } - .draft { - background: $red; - strong { - color: $red; - } - } -} - -.todays-traffic { - ul { - li { - position: relative; - padding: 10px; - margin-bottom: 1px; - div { - position: relative; - z-index: 99; - } - } - li:before { - content: ''; - position: absolute; - height: 34px; - top: 0; - left: 0; - z-index: 20; - } - li:nth-child(1):before { - background: $blue; - width: 80%; - } - li:nth-child(2):before { - background: lighten($blue, 3%); - width: 60%; - } - li:nth-child(3):before { - background: lighten($blue, 6%); - width: 40%; - } - li:nth-child(4):before { - background: lighten($blue, 10%); - width: 20%; - } - } -} - -.table { - width: 100%; - display: block; - margin-bottom: 10px; - thead, tbody, tr { - display: block; - } - @media only screen and (min-width: 400px) { - thead { - display: none; - } - } - tbody { - tr { - background: $lightbrown; - margin-top: 5px; - display: block; - position: relative; - &:first-child { - margin-top: 0; - } - } - @media only screen and (min-width: 1200px) { - tr { - padding: 0 10px 0 40px; - margin-top: 15px; - } - } - td { - padding: 10px; - text-align: right; - color: $grey; - strong { - color: #000; - } - span { - display: none; - } - @media only screen and (min-width: 500px) { - span { - display: inline; - } - } - .callout { - color: $green; - } - &:first-child { - text-align: left; - } - } - } - .user-img { - position: absolute; - top: 0; - left: 0; - display: none; - } - @media only screen and (min-width: 1200px) { - .user-img { - display: block; - } - } - -} -*/ \ No newline at end of file diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index 1389934b8b..035847ab2e 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -18,213 +18,213 @@ .editor { - // The main post title - .entry-title { - @extend %box; - height: 35px; - padding: 10px 15px; - margin-bottom: 15px; - position:relative; + // The main post title + .entry-title { + @extend %box; + height: 35px; + padding: 10px 15px; + margin-bottom: 15px; + position:relative; - @include breakpoint($mobile) { - box-shadow: none; - } + @include breakpoint($mobile) { + box-shadow: none; + } - input { - border: 0; - margin: 0; - padding:0; - font-size: 2em; - font-weight: 300; - width: 100%; - &:focus { - outline: 0; - } - } + input { + border: 0; + margin: 0; + padding:0; + font-size: 2em; + font-weight: 300; + width: 100%; + &:focus { + outline: 0; + } + } - } + } .entry-container { position: relative; height: 100%; } - // The two content panel wrappers, positioned left/right - .entry-markdown { left:0; border-right:$lightbrown 2px solid; } - .entry-preview { right:0; border-left:$lightbrown 2px solid; } + // The two content panel wrappers, positioned left/right + .entry-markdown { left:0; border-right:$lightbrown 2px solid; } + .entry-preview { right:0; border-left:$lightbrown 2px solid; } - // The visual styles for both panels - .entry-markdown, .entry-preview { - @include box-sizing(border-box); - width: 50%; - padding: 15px; - position: absolute; - bottom:40px; // height of the publish bar + // The visual styles for both panels + .entry-markdown, .entry-preview { + @include box-sizing(border-box); + width: 50%; + padding: 15px; + position: absolute; + bottom:40px; // height of the publish bar top:69px; // height of the post title + margin - background: #fff; - box-shadow: $shadow; + background: #fff; + box-shadow: $shadow; - @include breakpoint($mobile) { - box-shadow: none; - } + @include breakpoint($mobile) { + box-shadow: none; + } - // Convert all content areas to small boxes - @include breakpoint($netbook) { + // Convert all content areas to small boxes + @include breakpoint($netbook) { top:109px; left:0; - right:0; - width:100%; - border:none; - z-index:100; - min-height:380px; - .markdown, .entry-preview-content { - height:50px; - overflow: hidden; - } - } + right:0; + width:100%; + border:none; + z-index:100; + min-height:380px; + .markdown, .entry-preview-content { + height:50px; + overflow: hidden; + } + } - .floatingheader { + .floatingheader { - // Turn headers into tabs which act as links - // both headers set to grey/inactive colour - @include breakpoint($netbook) { - cursor:pointer; - width:50%; - border-right:$lightbrown 2px solid; - color:#fff; - font-weight: normal; - background:$brown; - position:absolute; - top:-40px; - left:0; - box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset; + // Turn headers into tabs which act as links + // both headers set to grey/inactive colour + @include breakpoint($netbook) { + cursor:pointer; + width:50%; + border-right:$lightbrown 2px solid; + color:#fff; + font-weight: normal; + background:$brown; + position:absolute; + top:-40px; + left:0; + box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset; - a { - color:#fff; - } - } + a { + color:#fff; + } + } - a { - color: $brown; - } + a { + color: $brown; + } - .markdown-help { + .markdown-help { position: relative; top: -5px; right: -5px; - @include icon($i-question, '', lighten($brown, 15%)); - float:right; + @include icon($i-question, '', lighten($brown, 15%)); + float:right; padding: 5px; - &:hover { - @include icon($i-question, '', $brown); - } - } + &:hover { + @include icon($i-question, '', $brown); + } + } - .entry-word-count { - float:right; - } + .entry-word-count { + float:right; + } - } + } - // Give the tab with the .active class the highest z-index - &.active { - z-index: 200; - } + // Give the tab with the .active class the highest z-index + &.active { + z-index: 200; + } - // Restore the normal height of the .active tab (inactive tab stays small, hidden behind) - &.active .markdown, - &.active .entry-preview-content { - height:auto; - overflow: auto; - } + // Restore the normal height of the .active tab (inactive tab stays small, hidden behind) + &.active .markdown, + &.active .entry-preview-content { + height:auto; + overflow: auto; + } - // Restore the white bg of the currently .active tab, remove hand cursor from currently active tab - &.active header { - @include breakpoint($netbook) { - cursor:auto; - color: $brown; - background:#fff; - box-shadow: none; - a { - color: $brown; - } - } - } + // Restore the white bg of the currently .active tab, remove hand cursor from currently active tab + &.active header { + @include breakpoint($netbook) { + cursor:auto; + color: $brown; + background:#fff; + box-shadow: none; + a { + color: $brown; + } + } + } - // Hide markdown icon + wordcount when we hit mobile - @include breakpoint($mobile) { - .markdown-help, - .entry-word-count { - display: none; - } - } + // Hide markdown icon + wordcount when we hit mobile + @include breakpoint($mobile) { + .markdown-help, + .entry-word-count { + display: none; + } + } - } + } - .entry-markdown-content { + .entry-markdown-content { - textarea { - border: 0; - width: 100%; - height: 100%; - max-width: 100%; - margin: 0; - padding: 0; - position:absolute; - top: 0; - right:0; - bottom:0; - left:0; + textarea { + border: 0; + width: 100%; + height: 100%; + max-width: 100%; + margin: 0; + padding: 0; + position:absolute; + top: 0; + right:0; + bottom:0; + left:0; - &:focus { - outline: 0; - } - } + &:focus { + outline: 0; + } + } - .CodeMirror { - height: auto; - position:absolute; - top:0; - left:0; - right:0; - bottom:0; - font-family: $font-family-mono; - font-size:1.1em; - line-height:1.2em; - color: lighten($darkgrey, 30%); + .CodeMirror { + height: auto; + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + font-family: $font-family-mono; + font-size:1.1em; + line-height:1.2em; + color: lighten($darkgrey, 30%); - .CodeMirror-focused, - .CodeMirror-selected { - color: $darkgrey; - background: lighten($blue, 20%); - text-shadow: none; - } + .CodeMirror-focused, + .CodeMirror-selected { + color: $darkgrey; + background: lighten($blue, 20%); + text-shadow: none; + } - ::selection { - color: $darkgrey; - background: lighten($blue, 20%); - text-shadow: none; - } - } + ::selection { + color: $darkgrey; + background: lighten($blue, 20%); + text-shadow: none; + } + } - .CodeMirror-lines { - padding: 65px 0 40px 0; /* Vertical padding around content */ - @include breakpoint($netbook) {padding-top: 25px;} - @include breakpoint($mobile) {padding: 15px 0;} - } - .CodeMirror pre { - padding: 0 40px; /* Horizontal padding of content */ - @include breakpoint($mobile) {padding: 0 15px;} - } + .CodeMirror-lines { + padding: 65px 0 40px 0; /* Vertical padding around content */ + @include breakpoint($netbook) {padding-top: 25px;} + @include breakpoint($mobile) {padding: 15px 0;} + } + .CodeMirror pre { + padding: 0 40px; /* Horizontal padding of content */ + @include breakpoint($mobile) {padding: 0 15px;} + } - .cm-header { - color:#000; - font-size: 1.4em; - line-height: 1.4em; - } + .cm-header { + color:#000; + font-size: 1.4em; + line-height: 1.4em; + } - .cm-string, + .cm-string, .cm-link, .cm-comment, .cm-quote, @@ -234,60 +234,60 @@ .cm-number, .cm-atom {color:#000;} - } + } - .entry-preview { - // Align the tab of entry-preview on the right - .floatingheader { - @include breakpoint($netbook) { - right:0; - left:auto; - border-right:none; - border-left:$lightbrown 2px solid; - } - } + .entry-preview { + // Align the tab of entry-preview on the right + .floatingheader { + @include breakpoint($netbook) { + right:0; + left:auto; + border-right:none; + border-left:$lightbrown 2px solid; + } + } - .entry-preview-content { - position:absolute; - top:0; - right:0; - bottom:0; - left:0; - padding: 60px 40px 40px 40px; - overflow: auto; + .entry-preview-content { + position:absolute; + top:0; + right:0; + bottom:0; + left:0; + padding: 60px 40px 40px 40px; + overflow: auto; - // Breaking for long words in preview region - word-break: break-word; - word-break: break-all; - -webkit-hyphens: auto; - hyphens: auto; + // Breaking for long words in preview region + word-break: break-word; + word-break: break-all; + -webkit-hyphens: auto; + hyphens: auto; - // Tweak padding for smaller screens - @include breakpoint($netbook) {padding-top: 20px;} - @include breakpoint($mobile) {padding: 15px;} - } - } + // Tweak padding for smaller screens + @include breakpoint($netbook) {padding-top: 20px;} + @include breakpoint($mobile) {padding: 15px;} + } + } - // Special case, when scrolling, add shadows to content headers. - .scrolling { + // Special case, when scrolling, add shadows to content headers. + .scrolling { - .floatingheader { - @include breakpoint($netbook) { - box-shadow: none; - } + .floatingheader { + @include breakpoint($netbook) { + box-shadow: none; + } - &::before, - &::after { - @include breakpoint($netbook) {display:none;} - } - } - .CodeMirror-scroll, - .entry-preview-content { - @include breakpoint($netbook) { - box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset; - } - } - } + &::before, + &::after { + @include breakpoint($netbook) {display:none;} + } + } + .CodeMirror-scroll, + .entry-preview-content { + @include breakpoint($netbook) { + box-shadow: 0 5px 5px rgba(0,0,0,0.05) inset; + } + } + } }//.editor @@ -300,57 +300,57 @@ // TODO: These should just be defaults, overridden by editor.hbs in theme dir .entry-preview-content, .content-preview-content { - font-size:1.15em; - line-height: 1.5em; + font-size:1.15em; + line-height: 1.5em; - a { - color: $blue; - text-decoration: underline; - } - p { - margin: 1.2em 0 1.6em; - &:first-child { - margin-top:0; - } - } - h1 { - font-size: 3em; - } - h2 { - font-size: 2.2em; - } - h3 { - font-size: 1.8em; - } - .btn { - text-decoration: none; - color: $grey; - } - .img-placeholder { - border: 5px dashed $grey; - height: 100px; - position: relative; - span { - display: block; - height: 30px; - position: absolute; - margin-top: -15px; - top: 50%; - width: 100%; - text-align: center; - } - } + a { + color: $blue; + text-decoration: underline; + } + p { + margin: 1.2em 0 1.6em; + &:first-child { + margin-top:0; + } + } + h1 { + font-size: 3em; + } + h2 { + font-size: 2.2em; + } + h3 { + font-size: 1.8em; + } + .btn { + text-decoration: none; + color: $grey; + } + .img-placeholder { + border: 5px dashed $grey; + height: 100px; + position: relative; + span { + display: block; + height: 30px; + position: absolute; + margin-top: -15px; + top: 50%; + width: 100%; + text-align: center; + } + } a { &.image-edit { width: 16px; height: 16px; } } - img { - max-width: 100%; - height: auto; + img { + max-width: 100%; + height: auto; margin: 0 auto; - } + } } @@ -360,17 +360,17 @@ ============================================================================= */ body.zen { - background: lighten($lightbrown, 3%); - #usermenu {display:none;} - #global-header, #publish-bar { - opacity: 0; - height:0; - overflow: hidden; - @include transition(all 0.5s ease-out); - } + background: lighten($lightbrown, 3%); + #usermenu {display:none;} + #global-header, #publish-bar { + opacity: 0; + height:0; + overflow: hidden; + @include transition(all 0.5s ease-out); + } - main {top: 15px;@include transition(all 0.5s ease-out);} - .entry-markdown, .entry-preview {bottom:0;@include transition(all 0.5s ease-out);} + main {top: 15px;@include transition(all 0.5s ease-out);} + .entry-markdown, .entry-preview {bottom:0;@include transition(all 0.5s ease-out);} } @@ -380,121 +380,121 @@ body.zen { ============================================================================= */ #publish-bar { - @include box-sizing(border-box); - height:40px; - padding: 0; - color: $midgrey; - background: darken($darkgrey, 4%); - position: fixed; - bottom: 0; - left:0; - right:0; - z-index:900; - box-shadow: 0 -2px 8px rgba(0,0,0,0.2); + @include box-sizing(border-box); + height:40px; + padding: 0; + color: $midgrey; + background: darken($darkgrey, 4%); + position: fixed; + bottom: 0; + left:0; + right:0; + z-index:900; + box-shadow: 0 -2px 8px rgba(0,0,0,0.2); - @include breakpoint($netbook) {font-weight:normal;} + @include breakpoint($netbook) {font-weight:normal;} - button { - min-height: 30px; - height: 30px; - line-height: 12px; - padding: 0 10px; - margin-top: 5px; - border-top:rgba(255,255,255,0.4) 1px solid; - } + button { + min-height: 30px; + height: 30px; + line-height: 12px; + padding: 0 10px; + margin-top: 5px; + border-top:rgba(255,255,255,0.4) 1px solid; + } - .button-link { border-top: none; } + .button-link { border-top: none; } - .options { - width:30px; - min-height: 30px; - height: 30px; - margin-top:5px; - box-shadow: rgba(255,255,255,0.4) 0 1px 0 inset; + .options { + width:30px; + min-height: 30px; + height: 30px; + margin-top:5px; + box-shadow: rgba(255,255,255,0.4) 0 1px 0 inset; - &.up:hover { + &.up:hover { @include icon($i-chevron-down) { margin-top:-5px; @include transform(rotate(540deg)); @include transition(transform 0.6s ease); }; } - } + } - .splitbutton-save{ - .button-save{ - @include transition(width 0.25s ease); - } + .splitbutton-save{ + .button-save{ + @include transition(width 0.25s ease); + } - .editor-options{ - @extend %menu; - @extend %menu-right; - bottom: 140%; - right: -3%; + .editor-options{ + @extend %menu; + @extend %menu-right; + bottom: 140%; + right: -3%; - a{ - font-size: 14px; - } - } - } + a{ + font-size: 14px; + } + } + } } #entry-categories { - position: absolute; - top:0; - left:0; - right: 165px; - bottom:0; - text-transform: none; - padding: 10px 0 0 0; + position: absolute; + top:0; + left:0; + right: 165px; + bottom:0; + text-transform: none; + padding: 10px 0 0 0; } .category-label { - display: block; - float:left; - @include icon($i-tag); - padding:1px 8px 0 8px; - @include transition; + display: block; + float:left; + @include icon($i-tag); + padding:1px 8px 0 8px; + @include transition; - &:hover { - cursor:pointer; - color: $lightgrey; - } + &:hover { + cursor:pointer; + color: $lightgrey; + } } .category-input { - display: inline-block; - color: $lightgrey; - font-weight: 300; - background: transparent; - border: none; + display: inline-block; + color: $lightgrey; + font-weight: 300; + background: transparent; + border: none; - &:focus {outline:none;} + &:focus {outline:none;} } .category { - @include icon-after($i-x, 8px, $darkgrey) { - margin-left:4px; - vertical-align:5%; - text-shadow: rgba(255,255,255,0.15) 0 1px 0; - @include transition; - } - display: block; - float: left; - margin-right: 5px; - padding: 0 5px; - color: $lightgrey; - background: lighten($grey, 15%); - border-radius: $rounded; - box-shadow: - rgba(255,255,255,0.2) 0 1px 0 inset, - #000 0 1px 3px; + @include icon-after($i-x, 8px, $darkgrey) { + margin-left:4px; + vertical-align:5%; + text-shadow: rgba(255,255,255,0.15) 0 1px 0; + @include transition; + } + display: block; + float: left; + margin-right: 5px; + padding: 0 5px; + color: $lightgrey; + background: lighten($grey, 15%); + border-radius: $rounded; + box-shadow: + rgba(255,255,255,0.2) 0 1px 0 inset, + #000 0 1px 3px; - &:hover { - cursor: pointer; - @include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;} + &:hover { + cursor: pointer; + @include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;} - } + } } .suggestions { @@ -516,28 +516,28 @@ body.zen { } #entry-settings { - @include icon($i-settings, 1.1em){vertical-align:0;}; - @include box-sizing(border-box); - display:inline-block; - padding: 0 10px; - line-height: 1.8em; - color: $midgrey; - @include transition; + @include icon($i-settings, 1.1em){vertical-align:0;}; + @include box-sizing(border-box); + display:inline-block; + padding: 0 10px; + line-height: 1.8em; + color: $midgrey; + @include transition; - &:hover { - color: $lightgrey; - } + &:hover { + color: $lightgrey; + } } #entry-settings-menu { - position: absolute; + position: absolute; bottom:50px; right:-5px; } #entry-actions { - margin-right:6px; - position: relative; + margin-right:6px; + position: relative; } #entry-actions-menu { diff --git a/core/client/assets/sass/modules/animations.scss b/core/client/assets/sass/modules/animations.scss index dd2b08518f..b9fb4e8a79 100644 --- a/core/client/assets/sass/modules/animations.scss +++ b/core/client/assets/sass/modules/animations.scss @@ -12,20 +12,20 @@ ============================================================================= */ @-webkit-keyframes off-canvas { - 0% { left:0; } - 100% { left:300px; } + 0% { left:0; } + 100% { left:300px; } } @-moz-keyframes off-canvas { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { opacity: 0; } + 100% { opacity: 1; } } @-o-keyframes off-canvas { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { opacity: 0; } + 100% { opacity: 1; } } @keyframes off-canvas { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { opacity: 0; } + 100% { opacity: 1; } } @include keyframes(fadeIn) { diff --git a/core/client/assets/sass/modules/icons.scss b/core/client/assets/sass/modules/icons.scss index 1c6471ab4b..3e881046a4 100644 --- a/core/client/assets/sass/modules/icons.scss +++ b/core/client/assets/sass/modules/icons.scss @@ -18,14 +18,14 @@ /* Generated by icomoon.co */ @font-face { - font-family: 'Icons'; - src:url('../fonts/icons.eot'); - src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), - url('../fonts/icons.woff') format('woff'), - url('../fonts/icons.ttf') format('truetype'), - url('../fonts/icons.svg#icons') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'Icons'; + src:url('../fonts/icons.eot'); + src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), + url('../fonts/icons.woff') format('woff'), + url('../fonts/icons.ttf') format('truetype'), + url('../fonts/icons.svg#icons') format('svg'); + font-weight: normal; + font-style: normal; } @@ -40,14 +40,14 @@ %icon:before, %icon:after { - font-family: "Icons"; - font-weight: normal; - font-style: normal; - vertical-align: -7%; - text-transform:none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; + font-family: "Icons"; + font-weight: normal; + font-style: normal; + vertical-align: -7%; + text-transform:none; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; } @@ -110,54 +110,54 @@ $i: \e018; // Icons -$i-ghost: \e000; -$i-chevron-down: \e001; -$i-users: \e002; -$i-tag: \e003; -$i-tablet: \e004; -$i-menu: \e005; -$i-settings: \e006; -$i-search: \e007; -$i-search-left: \e008; -$i-rss: \e009; -$i-preview: \e00a; -$i-plugins: \e00b; -$i-pin: \e00c; -$i-pc: \e00d; -$i-pacman: \e00e; -$i-edit: \e00f; -$i-mobile: \e010; -$i-image: \e011; -$i-mail: \e012; -$i-list: \e013; -$i-info: \e014; -$i-home: \e015; -$i-grid: \e016; -$i-fullscreen: \e017; -$i-question: \e018; -$i-external: \e019; -$i-error: \e01a; -$i-comments: \e01b; -$i-close: \e01c; -$i-chevron: \e01d; -$i-calendar: \e01e; -$i-archive: \e01f; -$i-services: \e020; -$i-appearance: \e021; -$i-video: \e022; -$i-remove: \e023; -$i-reply: \e024; -$i-stats: \e025; -$i-featured: \e026; -$i-unfeatured: \e027; -$i-clock: \e028; -$i-settings2: \e029; -$i-camera: \e02a; -$i-power: \e02b; -$i-lock: \e02c; -$i-content: \e02d; -$i-user: \e02e; -$i-support: \e02f; +$i-ghost: \e000; +$i-chevron-down: \e001; +$i-users: \e002; +$i-tag: \e003; +$i-tablet: \e004; +$i-menu: \e005; +$i-settings: \e006; +$i-search: \e007; +$i-search-left: \e008; +$i-rss: \e009; +$i-preview: \e00a; +$i-plugins: \e00b; +$i-pin: \e00c; +$i-pc: \e00d; +$i-pacman: \e00e; +$i-edit: \e00f; +$i-mobile: \e010; +$i-image: \e011; +$i-mail: \e012; +$i-list: \e013; +$i-info: \e014; +$i-home: \e015; +$i-grid: \e016; +$i-fullscreen: \e017; +$i-question: \e018; +$i-external: \e019; +$i-error: \e01a; +$i-comments: \e01b; +$i-close: \e01c; +$i-chevron: \e01d; +$i-calendar: \e01e; +$i-archive: \e01f; +$i-services: \e020; +$i-appearance: \e021; +$i-video: \e022; +$i-remove: \e023; +$i-reply: \e024; +$i-stats: \e025; +$i-featured: \e026; +$i-unfeatured: \e027; +$i-clock: \e028; +$i-settings2: \e029; +$i-camera: \e02a; +$i-power: \e02b; +$i-lock: \e02c; +$i-content: \e02d; +$i-user: \e02e; +$i-support: \e02f; $i-success: \e030; $i-notification: \e031; $i-add: \e032; @@ -181,32 +181,32 @@ To create a button with a label that is prefixed with a camera icon, we might write our Sass something like this: #button { - display: block; - width: 200px; - height: 40px; - @include icon($i-camera, 16px, #fff) {vertical-align:-10%;}; + display: block; + width: 200px; + height: 40px; + @include icon($i-camera, 16px, #fff) {vertical-align:-10%;}; } Thi would then output full CSS something like this: #button { - display: block; - width: 200px; - height: 40px; + display: block; + width: 200px; + height: 40px; } #button:before { - content: "\e02a"; - size: 16px; - color: #fff; - font-family: "Icons"; - font-weight: normal; - font-style: normal; - vertical-align: -10%; - text-transform:none; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; + content: "\e02a"; + size: 16px; + color: #fff; + font-family: "Icons"; + font-weight: normal; + font-style: normal; + vertical-align: -10%; + text-transform:none; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; } */ diff --git a/core/client/assets/sass/modules/mixins.scss b/core/client/assets/sass/modules/mixins.scss index 68ca02f080..ab63dc43f2 100644 --- a/core/client/assets/sass/modules/mixins.scss +++ b/core/client/assets/sass/modules/mixins.scss @@ -85,19 +85,19 @@ $green: #9FBB58; @mixin gradient($color1: #aaa, $color2: none) { - @if $color2 == 'none' { - background-color: lighten($color1, 10%); - background-image: -webkit-linear-gradient(bottom, $color1, lighten($color1, 10%)); - background-image: -moz-linear-gradient(bottom, $color1, lighten($color1, 10%)); - background-image: -ms-linear-gradient(bottom, $color1, lighten($color1, 10%)); - background-image: linear-gradient(bottom, $color1, lighten($color1, 10%)); - } @else { - background-color: $color2; - background-image: -webkit-linear-gradient(bottom, $color1, $color2); - background-image: -moz-linear-gradient(bottom, $color1, $color2); - background-image: -ms-linear-gradient(bottom, $color1, $color2); - background-image: linear-gradient(to top, $color1, $color2); - } + @if $color2 == 'none' { + background-color: lighten($color1, 10%); + background-image: -webkit-linear-gradient(bottom, $color1, lighten($color1, 10%)); + background-image: -moz-linear-gradient(bottom, $color1, lighten($color1, 10%)); + background-image: -ms-linear-gradient(bottom, $color1, lighten($color1, 10%)); + background-image: linear-gradient(bottom, $color1, lighten($color1, 10%)); + } @else { + background-color: $color2; + background-image: -webkit-linear-gradient(bottom, $color1, $color2); + background-image: -moz-linear-gradient(bottom, $color1, $color2); + background-image: -ms-linear-gradient(bottom, $color1, $color2); + background-image: linear-gradient(to top, $color1, $color2); + } } @@ -105,19 +105,19 @@ $green: #9FBB58; @mixin inversegradient($color1: #aaa, $color2: none) { - @if $color2 == 'none' { - background-color: $color1; - background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1); - background-image: -moz-linear-gradient(bottom, lighten($color1, 10%), $color1); - background-image: -ms-linear-gradient(bottom, lighten($color1, 10%), $color1); - background-image: linear-gradient(bottom, lighten($color1, 10%), $color1); - } @else { - background-color: $color1; - background-image: -webkit-linear-gradient(bottom, $color2, $color1); - background-image: -moz-linear-gradient(bottom, $color2, $color1); - background-image: -ms-linear-gradient(bottom, $color2, $color1); - background-image: linear-gradient(to top, $color2, $color1); - } + @if $color2 == 'none' { + background-color: $color1; + background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1); + background-image: -moz-linear-gradient(bottom, lighten($color1, 10%), $color1); + background-image: -ms-linear-gradient(bottom, lighten($color1, 10%), $color1); + background-image: linear-gradient(bottom, lighten($color1, 10%), $color1); + } @else { + background-color: $color1; + background-image: -webkit-linear-gradient(bottom, $color2, $color1); + background-image: -moz-linear-gradient(bottom, $color2, $color1); + background-image: -ms-linear-gradient(bottom, $color2, $color1); + background-image: linear-gradient(to top, $color2, $color1); + } } @@ -132,9 +132,9 @@ $green: #9FBB58; //Does this really need to be a mixin? @mixin hidden { - text-indent: -9999px; - visibility: hidden; - display: none; + text-indent: -9999px; + visibility: hidden; + display: none; } @@ -143,41 +143,41 @@ $green: #9FBB58; ============================================================================= */ %box, .box { - padding: 15px; - margin-bottom: 15px; - background: #fff; - position: relative; - box-shadow: $shadow; - - header { - height:14px; - border-bottom: 1px solid $lightbrown; - padding-bottom: 15px; + padding: 15px; margin-bottom: 15px; - text-transform: uppercase; - font-size:0.85em; - color: $brown; - } + background: #fff; + position: relative; + box-shadow: $shadow; - footer { - height:14px; - border-top: 1px solid $lightbrown; - padding-top: 10px; - margin-top:15px; - text-transform: uppercase; - font-size:0.85em; - color: $brown; - } - - header a, - footer a { - color:$brown; - - &:hover { - color:$darkgrey; - text-decoration: none; + header { + height:14px; + border-bottom: 1px solid $lightbrown; + padding-bottom: 15px; + margin-bottom: 15px; + text-transform: uppercase; + font-size:0.85em; + color: $brown; + } + + footer { + height:14px; + border-top: 1px solid $lightbrown; + padding-top: 10px; + margin-top:15px; + text-transform: uppercase; + font-size:0.85em; + color: $brown; + } + + header a, + footer a { + color:$brown; + + &:hover { + color:$darkgrey; + text-decoration: none; + } } - } } /* ============================================================================= diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss index 348e770e50..aac9b961d2 100644 --- a/core/client/assets/sass/screen.scss +++ b/core/client/assets/sass/screen.scss @@ -7,26 +7,26 @@ Modules - These styles are re-used in many areas, and are grouped by type. ========================================================================== */ - @import "modules/mixins"; - /* Sass variables like colours, font sizes, basic styles. */ + @import "modules/mixins"; + /* Sass variables like colours, font sizes, basic styles. */ - @import "modules/normalize"; - /* Browser cross compatibility normalisation*/ + @import "modules/normalize"; + /* Browser cross compatibility normalisation*/ - @import "modules/typeplate"; - /* All the styles controlling the typographic styles. */ + @import "modules/typeplate"; + /* All the styles controlling the typographic styles. */ - @import "modules/icons"; - /* All the styles controlling icons. */ + @import "modules/icons"; + /* All the styles controlling icons. */ - @import "modules/animations"; - /* Keyframe animations. */ + @import "modules/animations"; + /* Keyframe animations. */ - @import "modules/global"; - /* Global elements for the UI, like the header and footer. */ + @import "modules/global"; + /* Global elements for the UI, like the header and footer. */ - @import "modules/forms"; - /* All the styles controlling forms and form fields. */ + @import "modules/forms"; + /* All the styles controlling forms and form fields. */ @@ -34,20 +34,20 @@ Layouts - Styles for specific admin screen layouts, grouped by screen. ========================================================================== */ - @import "layouts/dashboard"; - /* The default admin page, the dashboard. */ + @import "layouts/dashboard"; + /* The default admin page, the dashboard. */ - @import "layouts/manage"; - /* The manage posts screen. */ + @import "layouts/manage"; + /* The manage posts screen. */ - @import "layouts/editor"; - /* The write/edit post screen. */ + @import "layouts/editor"; + /* The write/edit post screen. */ - @import "layouts/settings"; - /* The settings screen. */ + @import "layouts/settings"; + /* The settings screen. */ - @import "layouts/login"; - /* The settings screen. */ + @import "layouts/login"; + /* The settings screen. */ - @import "layouts/errors"; - /* The errors screens. */ \ No newline at end of file + @import "layouts/errors"; + /* The error screens. */ \ No newline at end of file