Use B_E--M style for class names

qingzhong110 · May 11, 2016 · 970ce61 · 970ce61
1 parent 3065282
commit 970ce61
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/src/ui/Avatar.vue b/src/ui/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="v-avatar" :style="styleSize" :class="{'v-avatar--image': image}" :aria-label="alt">
-    <span class="v-avatar__text" v-text="name" :style="{background: bg, color: fg}"></span>
+    <span class="v-avatar_text" v-text="name" :style="{background: bg, color: fg}"></span>
   </span>
 </template>
 
@@ -95,7 +95,7 @@ export default {
 .v-avatar--squared {
   border-radius: 2px;
 }
-.v-avatar .v-avatar__text {
+.v-avatar .v-avatar_text {
   display: inline-block;
   width: 100%;
   height: 100%;
@@ -106,7 +106,7 @@ export default {
   width: 100%;
   height: 100%;
 }
-.v-avatar--image .v-avatar__text {
+.v-avatar--image .v-avatar_text {
   display: none;
 }
 </style>
diff --git a/src/ui/ProgressButton.vue b/src/ui/ProgressButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button class="v-progress-button v-button" :disabled="disabled">
-    <span class="v-progress-button__progress" :style="{width: width}"></span>
-    <span class="v-progress-button__text"><slot></slot></span>
+    <span class="v-progress-button_progress" :style="{width: width}"></span>
+    <span class="v-progress-button_text"><slot></slot></span>
   </button>
 </template>
 
@@ -38,7 +38,7 @@ export default {
   position: relative;
   text-align: center;
 }
-.v-progress-button__progress {
+.v-progress-button_progress {
   position: absolute;
   top: 0;
   left: 0;

diff --git a/src/ui/Toggle.vue b/src/ui/Toggle.vue
@@ -1,7 +1,7 @@
 <template>
 <label class="v-toggle" :class="{'v-toggle--checked': checked}">
   <input type="checkbox" v-model="checked" :name="name">
-  <span class="v-toggle__handle"></span>
+  <span class="v-toggle_handle"></span>
 </label>
 </template>
 
@@ -41,7 +41,7 @@ label.v-toggle--checked.v-toggle {
   background: var(--vui-green);
   border-color: var(--vui-green);
 }
-.v-toggle .v-toggle__handle {
+.v-toggle .v-toggle_handle {
   position: absolute;
   left: 0;
   top: 0;
@@ -53,7 +53,7 @@ label.v-toggle--checked.v-toggle {
   z-index: 99;
   transition: transform 0.3s;
 }
-.v-toggle--checked .v-toggle__handle {
+.v-toggle--checked .v-toggle_handle {
   transform: translate3d(37px, 0, 0);
 }
 .v-toggle::before,

diff --git a/src/view/Overlay.vue b/src/view/Overlay.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="overlay">
-    <div class="overlay__mask" @click="show=false"></div>
-    <button class="overlay__close" aria-label="关闭" @click="show=false">
+    <div class="overlay_mask" @click="show=false"></div>
+    <button class="overlay_close" aria-label="Close" @click="show=false">
       <svg viewBox="0 0 40 40" tabindex="-1">
         <circle cx="20" cy="20" r="18"  stroke="#ccc" stroke-width="1" fill-opacity="0"/>
         <line x1="15" y1="15" x2="25" y2="25" stroke="#dadada" stroke-width="2"/>
         <line x1="15" y1="25" x2="25" y2="15" stroke="#dadada" stroke-width="2"/>
       </svg>
     </button>
-    <div class="overlay__content">
+    <div class="overlay_content">
       <slot name="overlay-hide"></slot>
       <slot></slot>
     </div>
@@ -71,7 +71,7 @@ export default {
 .overlay--open .overlay {
   display: flex;
 }
-.overlay__mask {
+.overlay_mask {
   position: absolute;
   left: 0;
   top: 0;
@@ -80,14 +80,14 @@ export default {
   z-index: 10;
   cursor: pointer;
 }
-.overlay__content {
+.overlay_content {
   position: relative;
   max-width: 860px;
   height: 100%;
   z-index: 22;
   flex: 1;
 }
-button.overlay__close {
+button.overlay_close {
   position: absolute;
   display: block;
   border: none;
@@ -102,13 +102,13 @@ button.overlay__close {
   animation: fade-in 1s cubic-bezier(1, 0.06, 0.74, 1);
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
-button.overlay__close svg {
+button.overlay_close svg {
   width: 40px;
   height: 40px;
   outline: none;
 }
 @media (max-width: 680px) {
-  .overlay button.overlay__close {
+  .overlay button.overlay_close {
     right: 20px;
   }
 }

diff --git a/src/view/SideMenus.vue b/src/view/SideMenus.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="v-side-menus" :class="menuClass">
   <slot name="left-menu"></slot>
-  <div class="v-side-menus__content">
+  <div class="v-side-menus_content">
     <slot></slot>
   </div>
   <slot name="right-menu"></slot>
@@ -44,7 +44,7 @@ export default {
 .v-side-menus [slot=right-menu] {
   right: 0;
 }
-.v-side-menus .v-side-menus__content {
+.v-side-menus .v-side-menus_content {
   position: relative;
   width: 100%;
   height: 100%;
@@ -53,17 +53,17 @@ export default {
   background: white;
   z-index: 99;
 }
-.v-side-menus--left .v-side-menus__content,
-.v-side-menus--right .v-side-menus__content {
+.v-side-menus--left .v-side-menus_content,
+.v-side-menus--right .v-side-menus_content {
   position: fixed;
   width: 100%;
   perspective: 1000px;
 }
-.v-side-menus--left .v-side-menus__content {
+.v-side-menus--left .v-side-menus_content {
   transform: translate3d(275px, 0, 0);
   box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1), -6px -6px 8px rgba(0, 0, 0, 0.05);
 }
-.v-side-menus--right .v-side-menus__content {
+.v-side-menus--right .v-side-menus_content {
   transform: translate3d(-275px, 0, 0);
   box-shadow: 3px 0 6px rgba(0, 0, 0, 0.1), 6px 6px 8px rgba(0, 0, 0, 0.05);
 }