Sanitize all .scss to remove hex code harcoded

betagouv · May 16, 2017 · eaad6ab · eaad6ab
1 parent c297300
commit eaad6ab
Show file tree

Hide file tree

Showing 22 changed files with 109 additions and 104 deletions.
diff --git a/live/app/styles/components/_challenge-item.scss b/live/app/styles/components/_challenge-item.scss
@@ -1,4 +1,4 @@
 .challenge-item__feedback {
-  border-top: solid 1px #d8d8d8;
+  border-top: solid 1px $gainsboro;
   padding: 20px 0;
 }
diff --git a/live/app/styles/components/_challenge-statement.scss b/live/app/styles/components/_challenge-statement.scss
@@ -31,7 +31,7 @@
 }
 
 .challenge-statement__attachments-section {
-  background-color: #ececec;
+  background-color: $gallery-grey;
   text-align: center;
   padding: 20px;
 }
@@ -44,7 +44,7 @@
   width: 18px;
   height: 18px;
   line-height: 18px;
-  color: #fff;
+  color: $white;
   display: inline-block;
   background: $pix-blue;
   border-radius: 50%;
@@ -65,15 +65,15 @@
 
 .challenge-statement__help-tooltip {
   visibility: hidden;
-  color: #ccc;
+  color: $silver-grey;
   text-align: justify;
   border-radius: 6px;
   padding: 15px;
   width: 430px;
   height: auto;
-  background-color: #ffffff;
+  background-color: $white;
   box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);
-  border: solid 1px #d8d8d8;
+  border: solid 1px $gainsboro;
   position: absolute;
   z-index: 999;
   left: 50%;
@@ -90,7 +90,7 @@
   margin-left: -10px;
   width: 0;
   height: 0;
-  border-top: 10px solid #d8d8d8;
+  border-top: 10px solid $gainsboro;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
 }
@@ -103,7 +103,7 @@
   margin-left: -8px;
   width: 0;
   height: 0;
-  border-top: 8px solid #FFFFFF;
+  border-top: 8px solid white;
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
 }
@@ -115,7 +115,7 @@
 
 .challenge-statement__help-text {
   font-size: 14px;
-  color: #3e4149;
+  color: $charcoal-grey;
 }
 
 .challenge-statement__file-options {

diff --git a/live/app/styles/components/_comparison-window.scss b/live/app/styles/components/_comparison-window.scss
@@ -51,7 +51,7 @@
   font-size: 14px;
   border: none;
   background-color: transparent;
-  color: #ffffff;
+  color: $white;
 }
 
 /*Modal Header*/
@@ -86,7 +86,7 @@
 .assessment-results-result-light-line {
   width: 1px;
   height: 50px;
-  border: solid 1.5px #d5d5d5;
+  border: solid 1.5px $alto-grey-light;
   margin-left: 15px;
 }
 
@@ -101,14 +101,14 @@
   font-size: 18px;
   font-weight: $font-bold;
   text-align: center;
-  color: #3e4149;
+  color: $charcoal-grey;
   margin-left: 22px;
 }
 
 .comparison-window__result-item-line {
   width: 2px;
   height: 61px;
-  border: solid 1.5px #d5d5d5;
+  border: solid 1.5px $alto-grey-light;
   margin-left: 22px;
 }
 

