@burh/nuxt-core 1.0.19 → 1.0.21

package/assets/sass/burh-ds/atoms/_forms.scss

@@ -395,4 +395,23 @@ div {
 .el-popover {
   word-break: initial;
   text-align: left;
+}
+
+span.el-radio {
+  &__inner {
+    border: 1px solid $color-primary;
+  }
+
+  &__input.is-checked {
+    .el-radio__inner {
+      border-color: $color-primary;
+      background: $white;
+
+      &::after{
+        background-color: $color-primary;
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
 }

package/assets/sass/burh-ds/content/_main-content.scss

@@ -6,6 +6,14 @@
                 padding-left: 0 !important;
             }
         }
+
+        @for $value-container from 1 through 20 {
+          &--#{$value-container * 5} {
+            @media (min-width:  map-get($grid-breakpoints, "lg")) {
+              max-width: calc(100% - #{$value-container * 5vw});
+            }
+          }
+        }
     }
     .navbar-top {
         padding-right: 1rem !important;

package/assets/sass/burh-ds/variables/_colors.scss

@@ -165,7 +165,8 @@ $theme-colors: map-merge((
   "white":        $white,
   "neutral":      $white,
   "dark":         $dark,
-  "darker":       $darker
+  "darker":       $darker,
+  "test-online":  $purple
 ), $theme-colors);
 
 $brand-colors: () !default;
@@ -189,6 +190,7 @@ $shape-colors: map-merge((
   "secondary":    #24b47e,
   "neutral":      #e9ecef,
   "blue-gray":    #b2cbe1,
+  "purple-primary": #555abf,
 
 ), $shape-colors);
 

package/assets/sass/custom/_variables.scss

@@ -59,6 +59,7 @@ $yellow:  #ffd600 !default;
 $green:   #2dce89 !default;
 $teal:    #11cdef !default;
 $cyan:    #2bffc6 !default;
+$violet:  #7f00bb !default;
 
 $colors: () !default;
 $colors: map-merge((

package/components/burh-ds/Avatar/AvatarLink.vue

@@ -0,0 +1,23 @@
+<template>
+  <a href="#" class="">
+    <div class="media align-items-center">
+      <span class="avatar avatar-sm rounded-circle">
+        <img :src="logo">
+      </span>
+      <div class="media-body ml-2 d-none d-lg-block">
+        <span class="mb-0 text-sm font-weight-bold">
+          {{name}}
+        </span>
+      </div>
+    </div>
+  </a>
+</template>
+<script>
+export default {
+  name: "avatar-link",
+  props: {
+    logo: String,
+    name: String
+  }
+}
+</script>

package/components/burh-ds/Avatar/BusinessAvatar.vue

@@ -0,0 +1,38 @@
+<template>
+  <a href="#" class="no-padding">
+    <div class="media align-items-center">
+      <span class="avatar avatar-sm rounded-circle">
+        <img :src="logo">
+      </span>
+      <div class="media-body ml-4 d-none d-lg-block br">
+        <span class="mb-0 text-sm font-weight-bold">
+          {{userName}}
+        </span>
+        <br>
+        <span class="mb-0 text-sm">
+          {{companyName}}
+        </span>
+        <i class="fa fa-angle-down ml-3" aria-hidden="true"></i>
+      </div>
+    </div>
+  </a>
+</template>
+<script>
+export default {
+  name: "business-avatar",
+  props: {
+    logo: String,
+    userName: String,
+    companyName: String
+  }
+}
+</script>
+<style lang="scss" scoped>
+.br {
+    line-height: .8rem;
+}
+
+.no-padding {
+    padding: 0 !important;
+}
+</style>

package/components/burh-ds/Button/ExportButton.vue

@@ -0,0 +1,26 @@
+<template>
+    <base-dropdown :hasToggle="false">
+    <base-button slot="title-container" outline type="primary" class="dropdown-toggle">
+      {{buttonName}}
+    </base-button>
+    <a v-for="(options, index) in exportOptions" :key="index" @click="$emit('exportar')" class="dropdown-item" href="#">
+    <i class="pr-2" :class="options.icon"></i>
+    {{options.option}}
+    </a>
+  </base-dropdown>
+</template>
+<script>
+export default {
+    props:{
+        exportOptions:{
+            type: Array,
+            default: () => 
+            [{option: 'Exportar Excel', icon: 'fas fa-file-excel text-success'}, {option: 'Exportar PDF', icon: 'fas fa-file-pdf text-danger'}]
+        },
+        buttonName:{
+            type: String,
+            default: 'Exportar'
+        }
+    }
+}
+</script>

package/components/burh-ds/Button/SwitchStateButton.vue

@@ -0,0 +1,165 @@
+<template>
+	<!-- <div role="group" class="btn-group mx-auto">
+		<base-button type="primary" role="button" class="border-right" @click="$emit('anual')">Anual</base-button>
+		<base-button type="primary" role="button" class="border-left" @click="$emit('mensal')">Mensal</base-button>
+	</div> -->
+	<div class="toggle-button-cover">
+		<div class="button-cover">
+			<div class="button r" id="button-1">
+				<input type="checkbox" class="checkbox" @change="$emit('changeRecurrence')" :checked="monthRecurrence == 1">
+				<div class="knobs"></div>
+				<div class="layer"></div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+	    monthRecurrence: {
+	        type: Number,
+	        default: 1
+	    }
+	},
+	return:{
+		default: ''
+	}
+};
+</script>
+<style lang="scss">
+    // .btn-primary{
+    //     &:hover{
+    //         /* background-color: transparent; */
+    //         border-color: transparent;
+    //     }
+    //     &:focus{
+    //         background-color: #0d85ce;
+    //     }
+    // }
+
+    *:focus
+    {
+        outline: none;
+    }
+    .toggle-button-cover
+    {
+        display: table-cell;
+        position: relative;
+        width: 200px;
+        height: 140px;
+        box-sizing: border-box;
+    }
+
+    .button-cover
+    {
+        height: 100px;
+        margin: 20px;
+        background-color: #fff;
+        box-shadow: 0 10px 20px -8px #c5d6d6;
+        border-radius: 4px;
+    }
+
+    .button-cover:before
+    {
+        counter-increment: button-counter;
+        content: counter(button-counter);
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        color: #d7e3e3;
+        font-size: 12px;
+        line-height: 1;
+        padding: 5px;
+    }
+
+    .button-cover, .knobs, .layer
+    {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    .button
+    {
+        position: relative;
+        top: 50%;
+        width: 74px;
+        height: 36px;
+        margin: -20px auto 0 auto;
+        overflow: hidden;
+    }
+
+    .button.r, .button.r .layer
+    {
+        border-radius: 100px;
+    }
+
+    .button.b2
+    {
+        border-radius: 2px;
+    }
+
+    .checkbox
+    {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+        z-index: 3;
+    }
+
+    .knobs
+    {
+        z-index: 2;
+    }
+
+    .layer
+    {
+        width: 100%;
+        background-color: #ebf7fc;
+        transition: 0.3s ease all;
+        z-index: 1;
+    }
+
+    /* Button 1 */
+    #button-1 .knobs:before
+    {
+        content: 'Anual';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 20px;
+        height: 10px;
+        color: #fff;
+        font-size: 10px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 1;
+        padding: 9px 4px;
+        background-color: #03A9F4;
+        border-radius: 50%;
+        transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
+    }
+
+    #button-1 .checkbox:checked + .knobs:before
+    {
+        content: 'Mensal';
+        left: 42px;
+        background-color: #f44336;
+    }
+
+    #button-1 .checkbox:checked ~ .layer
+    {
+        background-color: #fcebeb;
+    }
+
+    #button-1 .knobs, #button-1 .knobs:before, #button-1 .layer
+    {
+        transition: 0.3s ease all;
+    }
+</style>

package/components/burh-ds/Cards/PlanCard.vue

@@ -1,99 +1,110 @@
 <template>
-    <div class="card card--store mb-4" tabindex="0" @click="$emit('card-selected')">
-        <div class="card-header bg-transparent text-center card-header--store">
-            <h3 class="text-header">{{ name }}</h3>
-            <div class="value-header display-2">{{ price | convertToReal }}</div>
-
-            <div class="d-block d-sm-none text-center">
-                <collapse :animation-duration="200">
-                    <collapse-item class="card--shadowless" name="1">
-                        <button slot="title" class="btn btn-link" @click="$emit('card-benefits')">Beneficios</button>
-                        <div>
-                            <ul class="list-unstyled">
-                                <li v-for="(items, index) in features" :key="index">
-                                    <div class="d-flex align-items-center">
-                                        <span>
-                                            <i class="fas fa-check"></i>
-                                        </span>
-                                        <div class="ml-4 small text-left">
-                                            <span> {{  items.name }} </span>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </collapse-item>
-                </collapse>
-
-            </div>
-        </div>
-
-        <div class="card-body p-4 px-lg-4 d-none d-md-block">
-            <div>
-                <h6 class="card-text text-sm">{{ description }}</h6>
-                <div class="h6 font-weight-bold text-sm">{{ subtitle }}</div>
-                <div>
-                    <ul class="list-unstyled">
-                        <li v-for="(items, index) in features" :key="index">
-                            <div class="d-flex align-items-center">
-                                <span>
-                                    <i class="fas fa-check"></i>
-                                </span>
-                                <div class="ml-4 small">
-                                    <span> {{  items.name }} </span>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div :class="'card card--store mb-4 ' + (isSelectedPlan ? 'selected' : '') " tabindex="0" v-on=" { click: () => $emit('card-selected', (isCurrentPlan && isSelectedPlan)) }">
+		<div class="card-header bg-transparent text-center card-header--store">
+			<span class="current-flag" v-if="isCurrentPlan">Atual</span>
+			<h3 class="text-header display-3">{{ name }}</h3>
+			<h3 v-if="!isCurrentPlan" class="display-3">{{ price | convertToReal }}</h3>
+
+			<div class="d-block d-sm-none text-center">
+				<collapse :animation-duration="200">
+					<collapse-item class="card--shadowless" name="1">
+						<button slot="title" class="btn btn-link" @click="$emit('card-benefits')">Beneficios</button>
+						<div>
+							<ul class="list-unstyled">
+								<li v-for="(item, index) in features" :key="index">
+									<div class="d-flex align-items-center">
+										<span>
+											<i class="fas fa-check"></i>
+										</span>
+										<div class="ml-4 small text-left">
+											<span> {{  item.item.name }} </span>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</collapse-item>
+				</collapse>
+
+			</div>
+		</div>
+
+		<div class="card-body p-4 px-lg-4 d-none d-md-block">
+			<div>
+				<h6 class="card-text text-sm">{{ description }}</h6>
+				<div class="h6 font-weight-bold text-sm">{{ subtitle }}</div>
+				<div>
+					<ul class="list-unstyled">
+						<li v-for="(item, index) in features" :key="index">
+							<div class="d-flex align-items-center">
+								<span>
+									<i class="fas fa-check"></i>
+								</span>
+								<div class="ml-4 small">
+									<span> {{  item.item.name }} </span>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 <script>
 import Collapse from '@burh/nuxt-core/components/argon-core/Collapse/Collapse.vue';
 import CollapseItem from '@burh/nuxt-core/components/argon-core/Collapse/CollapseItem.vue';
 export default {
-    name: 'store-card',
-    components: { 
-    Collapse, 
-    CollapseItem 
-    },
-    props:{
-        name: {
-            type: String,
-            default: 'Premium'
-        },
-        price: {
-            type: Number,
-            default: 397
-        },
-        description: {
-            type: String,
-            default: 'Recursos inteligentes para não perder mais tempo no processo seletivo'
-        },
-        subtitle: {
-            type: String,
-            default: 'Tudo no gratuito e mais:'
-        },
-        features: {
-            type: Array,
-            default:()=>{
-                return [ {id: 1, name:'Vagas Confidenciais'}, {id: 2, name:'Vagas Urgentes'}, {id: 3, name:'Filtros Avançados'}, {id: 4, name:'Processos Customizados'}, {id: 5, name:'Anotações nas vagas e nos candidatos'}];
-            }
-        }
-    },
-    filters: {
-        convertToReal(value) {
-            return 'R$ ' + value.toFixed(2).replace('.',',');
-        }  
-    },
-    data(){
-        return{
-            default: ''
-        };
-    }
-}
+	name: 'plan-card',
+	components: {
+		Collapse,
+		CollapseItem
+	},
+	props:{
+		isSelectedPlan:{
+			type: Boolean,
+			default: true
+		},
+		planid:{
+			type: Number,
+		},
+		name: {
+			type: String,
+			default: 'Premium'
+		},
+		price: {
+			type: Number,
+			default: 397
+		},
+		description: {
+			type: String,
+			default: 'Recursos inteligentes para não perder mais tempo no processo seletivo'
+		},
+		subtitle: {
+			type: String,
+			default: 'Tudo no gratuito e mais:'
+		},
+		features: {
+			type: Array,
+			default:()=>{
+				return [ { id: 1, name:'Vagas Confidenciais' }, { id: 2, name:'Vagas Urgentes' }, { id: 3, name:'Filtros Avançados' }, { id: 4, name:'Processos Customizados' }, { id: 5, name:'Anotações nas vagas e nos candidatos' }];
+			}
+		},
+		isCurrentPlan: {
+			type: Boolean | Number,
+			default: false
+		}
+	},
+	filters: {
+		convertToReal(value) {
+			return 'R$ ' + value.toFixed(2).replace('.', ',');
+		}
+	},
+	data(){
+		return{
+		};
+	},
+};
 </script>
 <style lang="scss">
 @import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
@@ -107,43 +118,72 @@ export default {
     }
 
     .card--store {
-        border: 1px solid #e5e5e5;
+        min-height: 100%;
+
+        .current-flag {
+            color: $color-light--darken
+        }
+
+        &:hover {
+            cursor: pointer;
+            background-color: $color-mono-dark-10;
+            border-style: solid !important;
+            border-width: 2px !important;
+            border-color: $color-mono-dark-10 !important;
 
-        &:focus{
-            background-color: $color-info--ligthen;
+            .card-header {
+                border-bottom-color: $color-mono-dark-10;
+            }
+            .card--shadowless {
+                background-color: $color-mono-dark-10;
+
+                .card-header {
+                    background-color: $color-mono-dark-10;
+                }
+            }
+
+            .fa-check::before {
+                color: $color-primary
+            }
+        }
+
+        &.selected {
+            outline: none;
+            background-color: $white;
             border-style: solid !important;
             border-width: 2px !important;
-            border-color: $color-info--mid-dark !important;
-            
-            .card-header{
-                border-bottom-color: $color-info--mid-dark;
+            border-color: $color-primary !important;
+
+            .card-header {
+                border-bottom-color: $color-primary;
             }
-            .card--shadowless{
-                background-color: $color-info--ligthen;
-                
-                .card-header{
-                    background-color: $color-info--ligthen;
+            .card--shadowless {
+                background-color: $white;
+
+                .card-header {
+                    background-color: $white;
                 }
             }
 
-            .fa-check::before{
-                color: #32A0D5;
-            } 
+            .fa-check::before {
+                color: $color-primary;
+            }
         }
 
         .card-header--store {
+            border: 0;
             @media screen and (min-width: 576px) {
                 border: 0;
                 &::after {
                     content: '';
-                    width: 75%;
+                    width: 85%;
                     height: 1px;
-                    background-color: #679DBF;
+                    background-color: $color-light;
                     position: absolute;
                     transform: translatex(-50%);
                 }
             }
         }
-}
 
-</style>
+	}
+</style>

package/components/burh-ds/Cards/PurchaseCard.vue

@@ -56,7 +56,4 @@ export default {
 </script>
 
 <style lang="scss">
-.card--purchase-resume {
-    border: 1px solid #e5e5e5;
-}
 </style>

package/components/burh-ds/Cards/PurchaseCardSimple.vue

@@ -56,7 +56,4 @@ export default {
 </script>
 
 <style lang="scss">
-.card--purchase-resume {
-    border: 1px solid #e5e5e5;
-}
 </style>