Remplace hexadecimal codes with sass variables
authorChloe Laisne <chloe.laisne@gmail.com>
Mon, 04 Jul 2016 23:04:42 +0200
changeset 224 d284324358b2
parent 223 2457942e7453
child 225 5e3cd85cde06
Remplace hexadecimal codes with sass variables Cleanup dead method in application controller Remove unused sass files
cms/app-client/app/controllers/application.js
cms/app-client/app/styles/app.scss
cms/app-client/app/styles/components/filter-component.scss
cms/app-client/app/styles/components/filtering-component.scss
cms/app-client/app/styles/components/notice-component.scss
cms/app-client/app/styles/components/player-component.scss
cms/app-client/app/styles/components/playlist-component.scss
cms/app-client/app/styles/components/sorting-component.scss
cms/app-client/app/styles/components/toolbar-component.scss
cms/app-client/app/styles/modal.scss
cms/app-client/app/styles/player.scss
cms/app-client/app/styles/results.scss
cms/app-client/app/styles/tabs/chrono.scss
--- a/cms/app-client/app/controllers/application.js	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Mon Jul 04 23:04:42 2016 +0200
@@ -114,24 +114,6 @@
         },
         play: function(item){
             this.set("currentId", item.id);
-        },
-
-        showMore: function(item){
-            var domItem = Ember.$("#"+item.id.replace( /(:|\.|\[|\]|,)/g, "\\$1" ));
-            if (domItem.hasClass("show-more")){
-                domItem.toggleClass("show-more", false);
-            } else{
-                Ember.$(".result-item").toggleClass("show-more", false);
-                domItem.toggleClass("show-more", true);
-            }
-        },
-
-        toggleModal: function(item){
-            if (typeof(item) !== 'undefined'){
-                this.set("detail", item.id);
-            } else {
-                this.set("detail", null);
-            }
         }
 
     }
--- a/cms/app-client/app/styles/app.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -1,6 +1,8 @@
 $dark-blue: #13212d;
-$medium-blue : #253946;
-$light-blue : #becfd4;
+$medium-blue: #253946;
+$light-blue: #becfd4;
+$light-grey: #878e94;
+$light-white: #fbfbfb;
 
 body {
     background-color: #f5f5f5;
@@ -129,14 +131,6 @@
     height: 80px;
 }
 
-.corpus-app {
-    @at-root {
-        @import 'player';
-        @import 'results';
-        @import 'modal';
-    }
-}
-
 .ember-view.language a {
     text-transform: capitalize;
     text-decoration: none;
--- a/cms/app-client/app/styles/components/filter-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/filter-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -4,7 +4,7 @@
 }
 
 .filter-component h2 {
-    color: #ffffff;
+    color: $light-white;
     font-size: 14px;
 }
 
--- a/cms/app-client/app/styles/components/filtering-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/filtering-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -15,26 +15,26 @@
 .filtering-component input {
     border: none;
     background-color: transparent;
-    border: 1px solid #ffffff;
+    border: 1px solid $light-white;
     font-family: sans-serif;
-    color: #25333e;
+    color: $dark-blue;
     padding: 0 10px;
 }
 
 .filtering-component input::-webkit-input-placeholder {
-    color: #ffffff;
+    color: $light-white;
     font-weight: normal;
     font-size: 12px;
 }
 
 .filtering-component input::-moz-placeholder {
     opacity: 1;
-    color: #ffffff;
+    color: $light-white;
 }
 
 .filtering-component input:focus {
-    border-color: #25333e;
-    color: #25333e;
+    border-color: $dark-blue;
+    color: $dark-blue;
     outline: none;
 }
 
@@ -47,7 +47,7 @@
     max-height: 400px;
     margin: 0;
     padding: 0;
-    background-color: #ffffff;
+    background-color: $light-white;
     overflow-y: scroll;
     margin-top: -1px;
 }
