Merge pull request #13 from MADE-Apps/feature/styling-improvements

Added CSS class styling improvements across all controls
MADE-Apps · Feb 8, 2022 · 2b064de · 2b064de
2 parents 1a91ffe + 7e74cec
commit 2b064de
Show file tree

Hide file tree

Showing 24 changed files with 2,814 additions and 4,237 deletions.
diff --git a/made-vue-accordion/package-lock.json b/made-vue-accordion/package-lock.json
diff --git a/made-vue-accordion/package.json b/made-vue-accordion/package.json
@@ -49,26 +49,26 @@
   },
   "homepage": "https://github.com/MADE-Apps/MADE-Vue#readme",
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.9.6",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.2.21",
-    "autoprefixer": "^10.4.0",
+    "@babel/core": "^7.17.2",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^17.0.16",
+    "@vitejs/plugin-vue": "^2.1.0",
+    "@vue/compiler-sfc": "^3.2.30",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
-    "jest": "^27.2.1",
-    "postcss": "^8.3.11",
+    "jest": "^27.5.1",
+    "postcss": "^8.4.6",
     "rollup-plugin-copy": "^3.4.0",
-    "sass": "^1.43.4",
-    "tailwindcss": "^2.2.19",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.13",
-    "vite-plugin-dts": "^0.9.2",
-    "vue-loader": "^16.8.2",
-    "vue-tsc": "^0.28.10"
+    "sass": "^1.49.7",
+    "tailwindcss": "^3.0.19",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13",
+    "vite-plugin-dts": "^0.9.9",
+    "vue-loader": "^17.0.0",
+    "vue-tsc": "^0.31.2"
   },
   "dependencies": {
-    "vue": "^3.2.20"
+    "vue": "^3.2.30"
   }
 }
diff --git a/made-vue-accordion/public/scss/_variables.scss b/made-vue-accordion/public/scss/_variables.scss
@@ -0,0 +1,2 @@
+$primary: #2c77cc;
+$secondary: #cc812c;
diff --git a/made-vue-accordion/public/scss/made-vue-accordion.scss b/made-vue-accordion/public/scss/made-vue-accordion.scss
@@ -1,6 +1,7 @@
+@import './variables';
 @import './functions';
 
-$accordion-active-color: #2c77cc;
+$accordion-active-color: $primary;
 
 $accordion-item-border-color: rgba(200,200,200,.8);
 $accordion-item-border: 1px solid $accordion-item-border-color;
@@ -18,21 +19,21 @@ $accordion-header-icon-size: 1.25rem;
 $accordion-header-border-focus: $accordion-header-color-active;
 $accordion-header-box-shadow-focus: 0 0 0 0.25rem rgba($accordion-active-color,.25);
 
