From ca4815599e27fb68ed28ed54377a2a32fd54a4e9 Mon Sep 17 00:00:00 2001
From: smakosh
Date: Mon, 23 Apr 2018 05:39:39 +0100
Subject: [PATCH 1/3] refactoring code
---
sass/buttons.scss | 19 +-
sass/cards.scss | 15 +-
sass/colors.scss | 2 +-
sass/default.scss | 8 +-
sass/fonts.scss | 3 +-
sass/forms.scss | 30 +-
sass/gradient.scss | 59 +-
sass/grid.scss | 54 +-
sass/main.scss | 5 +-
sass/media.scss | 2 +
sass/mixins.scss | 45 +
sass/variables.scss | 16 +
source/app/index.html | 6 +-
source/app/styles/buttons.scss | 19 +-
source/app/styles/cards.scss | 15 +-
source/app/styles/colors.scss | 2 +-
source/app/styles/default.scss | 9 +-
source/app/styles/fonts.scss | 3 +-
source/app/styles/forms.scss | 30 +-
source/app/styles/gradient.scss | 59 +-
source/app/styles/grid.scss | 54 +-
source/app/styles/main.scss | 1 +
source/app/styles/media.scss | 2 +
source/app/styles/mixins.scss | 45 +
source/app/styles/variables.scss | 16 +
source/yarn-error.log | 6125 ++++++++++++++++++++++++++++++
unnamed.css | 1266 +++---
unnamed.min.css | 2 +-
28 files changed, 7036 insertions(+), 876 deletions(-)
create mode 100644 sass/mixins.scss
create mode 100644 sass/variables.scss
create mode 100644 source/app/styles/mixins.scss
create mode 100644 source/app/styles/variables.scss
create mode 100644 source/yarn-error.log
diff --git a/sass/buttons.scss b/sass/buttons.scss
index 73b255c..72ebb8c 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -1,7 +1,8 @@
@import "colors";
.btn {
- padding: 1rem 3rem;
+ width: 140px;
+ height: 45px;
color: #fff;
cursor: pointer;
}
@@ -18,7 +19,7 @@
border-width: 3px;
border-style: solid;
transition: all 0.5s;
- padding: 0.8rem 3rem;
+
&:hover {
color: #fff;
transition: all 0.5s;
@@ -32,6 +33,7 @@
.black-btn {
border-color: $black;
color: $black;
+
&:hover {
background-color: $black;
}
@@ -40,6 +42,7 @@
.green-btn {
border-color: $green;
color: $green;
+
&:hover {
background-color: $green;
}
@@ -48,6 +51,7 @@
.orange-btn {
border-color: $orange-btn;
color: $orange-btn;
+
&:hover {
background-color: $orange-btn;
}
@@ -56,6 +60,7 @@
.purple-btn {
border-color: $purple-btn;
color: $purple-btn;
+
&:hover {
background-color: $purple-btn;
}
@@ -67,9 +72,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..e493f4f 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://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');
\ No newline at end of file
diff --git a/sass/forms.scss b/sass/forms.scss
index bd1be34..8e7e1c7 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;
}
@@ -80,8 +78,10 @@ textarea {
label {
cursor: pointer;
+
input[type="checkbox"] {
display: none;
+
+ span:before {
content: '';
font-family: 'fontawesome';
@@ -107,6 +107,7 @@ label {
input[type="radio"] {
display: none;
+
+ span:before {
content: '';
font-family: 'fontawesome';
@@ -144,13 +145,13 @@ label {
textarea,
textarea[type="text"] {
border-color: $green;
- &:focus {
+ &:focus {
border-color: $blue;
}
}
- span:before {
+ span:before {
color: $green;
}
}
@@ -168,10 +169,12 @@ label {
textarea,
textarea[type="text"] {
border-color: $black;
+
&:focus {
border-color: lighten($black, 10);
}
}
+
span:before {
color: $black;
}
@@ -190,10 +193,12 @@ label {
textarea,
textarea[type="text"] {
border-color: $orange-btn;
+
&:focus {
border-color: $yellow;
}
}
+
span:before {
color: $orange-btn;
}
@@ -212,50 +217,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 +268,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..97c4cb7 100644
--- a/sass/gradient.scss
+++ b/sass/gradient.scss
@@ -1,58 +1,13 @@
@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);
+ &:hover {
+ box-shadow: 0px 7px 20px 0px rgba(18, 194, 211, 0.5);
transition: all .2s;
}
}
@@ -61,9 +16,9 @@
@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);
+ &:hover {
+ box-shadow: 0px 7px 20px 0px rgba(255, 50, 39, 0.5);
transition: all .2s;
}
}
@@ -72,9 +27,9 @@
@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);
+ &:hover {
+ box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.5);
transition: all .2s;
}
}
diff --git a/sass/grid.scss b/sass/grid.scss
index 1142d41..b507573 100644
--- a/sass/grid.scss
+++ b/sass/grid.scss
@@ -1,19 +1,4 @@
-$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;
+@import "variables";
.container-full {
margin: 0 auto;
@@ -24,31 +9,26 @@ $gutter-width: 1.5rem !default;
margin: 0 auto;
max-width: 1280px;
width: 90%;
-}
-.container {
+ @media #{$medium-and-up} {
+ width: 85%;
+ }
+ @media #{$large-and-up} {
+ width: 70%;
+ }
+
.row {
margin-left: (-1 * $gutter-width / 2);
margin-right: (-1 * $gutter-width / 2);
}
}
-@media #{$medium-and-up} {
- .container {
- width: 85%;
- }
-}
-@media #{$large-and-up} {
- .container {
- width: 70%;
- }
-}
-
@mixin reset-offset {
margin-left: auto;
left: auto;
right: auto;
}
+
@mixin grid-classes($size, $i, $perc) {
&.offset-#{$size}#{$i} {
margin-left: $perc;
@@ -77,11 +57,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 +73,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..24ed913 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,5 +1,3 @@
-// bower:scss
-// endbower
@import "colors";
@import "fonts";
@import "gradient";
@@ -11,7 +9,6 @@
@import "media";
body {
- font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
-}
+}
\ No newline at end of file
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..6121dbd
--- /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: 180deg;
+ }
+
+ 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..413afa8 100644
--- a/source/app/index.html
+++ b/source/app/index.html
@@ -253,7 +253,7 @@ Cards
-
+
@@ -267,7 +267,7 @@
Card footer
-