From 758ef3edcfb2ae475ed20d2a73f4e9e9339b15a8 Mon Sep 17 00:00:00 2001 From: Maciej Jarczok Date: Wed, 16 Apr 2014 22:08:20 +0200 Subject: [PATCH 1/4] divide styles into categories --- app/styles/_variables.sass | 2 -- app/styles/app.sass | 24 +++++++++++-------- app/styles/base/_element_defaults.sass | 23 ++++++++++++++++++ .../_glyphicons_filetypes.sass} | 0 app/styles/{ => base}/_mixins.sass | 2 +- app/styles/base/_variables.sass | 4 ++++ app/styles/{ => layout}/_footer.sass | 0 app/styles/{ => layout}/_header.sass | 6 ++--- app/styles/{ => layout}/_media.sass | 0 app/styles/{ => modules}/_modal.sass | 0 .../{_layout.sass => modules/_modules.sass} | 24 ------------------- app/styles/{ => modules}/_popover.sass | 0 app/styles/{ => modules}/_users.sass | 2 -- 13 files changed, 45 insertions(+), 42 deletions(-) delete mode 100644 app/styles/_variables.sass create mode 100644 app/styles/base/_element_defaults.sass rename app/styles/{_glyphicons-filetypes.sass => base/_glyphicons_filetypes.sass} (100%) rename app/styles/{ => base}/_mixins.sass (89%) create mode 100644 app/styles/base/_variables.sass rename app/styles/{ => layout}/_footer.sass (100%) rename app/styles/{ => layout}/_header.sass (94%) rename app/styles/{ => layout}/_media.sass (100%) rename app/styles/{ => modules}/_modal.sass (100%) rename app/styles/{_layout.sass => modules/_modules.sass} (76%) rename app/styles/{ => modules}/_popover.sass (100%) rename app/styles/{ => modules}/_users.sass (99%) diff --git a/app/styles/_variables.sass b/app/styles/_variables.sass deleted file mode 100644 index 545902e..0000000 --- a/app/styles/_variables.sass +++ /dev/null @@ -1,2 +0,0 @@ -$blue: #0088cc -$green: #a4c540 diff --git a/app/styles/app.sass b/app/styles/app.sass index 76886e5..92865b3 100644 --- a/app/styles/app.sass +++ b/app/styles/app.sass @@ -1,13 +1,17 @@ @import compass/reset @import compass/css3 -@import variables -@import mixins -@import layout -@import modal -@import header -@import footer -@import users -@import media -@import popover -@import glyphicons-filetypes +@import base/variables +@import base/mixins +@import base/element_defaults +@import base/glyphicons_filetypes + +@import modules/modules +@import modules/modal +@import modules/users +@import modules/popover + +@import layout/header +@import layout/footer +@import layout/media + diff --git a/app/styles/base/_element_defaults.sass b/app/styles/base/_element_defaults.sass new file mode 100644 index 0000000..136cd32 --- /dev/null +++ b/app/styles/base/_element_defaults.sass @@ -0,0 +1,23 @@ +* + +box-sizing(border-box) + &::before, &::after + +box-sizing(border-box) + +html + height: 100% + font-family: $font-family + font-size: 10px + +body + height: 100% + +a + text-decoration: none + +b, strong + font-weight: bold + +.invisible + height: 0 + width: 0 + opacity: 0 diff --git a/app/styles/_glyphicons-filetypes.sass b/app/styles/base/_glyphicons_filetypes.sass similarity index 100% rename from app/styles/_glyphicons-filetypes.sass rename to app/styles/base/_glyphicons_filetypes.sass diff --git a/app/styles/_mixins.sass b/app/styles/base/_mixins.sass similarity index 89% rename from app/styles/_mixins.sass rename to app/styles/base/_mixins.sass index 499f454..a54e078 100644 --- a/app/styles/_mixins.sass +++ b/app/styles/base/_mixins.sass @@ -12,7 +12,7 @@ outline: none width: auto cursor: pointer - font-family: Helvetica, Arial, sans-serif + font-family: $font-family =circle($size) display: inline-block diff --git a/app/styles/base/_variables.sass b/app/styles/base/_variables.sass new file mode 100644 index 0000000..4d57ad2 --- /dev/null +++ b/app/styles/base/_variables.sass @@ -0,0 +1,4 @@ +$font-family: "Helvetica Neue", sans-serif + +$blue: #0088cc +$green: #a4c540 diff --git a/app/styles/_footer.sass b/app/styles/layout/_footer.sass similarity index 100% rename from app/styles/_footer.sass rename to app/styles/layout/_footer.sass diff --git a/app/styles/_header.sass b/app/styles/layout/_header.sass similarity index 94% rename from app/styles/_header.sass rename to app/styles/layout/_header.sass index 04647a1..7d2f65d 100644 --- a/app/styles/_header.sass +++ b/app/styles/layout/_header.sass @@ -6,7 +6,7 @@ width: 100% height: 60px background: transparent - color: #000 + color: black +user-select(none) .logo position: relative @@ -37,13 +37,13 @@ a display: inline-block transition: opacity .2s linear - color: #000 + color: black img vertical-align: middle .about +circle(18px) - border: 1px solid #000 + border: 1px solid black font-size: 12px opacity: .18 margin-top: -2px diff --git a/app/styles/_media.sass b/app/styles/layout/_media.sass similarity index 100% rename from app/styles/_media.sass rename to app/styles/layout/_media.sass diff --git a/app/styles/_modal.sass b/app/styles/modules/_modal.sass similarity index 100% rename from app/styles/_modal.sass rename to app/styles/modules/_modal.sass diff --git a/app/styles/_layout.sass b/app/styles/modules/_modules.sass similarity index 76% rename from app/styles/_layout.sass rename to app/styles/modules/_modules.sass index 0373772..b26c7fe 100644 --- a/app/styles/_layout.sass +++ b/app/styles/modules/_modules.sass @@ -1,22 +1,3 @@ -* - +box-sizing(border-box) - &::before, &::after - +box-sizing(border-box) - -html - height: 100% - font-family: "Helvetica Neue", sans-serif - font-size: 10px - -body - height: 100% - -a - text-decoration: none - -b, strong - font-weight: bold - .preloader position: absolute left: 0 @@ -40,11 +21,6 @@ b, strong .preloader opacity: 0 -.invisible - height: 0 - width: 0 - opacity: 0 - .error position: absolute top: 0 diff --git a/app/styles/_popover.sass b/app/styles/modules/_popover.sass similarity index 100% rename from app/styles/_popover.sass rename to app/styles/modules/_popover.sass diff --git a/app/styles/_users.sass b/app/styles/modules/_users.sass similarity index 99% rename from app/styles/_users.sass rename to app/styles/modules/_users.sass index f3467fb..2bd115a 100644 --- a/app/styles/_users.sass +++ b/app/styles/modules/_users.sass @@ -143,8 +143,6 @@ $user-size: 76px &::after opacity: 1 - - +keyframes(shadow) 0% opacity: 0 From 64a6849bdb4780ceb0272de7d459fd127eacb193 Mon Sep 17 00:00:00 2001 From: Maciej Jarczok Date: Fri, 2 May 2014 11:46:41 +0200 Subject: [PATCH 2/4] rem as font-size unit --- app/styles/layout/_footer.sass | 4 ++-- app/styles/layout/_header.sass | 6 +++--- app/styles/layout/_media.sass | 12 ++++++------ app/styles/modules/_popover.sass | 4 ++-- app/styles/modules/_users.sass | 8 ++++---- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/styles/layout/_footer.sass b/app/styles/layout/_footer.sass index 290c03b..8bd1d7d 100644 --- a/app/styles/layout/_footer.sass +++ b/app/styles/layout/_footer.sass @@ -17,14 +17,14 @@ .about display: inline-block - font-size: 12px + font-size: 1.2rem line-height: 1.4em .cowbell-labs position: absolute left: 15px bottom: 15px - font-size: 10px + font-size: 1rem > a display: inline-block vertical-align: middle diff --git a/app/styles/layout/_header.sass b/app/styles/layout/_header.sass index 7d2f65d..aaf9745 100644 --- a/app/styles/layout/_header.sass +++ b/app/styles/layout/_header.sass @@ -20,7 +20,7 @@ position: absolute bottom: 0 left: 44px - font-size: 10px + font-size: 1rem font-weight: bold img vertical-align: top @@ -32,7 +32,7 @@ > li float: left margin-left: 15px - font-size: 14px + font-size: 1.4rem line-height: 30px a display: inline-block @@ -44,7 +44,7 @@ .about +circle(18px) border: 1px solid black - font-size: 12px + font-size: 1.2rem opacity: .18 margin-top: -2px &:hover diff --git a/app/styles/layout/_media.sass b/app/styles/layout/_media.sass index 415b33e..f4f669f 100644 --- a/app/styles/layout/_media.sass +++ b/app/styles/layout/_media.sass @@ -40,12 +40,12 @@ padding-left: 170px width: 100% .user-email - font-size: 14px + font-size: 1.4rem .user-label - font-size: 18px + font-size: 1.8rem .user-id margin-top: 4px - font-size: 12px + font-size: 1.2rem color: #808080 .popover $bg_color: #f4f4f4 @@ -86,7 +86,7 @@ height: 106px line-height: 106px width: 50% - font-size: 12px + font-size: 1.2rem margin-left: -3px color: #fff &.cancel @@ -112,7 +112,7 @@ height: 100px padding: 15px .about - font-size: 11px + font-size: 1.1rem .cowbell-labs > span display: none @@ -127,7 +127,7 @@ .error width: auto - font-size: 14px + font-size: 1.4rem padding: 0 15px diff --git a/app/styles/modules/_popover.sass b/app/styles/modules/_popover.sass index 9bcf71e..cd8b7cc 100644 --- a/app/styles/modules/_popover.sass +++ b/app/styles/modules/_popover.sass @@ -26,7 +26,7 @@ > p word-break: break-all overflow: hidden - font-size: 12px + font-size: 1.2rem line-height: 1.4em margin-bottom: 1em min-height: 28px @@ -34,7 +34,7 @@ position: absolute left: 0 top: 0 - font-size: 50px + font-size: 5rem .popover-buttons text-align: right diff --git a/app/styles/modules/_users.sass b/app/styles/modules/_users.sass index 2bd115a..cbf4ee9 100644 --- a/app/styles/modules/_users.sass +++ b/app/styles/modules/_users.sass @@ -45,12 +45,12 @@ $user-size: 76px color: #606060 padding-bottom: 4px .user-email - font-size: 10px + font-size: 1rem +ellipsis .user-label - font-size: 14px + font-size: 1.4rem .user-id - font-size: 10px + font-size: 1rem color: #808080 .user-connected display: inline-block @@ -62,7 +62,7 @@ $user-size: 76px select +appearance(none) border: none - font-size: 10px + font-size: 1rem font-family: "Helvetica Neue", sans-serif color: #808080 padding-right: 10px From dc6a9f2f0f47b7c5f583e3c99038407fdba4b2c9 Mon Sep 17 00:00:00 2001 From: Maciej Jarczok Date: Fri, 2 May 2014 12:51:20 +0200 Subject: [PATCH 3/4] base64 backgrounds, font-family --- Gruntfile.js | 2 ++ app/styles/base/_element_defaults.sass | 3 +++ app/styles/layout/_footer.sass | 8 ++++---- app/styles/layout/_header.sass | 4 ++-- app/styles/modules/_users.sass | 3 +-- 5 files changed, 12 insertions(+), 8 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 7bf48f6..103b1af 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -55,6 +55,7 @@ module.exports = function (grunt) { cssDir: '.tmp/styles', fontsDir: 'app/fonts', httpFontsDir: 'fonts', + imagesDir: 'app/images', httpImagesPath: '../images' } }, @@ -64,6 +65,7 @@ module.exports = function (grunt) { cssDir: '.tmp/styles', fontsDir: 'dist/fonts', httpFontsDir: 'fonts', + imagesDir: 'app/images', httpImagesPath: '../images', environment: 'production' } diff --git a/app/styles/base/_element_defaults.sass b/app/styles/base/_element_defaults.sass index 136cd32..2686048 100644 --- a/app/styles/base/_element_defaults.sass +++ b/app/styles/base/_element_defaults.sass @@ -17,6 +17,9 @@ a b, strong font-weight: bold +input, select + font-family: $font-family + .invisible height: 0 width: 0 diff --git a/app/styles/layout/_footer.sass b/app/styles/layout/_footer.sass index 8bd1d7d..6e5dd05 100644 --- a/app/styles/layout/_footer.sass +++ b/app/styles/layout/_footer.sass @@ -31,7 +31,7 @@ margin: -1px 0 0 2px width: 102px height: 16px - background: transparent image-url("/images/cowbell-labs.svg") no-repeat center + background: transparent inline-image("cowbell-labs.svg") no-repeat center .github position: absolute @@ -39,7 +39,7 @@ bottom: 13px width: 20px height: 20px - background: transparent image-url("/images/github.svg") no-repeat center + background: transparent inline-image("github.svg") no-repeat center .webrtc position: absolute @@ -47,7 +47,7 @@ bottom: 17px width: 72px height: 12px - background: transparent image-url("/images/webrtc.png") no-repeat center + background: transparent inline-image("webrtc.png") no-repeat center background-size: 71px 12px .firebase @@ -56,5 +56,5 @@ bottom: 15px width: 76px height: 20px - background: transparent image-url("/images/firebase.png") no-repeat center + background: transparent inline-image("firebase.png") no-repeat center background-size: 76px 20px diff --git a/app/styles/layout/_header.sass b/app/styles/layout/_header.sass index aaf9745..e9062d4 100644 --- a/app/styles/layout/_header.sass +++ b/app/styles/layout/_header.sass @@ -13,7 +13,7 @@ height: 38px width: 162px margin: 15px 0 0 15px - background: transparent image-url("/images/sharedrop.svg") no-repeat left top + background: transparent image-url("sharedrop.svg") no-repeat left top .logo-title display: none .logo-subtitle @@ -51,7 +51,7 @@ opacity: .6 .sign - background: transparent image-url("/images/persona.svg") no-repeat left + background: transparent inline-image("persona.svg") no-repeat left padding-left: 25px &:hover opacity: .6 diff --git a/app/styles/modules/_users.sass b/app/styles/modules/_users.sass index cbf4ee9..a5dd382 100644 --- a/app/styles/modules/_users.sass +++ b/app/styles/modules/_users.sass @@ -63,11 +63,10 @@ $user-size: 76px +appearance(none) border: none font-size: 1rem - font-family: "Helvetica Neue", sans-serif color: #808080 padding-right: 10px outline: none - background: transparent image-url("/images/select-arrow.svg") no-repeat 66px 50% + background: transparent inline-image("select-arrow.svg") no-repeat 66px 50% // firefox fix - remove arrow from select text-indent: 0.01px text-overflow: '' From 4284a22f28ca8abf088c51b216c870bc7b956bac Mon Sep 17 00:00:00 2001 From: Maciej Jarczok Date: Sat, 3 May 2014 14:33:19 +0200 Subject: [PATCH 4/4] fix distribution image path --- Gruntfile.js | 4 +--- app/styles/layout/_header.sass | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 103b1af..71e6684 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -55,8 +55,7 @@ module.exports = function (grunt) { cssDir: '.tmp/styles', fontsDir: 'app/fonts', httpFontsDir: 'fonts', - imagesDir: 'app/images', - httpImagesPath: '../images' + imagesDir: 'app/images' } }, dist: { @@ -66,7 +65,6 @@ module.exports = function (grunt) { fontsDir: 'dist/fonts', httpFontsDir: 'fonts', imagesDir: 'app/images', - httpImagesPath: '../images', environment: 'production' } } diff --git a/app/styles/layout/_header.sass b/app/styles/layout/_header.sass index e9062d4..326cd18 100644 --- a/app/styles/layout/_header.sass +++ b/app/styles/layout/_header.sass @@ -13,7 +13,7 @@ height: 38px width: 162px margin: 15px 0 0 15px - background: transparent image-url("sharedrop.svg") no-repeat left top + background: transparent image-url("/images/sharedrop.svg") no-repeat left top .logo-title display: none .logo-subtitle