@burh/nuxt-core 1.0.21 → 1.0.23

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

@@ -0,0 +1,303 @@
+//Burh colors - Main
+$color-default: #13293B;
+$color-default--lighten: #7092A6;
+$color-default--mid-dark: #071E2A;
+$color-default--darken: #0A0C10;
+$color-primary: #8965e0;
+$color-primary--lighten: #81BFEB;
+$color-primary--mid-dark: #0062AE;
+$color-primary--darken: #004483;
+$color-secondary: #FDDF00;
+$color-secondary--lighten: #FAE871;
+$color-secondary--mid-dark: #F9D100;
+$color-secondary--darken: #FFB200;
+$color-light: #ECF1F5;
+$color-light--lighten: #F9F9F9;
+$color-light--mid-dark: #CCD9DF;
+$color-light--darken: #B8C8D3;
+$color-dark: #485863;
+$color-dark--lighten: #768B9A;
+$color-dark--mid-dark: #3B4B56;
+$color-dark--darken: #040405;
+
+//Burh colors - Feedback
+$color-info: #2BB3DC; 
+$color-info--ligthen: #CAE7F0; 
+$color-info--mid-dark: #56BCD5;
+$color-info--darken: #56BCD5;
+$color-success: #4FA86F;
+$color-success--ligthen: #CADEE3;
+$color-success--mid-dark: #7EBD94;
+$color-success--darken: #35824D;
+$color-danger: #DE214B;
+$color-danger--ligthen: #EFC2CE;
+$color-danger--mid-dark: #E88CA4;
+$color-danger--darken: #C50035;
+$color-warning: #E69E33;
+$color-warning--ligthen: #E69E33;
+$color-warning--mid-dark: #DB8E37;
+$color-warning--darken: #E66433;
+
+//Burh Colors - Monochrome Scale
+$color-mono-blue: #004484;
+$color-mono-blue-90: #195690;
+$color-mono-blue-80: #33699C;
+$color-mono-blue-70: #4C7BA8;
+$color-mono-blue-60: #668EB5;
+$color-mono-blue-50: #7FA1C1;
+$color-mono-blue-40: #99B4CE;
+$color-mono-blue-30: #B2C6DA;
+$color-mono-blue-20: #CCD9E6;
+$color-mono-blue-10: #E5ECF2;
+$color-mono-dark: #232C30;
+$color-mono-dark-90: #384044;
+$color-mono-dark-80: #4F5659;
+$color-mono-dark-70: #646A6D;
+$color-mono-dark-60: #7B8082;
+$color-mono-dark-50: #909597;
+$color-mono-dark-40: #A7AAAC;
+$color-mono-dark-30: #BCBFC0;
+$color-mono-dark-20: #D3D4D5;
+$color-mono-dark-10: #E8E9EA;
+
+//Burh Colors - Social Media
+
+//Burh Colors - Base Duotone
+$base-light: #FFFFFF;
+$base-dark: $color-mono-dark;
+
+
+// Shadows
+
+$enable-shadows:            true !default;
+
+
+
+// Color system
+
+$white:    #fff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #8898aa !default;   // Line footer color
+$gray-700: #525f7f !default;   // Line p color
+$gray-800: #32325d !default;   // Line heading color
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: () !default;
+$grays: map-merge((
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+), $grays);
+
+$blue:    #5e72e4 !default;
+$indigo:  #5603ad !default;
+$purple:  #8965e0 !default;
+$pink:    #f3a4b5 !default;
+$red:     #f5365c !default;
+$orange:  #fb6340 !default;
+$yellow:  #ffd600 !default;
+$green:   #2dce89 !default;
+$teal:    #11cdef !default;
+$cyan:    #2bffc6 !default;
+
+$colors: () !default;
+$colors: map-merge((
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "light":      $gray-400,
+  "lighter":    $gray-200,
+  "lightest":   lighten($gray-200, 5%),
+  "gray-dark":  $gray-800
+), $colors);
+
+$default:       $color-default!default;
+$primary:       $color-primary !default;
+$secondary:     $color-secondary !default;
+$success:       $color-success !default;
+$info:          $color-info !default;
+$warning:       $color-warning !default;
+$danger:        $color-danger !default;
+$light:         $color-light !default;
+$dark:          $gray-900 !default;
+$darker:        $base-dark;
+
+$facebook:      #3b5999 !default;
+$twitter:       #1da1f2 !default;
+$google-plus:   #dd4b39 !default;
+$instagram:     #e4405f !default;
+$pinterest:     #bd081c !default;
+$youtube:       #cd201f !default;
+$slack:         #3aaf85 !default;
+$dribbble:      #ea4c89 !default;
+$github:        #222222 !default;
+$vimeo:         #04A0F0 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+  "default":      $default,
+  "primary":      $primary,
+  "secondary":    $secondary,
+  "success":      $success,
+  "info":         $info,
+  "warning":      $warning,
+  "danger":       $danger,
+  "white":        $white,
+  "neutral":      $white,
+  "dark":         $dark,
+  "darker":       $darker,
+), $theme-colors);
+
+$brand-colors: () !default;
+$brand-colors: map-merge((
+  "facebook":     $facebook,
+  "twitter":      $twitter,
+  "google-plus":  $google-plus,
+  "instagram":    $instagram,
+  "pinterest":    $pinterest,
+  "youtube":      $youtube,
+  "slack":        $slack,
+  "dribbble":     $dribbble,
+  "github":       $github,
+  "vimeo":        $vimeo
+), $brand-colors);
+
+$shape-colors: () !default;
+$shape-colors: map-merge((
+  "default":      #32325d,
+  "primary":      #5533ff,
+  "secondary":    #24b47e,
+  "neutral":      #e9ecef,
+  "blue-gray":    #b2cbe1,
+  "purple-primary": #555abf,
+
+), $shape-colors);
+
+$shapes-primary-colors: () !default;
+$shapes-primary-colors: map-merge((
+  "step-1-gradient-bg":         #281483,
+  "step-2-gradient-bg":         #8f6ed5,
+  "step-3-gradient-bg":         #d782d9,
+  "span-1-bg":                  #53f,
+  "span-2-bg":                  #4553ff,
+  "span-3-bg":                  #4f40ff,
+  "span-4-bg":                  #25ddf5,
+  "span-5-bg":                  #1fa2ff
+), $shapes-primary-colors);
+
+$shapes-default-colors: () !default;
+$shapes-default-colors: map-merge((
+  "step-1-gradient-bg":         #7795f8,
+  "step-2-gradient-bg":         #6772e5,
+  "step-3-gradient-bg":         #555abf,
+  "span-1-bg":                  #7795f8,
+  "span-2-bg":                  #7b9aff,
+  "span-3-bg":                  #6f8ff8,
+  "span-4-bg":                  #76eea7,
+  "span-5-bg":                  #6adaff
+), $shapes-default-colors);
+
+$shapes-light-colors: () !default;
+$shapes-light-colors: map-merge((
+  "step-1-gradient-bg":         #b2cbe1,
+  "step-2-gradient-bg":         #f6f9fc,
+  "step-3-gradient-bg":         #f6f9fc,
+  "span-1-bg":                  #b4cce1,
+  "span-2-bg":                  #c5dbef,
+  "span-3-bg":                  #b9d5ed,
+  "span-4-bg":                  #74e4a2,
+  "span-5-bg":                  #008169
+), $shapes-light-colors);
+
+$shapes-dark-colors: () !default;
+$shapes-dark-colors: map-merge((
+  "step-1-gradient-bg":         #32325d,
+  "step-2-gradient-bg":         #32325d,
+  "step-3-gradient-bg":         #32325d,
+  "span-1-bg":                  #2e2e57,
+  "span-2-bg":                  #2b2b58,
+  "span-3-bg":                  #25254d,
+  "span-4-bg":                  #d782d9,
+  "span-5-bg":                  #008169
+), $shapes-dark-colors);
+
+
+// Translucent color variations
+$translucent-color-opacity: .6 !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  200 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:             $gray-900 !default;
+$yiq-text-light:            $white !default;
+
+// Action colors
+
+$star-rating-color: $gray-400 !default;
+$star-rating-color-active: $yellow !default;
+
+$favorite-color: $yellow !default;
+$like-color: $blue !default;
+$love-color: $red !default;
+
+
+// Body
+
+$body-bg:       #f8f9fe !default;
+$body-color:    $gray-700 !default;
+$page-bg:       $color-mono-dark-30 !default;
+$bg-default:    $gray-100;
+
+
+// Sections
+
+$section-colors: () !default;
+$section-colors: map-merge((
+  "primary":      $body-bg,
+  "secondary":    $secondary,
+  "light":        $gray-400,
+  "dark":         $dark,
+  "darker":       $darker
+), $section-colors);
+
+// Links
+
+$link-color:                $primary !default;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%) !default;
+$link-hover-decoration:     none !default;
+
+
+@mixin generate_backgrounds() {
+  @each $key, $color in $colors {
+    .bg-#{$key} {
+      background-color: $color;
+    }
+  }
+}
+
+@include generate_backgrounds();

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