--- a/cms/app-client/app/styles/components/notice-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/notice-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -3,7 +3,7 @@
 }
 
 .notice-component h2 {
-    color: #ffffff;
+    color: $light-white;
     text-align: left;
     font-size: 14px;
     text-transform: uppercase;
@@ -11,7 +11,7 @@
 }
 
 .notice-component h3 {
-    color: #ffffff;
+    color: $light-white;
     line-height: 18px;
     font-size: 14px;
     padding: 5px 0px;
--- a/cms/app-client/app/styles/components/player-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -1,7 +1,8 @@
 .player-component {
-    color: #ffffff;
+    color: $light-white;
     text-align: left;
     padding: 0px 40px;
+    height: 80px;
 }
 
 .player-component #audio {
@@ -37,7 +38,7 @@
 
 .player-component #audio .controls i.fa-play,
 .player-component #audio .controls i.fa-pause {
-    border: 2px solid #ffffff;
+    border: 2px solid $light-white;
     border-radius: 100%;
     margin-right: 8px;
     margin-left: 8px;
--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -7,7 +7,7 @@
     text-transform: none;
     padding: 0px 15px;
     text-align: left;
-    color: #ffffff;
+    color: $light-white;
     font-size: 13px;
 }
 
@@ -17,7 +17,7 @@
     padding: 0;
     font-size: 0px;
     overflow-y: scroll;
-    background-color: #fbfbfb;
+    background-color: $light-white;
 }
 
 .playlist-component ul li {
@@ -34,20 +34,20 @@
 
 .playlist-component ul li .tools {
     float: right;
-    color: #878e94;
+    color: $light-grey;
 }
 
 .playlist-component ul li .tools button,
 .playlist-component ul li .tools .fa {
-    border: 2px solid #878e94;
+    border: 2px solid $light-grey;
     cursor: pointer;
-    color: #878e94;
+    color: $light-grey;
 }
 
 .playlist-component ul li .tools button:hover,
 .playlist-component ul li .tools .fa:hover {
-    background-color: #878e94;
-    color: #fbfbfb;
+    background-color: $light-grey;
+    color: $light-white;
 }
 
 .playlist-component ul li.playing .tools button:hover,
--- a/cms/app-client/app/styles/components/sorting-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -5,7 +5,7 @@
 
 .sorting-component div.options {
     text-align: right;
-    color: #25333e;
+    color: $dark-blue;
 }
 
 .sorting-component ul {
--- a/cms/app-client/app/styles/components/toolbar-component.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/components/toolbar-component.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -5,7 +5,7 @@
     text-transform: none;
     padding: 0px 15px;
     text-align: left;
-    color: #ffffff;
+    color: $light-white;
     font-size: 13px;
     background-color: $dark-blue;
 }
@@ -26,6 +26,6 @@
 }
 
 .toolbar-component ul li.active {
-	background-color: #ffffff;
+	background-color: $light-white;
 	color: $dark-blue;
 }