diff --git a/live/app/styles/components/_corner-ribbon.scss b/live/app/styles/components/_corner-ribbon.scss
@@ -22,7 +22,7 @@
 }
 
 .ribbon a {
-  color: #fff;
+  color: $white;
   display: block;
   font-weight: $font-bold;
   font-size: 20px;

diff --git a/live/app/styles/components/_feedback-panel.scss b/live/app/styles/components/_feedback-panel.scss
@@ -56,8 +56,8 @@
 .feedback-panel__field {
   width: 100%;
   border-radius: 3px;
-  background-color: #ffffff;
-  border: solid 1px #d8d8d8;
+  background-color: $white;
+  border: solid 1px $gainsboro;
   box-sizing: border-box;
   padding: 8px;
   font-size: 14px;
@@ -72,12 +72,12 @@
   box-sizing: border-box;
   padding: 10px 20px;
   background-color: $alto-grey;
-  border: 1px solid #7d808b;
+  border: 1px solid $raven-grey;
   margin-right: 10px;
 }
 
 .feedback-panel__button--send {
-  background-color: #7d808b;
+  background-color: $raven-grey;
   color: white;
 }
 

diff --git a/live/app/styles/components/_follower-form.scss b/live/app/styles/components/_follower-form.scss
@@ -13,7 +13,7 @@
   margin: 0 auto;
   align-items: center;
   border-radius: 4px;
-  background: #ffffff;
+  background: $white;
   padding: 2px;
   max-width: 300px;
 
@@ -44,14 +44,14 @@
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .follower-form__button {
   position: relative;
-  border: 1px solid #c3d0ff;
+  border: 1px solid $periwinkle-blue;
   border-radius: 4px;
   min-width: 111px;
   padding: 10px 19px;
   font-size: 18px;
   font-weight: $font-bold;
   text-align: center;
-  color: #ffffff;
+  color: $white;
   outline: none;
 }
 
@@ -68,7 +68,7 @@
   position: absolute;
   z-index: 500;
   transform: rotateX(180deg);
-  color: #fff;
+  color: $white;
   letter-spacing: 1px;
   opacity: 0;
   transition: none;
@@ -87,15 +87,15 @@
   opacity: 0;
   height: 100%;
   overflow: hidden;
-  background-color: #0EBEFF;
+  background-color: $vivid-blue;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   transition: width 10ms 600ms ease-in-out, background-color 300ms ease-in, opacity 250ms 300ms ease-in;
 }
 
 .follower-button-is-active {
   transform: rotateX(180deg);
-  background-color: #fff;
+  background-color: $white;
   box-shadow: 1px 1px 4px 1px transparent !important;
   transition: transform 300ms ease-in-out, background-color 300ms ease-in;
 }
@@ -114,7 +114,7 @@
 
 .follower-button-is-error {
   transform: rotateX(180deg);
-  background-color: #fff;
+  background-color: $white;
   box-shadow: 1px 1px 4px 1px transparent !important;
   transition: transform 300ms ease-in-out, background-color 300ms ease-in;
 }
