From d8f32932247b1d285754ba01299d90c8b4ca76be Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Tue, 6 Jan 2015 12:54:01 -0500 Subject: [PATCH 1/6] Remove device references from comments --- scss/layouts/responsiveness.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/scss/layouts/responsiveness.scss b/scss/layouts/responsiveness.scss index 2d22a0f468..85647d3b1a 100644 --- a/scss/layouts/responsiveness.scss +++ b/scss/layouts/responsiveness.scss @@ -1,4 +1,3 @@ -// Large screens @media (min-width: 940px) { .two-column > * { float: left; @@ -10,7 +9,6 @@ } } -// Small screens/tablets @media (max-width: 1150px) { // 2 column sections #leaderboard { @@ -47,7 +45,6 @@ } } -// Smaller tablets in portrait/landscape phones @media (max-width: 880px) { #leaderboard { width: 100%; @@ -160,7 +157,6 @@ } } -// Portrait phones @media (max-width: 479px) { body { font-size: 14px; From a5add4df2c7f4c1c7d054c7800d075826748ba97 Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Tue, 6 Jan 2015 13:05:47 -0500 Subject: [PATCH 2/6] Prune unused mixins --- scss/components/sign_in.scss | 2 +- scss/gratipay.scss | 6 ++-- scss/mixins/border-radius.scss | 4 +++ scss/mixins/borders-backgrounds-shadows.scss | 36 -------------------- 4 files changed, 8 insertions(+), 40 deletions(-) create mode 100644 scss/mixins/border-radius.scss delete mode 100644 scss/mixins/borders-backgrounds-shadows.scss diff --git a/scss/components/sign_in.scss b/scss/components/sign_in.scss index dfb4276d16..3fbb9bc989 100644 --- a/scss/components/sign_in.scss +++ b/scss/components/sign_in.scss @@ -16,7 +16,7 @@ margin-top: 11px; } &.highlight { - @include box-shadow(0, 0, 8px, $green); + box-shadow: 0 0 8px $green; background: $darker-green; } } diff --git a/scss/gratipay.scss b/scss/gratipay.scss index 86f9bc8aea..d53dffe220 100644 --- a/scss/gratipay.scss +++ b/scss/gratipay.scss @@ -10,10 +10,10 @@ */ -@import "mixins/layout"; -@import "mixins/icons"; -@import "mixins/borders-backgrounds-shadows"; @import "mixins/animation"; +@import "mixins/border-radius"; +@import "mixins/icons"; +@import "mixins/layout"; @import "mixins/transform"; @import "utils"; @import "variables"; diff --git a/scss/mixins/border-radius.scss b/scss/mixins/border-radius.scss new file mode 100644 index 0000000000..b30ca0d524 --- /dev/null +++ b/scss/mixins/border-radius.scss @@ -0,0 +1,4 @@ +@mixin border-radius($radius: 5px) { + border-radius: $radius; + background-clip: padding-box; +} diff --git a/scss/mixins/borders-backgrounds-shadows.scss b/scss/mixins/borders-backgrounds-shadows.scss deleted file mode 100644 index e217b8709a..0000000000 --- a/scss/mixins/borders-backgrounds-shadows.scss +++ /dev/null @@ -1,36 +0,0 @@ -@mixin border-radius($radius: 5px) { - border-radius: $radius; - background-clip: padding-box; -} -@mixin box-shadow($horizontal: 0px, $vertical: 1px, $blur: 2px, $color: #CCC) { - box-shadow: $horizontal $vertical $blur $color; -} -@mixin inset-box-shadow($horizontal: 0px, $vertical: 1px, $blur: 2px, $color: #CCC) { - box-shadow: inset $horizontal $vertical $blur $color; -} -@mixin multi-color-border($top, $sides, $bottom) { - border-top: 1px solid $top; - border-left: 1px solid $sides; - border-right: 1px solid $sides; - border-bottom: 1px solid $bottom; -} -@mixin multi-border-radius($topLeft: 5px, $topRight: 5px, $bottomRight: 5px, $bottomLeft: 5px) { - border-top-left-radius: $topLeft; - border-top-right-radius: $topRight; - border-bottom-right-radius: $bottomRight; - border-bottom-left-radius: $bottomLeft; -} -@mixin vertical-gradient($start: #000, $stop: #FFF) { background: ($start + $stop) / 2; - background: -webkit-gradient(linear, left top, left bottom, from($start), to($stop)); - background: -moz-linear-gradient(center top, $start 0%, $stop 100%); - background: -moz-gradient(center top, $start 0%, $stop 100%); -} -@mixin vertical-gradient-with-image($image, $start: #000, $stop: #FFF) { - background: ($start + $stop) / 2 $image; - background: $image, -webkit-gradient(linear, left top, left bottom, from($start), to($stop)); - background: $image, -moz-linear-gradient(center top, $start 0%, $stop 100%); - background: $image, -moz-gradient(center top, $start 0%, $stop 100%); -} -@mixin opacity($op) { - opacity: $op; -} From 45c0f394592311a6346198eda49866db008289f1 Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Tue, 6 Jan 2015 13:29:17 -0500 Subject: [PATCH 3/6] Stub out new fragments and a layout --- scss/components/accounts.scss | 105 ++++++++++++++++++++++++++++++ scss/components/members.scss | 33 ++++++++++ scss/components/mini-user.scss | 65 ++++++++++++++++++ scss/fragments/card.scss | 1 + scss/fragments/content.scss | 0 scss/fragments/footer.scss | 0 scss/fragments/header.scss | 0 scss/fragments/secondary-nav.scss | 1 + scss/gratipay.scss | 19 ++++-- scss/layouts/smallest.scss | 0 10 files changed, 219 insertions(+), 5 deletions(-) create mode 100644 scss/components/accounts.scss create mode 100644 scss/components/members.scss create mode 100644 scss/components/mini-user.scss create mode 100644 scss/fragments/card.scss create mode 100644 scss/fragments/content.scss create mode 100644 scss/fragments/footer.scss create mode 100644 scss/fragments/header.scss create mode 100644 scss/fragments/secondary-nav.scss create mode 100644 scss/layouts/smallest.scss diff --git a/scss/components/accounts.scss b/scss/components/accounts.scss new file mode 100644 index 0000000000..0e63f37f11 --- /dev/null +++ b/scss/components/accounts.scss @@ -0,0 +1,105 @@ +.accounts { + margin-bottom: 12pt; + width: 100%; + span.none { + font-style: italic; + color: $gray; + } + font: normal 16px $Ideal; + + .account-action { + padding-right: 8px; + vertical-align: middle; + text-align: right; + + .account-delete { + display: inline-block; + } + } + + tr.has-avatar > .account-details { + vertical-align: bottom; + } + + table { + width: 100%; + } + tr { + border-top: 1px solid $light-gray; + + &:last-of-type { + border-bottom: 1px solid $light-gray; + } + } + td { + text-align: left; + vertical-align: middle; + line-height: 100%; + + padding: 6pt 0; + + &.account-type { + width: 49px; + margin-bottom: 3px; + + // Width and height of the avatar. + // The images and whitespace surrounding them scale to based on this. + $AvatarSize: 36pt; + + // Width and height of the platform icon. 70% of avatar size. + $PlatformImageSize: round($AvatarSize * 0.7); + + // Right offset of the platform icon. + $PlatformImageOffset: round($PlatformImageSize * 0.6); + + .sanity-preserving-wrapper { + position: relative; + margin-right: $PlatformImageOffset - 4pt; + } + + img { + width: $AvatarSize; + height: $AvatarSize; + } + + img.avatar ~ img.platform { + width: $PlatformImageSize; + height: $PlatformImageSize; + position: absolute; + bottom: -6pt; + right: -$PlatformImageOffset; + border-radius: 3em; + border: 2px solid #FFFFFF; + background-color: #D7E4DE; + } + } + } + div.account-type { + font-size: 12px; + color: $gray; + text-transform: uppercase; + &:first-child { + padding-bottom: 3px; + } + &:last-child { + padding-top: 3px; + } + } + .account-details { + padding: 6pt; + word-break: break-all; + } + .account-username, span.none { + line-height: 16pt; + } + .account-delete { + background-image: url("close-button.png"); + background-size: cover; + width: 15px; + height: 15px; + + &:hover { + cursor: pointer; + } + } +} diff --git a/scss/components/members.scss b/scss/components/members.scss new file mode 100644 index 0000000000..cfe541037a --- /dev/null +++ b/scss/components/members.scss @@ -0,0 +1,33 @@ +#members { /* used on accounts elsewhere for GitHub org = Bitbucket team */ + td, th { + padding: 0 6px 6px; + text-align: left; + vertical-align: baseline; + font-family: $Ideal; + } + th { // borrowed from elements/h2 + font: bold 14px/14px $Ideal; + text-transform: uppercase; + padding: 34px 0 8px; + } + p + & th { padding-top: 13px; } + h2 + & th { padding-top: 26px; } + .declines, .not-on-gratipay { + font-size: 75%; + a { + font-weight: normal; + } + } + .declines { + color: #aaa; + a { + color: $darker-green; + } + } + img { + width: 18pt; + height: 18pt; + margin-right: 6pt; + float: left; + } +} diff --git a/scss/components/mini-user.scss b/scss/components/mini-user.scss new file mode 100644 index 0000000000..6a956f5ee5 --- /dev/null +++ b/scss/components/mini-user.scss @@ -0,0 +1,65 @@ +.mini-user, .search-result { + background: white !important; + border: 4px solid #DEE0E0; + box-shadow: inset 0 0 0 1px #B6B7B9; + display: block; + overflow: hidden; + @include border-radius(3px); + &:hover { + border-color: $light-brown; + box-shadow: inset 0 0 0 1px $brown; + text-decoration: none; + } +} + +.mini-user { + float: left; + width: $people-column-width - 4px; + + span.inner { + display: block; + min-height: 50px; + padding: 5px; + + span.avatar { + background: transparent url('avatar-default.png') center center no-repeat; + background-size: cover; + display: block; + height: 66px; + position: relative; + } + span.age, + span.money { + color: $black; + display: block; + font: bold 16px $Ideal; + margin: 7px 0 5px 0; + } + span.age { + font-size: 11px; + } + span.name { + display: block; + font: normal 11px $Ideal; + margin: 3px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + &.anonymous { + opacity: 0.33; + } +} +a.mini-user { + span.name { + color: $green; + } +} +span.mini-user { + border-color: white; + span.name { + color: $black; + } +} diff --git a/scss/fragments/card.scss b/scss/fragments/card.scss new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/scss/fragments/card.scss @@ -0,0 +1 @@ + diff --git a/scss/fragments/content.scss b/scss/fragments/content.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/scss/fragments/footer.scss b/scss/fragments/footer.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/scss/fragments/header.scss b/scss/fragments/header.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/scss/fragments/secondary-nav.scss b/scss/fragments/secondary-nav.scss new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/scss/fragments/secondary-nav.scss @@ -0,0 +1 @@ + diff --git a/scss/gratipay.scss b/scss/gratipay.scss index d53dffe220..7a7ea06a6d 100644 --- a/scss/gratipay.scss +++ b/scss/gratipay.scss @@ -18,10 +18,13 @@ @import "utils"; @import "variables"; +// dependency order @import "elements/reset"; @import "elements/buttons-knobs"; @import "elements/elements"; +// alphabetical order +@import "components/accounts"; @import "components/chart"; @import "components/chosen"; @import "components/communities"; @@ -33,7 +36,9 @@ @import "components/leaderboard"; @import "components/linear_gradient"; @import "components/loading-indicators"; +@import "components/members"; @import "components/memberships"; +@import "components/mini-user"; @import "components/payments-by"; @import "components/profile-statement"; @import "components/sign_in"; @@ -43,14 +48,18 @@ @import "components/tipr"; @import "components/upgrade"; -@import "fragments/accounts"; -@import "fragments/members"; -@import "fragments/mini-user"; +// spatial order (top to bottom) @import "fragments/notifications"; +@import "fragments/header"; +@import "fragments/secondary-nav"; +@import "fragments/card"; +@import "fragments/content"; +@import "fragments/footer"; -@import "layouts/layout"; -@import "layouts/responsiveness"; +// content size order +@import "layouts/smallest"; +// random order @import "pages/homepage"; @import "pages/history"; @import "pages/team"; diff --git a/scss/layouts/smallest.scss b/scss/layouts/smallest.scss new file mode 100644 index 0000000000..e69de29bb2 From 52428776ea82675498adb335ca300a9bc0677994 Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Tue, 6 Jan 2015 13:55:19 -0500 Subject: [PATCH 4/6] Remove min-width on body --- scss/elements/elements.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/elements/elements.scss b/scss/elements/elements.scss index 629985bd76..46ea3a14a2 100644 --- a/scss/elements/elements.scss +++ b/scss/elements/elements.scss @@ -5,7 +5,6 @@ body { color: $black; font: normal 16px/21px $Ideal; - min-width: 320px; text-rendering: optimizeLegibility; } * { From ff8a61c1e3b12d015d6d117e555731347690f3a2 Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Tue, 6 Jan 2015 13:59:39 -0500 Subject: [PATCH 5/6] Blip. Elemental blip. --- scss/elements/elements.scss | 8 +------- scss/utils.scss | 3 +++ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/scss/elements/elements.scss b/scss/elements/elements.scss index 46ea3a14a2..555dcf1fa1 100644 --- a/scss/elements/elements.scss +++ b/scss/elements/elements.scss @@ -1,5 +1,6 @@ * { box-sizing: border-box; + -moz-box-sizing: border-box; } body { @@ -7,10 +8,6 @@ body { font: normal 16px/21px $Ideal; text-rendering: optimizeLegibility; } -* { - box-sizing: border-box; - -moz-box-sizing: border-box; -} a { color: $green; text-decoration: none; @@ -105,6 +102,3 @@ table.simple { padding-right: 42px; } } -.mono { - font: normal 12px/16px $Mono; -} diff --git a/scss/utils.scss b/scss/utils.scss index 021d93e92f..e3afeccde4 100644 --- a/scss/utils.scss +++ b/scss/utils.scss @@ -23,3 +23,6 @@ top: -99999px; left: -99999px; } +.mono { + font: normal 12px/16px $Mono; +} From f72e7a9e754ebd14de3554c39504eece96c8eabc Mon Sep 17 00:00:00 2001 From: Chad Whitacre Date: Tue, 3 Mar 2015 21:30:06 -0500 Subject: [PATCH 6/6] Fix order of imports that was blocking SCSS --- scss/gratipay.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/gratipay.scss b/scss/gratipay.scss index 7a7ea06a6d..4e3da47f5b 100644 --- a/scss/gratipay.scss +++ b/scss/gratipay.scss @@ -15,8 +15,8 @@ @import "mixins/icons"; @import "mixins/layout"; @import "mixins/transform"; -@import "utils"; @import "variables"; +@import "utils"; // dependency order @import "elements/reset";