-.accordion {
+.made-accordion {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.accordion-item {
+.made-accordion-item {
   border: $accordion-item-border;
 
   &:not(:first-of-type) {
     border-top: 0;
   }
 
-  &.accordion-item-active {
-    .accordion-item-header {
+  &.made-accordion-item-active {
+    .made-accordion-item-header {
       background: $accordion-header-background-active;
       color: $accordion-header-color-active;
       border-bottom: $accordion-item-border;
@@ -44,7 +45,7 @@ $accordion-header-box-shadow-focus: 0 0 0 0.25rem rgba($accordion-active-color,.
   }
 }
 
-.accordion-item-header {
+.made-accordion-item-header {
   padding: $accordion-header-padding;
   border: none;
   width: 100%;
@@ -74,7 +75,7 @@ $accordion-header-box-shadow-focus: 0 0 0 0.25rem rgba($accordion-active-color,.
   }
 }
 
-.accordion-item-content {
+.made-accordion-item-content {
   width: 100%;
   transition: max-height .3s ease-out;
   overflow: hidden;

diff --git a/made-vue-accordion/src/components/MAccordion.vue b/made-vue-accordion/src/components/MAccordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="accordion">
+  <ul class="made-accordion">
     <slot />
   </ul>
 </template>

diff --git a/made-vue-accordion/src/components/MAccordionItem.vue b/made-vue-accordion/src/components/MAccordionItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <li class="accordion-item" :class="{ 'accordion-item-active': expanded }">
+  <li class="made-accordion-item" :class="{ 'made-accordion-item-active': expanded }">
     <button
-      class="accordion-item-header"
+      class="made-accordion-item-header"
       type="button"
       :aria-controls="id"
       @click="onExpand"
@@ -13,7 +13,7 @@
     </button>
     <div
       ref="AccordionItemContent"
-      class="accordion-item-content"
+      class="made-accordion-item-content"
       :aria-hidden="!expanded"
       :id="id"
     >

diff --git a/made-vue-blades/README.md b/made-vue-blades/README.md
@@ -40,7 +40,7 @@ You can then reference the blade layout component in your app:
     <template v-for="blade in blades" v-slot:[blade.key] :key="blade.key">
       <div>
         <p>This is some content from {{ blade.title }}</p>
-        <button class="blade-button" @click="onCreateBlade">
+        <button class="made-blade-button" @click="onCreateBlade">
           Create another blade
         </button>
       </div>

diff --git a/made-vue-blades/package.json b/made-vue-blades/package.json
@@ -49,26 +49,26 @@
   },
   "homepage": "https://github.com/MADE-Apps/MADE-Vue#readme",
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.9.6",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.2.21",
-    "autoprefixer": "^10.4.0",
+    "@babel/core": "^7.17.2",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^17.0.16",
+    "@vitejs/plugin-vue": "^2.1.0",
+    "@vue/compiler-sfc": "^3.2.30",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
-    "jest": "^27.2.1",
-    "postcss": "^8.3.11",
+    "jest": "^27.5.1",
+    "postcss": "^8.4.6",
     "rollup-plugin-copy": "^3.4.0",
-    "sass": "^1.43.4",
-    "tailwindcss": "^2.2.19",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.13",
-    "vite-plugin-dts": "^0.9.2",
-    "vue-loader": "^16.8.2",
-    "vue-tsc": "^0.28.10"
+    "sass": "^1.49.7",
+    "tailwindcss": "^3.0.19",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13",
+    "vite-plugin-dts": "^0.9.9",
+    "vue-loader": "^17.0.0",
+    "vue-tsc": "^0.31.2"
   },
   "dependencies": {
-    "vue": "^3.2.20"
+    "vue": "^3.2.30"
   }
 }
diff --git a/made-vue-blades/public/scss/_variables.scss b/made-vue-blades/public/scss/_variables.scss
@@ -0,0 +1,2 @@
+$primary: #2c77cc;
+$secondary: #cc812c;
diff --git a/made-vue-blades/public/scss/made-vue-blades.scss b/made-vue-blades/public/scss/made-vue-blades.scss
@@ -1,3 +1,5 @@
+@import './variables';
+
 $blade-background-color: #fff;
 $blade-border-color: rgba(200,200,200,.8);
 $blade-box-shadow: 0 8px 16px 0 rgb(0 0 0 / 16%), 0 2px 4px 0 rgb(0 0 0 / 8%);
@@ -16,10 +18,10 @@ $blade-button-background: none;
 $blade-button-margin: 0;
 $blade-button-border: 0;
 $blade-button-transition: background-color .3s ease-out;
-$blade-button-hover-background: #2c77cc;
+$blade-button-hover-background: $primary;
 $blade-button-hover-color: #fff;
 
-.bladelayout {
+.made-blade-layout {
   display: flex;
   flex: 1 1 auto;
   position: relative;
@@ -29,7 +31,7 @@ $blade-button-hover-color: #fff;
   overflow-y: hidden;
 }
 
-.blade {
+.made-blade {
   background-color: $blade-background-color;
   border-color: $blade-border-color;
   display: flex;
@@ -41,40 +43,40 @@ $blade-button-hover-color: #fff;
   box-sizing: border-box;
   width: $blade-width;
 
-  &.blade-maximized {
+  &.made-blade-maximized {
     width: $blade-width-maximized;
   }
 }
 
-.blade-header {
+.made-blade-header {
   position: relative;
   height: $blade-header-height;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 
-.blade-header-content {
+.made-blade-header-content {
   display: flex;
   height: 100%;
   padding: $blade-padding;
   align-items: center;
 }
 
-.blade-header-title {
+.made-blade-header-title {
   font-weight: $blade-header-font-weight;
   font-size: $blade-header-font-size;
   line-height: $blade-header-line-height;
   flex: 0 1 auto;
   margin: $blade-header-margin;
 }
 
-.blade-header-actions {
+.made-blade-header-actions {
   display: flex;
   flex: 1 0 auto;
   justify-content: flex-end;
 }
 
-.blade-action-button {
+.made-blade-action-button {
   width: $blade-button-size;
   height: $blade-button-size;
   background: $blade-button-background;
@@ -91,7 +93,7 @@ $blade-button-hover-color: #fff;
   }
 }
 
-.blade-content {
+.made-blade-content {
   height: 100%;
   padding: $blade-padding;
   position: relative;

diff --git a/made-vue-blades/src/App.vue b/made-vue-blades/src/App.vue
@@ -3,7 +3,7 @@
     <template v-for="blade in blades" v-slot:[blade.key]>
       <div :key="blade.key">
         <p>This is some content from {{ blade.title }}</p>
-        <button class="blade-button" @click="onCreateBlade">
+        <button class="made-blade-button" @click="onCreateBlade">
           Create another blade
         </button>
       </div>

diff --git a/made-vue-blades/src/components/MBlade.vue b/made-vue-blades/src/components/MBlade.vue
@@ -1,14 +1,14 @@
 <template>
-  <div :id="id" class="blade" :class="{ 'blade-maximized': isMaximized }">
-    <header class="blade-header">
-      <div class="blade-header-content">
+  <div :id="id" class="made-blade" :class="{ 'made-blade-maximized': isMaximized }">
+    <header class="made-blade-header">
+      <div class="made-blade-header-content">
         <slot name="header">
-          <h2 class="blade-header-title">{{ header }}</h2>
+          <h2 class="made-blade-header-title">{{ header }}</h2>
         </slot>
-        <div class="blade-header-actions">
+        <div class="made-blade-header-actions">
           <button
             type="button"
-            class="blade-action-button blade-action-close-fullscreen"
+            class="made-blade-action-button made-blade-action-close-fullscreen"
             title="Collapse"
             v-if="canResize && isMaximized"
             @click="onMaximize"
@@ -29,7 +29,7 @@
 
           <button
             type="button"
-            class="blade-action-button blade-action-open-fullscreen"
+            class="made-blade-action-button made-blade-action-open-fullscreen"
             title="Maximize"
             v-if="canResize && !isMaximized"
             @click="onMaximize"
@@ -49,7 +49,7 @@
 
           <button
             type="button"
-            class="blade-action-button blade-action-close"
+            class="made-blade-action-button made-blade-action-close"
             title="Close"
             v-if="canClose"
             @click="$emit('close', id)"
@@ -69,7 +69,7 @@
         </div>
       </div>
     </header>
-    <div class="blade-content">
+    <div class="made-blade-content">
       <slot />
     </div>
   </div>

diff --git a/made-vue-blades/src/components/MBladeLayout.vue b/made-vue-blades/src/components/MBladeLayout.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="bladelayout">
+  <div class="made-blade-layout">
     <slot>
       <m-blade
         v-for="blade in blades"
         :key="blade.key"
         :id="blade.key"
-        :class="{ 'blade-active': isActiveBlade(blade.key) }"
+        :class="{ 'made-blade-active': isActiveBlade(blade.key) }"
         :canClose="blade.canClose"
         :maximized="blade.maximized"
         @maximize="onBladeMaximize"
         @close="onBladeClose"
       >
         <template v-slot:header>
           <slot :name="`${blade.key}-header`">
-            <h2 class="blade-header-title">{{ blade.title }}</h2>
+            <h2 class="made-blade-header-title">{{ blade.title }}</h2>
           </slot>
         </template>
         <slot :name="`${blade.key}`" v-bind="blade"></slot>

diff --git a/made-vue-image/package.json b/made-vue-image/package.json
@@ -50,26 +50,26 @@
   },
   "homepage": "https://github.com/MADE-Apps/MADE-Vue#readme",
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.9.6",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.2.21",
-    "autoprefixer": "^10.4.0",
+    "@babel/core": "^7.17.2",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^17.0.16",
+    "@vitejs/plugin-vue": "^2.1.0",
+    "@vue/compiler-sfc": "^3.2.30",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
-    "jest": "^27.2.1",
-    "postcss": "^8.3.11",
+    "jest": "^27.5.1",
+    "postcss": "^8.4.6",
     "rollup-plugin-copy": "^3.4.0",
-    "sass": "^1.43.4",
-    "tailwindcss": "^2.2.19",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.13",
-    "vite-plugin-dts": "^0.9.2",
-    "vue-loader": "^16.8.2",
-    "vue-tsc": "^0.28.10"
+    "sass": "^1.49.7",
+    "tailwindcss": "^3.0.19",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13",
+    "vite-plugin-dts": "^0.9.9",
+    "vue-loader": "^17.0.0",
+    "vue-tsc": "^0.31.2"
   },
   "dependencies": {
-    "vue": "^3.2.20"
+    "vue": "^3.2.30"
   }
 }
diff --git a/made-vue-image/public/scss/_variables.scss b/made-vue-image/public/scss/_variables.scss
@@ -0,0 +1,2 @@
+$primary: #2c77cc;
+$secondary: #cc812c;