diff --git a/sass/buttons.scss b/sass/buttons.scss index 73b255c..62c0a20 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -1,9 +1,12 @@ @import "colors"; .btn { - padding: 1rem 3rem; + width: 140px; + height: 45px; color: #fff; cursor: pointer; + text-transform: uppercase; + font-weight: bold; } .btn-primary { @@ -18,7 +21,7 @@ border-width: 3px; border-style: solid; transition: all 0.5s; - padding: 0.8rem 3rem; + &:hover { color: #fff; transition: all 0.5s; @@ -32,6 +35,7 @@ .black-btn { border-color: $black; color: $black; + &:hover { background-color: $black; } @@ -40,6 +44,7 @@ .green-btn { border-color: $green; color: $green; + &:hover { background-color: $green; } @@ -48,6 +53,7 @@ .orange-btn { border-color: $orange-btn; color: $orange-btn; + &:hover { background-color: $orange-btn; } @@ -56,6 +62,7 @@ .purple-btn { border-color: $purple-btn; color: $purple-btn; + &:hover { background-color: $purple-btn; } @@ -67,9 +74,9 @@ button:disabled { background: $disabled; color: #fff; border: unset; -} -button:disabled:hover { - box-shadow: unset; - background: $disabled; -} + &:hover { + box-shadow: unset; + background: $disabled; + } +} \ No newline at end of file diff --git a/sass/cards.scss b/sass/cards.scss index 5200332..15a23f4 100644 --- a/sass/cards.scss +++ b/sass/cards.scss @@ -1,15 +1,19 @@ .card { border-radius: 5px; box-shadow: 0px 1px 10px 0px rgba(5, 5, 5, 0.13); + .card-header { - padding: 1.5rem 0 1.5rem 1.5rem; + padding: 1.5rem; + h4 { font-weight: bold; margin: 0; } } + .card-img { overflow: hidden; + img { position: relative; left: 0; @@ -20,8 +24,10 @@ display: block; } } + .card-footer { padding: 1.5rem 0 1.5rem 1.5rem; + h4 { font-weight: bold; margin: 0; @@ -29,8 +35,9 @@ } } -.card-nofooter { +.card-no-footer { .card-img { + img { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; @@ -38,7 +45,7 @@ } } -.card-noheader { +.card-no-header { .card-img { img { border-top-left-radius: 5px; @@ -47,7 +54,7 @@ } } -.card-hoverable { +.card-hover { transition: all .3s; &:hover { box-shadow: 0px 11px 16px 0px rgba(5, 5, 5, 0.23); diff --git a/sass/colors.scss b/sass/colors.scss index 8adde6c..a809cee 100644 --- a/sass/colors.scss +++ b/sass/colors.scss @@ -9,4 +9,4 @@ $purple: #B721FF; $purple-btn: #7274ff; $red: #f44336; $black: #212121; -$disabled: #fa5151; +$disabled: #c1c1c1; diff --git a/sass/default.scss b/sass/default.scss index c0666b8..ec332d8 100644 --- a/sass/default.scss +++ b/sass/default.scss @@ -2,12 +2,12 @@ a { text-decoration: none; } -select, input, textarea { +select, input, textarea, button { -webkit-appearance: none; -} -button, input, select, textarea:focus { - outline: none; + &:focus { + outline: none; + } } button { diff --git a/sass/fonts.scss b/sass/fonts.scss index da4fe8f..f4716ee 100644 --- a/sass/fonts.scss +++ b/sass/fonts.scss @@ -1,2 +1 @@ -@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); -@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i'); +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); \ No newline at end of file diff --git a/sass/forms.scss b/sass/forms.scss index bd1be34..ac90e3b 100644 --- a/sass/forms.scss +++ b/sass/forms.scss @@ -20,11 +20,11 @@ textarea[type=text] { margin-bottom: 1rem; box-sizing: border-box; transition: all .2s ease; - text-align: left; border-width: 1px; border-color: $black; border-style: solid; border-radius: 2px; + &:focus { border-color: $black; transition: all .2s ease; @@ -33,7 +33,6 @@ textarea[type=text] { input, textarea { padding: .9rem 1rem .9rem 2rem; - -webkit-appearance:none; } select { @@ -43,9 +42,8 @@ select { } textarea { - resize: vertical; - min-height: 8rem; + min-height: 12rem; margin: 0; } @@ -78,10 +76,16 @@ textarea { content: ''; } +.caret-icon:before { + content: '▼'; +} + label { cursor: pointer; + input[type="checkbox"] { display: none; + + span:before { content: ''; font-family: 'fontawesome'; @@ -107,6 +111,7 @@ label { input[type="radio"] { display: none; + + span:before { content: ''; font-family: 'fontawesome'; @@ -144,13 +149,13 @@ label { textarea, textarea[type="text"] { border-color: $green; - &:focus { + &:focus { border-color: $blue; } } - span:before { + span:before { color: $green; } } @@ -168,10 +173,12 @@ label { textarea, textarea[type="text"] { border-color: $black; + &:focus { border-color: lighten($black, 10); } } + span:before { color: $black; } @@ -190,10 +197,12 @@ label { textarea, textarea[type="text"] { border-color: $orange-btn; + &:focus { border-color: $yellow; } } + span:before { color: $orange-btn; } @@ -212,50 +221,50 @@ label { textarea, textarea[type="text"] { border-color: $purple-btn; - &:focus { + &:focus { border-color: $dark-blue; } } + span:before { color: $purple-btn; } } -// green .green-checkbox { + span:before { border-color: $green !important; color: rgba(255, 255, 255, 0) !important; } } + .green-checkbox:checked + span:before { color: $green !important; } -// black .black-checkbox { + span:before { border-color: $black !important; color: rgba(255, 255, 255, 0) !important; } } + .black-checkbox:checked + span:before { color: $black !important; } -// orange .orange-checkbox { + span:before { border-color: $orange-btn !important; color: rgba(255, 255, 255, 0) !important; } } + .orange-checkbox:checked + span:before { color: $orange-btn !important; } -// purple .purple-checkbox { + span:before { @@ -263,6 +272,7 @@ label { color: rgba(255, 255, 255, 0) !important; } } + .purple-checkbox:checked + span:before { color: $purple-btn !important; -} +} \ No newline at end of file diff --git a/sass/gradient.scss b/sass/gradient.scss index f3423bc..8be5939 100644 --- a/sass/gradient.scss +++ b/sass/gradient.scss @@ -1,80 +1,14 @@ @import "colors"; - -@function is-direction($value) { - $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value); - $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value)); - - @return $is-keyword or $is-angle; -} - -@function legacy-direction($value) { - @if is-direction($value) == false { - @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction."; - } - - $conversion-map: ( - to top : bottom, - to top right : bottom left, - to right top : left bottom, - to right : left, - to bottom right : top left, - to right bottom : left top, - to bottom : top, - to bottom left : top right, - to left bottom : right top, - to left : right, - to left top : right bottom, - to top left : bottom right - ); - - @if map-has-key($conversion-map, $value) { - @return map-get($conversion-map, $value); - } - - @return 90deg - $value; -} - -@mixin linear-gradient($direction, $color-stops...) { - // Direction has been omitted and happens to be a color-stop - @if is-direction($direction) == false { - $color-stops: $direction, $color-stops; - $direction: 180deg; - } - - background: nth(nth($color-stops, 1), 1); - background: -webkit-linear-gradient(legacy-direction($direction), $color-stops); - background: linear-gradient($direction, $color-stops); -} +@import "mixins"; .gradient-green { @include linear-gradient($green, $blue); - box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48); - transition: all .2s; - &:hover { - - box-shadow: 0px 7px 13px 0px rgba(18, 194, 211, 0.80); - transition: all .2s; - } } .gradient-orange { @include linear-gradient($yellow, $orange); - box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48); - transition: all .2s; - &:hover { - - box-shadow: 0px 7px 13px 0px rgba(255, 50, 39, 0.80); - transition: all .2s; - } } .gradient-purple { @include linear-gradient($dark-blue, $purple); - box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48); - transition: all .2s; - &:hover { - - box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.80); - transition: all .2s; - } } diff --git a/sass/grid.scss b/sass/grid.scss index 1142d41..8d2ae8f 100644 --- a/sass/grid.scss +++ b/sass/grid.scss @@ -1,54 +1,53 @@ -$mobile-up: 601px !default; -$tablet-up: 993px !default; -$desk-up: 1201px !default; -$mobile: 600px !default; -$tablet: 992px !default; -$desk: 1200px !default; - -$medium-and-up: "only screen and (min-width : #{$mobile-up})" !default; -$large-and-up: "only screen and (min-width : #{$tablet-up})" !default; -$extra-large-and-up: "only screen and (min-width : #{$desk-up})" !default; -$small-and-down: "only screen and (max-width : #{$mobile})" !default; -$medium-and-down: "only screen and (max-width : #{$tablet})" !default; -$medium-only: "only screen and (min-width : #{$mobile-up}) and (max-width : #{$tablet})" !default; - -$number-columns: 12 !default; -$gutter-width: 1.5rem !default; - -.container-full { +@import "variables"; + +.full-container { margin: 0 auto; width: 100%; } -.container { +.flex-container { + display: flex; + align-items: center; + justify-content: space-between; +} + +.small-container { margin: 0 auto; - max-width: 1280px; + max-width: 960px; width: 90%; -} -.container { - .row { - margin-left: (-1 * $gutter-width / 2); - margin-right: (-1 * $gutter-width / 2); + @media #{$medium-and-up} { + width: 90%; + } + @media #{$large-and-up} { + width: 100%; } } -@media #{$medium-and-up} { - .container { - width: 85%; +.container { + margin: 0 auto; + max-width: 1280px; + width: 90%; + + @media #{$medium-and-up} { + width: 85%; } -} -@media #{$large-and-up} { - .container { - width: 70%; + @media #{$large-and-up} { + width: 70%; } } +.row { + margin-left: (-1 * $gutter-width / 2); + margin-right: (-1 * $gutter-width / 2); +} + @mixin reset-offset { margin-left: auto; left: auto; right: auto; } + @mixin grid-classes($size, $i, $perc) { &.offset-#{$size}#{$i} { margin-left: $perc; @@ -77,11 +76,13 @@ $gutter-width: 1.5rem !default; margin-bottom: .5rem; margin-left: auto; margin-right: auto; + &:after { content: ""; display: table; clear: both; } + .column { box-sizing: border-box; padding: 0 $gutter-width / 2; @@ -91,48 +92,56 @@ $gutter-width: 1.5rem !default; $i: 1; @while $i <= $number-columns { $perc: unquote((100 / ($number-columns / $i)) + "%"); + &.small-#{$i} { width: $perc; @include reset-offset; } + $i: $i + 1; } @media #{$medium-and-up} { - $i: 1; + @while $i <= $number-columns { $perc: unquote((100 / ($number-columns / $i)) + "%"); + &.medium-#{$i} { width: $perc; @include reset-offset; } + $i: $i + 1; } } @media #{$large-and-up} { - $i: 1; + @while $i <= $number-columns { $perc: unquote((100 / ($number-columns / $i)) + "%"); + &.large-#{$i} { width: $perc; @include reset-offset; } + $i: $i + 1; } } @media #{$extra-large-and-up} { - $i: 1; + @while $i <= $number-columns { $perc: unquote((100 / ($number-columns / $i)) + "%"); + &.xlarge-#{$i} { width: $perc; @include reset-offset; } + $i: $i + 1; } } diff --git a/sass/main.scss b/sass/main.scss index c5b8c09..b049c88 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,5 +1,3 @@ -// bower:scss -// endbower @import "colors"; @import "fonts"; @import "gradient"; @@ -9,6 +7,7 @@ @import "cards"; @import "buttons"; @import "media"; +@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i'); body { font-family: 'Roboto', sans-serif; diff --git a/sass/media.scss b/sass/media.scss index 1656acb..1a0f97b 100644 --- a/sass/media.scss +++ b/sass/media.scss @@ -1,5 +1,6 @@ .responsive-image { overflow: hidden; + img { width: 100%; } @@ -10,6 +11,7 @@ padding-bottom: 56.25%; height: 0; overflow: hidden; + iframe, object, embed { diff --git a/sass/mixins.scss b/sass/mixins.scss new file mode 100644 index 0000000..5548f24 --- /dev/null +++ b/sass/mixins.scss @@ -0,0 +1,45 @@ +@function is-direction($value) { + $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value); + $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value)); + + @return $is-keyword or $is-angle; +} + +@function legacy-direction($value) { + @if is-direction($value) == false { + @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction."; + } + + $conversion-map: ( + to top : bottom, + to top right : bottom left, + to right top : left bottom, + to right : left, + to bottom right : top left, + to right bottom : left top, + to bottom : top, + to bottom left : top right, + to left bottom : right top, + to left : right, + to left top : right bottom, + to top left : bottom right + ); + + @if map-has-key($conversion-map, $value) { + @return map-get($conversion-map, $value); + } + + @return 90deg - $value; +} + +@mixin linear-gradient($direction, $color-stops...) { + // Direction has been omitted and happens to be a color-stop + @if is-direction($direction) == false { + $color-stops: $direction, $color-stops; + $direction: 80deg; + } + + background: nth(nth($color-stops, 1), 1); + background: -webkit-linear-gradient(legacy-direction($direction), $color-stops); + background: linear-gradient($direction, $color-stops); +} \ No newline at end of file diff --git a/sass/variables.scss b/sass/variables.scss new file mode 100644 index 0000000..959f903 --- /dev/null +++ b/sass/variables.scss @@ -0,0 +1,16 @@ +$mobile-up: 601px !default; +$tablet-up: 993px !default; +$desk-up: 1201px !default; +$mobile: 600px !default; +$tablet: 992px !default; +$desk: 1200px !default; + +$medium-and-up: "only screen and (min-width : #{$mobile-up})" !default; +$large-and-up: "only screen and (min-width : #{$tablet-up})" !default; +$extra-large-and-up: "only screen and (min-width : #{$desk-up})" !default; +$small-and-down: "only screen and (max-width : #{$mobile})" !default; +$medium-and-down: "only screen and (max-width : #{$tablet})" !default; +$medium-only: "only screen and (min-width : #{$mobile-up}) and (max-width : #{$tablet})" !default; + +$number-columns: 12 !default; +$gutter-width: 1.5rem !default; \ No newline at end of file diff --git a/source/app/index.html b/source/app/index.html index 24466b5..6d385b5 100644 --- a/source/app/index.html +++ b/source/app/index.html @@ -15,7 +15,7 @@ - + @@ -187,7 +187,6 @@

Checkboxes & radio buttons

- - - -