@burh/nuxt-core 1.0.500 → 1.0.502

package/components/burh-ds/Skeleton/BufferUserSkeleton.vue

@@ -1,142 +1,142 @@
-<template>
-    <div class="box-applicant col-12 col-sm-6 col-md-3">
-        <card
-            :hover="true"
-            :bodyClasses="'mx-auto text-center px-0'"
-            :footerClasses="'mx-auto border-0'"
-            @click.stop
-        >
-            <template>
-                <div class="avatar rounded-circle header-avatar">
-                    <skeleton-animate :width="90" :height="90" img />
-                </div>
-                <div class="applicant__card--info">
-                    <div class="applicant__card--header">
-                        <skeleton-animate :width="120" :height="15" rounded />
-                        <skeleton-animate
-                            class="mt-2"
-                            :width="120"
-                            :height="15"
-                            rounded
-                        />
-                    </div>
-
-                    <p class="applicant__card--city">
-                        <skeleton-animate :width="100" :height="15" rounded />
-                    </p>
-                </div>
-            </template>
-
-            <!-- <div slot="footer">
-                <i v-if="isSeen" class="fa fa-eye"></i>
-                <i v-else class="fa fa-eye-slash"></i>
-            </div> -->
-        </card>
-    </div>
-</template>
-
-<script>
-import SkeletonAnimate from './SkeletonAnimate.vue';
-
-export default {
-    name: 'buffer-user-skeleton',
-    components: {
-        SkeletonAnimate
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.box-applicant {
-    /deep/ .card {
-        background: linear-gradient(
-            #ececec 4rem,
-            rgb(255, 255, 255) 20%
-        ) !important;
-        .card-body {
-            display: grid;
-            grid-template-columns: 90px 1fr;
-            margin-top: 30px;
-            width: 90%;
-            padding-bottom: 0;
-            .header-avatar {
-                width: 90px;
-                height: 90px;
-                max-width: initial;
-                max-height: initial;
-            }
-        }
-    }
-}
-.applicant__card--info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 20px;
-    overflow: hidden;
-    p {
-        margin-bottom: 0px;
-        color: #1d364b;
-        font-weight: 500;
-        font-size: 1rem;
-    }
-    span {
-        color: #525f7f;
-        font-size: 0.875rem;
-    }
-    p,
-    span {
-        text-align: left;
-    }
-
-    .applicant__card--header {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .applicant__card--city {
-        margin-top: 40px;
-    }
-}
-
-.header {
-    &-avatar {
-        position: relative;
-        width: 8rem;
-        height: 8rem;
-        max-width: 100%;
-        max-height: 90%;
-        img {
-            height: 100%;
-        }
-    }
-}
-.box-applicant {
-    .card-body {
-        height: 20.5rem !important;
-    }
-
-    &:hover {
-        .applicant-title {
-            display: block;
-            overflow: initial;
-        }
-    }
-}
-
-.checkbox-applicant {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-}
-
-.applicant {
-    &-title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-    }
-}
-</style>
+<template>
+    <div class="box-applicant col-12 col-sm-6 col-md-3">
+        <card
+            :hover="true"
+            :bodyClasses="'mx-auto text-center px-0'"
+            :footerClasses="'mx-auto border-0'"
+            @click.stop
+        >
+            <template>
+                <div class="avatar rounded-circle header-avatar">
+                    <skeleton-animate :width="90" :height="90" img />
+                </div>
+                <div class="applicant__card--info">
+                    <div class="applicant__card--header">
+                        <skeleton-animate :width="120" :height="15" rounded />
+                        <skeleton-animate
+                            class="mt-2"
+                            :width="120"
+                            :height="15"
+                            rounded
+                        />
+                    </div>
+
+                    <p class="applicant__card--city">
+                        <skeleton-animate :width="100" :height="15" rounded />
+                    </p>
+                </div>
+            </template>
+
+            <!-- <div slot="footer">
+                <i v-if="isSeen" class="fa fa-eye"></i>
+                <i v-else class="fa fa-eye-slash"></i>
+            </div> -->
+        </card>
+    </div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+    name: 'buffer-user-skeleton',
+    components: {
+        SkeletonAnimate
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.box-applicant {
+    /deep/ .card {
+        background: linear-gradient(
+            #ececec 4rem,
+            rgb(255, 255, 255) 20%
+        ) !important;
+        .card-body {
+            display: grid;
+            grid-template-columns: 90px 1fr;
+            margin-top: 30px;
+            width: 90%;
+            padding-bottom: 0;
+            .header-avatar {
+                width: 90px;
+                height: 90px;
+                max-width: initial;
+                max-height: initial;
+            }
+        }
+    }
+}
+.applicant__card--info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px;
+    overflow: hidden;
+    p {
+        margin-bottom: 0px;
+        color: #1d364b;
+        font-weight: 500;
+        font-size: 1rem;
+    }
+    span {
+        color: #525f7f;
+        font-size: 0.875rem;
+    }
+    p,
+    span {
+        text-align: left;
+    }
+
+    .applicant__card--header {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .applicant__card--city {
+        margin-top: 40px;
+    }
+}
+
+.header {
+    &-avatar {
+        position: relative;
+        width: 8rem;
+        height: 8rem;
+        max-width: 100%;
+        max-height: 90%;
+        img {
+            height: 100%;
+        }
+    }
+}
+.box-applicant {
+    .card-body {
+        height: 20.5rem !important;
+    }
+
+    &:hover {
+        .applicant-title {
+            display: block;
+            overflow: initial;
+        }
+    }
+}
+
+.checkbox-applicant {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+}
+
+.applicant {
+    &-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+    }
+}
+</style>

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

@@ -1,86 +1,86 @@
-<template>
-	<div id="content">
-		<div class="skeleton">
-			<div class="skeleton-wrapper">
-				<div class="skeleton-wrapper-inner">
-					<div class="skeleton-wrapper-body">
-						<skeleton-animate class="skeleton-avatar" :width="60" :height="60" img />
-						<skeleton-animate class="skeleton-author" :width="150" :height="20" />
-						<skeleton-animate class="skeleton-label" :width="100" :height="10" />
-						<skeleton-animate class="skeleton-content-1" :width="500" :height="10" />
-						<skeleton-animate class="skeleton-content-2" :width="500" :height="10" />
-						<skeleton-animate class="skeleton-content-3" :width="500" :height="10" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import SkeletonAnimate from './SkeletonAnimate.vue';
-
-export default {
-	name: 'card-skeleton',
-	components: {
-		SkeletonAnimate
-	}
-};
-</script>
-
-<style>
-#content {
-    width: 100%;
-}
-.skeleton-wrapper {
-    background: #fff;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    margin: 10px 15px;
-    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
-    padding: 40px 20px;
-    border-radius: .375rem;
-}
-
-.skeleton-wrapper-inner {
-    height: 150px;
-    padding: 15px;
-    position: relative;
-}
-
-.skeleton-wrapper-body div {
-    position: absolute;
-    right: 15px;
-    left: 15px;
-    top: 15px;
-}
-
-div.skeleton-avatar {
-    right: auto;
-}
-div.skeleton-author {
-    top: 20px;
-    left: 95px;
-}
-
-div.skeleton-label {
-    left: 95px;
-    top: 50px;
-}
-div.skeleton-content-1,
-div.skeleton-content-2,
-div.skeleton-content-3 {
-    left: 15px;
-    right: 15px;
-    width: 98%!important;
-}
-div.skeleton-content-1 {
-    top: 100px;
-}
-div.skeleton-content-2 {
-    top: 120px;
-}
-div.skeleton-content-3 {
-    top: 140px;
-}
-</style>
+<template>
+	<div id="content">
+		<div class="skeleton">
+			<div class="skeleton-wrapper">
+				<div class="skeleton-wrapper-inner">
+					<div class="skeleton-wrapper-body">
+						<skeleton-animate class="skeleton-avatar" :width="60" :height="60" img />
+						<skeleton-animate class="skeleton-author" :width="150" :height="20" />
+						<skeleton-animate class="skeleton-label" :width="100" :height="10" />
+						<skeleton-animate class="skeleton-content-1" :width="500" :height="10" />
+						<skeleton-animate class="skeleton-content-2" :width="500" :height="10" />
+						<skeleton-animate class="skeleton-content-3" :width="500" :height="10" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+
+export default {
+	name: 'card-skeleton',
+	components: {
+		SkeletonAnimate
+	}
+};
+</script>
+
+<style>
+#content {
+    width: 100%;
+}
+.skeleton-wrapper {
+    background: #fff;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    margin: 10px 15px;
+    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
+    padding: 40px 20px;
+    border-radius: .375rem;
+}
+
+.skeleton-wrapper-inner {
+    height: 150px;
+    padding: 15px;
+    position: relative;
+}
+
+.skeleton-wrapper-body div {
+    position: absolute;
+    right: 15px;
+    left: 15px;
+    top: 15px;
+}
+
+div.skeleton-avatar {
+    right: auto;
+}
+div.skeleton-author {
+    top: 20px;
+    left: 95px;
+}
+
+div.skeleton-label {
+    left: 95px;
+    top: 50px;
+}
+div.skeleton-content-1,
+div.skeleton-content-2,
+div.skeleton-content-3 {
+    left: 15px;
+    right: 15px;
+    width: 98%!important;
+}
+div.skeleton-content-1 {
+    top: 100px;
+}
+div.skeleton-content-2 {
+    top: 120px;
+}
+div.skeleton-content-3 {
+    top: 140px;
+}
+</style>