@@ -166,7 +166,6 @@ $theme-colors: map-merge((
   "neutral":      $white,
   "dark":         $dark,
   "darker":       $darker,
-  "test-online":  $purple
 ), $theme-colors);
 
 $brand-colors: () !default;

package/assets/sass/custom/_variables.scss

@@ -952,6 +952,7 @@ $tooltip-font-size:                 $font-size-sm !default;
 
 $modal-inner-padding:               1.5rem !default;
 
+$modal-xl:                          1100px !default;
 $modal-lg:                          800px !default;
 $modal-md:                          500px !default;
 $modal-sm:                          380px !default;

package/components/argon-core/BaseDropdown.vue

@@ -2,7 +2,7 @@
   <component
     :is="tag"
     :class="[{ show: isOpen }, `drop${direction}`]"
-    @click="toggleDropDown"
+    @click.stop.propagation="toggleDropDown"
     v-click-outside="closeDropDown"
   >
     <slot name="title-container" :is-open="isOpen">

package/components/argon-core/Modal.vue

@@ -69,7 +69,7 @@
         type: String,
         description: 'Modal size',
         validator(value) {
-          let acceptedValues = ["", "sm", "lg"];
+          let acceptedValues = ["", "sm", "lg","xl"];
           return acceptedValues.indexOf(value) !== -1;
         },
       },

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