@@ -154,15 +154,15 @@
 
 .follower-info-message.has-error {
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: $white;
   border: solid 2px $pure-orange;
   padding: 14px 91px;
   color: $pure-orange;
 }
 
 .follower-info-message.has-success {
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: $white;
   border: solid 2px $strong-cyan;
   padding: 14px 91px;
   color: $strong-cyan;

diff --git a/live/app/styles/components/_qroc-solution-panel.scss b/live/app/styles/components/_qroc-solution-panel.scss
@@ -1,9 +1,9 @@
-.correction-qroc-box--answer__input{
+.correction-qroc-box--answer__input {
   height: 26px;
   border-radius: 3px;
-  background-color: #ffffff;
+  background-color: $white;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
-  border: solid 1px #d8d8d8;
+  border: solid 1px $gainsboro;
   padding: 8px 8px 12px 10px;
 }
 
@@ -14,14 +14,14 @@
   color: $caribbean-green;
 }
 
-.correction-qroc-box__input-wrong-answer{
+.correction-qroc-box__input-wrong-answer {
   font-family: $font-lato;
   font-size: 16px;
   color: $charcoal-grey;
   text-decoration: line-through;
 }
 
-.correction-qroc-box__input-no-answer{
+.correction-qroc-box__input-no-answer {
   font-family: $font-lato;
   font-size: 16px;
   color: $charcoal-grey;
@@ -39,8 +39,8 @@
   font-size: 16px;
   font-weight: $font-bold;
   color: $caribbean-green;
-  display:flex;
+  display: flex;
   margin-left: 7px;
   position: relative;
-  bottom:3px;
+  bottom: 3px;
 }
diff --git a/live/app/styles/components/_qrocm-solution-panel.scss b/live/app/styles/components/_qrocm-solution-panel.scss
@@ -1,38 +1,38 @@
-.correction-qrocm{
-  padding : 10px;
+.correction-qrocm {
+  padding: 10px;
   display: flex;
   flex-direction: row;
 }
 
-.correction-qrocm__label{
+.correction-qrocm__label {
   font-family: $font-lato;
   font-size: 16px;
   color: $charcoal-grey;
 }
 
-.correction-qrocm__answer-solution{
+.correction-qrocm__answer-solution {
   margin-left: 10px;
 }
 
-.correction-qrocm__answer-input{
+.correction-qrocm__answer-input {
   height: 26px;
   border-radius: 3px;
-  background-color: #ffffff;
+  background-color: $white;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
-  border: solid 1px #d8d8d8;
+  border: solid 1px $gainsboro;
   padding: 8px 8px 12px 10px;
 }
 
-.correction-qrocm__solution{
+.correction-qrocm__solution {
   display: flex;
   align-items: center;
   margin-top: 4px;
 }
 
-.correction-qrocm__solution-text{
+.correction-qrocm__solution-text {
   font-family: $font-lato;
   font-weight: $font-bold;
-  color: #13c9a0;
+  color: $caribbean-green;
   font-size: 16px;
   margin-left: 3px;
   padding-bottom: 1px;

diff --git a/live/app/styles/components/_result-item.scss b/live/app/styles/components/_result-item.scss
@@ -3,13 +3,13 @@
   height: 80px;
   border-radius: 5px;
   border-color: $porcelain-grey;
-  background-color: #ffffff;
+  background-color: $white;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   margin-bottom: 10px;
 
   &:hover {
     box-shadow: none;
-    border: solid 2px #446eff;
+    border: solid 2px $dogder-blue;
     transition: border-color 1s ease;
   }
 
@@ -30,14 +30,14 @@
   font-size: 18px;
   font-weight: $font-bold;
   text-align: center;
-  color: #3e4149;
+  color: $charcoal-grey;
   margin-left: 22px;
 }
 
 .result-item__item-line {
   width: 2px;
   height: 61px;
-  border: solid 1.5px #d5d5d5;
+  border: solid 1.5px $alto-grey-light;
   margin-left: 22px;
 }
 
@@ -80,11 +80,11 @@
     font-family: $font-lato;
     font-size: 14px;
     box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
-    border: solid 1px #ffffff;
+    border: solid 1px $white;
   }
 
   .tooltip.top .tooltip-arrow {
-    border-top-color: #e6e6e6;
+    border-top-color: $mercury-grey;
   }
 
   .tooltip.in {

diff --git a/live/app/styles/components/_rounded-panel.scss b/live/app/styles/components/_rounded-panel.scss
@@ -1,5 +1,5 @@
 .rounded-panel {
-  background-color: #fff;
+  background-color: $white;
   border-radius: 5px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   margin-bottom: 30px;

diff --git a/live/app/styles/components/_signup-form.scss b/live/app/styles/components/_signup-form.scss
@@ -12,7 +12,7 @@
   flex-direction: column;
   border-radius: 10px;
   margin: 10px 5px 10px;
-  background-color: #ffffff;
+  background-color: $white;
   @media screen and (min-width: 321px) {
     margin: 25px 15px 15px;
   }
@@ -59,7 +59,7 @@
 
 .signup-form__temporary-msg h4 {
   border-radius: 3px;
-  color: #ffffff;
+  color: $white;
   font-size: 14px;
   padding: 9px;
 }
@@ -136,7 +136,7 @@
   display: table;
   width: 7px;
   height: 14px;
-  border: 2px solid #fff;
+  border: 2px solid $white;
   border-top: 0;
   border-left: 0;
   content: '';
@@ -196,6 +196,6 @@
   text-transform: uppercase;
   font-size: 13px;
   background: $pix-blue;
-  color: #ffffff;
+  color: $white;
   outline: none;
 }