unification of stylings

src/App.scss

@@ -64,6 +64,11 @@ button {
   font-size: 14px;
   font-family: sans-serif;
 
+  i[class*=icon-] {
+    color: $fallback--text;
+    color: var(--btnText, $fallback--text);
+  }
+
   &::-moz-focus-inner {
     border: none;
   }
@@ -145,6 +150,14 @@ input, textarea, .select {
     line-height: 16px;
   }
 
+  &[type=range] {
+    background: none;
+    border: none;
+    margin: 0;
+    box-shadow: none;
+    flex: 1;
+  }
+
   &[type=radio],
   &[type=checkbox] {
     display: none;

src/components/color_input/color_input.vue

@@ -5,7 +5,7 @@
   </label>
   <input
     v-if="typeof fallback !== 'undefined'"
-    class="opt"
+    class="opt exlcude-disabled"
     :id="name + '-o'"
     type="checkbox"
     :checked="present"
@@ -45,40 +45,9 @@ export default {
 
 <style lang="scss">
 .color-control {
-  display: flex;
+  input.text-input {
-  align-items: baseline;
-
-  &.disabled *:not(.opt-l){
-    opacity: .5
-  }
-
-  .label {
-    flex: 2;
-    min-width: 7em;
-  }
-
-  .opt-l {
-    align-self: center;
-    flex: 0;
-    &::before {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  .text-input {
     max-width: 7em;
     flex: 1;
   }
-
-  .color-input {
-    flex: 0;
-    padding: 1px;
-    cursor: pointer;
-    height: 29px;
-    min-width: 2em;
-    border: none;
-    align-self: stretch;
-  }
 }
 </style>

src/components/opacity_input/opacity_input.vue

@@ -5,7 +5,7 @@
   </label>
   <input
     v-if="typeof fallback !== 'undefined'"
-    class="opt"
+    class="opt exclude-disabled"
     :id="name + '-o'"
     type="checkbox"
     :checked="present"
@@ -36,43 +36,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.opacity-control {
-  display: flex;
-  align-items: baseline;
-
-  &.disabled *:not(.opt-l) {
-    opacity: .5
-  }
-
-  .opt-l {
-    align-self: center;
-    &::before {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  .label {
-    flex: 2;
-    min-width: 7em;
-  }
-
-  .input-range {
-    background: none;
-    border: none;
-    margin: 0;
-    height: auto;
-    box-shadow: none;
-    min-width: 7em;
-    flex: 1;
-  }
-
-  .input-number {
-    margin: 0;
-    min-width: 4em;
-    flex: 0;
-  }
-}
-</style>

src/components/shadow_control/shadow_control.vue

@@ -39,7 +39,7 @@
   </div>
 
   <div class="shadow-tweak">
-    <div :disabled="usingFallback" class="id-control">
+    <div :disabled="usingFallback" class="id-control style-control">
       <label for="shadow-switcher" class="select">
         <select
           v-model="selectedId" class="shadow-switcher"
@@ -64,7 +64,7 @@
         <i class="icon-plus"/>
       </button>
     </div>
-    <div :disabled="!present" class="inset-control">
+    <div :disabled="!present" class="inset-control style-control">
       <label for="inset" class="label">
         {{$t('settings.style.shadows.inset')}}
       </label>
@@ -77,7 +77,7 @@
         type="checkbox">
       <label class="checkbox-label" for="inset"></label>
     </div>
-    <div :disabled="!present" class="blur-control">
+    <div :disabled="!present" class="blur-control style-control">
       <label for="spread" class="label">
         {{$t('settings.style.shadows.blur')}}
       </label>
@@ -97,7 +97,7 @@
         type="number"
         min="0">
     </div>
-    <div :disabled="!present" class="spread-control">
+    <div :disabled="!present" class="spread-control style-control">
       <label for="spread" class="label">
         {{$t('settings.style.shadows.spread')}}
       </label>
@@ -137,6 +137,11 @@
   flex-wrap: wrap;
   justify-content: center;
 
+
+  .shadow-preview-container,
+  .shadow-tweak {
+    margin: 5px 6px 0 0;
+  }
   .shadow-preview-container {
     flex: 0;
     display: flex;
@@ -210,39 +215,18 @@
   }
 
   .shadow-tweak {
-    .label {
     flex: 1;
-      min-width: 3em;
-    }
 
-    .inset-control {
+    .id-control {
-      justify-content: flex-end;
+      align-items: stretch;
-      label {
+      .select, .btn {
-        flex: 0
+        margin-right: 5px;
       }
-    }
+      .select {
-
-    .blur-control,
-    .id-control,
-    .inset-control,
-    .spread-control {
-      display: flex;
-      align-items: baseline;
-      max-width: 100%;
-
-      &[disabled=disabled] *{
-        opacity: .5
-      }
-
-      .input-range {
         flex: 1;
-        align-self: center;
+        select {
+          align-self: initial;
         }
-
-      .input-number {
-        width: 4em;
-        min-width: 4em;
-        flex: 0;
       }
     }
   }

src/components/style_switcher/style_switcher.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+<div class="style-switcher">
   <div class="presets-container">
     <div>
       {{$t('settings.presets')}}
-        <label for="style-switcher" class='select'>
+      <label for="preset-switcher" class='select'>
-          <select id="style-switcher" v-model="selected" class="style-switcher">
+        <select id="preset-switcher" v-model="selected" class="preset-switcher">
           <option v-for="style in availableStyles"
                   :value="style"
                   :style="{
@@ -46,7 +46,8 @@
   </div>
 
   <p>{{$t('settings.theme_help')}}</p>
-    <tab-switcher>
+  <keep-alive>
+    <tab-switcher key="style-tweak">
       <div :label="$t('settings.style.basic_colors._tab_label')" class="color-container">
         <div class="color-item">
           <h4>{{ $t('settings.style.basic_colors.main') }}</h4>
@@ -171,9 +172,10 @@
         </div>
       </div>
       <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
+        <div class="shadow-selector">
           <div>
             {{$t('settings.style.shadows.component')}}
-          <label for="shadow-switcher" class="shadow-selector select">
+            <label for="shadow-switcher" class="select">
               <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
                 <option v-for="shadow in shadowsAvailable"
                         :value="shadow">
@@ -182,6 +184,8 @@
               </select>
               <i class="icon-down-open"/>
             </label>
+          </div>
+          <div class="override">
             <label for="override" class="label">
               {{$t('settings.style.shadows.override')}}
             </label>
@@ -193,9 +197,11 @@
               type="checkbox">
             <label class="checkbox-label" for="override"></label>
           </div>
+        </div>
         <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
       </div>
     </tab-switcher>
+  </keep-alive>
 
   <div class="apply-container">
     <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
@@ -205,142 +211,4 @@
 
 <script src="./style_switcher.js"></script>
 
-<style lang="scss">
+<style src="./style_switcher.scss" lang="scss"></style>
-@import '../../_variables.scss';
-.style-switcher {
-  margin-right: 1em;
-}
-
-.import-warning {
-  color: $fallback--cRed;
-  color: var(--cRed, $fallback--cRed);
-}
-
-.apply-container,
-.radius-container,
-.color-container,
-.presets-container {
-  display: flex;
-
-  p {
-    margin-left: 1em
-  }
-}
-
-.radius-container {
-  flex-direction: column;
-}
-
-.color-container{
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.presets-container {
-  justify-content: center;
-  .import-export {
-    display: flex;
-
-    .btn {
-      margin-left: .5em;
-    }
-  }
-}
-
-.preview-container {
-  border-top: 1px dashed;
-  border-bottom: 1px dashed;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  margin: 1em -1em 0;
-  padding: 1em;
-  background: var(--body-background-image);
-  background-size: cover;
-  background-position: 50% 50%;
-
-  .btn {
-    margin-top: 1em;
-    min-height: 30px;
-    width: 10em;
-  }
-}
-
-.apply-container {
-  justify-content: center;
-}
-
-.radius-item,
-.color-item {
-  min-width: 20em;
-  margin: 5px 6px 0 0;
-  display:flex;
-  flex-direction: column;
-  flex: 1 1 0;
-
-  &.wide {
-    min-width: 60%
-  }
-  &:not(.wide):nth-child(2n+1) {
-    margin-right: 7px;
-
-  }
-
-  .color, .opacity {
-    display:flex;
-    align-items: baseline;
-  }
-
-  h4 {
-    margin-top: 1em;
-  }
-}
-
-.radius-item {
-  flex-basis: auto;
-}
-
-.theme-radius-rn,
-.theme-color-cl {
-  border: 0;
-  box-shadow: none;
-  background: transparent;
-  color: var(--faint, $fallback--faint);
-  align-self: stretch;
-}
-
-.theme-color-cl,
-.theme-radius-in,
-.theme-color-in {
-  margin-left: 4px;
-}
-
-.theme-radius-in {
-  min-width: 1em;
-}
-
-.theme-radius-in {
-  max-width: 7em;
-  flex: 1;
-}
-
-.theme-radius-lb{
-  max-width: 50em;
-}
-
-.theme-preview-content {
-  padding: 20px;
-}
-
-.dummy {
-  .avatar {
-    background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
-    color: black;
-    text-align: center;
-    height: 48px;
-    line-height: 48px;
-    width: 48px;
-    float: left;
-    margin-right: 1em;
-  }
-}
-</style>