@@ -1,23 +1,29 @@
 <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>
+	<span @click="handleClick">
+		<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>
+	</span>
 </template>
 <script>
 export default {
-  name: "avatar-link",
-  props: {
-    logo: String,
-    name: String
-  }
-}
+	name: 'avatar-link',
+	props: {
+		logo: String,
+		name: String,
+		data: Object
+	},
+	methods: {
+		handleClick(e) {
+			this.$emit('avatar-click', e);
+		}
+	}
+};
 </script>

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

@@ -1,13 +1,8 @@
 <template>
-    <base-dropdown :hasToggle="false">
-    <base-button slot="title-container" outline type="primary" class="dropdown-toggle">
-      {{buttonName}}
+    <base-button outline type="primary" class="dropdown-toggle">
+      Exportar Excel
+      <i class="fas fa-file-excel text-success ml-2" aria-hidden="true"></i>
     </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 {

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

@@ -0,0 +1,181 @@
+<template>
+	<div class="column">
+		<div class="card card-app" @click.prevent="$emit('test-click')">
+      <base-dropdown class="top-right custom" v-if="showMenu">
+        <i slot="title-container"
+          class="fa fa-ellipsis-h custom"
+          aria-hidden="true"
+        />
+        <li class="dropdown-item d-flex align-items-center w-100" @click="sendTest">
+          <i class="fa fa-paper-plane" aria-hidden="true" />
+          <span>
+            Enviar teste
+          </span>
+        </li>
+        <li class="dropdown-item d-flex align-items-center w-100" @click="viewTest">
+          <i class="fa fa-eye" aria-hidden="true" />
+          <span>
+            Visualizar teste
+          </span>
+        </li>
+        <li class="dropdown-item d-flex align-items-center w-100" @click="viewAnsweredTests">
+          <i class="fa fa-file" aria-hidden="true" />
+          <span>
+            Respostas recebidas
+          </span>
+        </li>
+        <li v-if="isDefault" class="dropdown-item d-flex align-items-center w-100" @click="exportExcel(id)">
+          <i class="fa fa-arrow-circle-down" aria-hidden="true" />
+          <span>
+            Exportar Respostas
+          </span>
+        </li>
+        <li class="dropdown-item d-flex align-items-center w-100" @click="copyTest">
+          <i class="fa fa-clone" aria-hidden="true" />
+          <span>
+            Fazer uma cópia
+          </span>
+        </li>
+        <li v-if="isDefault" class="dropdown-item d-flex align-items-center w-100" @click="openRenameEditor">
+          <i class="fa fa-pen" aria-hidden="true" />
+          <span>
+            Renomear teste
+          </span>
+        </li>
+        <li v-if="isDefault" class="dropdown-item d-flex align-items-center w-100" @click="deleteTest(id)">
+          <i class="fa fa-trash" aria-hidden="true" />
+          <span>
+            Apagar teste
+          </span>
+        </li>
+      </base-dropdown>
+			<img
+				v-if="icon === ''"
+				class="card__image"
+				:src="image"
+				:alt="`Icone para ${text}`"
+			>
+			<i
+				v-else
+				:class="icon"
+				class="card__icon"
+			/>
+		</div>
+		<input
+            class="w-100"
+            v-if="showNameEditor"
+            v-model="newName"
+            @keyup.enter="renameTest"
+            @blur="renameTest"
+            ref="teste"
+        />
+		<span v-else class="card-title w-100 text-center">{{text}}</span>
+	</div>
+</template>
+<script>
+import BaseDropdown from '../../argon-core/BaseDropdown.vue';
+
+export default {
+	name: 'test-card',
+	components: {
+		BaseDropdown,
+	},
+	props:{
+		link: String,
+		text: String,
+		image: String,
+		id: Number,
+		icon: {
+			type: String,
+			default: ''
+		},
+		showMenu: {
+			type: Boolean,
+			default: false,
+			description: 'Defines if option menu is visible'
+		},
+        isDefault: {
+            type: Boolean,
+            default: false,
+        }
+	},
+	methods: {
+		sendTest(e) {
+			this.$emit('send-test');
+		},
+		viewTest(e) {
+			this.$emit('view-test');
+		},
+		viewAnsweredTests(e) {
+			this.$emit('answers-test');
+		},
+		copyTest(e) {
+			this.$emit('copy-test');
+		},
+		openRenameEditor() {
+            this.showNameEditor = true;
+
+            this.$nextTick()
+            .then(() => this.$refs.teste.focus()
+            )
+		},
+        focusInput() {
+            this.$refs.teste.$el.focus();
+        },
+		renameTest() {
+			const rename = {
+				id: this.id,
+				name: this.newName
+			};
+			this.$emit('rename-test', rename);
+			this.showNameEditor = false;
+		},
+		deleteTest(id) {
+			this.$emit('delete-test', id);
+		},
+		exportExcel(id) {
+			this.$emit('export-excel', id);
+		}
+	},
+	data() {
+		return {
+			showNameEditor: false,
+			newName: this.text,
+		};
+	}
+};
+</script>
+<style lang="scss" scoped>
+@import "@burh/nuxt-core/assets/sass/argon-test-online";
+    .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+		&:hover {
+            .custom {
+                display: block;
+            }
+        }
+    }
+
+    .custom {
+        color: #ffffff;
+        background-color: #8192a6;
+        border-radius: 15%;
+        font-size: 1.25rem;
+        padding: .25rem .5rem;
+        display: none;
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .top-right {
+        right: .5rem;
+        position: absolute;
+        top: .5rem;
+        z-index: 100;
+    }
+</style>