From 87b87b9d1854d7b9d64dbd53f1747dcb45fd91b7 Mon Sep 17 00:00:00 2001 From: agustin veloso Date: Tue, 4 Nov 2014 14:41:46 -0300 Subject: [PATCH 1/4] SASS implemented to emulate check box --- app/images/select_checkmark_circle.svg | 16 +++ app/images/select_circle_empty.svg | 12 ++ app/index.html | 13 -- app/styles/main.scss | 173 ++++++++++++++----------- app/views/main.html | 29 ++++- 5 files changed, 152 insertions(+), 91 deletions(-) create mode 100644 app/images/select_checkmark_circle.svg create mode 100644 app/images/select_circle_empty.svg diff --git a/app/images/select_checkmark_circle.svg b/app/images/select_checkmark_circle.svg new file mode 100644 index 0000000..1c437b6 --- /dev/null +++ b/app/images/select_checkmark_circle.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/app/images/select_circle_empty.svg b/app/images/select_circle_empty.svg new file mode 100644 index 0000000..3f82e84 --- /dev/null +++ b/app/images/select_circle_empty.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/app/index.html b/app/index.html index ad75078..f3d144e 100644 --- a/app/index.html +++ b/app/index.html @@ -21,20 +21,7 @@
-
- -

sass

-
-
- -
-

from the Yeoman team

