[#615][3.0] 환경 구축

#########
- 스타일 관련 폴더 구조 개편
- docs layout 반영 및 테마 적용

README.md

@@ -1,4 +1,4 @@
-# evui3.0
+# [WIP] evui3.0
 
 ## Project setup
 ```

docs/App.vue

@@ -1,29 +1,57 @@
 <template>
-  <MainHeader />
-  <MainContent />
+  <div
+    :class="['evui-docs', docsTheme]"
+  >
+    <div class="evui-wrapper">
+      <MainHeader
+        v-model="docsTheme"
+      />
+      <MainNav />
+      <MainContent />
+    </div>
+  </div>
 </template>
 
 <script>
+import { ref } from 'vue';
 import MainHeader from './components/Header';
 import MainContent from './components/Content';
+import MainNav from './components/Menu';
 
 export default {
   name: 'Home',
   components: {
     MainHeader,
     MainContent,
+    MainNav,
+  },
+  setup() {
+    const docsTheme = ref('light');
+    return {
+      docsTheme,
+    };
   },
 };
 </script>
 
 <style lang="scss">
-@import '~@/stylesheets/default';
+@import './style/index.scss';
 
 * {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
 
-#app {
-  padding-top: 55px;
+.evui-wrapper {
+  position: relative;
+  min-height: 100vh;
+  padding: $header-height 0 0 $nav-width;
+
+  @include themify() {
+    color: themed('font-color-base');
+    background-color: themed('background-color-base');
+  }
 }
 </style>

docs/components/Content.vue

@@ -1,32 +1,20 @@
 <template>
-  <div class="evui-main-content">
-    <MenuNav />
-    <div class="evui-main-content-body">
-      <router-view />
-    </div>
+  <div class="evui-content">
+    <router-view />
   </div>
 </template>
 
 <script>
-import MenuNav from '../components/Menu';
-
 export default {
-  components: {
-    MenuNav,
-  },
   setup() {},
 };
 </script>
 
-<style scoped>
-.evui-main-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 0 240px;
-}
+<style lang="scss" scoped>
+@import '../style/index.scss';
 
-.evui-main-content-body {
-  padding: 20px;
+.evui-content {
+  position: relative;
+  padding: 30px;
 }
 </style>

docs/components/Header.vue

@@ -1,55 +1,93 @@
 <template>
-  <div class="evui-main-header">
-    <div class="evui-header-title">
-      <a href="/">
-        <img
-          alt="EVUI LOGO"
-          src="http://evui.ex-em.com/wp-content/uploads/2017/11/evui_1.png"
-        >
-        <div>EXEM Visualization UI</div>
-      </a>
-    </div>
-  </div>
+  <header class="evui-header">
+    <h1 class="evui-header-logo">EXEM Visualization UI</h1>
+    <button
+      class="evui-header-theme"
+      @click="changeTheme"
+    >
+      {{ theme }}
+    </button>
+  </header>
 </template>
 
 <script>
-export default {};
+import { computed } from 'vue';
+
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: 'light',
+    },
+  },
+  emits: {
+    'update:modelValue': null,
+  },
+  setup(props, { emit }) {
+    const theme = computed({
+      get: () => props.modelValue,
+      set: value => emit('update:modelValue', value),
+    });
+    const changeTheme = () => {
+      if (theme.value === 'light') {
+        theme.value = 'dark';
+      } else {
+        theme.value = 'light';
+      }
+    };
+
+    return {
+      theme,
+      changeTheme,
+    };
+  },
+};
 </script>
 
-<style scoped>
-a, span {
+<style  lang="scss" scoped>
+@import '../style/index.scss';
+
+a {
   text-decoration: none !important;
 }
-a:visited {
-  color: #000000;
-}
-.evui-main-header {
-  display: table;
+.evui-header {
+  display: flex;
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
-  height: 55px;
-  background: #67A1F4;
-  z-index: 1000;
+  height: $header-height;
+  padding: 0 10px;
+  align-items: center;
+  background-color: #67A1F4;
+  z-index: 10;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+
+  &-logo {
+    height: 30px;
+    line-height: 30px;
+    padding-left: 110px;
+    background: url('http://evui.ex-em.com/wp-content/uploads/2017/11/evui_1.png') left center no-repeat;
+    background-size: contain;
+    color: rgb(43,87,151);
+    font-size: $font-size-large;
+    font-weight: bold;
+  }
 }
-.evui-header-title {
-  display: table-cell;
-  vertical-align: middle;
-}
-.evui-header-title > a {
-  display: table;
-}
-.evui-header-title > a > img {
-  display: table-cell;
-}
-.evui-header-title > a > div {
-  display: table-cell;
-  color: rgb(43,87,151);
-  padding-left: 10px;
-  vertical-align: middle;
-  font-size: 15px;
-  font-weight: bold;
+.evui-header-theme {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  width: 60px;
+  height: 25px;
+  transform: translateY(-50%);
+  outline: none;
+  border: none;
+  cursor: pointer;
+
+  @include themify() {
+    color: themed('font-color-base');
+    background-color: themed('background-color-base');
+  }
 }
 </style>

docs/components/Menu.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="evui-left-navigation">
+  <nav class="evui-navigation">
     <ul>
       <li
         v-for="(menu, index) in store"
         :key="menu.name + index"
+        class="evui-navigation-item"
         @click="clickMenu(menu.routerLink)"
       >
        {{ menu.name }}
       </li>
     </ul>
-  </div>
+  </nav>
 </template>
 
 <script>
@@ -137,10 +138,31 @@ export default {
 };
 </script>
 
-<style>
-.evui-left-navigation {
-  position: absolute;
-  top: 0;
+<style lang="scss" scoped>
+@import '../style/index.scss';
+
+.evui-navigation {
+  position: fixed;
+  top: $header-height;
   left: 0;
+  width: $nav-width;
+  height: 100%;
+  padding: 25px 12px;
+  overflow: auto;
+  border-right: 1px solid #DDDDDD;
+
+  ul, li {
+    list-style: none;
+  }
+
+  &-item {
+    padding: 5px 3px;
+    font-size: $font-size-medium;
+    cursor: pointer;
+
+    &:hover {
+      color: $color-main;
+    }
+  }
 }
 </style>

docs/style/functions.scss

@@ -0,0 +1,3 @@
+@function themed($key) {
+  @return map-get($ev-theme-map, $key);
+}

docs/style/index.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@import 'functions';
+@import 'mixins';
+@import 'variables';
+@import 'themes';
+
+body {
+  background: yellowgreen;
+}

docs/style/mixins.scss

@@ -0,0 +1,79 @@
+@mixin themify($ev-themes: $ev-themes) {
+  @each $theme, $map in $ev-themes {
+    @if $theme == 'dark' {
+      .#{$theme} & {
+        $ev-theme-map: () !global;
+
+        @each $key, $submap in $map {
+          $value: map-get(map-get($ev-themes, $theme), '#{$key}');
+          $ev-theme-map: map-merge($ev-theme-map, ($key: $value)) !global;
+        }
+
+        /* stylelint-disable */
+        @content;
+        $ev-theme-map: null !global;
+        /* stylelint-enable */
+      }
+    }
+
+    @else {
+      $ev-theme-map: () !global;
+
+      @each $key, $submap in $map {
+        $value: map-get(map-get($ev-themes, $theme), '#{$key}');
+        $ev-theme-map: map-merge($ev-theme-map, ($key: $value)) !global;
+      }
+
+      /* stylelint-disable */
+      @content;
+      $ev-theme-map: null !global;
+      /* stylelint-enable */
+    }
+  }
+}
+@mixin prefix($property, $value, $vendors: webkit moz ms o, $default: true) {
+  @if $vendors {
+    @each $vendor in $vendors {
+      #{'-' + $vendor + '-' + $property}: #{$value};
+    }
+  }
+  @if $default {
+    #{$property}: #{$value};
+  }
+}
+@mixin shortening($display: inline-block, $width: 100%, $line: 1) {
+  width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @if $line == 1 {
+    display: $display;
+    white-space: nowrap;
+  }
+
+  @else {
+    display: -webkit-box;
+    height: auto;
+    text-align: left;
+    word-wrap: break-word;
+    white-space: normal;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+  }
+}
+@mixin clearfix() {
+  &:after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}
+@mixin place-at-center() {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@mixin font-hide() {
+  font-size: 0;
+  text-indent: -999px;
+}