package/components/burh-ds/Skeleton/ChartCard.vue

@@ -1,114 +1,114 @@
-<template>
-	<div class="indicator__card">
-		<div>
-			<div class="indicator__card__header">
-				<div class="indicator__card__header__status">
-					<skeleton-animate  :width="250" :height="20" />
-				</div><br>
-				<span class="indicator__card__header__status">
-					<skeleton-animate  :width="175" :height="10" />
-				</span>
-			</div>
-
-			<div class="indicator__card__content">
-				<span class="indicator__card__content__date">
-					<skeleton-animate  :width="100" :percentageWidth="true" :height="255" />
-				</span>
-			</div>
-
-		</div>
-	</div>
-</template>
-
-<script>
-import SkeletonAnimate from './SkeletonAnimate.vue';
-export default {
-	name: 'indicator-card-skeleton',
-	components: {
-		SkeletonAnimate
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@keyframes placeholderSkeleton {
-    0% {
-        background-position: -468px 0;
-    }
-    100% {
-        background-position: 468px 0;
-    }
-}
-
-@keyframes skeletonAnimate {
-    from {
-        background-position: top left;
-    }
-    to {
-        background-position: top right;
-    }
-}
-
-@-webkit-keyframes placeholderSkeleton {
-    0% {
-        background-position: -468px 0;
-    }
-    100% {
-        background-position: 468px 0;
-    }
-}
-
-@-webkit-keyframes skeletonAnimate {
-    from {
-        background-position: top left;
-    }
-    to {
-        background-position: top right;
-    }
-}
-
-.skeleton-mt {
-    margin-top: 10px;
-}
-
-.indicator__card {
-    cursor: pointer;
-    background: #fff;
-    padding: 20px;
-    border-radius: 4px;
-    border: none;
-    text-align: initial;
-    color: #1D364B;
-    transition: transform 0.25s;
-
-    &__header {
-        display: block;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px 0;
-    }
-
-    &__content {
-        margin-top: 5px;
-        &__date {
-            font-size: 0.875rem;
-            font-weight: 400;
-            color: #AEB6BE;
-        }
-        &__title {
-            font-size: 1.275rem;
-            color: #1D364B;
-            margin-bottom: 0;
-        }
-        &__id, &__city {
-            font-size: 0.875rem;
-            font-weight: 600;
-            color: #525F7F;
-			display: block;
-        }
-		&__city {
-			font-size: 1rem;
-		}
-    }
-}
-</style>
+<template>
+	<div class="indicator__card">
+		<div>
+			<div class="indicator__card__header">
+				<div class="indicator__card__header__status">
+					<skeleton-animate  :width="250" :height="20" />
+				</div><br>
+				<span class="indicator__card__header__status">
+					<skeleton-animate  :width="175" :height="10" />
+				</span>
+			</div>
+
+			<div class="indicator__card__content">
+				<span class="indicator__card__content__date">
+					<skeleton-animate  :width="100" :percentageWidth="true" :height="255" />
+				</span>
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script>
+import SkeletonAnimate from './SkeletonAnimate.vue';
+export default {
+	name: 'indicator-card-skeleton',
+	components: {
+		SkeletonAnimate
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@keyframes placeholderSkeleton {
+    0% {
+        background-position: -468px 0;
+    }
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+@keyframes skeletonAnimate {
+    from {
+        background-position: top left;
+    }
+    to {
+        background-position: top right;
+    }
+}
+
+@-webkit-keyframes placeholderSkeleton {
+    0% {
+        background-position: -468px 0;
+    }
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+@-webkit-keyframes skeletonAnimate {
+    from {
+        background-position: top left;
+    }
+    to {
+        background-position: top right;
+    }
+}
+
+.skeleton-mt {
+    margin-top: 10px;
+}
+
+.indicator__card {
+    cursor: pointer;
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    border: none;
+    text-align: initial;
+    color: #1D364B;
+    transition: transform 0.25s;
+
+    &__header {
+        display: block;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 0;
+    }
+
+    &__content {
+        margin-top: 5px;
+        &__date {
+            font-size: 0.875rem;
+            font-weight: 400;
+            color: #AEB6BE;
+        }
+        &__title {
+            font-size: 1.275rem;
+            color: #1D364B;
+            margin-bottom: 0;
+        }
+        &__id, &__city {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #525F7F;
+			display: block;
+        }
+		&__city {
+			font-size: 1rem;
+		}
+    }
+}
+</style>