-
diff --git a/app/styles/main.scss b/app/styles/main.scss index 76c725a..e880c6f 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -1,92 +1,111 @@ -$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; -// bower:scss -@import "../components/bootstrap-sass-official/assets/stylesheets/bootstrap.scss"; -// endbower - -.browsehappy { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; +ul { + margin: 0; + padding: 0; } -/* Space out content a bit */ -body { - padding-top: 20px; - padding-bottom: 20px; +li { + margin: 0; + padding: 0; + list-style: none; } -/* Everything but the jumbotron gets side spacing for mobile first views */ -.header, -.marketing, -.footer { - padding-left: 15px; - padding-right: 15px; -} +.options { + font-family: Roboto; + font-size: 16px; -/* Custom page header */ -.header { - border-bottom: 1px solid #e5e5e5; + width: 569px; - /* Make the masthead heading the same height as the navigation */ - h3 { - margin-top: 0; - margin-bottom: 0; - line-height: 40px; - padding-bottom: 19px; - } -} + .selection-list { + border: 2px solid #333; + border-radius: 10px; + margin-bottom: 2%; -/* Custom page footer */ -.footer { - padding-top: 19px; - color: #777; - border-top: 1px solid #e5e5e5; -} + .selection-list-item { + width: 100%; + height: 50px; + border-bottom: 2px solid #333; + font-family: RobotoCondReg; + font-size: 16px; -.container-narrow > hr { - margin: 30px 0; -} + &.selected { + label { + border-radius: 5px 5px 0 0; + background-color: #333; -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - border-bottom: 1px solid #e5e5e5; + &:after { + background: url("../../images/select_checkmark_circle.svg") no-repeat; + } - .btn { - font-size: 21px; - padding: 14px 24px; - } -} + span { + &.name { + color: #fff; + } -/* Supporting marketing content */ -.marketing { - margin: 40px 0; + &.price { + color: #fff; + } + } + } + } - p + h4 { - margin-top: 28px; - } -} + label { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - .container { - max-width: 730px; - } + &:after { + content: ""; + width: 30px; + height: 30px; + margin-left: 10px; + background: url("../../images/select_circle_empty.svg") no-repeat; + display: block; + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + -ms-flex: 0 0; + flex-shrink: 0; + } - /* Remove the padding we set earlier */ - .header, - .marketing, - .footer { - padding-left: 0; - padding-right: 0; - } - /* Space out the masthead */ - .header { - margin-bottom: 30px; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; + span { + line-height: 30px; + text-transform: none; + color: #333; + display: block; + + + &.name { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + -webkit-flex-basis: 100%; + -moz-flex-basis: 100%; + -ms-flex-basis: 100%; + -ms-flex: 0 1 100%; + flex-basis: 100%; + -webkit-flex-grow: 5; + -moz-flex-grow: 5; + -ms-flex-grow: 5; + -webkit-box-flex: 5; + flex-grow: 5; + } + &.price { + margin-left: 5px; + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + -ms-flex: 0 0; + flex-shrink: 0; + } + } + } + } } -} +} \ No newline at end of file diff --git a/app/views/main.html b/app/views/main.html index 8b13789..fdc40ff 100644 --- a/app/views/main.html +++ b/app/views/main.html @@ -1 +1,28 @@ - +
+ +
From 13198ccb4d75957883c54e460ce511209ce5106c Mon Sep 17 00:00:00 2001 From: agustin veloso Date: Tue, 4 Nov 2014 14:52:29 -0300 Subject: [PATCH 2/4] SASS implemented to emulate check box --- app/styles/main.scss | 111 ------------------------------------------- 1 file changed, 111 deletions(-) diff --git a/app/styles/main.scss b/app/styles/main.scss index e880c6f..e69de29 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -1,111 +0,0 @@ -ul { - margin: 0; - padding: 0; -} - -li { - margin: 0; - padding: 0; - list-style: none; -} - -.options { - font-family: Roboto; - font-size: 16px; - - width: 569px; - - .selection-list { - border: 2px solid #333; - border-radius: 10px; - margin-bottom: 2%; - - .selection-list-item { - width: 100%; - height: 50px; - border-bottom: 2px solid #333; - font-family: RobotoCondReg; - font-size: 16px; - - &.selected { - label { - border-radius: 5px 5px 0 0; - background-color: #333; - - &:after { - background: url("../../images/select_checkmark_circle.svg") no-repeat; - } - - span { - &.name { - color: #fff; - } - - &.price { - color: #fff; - } - } - } - } - - label { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - height: 100%; - padding: 10px; - display: -webkit-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - &:after { - content: ""; - width: 30px; - height: 30px; - margin-left: 10px; - background: url("../../images/select_circle_empty.svg") no-repeat; - display: block; - -webkit-flex-shrink: 0; - -moz-flex-shrink: 0; - -ms-flex-shrink: 0; - -ms-flex: 0 0; - flex-shrink: 0; - } - - span { - line-height: 30px; - text-transform: none; - color: #333; - display: block; - - - &.name { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - -webkit-flex-basis: 100%; - -moz-flex-basis: 100%; - -ms-flex-basis: 100%; - -ms-flex: 0 1 100%; - flex-basis: 100%; - -webkit-flex-grow: 5; - -moz-flex-grow: 5; - -ms-flex-grow: 5; - -webkit-box-flex: 5; - flex-grow: 5; - } - &.price { - margin-left: 5px; - -webkit-flex-shrink: 0; - -moz-flex-shrink: 0; - -ms-flex-shrink: 0; - -ms-flex: 0 0; - flex-shrink: 0; - } - } - } - } - } -} \ No newline at end of file From 41a6ef6dbe1963ef35c678852e0e9aef9d99ea77 Mon Sep 17 00:00:00 2001 From: agustin veloso Date: Tue, 4 Nov 2014 14:57:49 -0300 Subject: [PATCH 3/4] SASS implemented to emulate check box --- app/styles/main.scss | 111 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) diff --git a/app/styles/main.scss b/app/styles/main.scss index e69de29..e880c6f 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -0,0 +1,111 @@ +ul { + margin: 0; + padding: 0; +} + +li { + margin: 0; + padding: 0; + list-style: none; +} + +.options { + font-family: Roboto; + font-size: 16px; + + width: 569px; + + .selection-list { + border: 2px solid #333; + border-radius: 10px; + margin-bottom: 2%; + + .selection-list-item { + width: 100%; + height: 50px; + border-bottom: 2px solid #333; + font-family: RobotoCondReg; + font-size: 16px; + + &.selected { + label { + border-radius: 5px 5px 0 0; + background-color: #333; + + &:after { + background: url("../../images/select_checkmark_circle.svg") no-repeat; + } + + span { + &.name { + color: #fff; + } + + &.price { + color: #fff; + } + } + } + } + + label { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + &:after { + content: ""; + width: 30px; + height: 30px; + margin-left: 10px; + background: url("../../images/select_circle_empty.svg") no-repeat; + display: block; + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + -ms-flex: 0 0; + flex-shrink: 0; + } + + span { + line-height: 30px; + text-transform: none; + color: #333; + display: block; + + + &.name { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + -webkit-flex-basis: 100%; + -moz-flex-basis: 100%; + -ms-flex-basis: 100%; + -ms-flex: 0 1 100%; + flex-basis: 100%; + -webkit-flex-grow: 5; + -moz-flex-grow: 5; + -ms-flex-grow: 5; + -webkit-box-flex: 5; + flex-grow: 5; + } + &.price { + margin-left: 5px; + -webkit-flex-shrink: 0; + -moz-flex-shrink: 0; + -ms-flex-shrink: 0; + -ms-flex: 0 0; + flex-shrink: 0; + } + } + } + } + } +} \ No newline at end of file From d6d79a1b2b9dcf6549c3a7c418819ce6dbf203e5 Mon Sep 17 00:00:00 2001 From: agustin veloso Date: Wed, 5 Nov 2014 14:05:34 -0300 Subject: [PATCH 4/4] SASS and HTML corrections. Options repeater implemented --- app/scripts/controllers/main.js | 20 +++++++ app/styles/main.scss | 101 ++++++++++++++++---------------- app/views/main.html | 26 ++------ 3 files changed, 74 insertions(+), 73 deletions(-) diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js index d3a5b9c..93e3812 100644 --- a/app/scripts/controllers/main.js +++ b/app/scripts/controllers/main.js @@ -14,4 +14,24 @@ angular.module('sassApp') 'AngularJS', 'Karma' ]; + + $scope.items = [ + { + name: '3-Prong 5\' Flat Dryer Cord - Gray', + price: 29.99, + selected: true + }, + { + name: '4-Prong 5\' Round Dryer Cord - Black', + price: 29.99 + }, + { + name: '6 ft. Snap-Lock™ Flexible Pipe', + price: 14.99 + }, + { + name: 'Dryer Exhaust Close Elbow', + price: 9.99 + } + ] }); diff --git a/app/styles/main.scss b/app/styles/main.scss index e880c6f..ede6312 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -1,3 +1,22 @@ +$fontSize: 16px; +$fontFamily: RobotoCondReg; +$white: #fff; +$darkGrey: #333; + +@mixin display { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +@mixin flex($type, $value) { + -webkit-flex-#{$type}: $value; + -moz-flex-#{$type}: $value; + -ms-flex-#{$type}: $value; + flex-#{$type}: $value; +} + ul { margin: 0; padding: 0; @@ -10,40 +29,33 @@ li { } .options { - font-family: Roboto; - font-size: 16px; - - width: 569px; - .selection-list { - border: 2px solid #333; + border: 2px solid $darkGrey; border-radius: 10px; margin-bottom: 2%; .selection-list-item { width: 100%; height: 50px; - border-bottom: 2px solid #333; - font-family: RobotoCondReg; - font-size: 16px; + border-bottom: 2px solid $darkGrey; + font-family: $fontFamily; + font-size: $fontSize; &.selected { label { border-radius: 5px 5px 0 0; - background-color: #333; + background-color: $darkGrey; &:after { background: url("../../images/select_checkmark_circle.svg") no-repeat; } - span { - &.name { - color: #fff; - } + .option-name { + color: $white; + } - &.price { - color: #fff; - } + .option-price { + color: $white; } } } @@ -55,10 +67,7 @@ li { width: 100%; height: 100%; padding: 10px; - display: -webkit-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; + @include display; &:after { content: ""; @@ -67,44 +76,34 @@ li { margin-left: 10px; background: url("../../images/select_circle_empty.svg") no-repeat; display: block; - -webkit-flex-shrink: 0; - -moz-flex-shrink: 0; - -ms-flex-shrink: 0; + @include flex("shrink",0); -ms-flex: 0 0; - flex-shrink: 0; } - span { + .option-element { line-height: 30px; text-transform: none; - color: #333; + color: $darkGrey; display: block; + } + .option-name { + @extend .option-element; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + @include flex("basis", 100%); + @include flex("grow", 5); + -ms-flex: 0 1 100%; + -webkit-box-flex: 5; + } - &.name { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - -webkit-flex-basis: 100%; - -moz-flex-basis: 100%; - -ms-flex-basis: 100%; - -ms-flex: 0 1 100%; - flex-basis: 100%; - -webkit-flex-grow: 5; - -moz-flex-grow: 5; - -ms-flex-grow: 5; - -webkit-box-flex: 5; - flex-grow: 5; - } - &.price { - margin-left: 5px; - -webkit-flex-shrink: 0; - -moz-flex-shrink: 0; - -ms-flex-shrink: 0; - -ms-flex: 0 0; - flex-shrink: 0; - } - } + .option-price { + @extend .option-element; + margin-left: 5px; + @include flex("shrink",0); + -ms-flex: 0 0; + } } } } diff --git a/app/views/main.html b/app/views/main.html index fdc40ff..fc793ed 100644 --- a/app/views/main.html +++ b/app/views/main.html @@ -1,27 +1,9 @@
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • -
  • +