\ No newline at end of file
--- a/cms/app-client/app/styles/modal.scss	Mon Jul 04 19:42:36 2016 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,41 +0,0 @@
-.overlay {
-    background-color: gray;
-    height: 100vh;
-    left: 0;
-    opacity: 0.77;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 50;
-}
-
-.dialog {
-    background: #fff none repeat scroll 0 0;
-    border: 2px solid #ccc;
-    border-radius: 5px;
-    box-shadow: 0 0 10px #222;
-    min-height: 300px;
-    min-width: 500px;
-    height: auto;
-    width: auto;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    position: fixed;
-    z-index: 50;
-}
-
-.dialog-header,
-.dialog-body,
-.dialog-footer{
-  padding: 5px 10px 0;
-}
-
-.dialog-header h2{
-  margin: 0;
-}
-
-.dialog-body b{
-  display: inline-block;
-  min-width: 140px;
-}
--- a/cms/app-client/app/styles/player.scss	Mon Jul 04 19:42:36 2016 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,88 +0,0 @@
-.player-component{
-  text-align: center;
-  height: 80px;
-}
-
-#audio_player {
-  display: inline-block;
-  width: 80px;
-  height: 80px;
-  position: relative;
-  padding: 8px;
-  margin: 10px auto;
-  border-radius: 88px;
-}
-
-#audio_player .btn {
-  cursor: pointer;
-}
-#audio_player .btn_play {
-  display: block;
-  width: 32px;
-  height: 32px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -16px;
-  margin-left: -16px;
-  text-indent: -900em;
-  z-index: 10;
-  background: url(images/button_play.png) 10px no-repeat;
-  background-size: 21px 31px;
-}
-/* pause */
-#audio_player .btn_play.playing {
-  background: url(images/button_pause.png) center no-repeat;
-  background-size: 28px 28px;
-}
-#audio_player .progress {
-  position: absolute;
-  width: 80px;
-  height: 80px;
-  top: 8px;
-  left: 8px;
-}
-#audio_player .progress .slice {
-  position: absolute;
-  width: 80px;
-  height: 80px;
-  clip: rect(0px,80px,80px,40px);
-}
-#audio_player .progress .slice.gt50 {
-  clip: rect(auto, auto, auto, auto);
-}
-#audio_player .progress .slice .pie {
-  border: 10px solid #276f84;
-  position: absolute;
-  width: 60px;
-  height: 60px;
-  clip: rect(0,40px,80px,0);
-  -moz-border-radius: 80px;
-  -webkit-border-radius: 80px;
-  border-radius: 80px;
-}
-#audio_player .progress .slice .pie.fill {
-  -moz-transform: rotate(180deg) !important;
-  -webkit-transform: rotate(180deg) !important;
-  -o-transform: rotate(180deg) !important;
-  transform: rotate(180deg) !important;
-}
-
-.audio-controls {
-    color: #2a768c;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 30px;
-    margin: 43px 10px;
-    vertical-align: top;
-}
-
-.duration{
-  margin: -30px auto 0;
-  padding-left: 175px;
-  text-align: center;
-}
-
-.audio-wrapper{
-  display: inline-block;
-}
--- a/cms/app-client/app/styles/results.scss	Mon Jul 04 19:42:36 2016 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,47 +0,0 @@
-.result-header,
-.result-list{
-  background-color: #eeeeee;
-}
-
-.result-header{
-  flex: 0 1 auto;
-  float: left;
-  padding: 0 10px;
-}
-
-.result-header .filters{
-  display: inline-block;
-  border-radius: 5px;
-  padding: 1px 5px;
-  color: #fff;
-}
-
-.result-list{
-  flex: 1 1 auto;
-  float: left;
-  overflow: auto;
-  border: none;
-  background: #eeeeee;
-  padding: 5px 10px;
-}
-
-
-.playlist-component ul li.show-more {
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  margin: 1rem 0rem;
-  z-index: 200;
-}
-
-.result-item.playing .playing-indicator {
-  background: rgba(0, 0, 0, 0) url("images/equalizer.png") no-repeat scroll 0 0 / 15px auto;
-  height: 14px;
-  margin: 2px 7px;
-  width: 15px;
-}
-.result-item.playing .playing-indicator:before {
-  content: none;
-}
-
-.result-item button{
-  margin-top: 10px;
-}
--- a/cms/app-client/app/styles/tabs/chrono.scss	Mon Jul 04 19:42:36 2016 +0200
+++ b/cms/app-client/app/styles/tabs/chrono.scss	Mon Jul 04 23:04:42 2016 +0200
@@ -39,7 +39,7 @@
 }
 
 #chrono-table li.highlighted {
-    color: #ffffff;
-    border: 1px solid #ffffff;
+    color: $light-white;
+    border: 1px solid $light-white;
     background-color: $medium-blue;
 }