@burh/nuxt-core 1.0.252 → 1.0.254

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

@@ -1,230 +1,230 @@
-<template>
-	<div class="recruitment__user__card">
-		<div class="recruitment__user__card__header">
-			<div class="recruitment__user__card__header__actions">
-				<div class="left">
-					<el-checkbox v-model="isChecked" />
-				</div>
-				<div class="right">
-					<el-tooltip placement="top" content="Anotações">
-						<button>
-							<i class="far fa-comment-alt notes"></i>
-						</button>
-					</el-tooltip>
-					<el-tooltip placement="top" content="Reprovar">
-						<button>
-							<i class="fas fa-times"></i>
-						</button>
-					</el-tooltip>
-				</div>
-			</div>
-			<img src="https://www.rotamaxima.com.br/wp-content/uploads/2018/11/principal.png" alt="Cover" class="user__cover">
-		</div>
-
-		<div class="recruitment__user__card__content">
-			<img src="https://randomuser.me/api/portraits/women/86.jpg" alt="Marisa da Silva">
-			<span class="name">
-				Marisa Silva
-				<i class="fas fa-wheelchair pcd"></i>
-			</span>
-			<span class="age">23 anos</span>
-			<span class="city">
-				<i class="fas fa-map-marker-alt"></i>
-				Sorocaba
-			</span>
-			<div class="info">
-				<span>ÚLTIMA EXPERIÊNCIA</span>
-				<p>Programadora PHP em Burh Brasil</p>
-			</div>
-		</div>
-
-		<div class="recruitment__user__card__footer">
-			<span>
-				<el-tooltip placement="top" content="Indicado">
-					<i class="fas fa-user-plus"></i>
-				</el-tooltip>
-			</span>
-			<span>
-				<el-tooltip placement="top" content="Reincidente">
-					<i class="fas fa-sync-alt"></i>
-				</el-tooltip>
-			</span>
-			<span>
-				<el-tooltip placement="top" content="Visualizado">
-					<i class="fas fa-eye"></i>
-				</el-tooltip>
-			</span>
-			<span>
-				<el-tooltip placement="top" content="Interno">
-					<i class="fas fa-building"></i>
-				</el-tooltip>
-			</span>
-		</div>
-	</div>
-</template>
-
-<script>
-import { Checkbox } from 'element-ui';
-
-export default {
-	name: 'recruitment-user-card',
-	components: {
-		ElCheckbox: Checkbox
-	},
-	data() {
-		return {
-			isChecked: false,
-		};
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-
-.recruitment__user__card {
-    background: #fff;
-    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
-    border-radius: 4px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: transform 0.25s;
-    &:focus {
-        outline: none;
-        transform: translateY(-5px);
-    }
-    &:hover {
-        transform: translateY(-5px);
-    }
-
-    &__header {
-        width: 100%;
-        height: 70px;
-        overflow: hidden;
-        position: relative;
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), 80%, transparent);
-            z-index: 1;
-        }
-        img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        &__actions {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 15px;
-            z-index: 2;
-            .right {
-                display: flex;
-                align-items: center;
-                flex-direction: row;
-                button {
-                    color: #fff;
-                    border: 0;
-                    background: transparent;
-                    width: 32px;
-                    height: 32px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    .notes {
-                        position: relative;
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            top: -5px;
-                            right: -5px;
-                            width: 10px;
-                            height: 10px;
-                            background: #FF7D7E;
-                            border-radius: 100px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        img {
-            width: 120px;
-            height: 120px;
-            border-radius: 100px;
-            object-fit: cover;
-            margin-top: -20px;
-            z-index: 10;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-        }
-
-        .name {
-            font-size: 1.275rem;
-            font-weight: 500;
-            color: #1D364B;
-            padding-top: 20px;
-            .pcd {
-                color: #1F8CEB;
-                margin-left: 5px;
-            }
-        }
-        .age {
-            font-weight: 500;
-            font-size: 0.875rem;
-            color: #1F8CEB;
-            padding-bottom: 20px;
-        }
-
-        .city {
-            font-size: 1rem;
-            font-weight: 400;
-            color: #525F7F;
-        }
-
-        .info {
-            padding: 30px 0;
-            text-align: center;
-            span {
-                font-size: 0.75rem;
-                font-weight: 500;
-                color: #AEB6BE;
-            }
-            p {
-                margin: 0;
-                color: #525F7F;
-                font-size: 1rem;
-                font-weight: 400;
-            }
-        }
-    }
-    &__footer {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-bottom: 20px;
-        span {
-            font-size: 0.875rem;
-            font-weight: 500;
-            margin: 0 10px;
-            color: #AEB6BE;
-            &.new {
-                color: #1F8CEB;
-            }
-        }
-    }
-}
-
-</style>
+<template>
+	<div class="recruitment__user__card">
+		<div class="recruitment__user__card__header">
+			<div class="recruitment__user__card__header__actions">
+				<div class="left">
+					<el-checkbox v-model="isChecked" />
+				</div>
+				<div class="right">
+					<el-tooltip placement="top" content="Anotações">
+						<button>
+							<i class="far fa-comment-alt notes"></i>
+						</button>
+					</el-tooltip>
+					<el-tooltip placement="top" content="Reprovar">
+						<button>
+							<i class="fas fa-times"></i>
+						</button>
+					</el-tooltip>
+				</div>
+			</div>
+			<img src="https://www.rotamaxima.com.br/wp-content/uploads/2018/11/principal.png" alt="Cover" class="user__cover">
+		</div>
+
+		<div class="recruitment__user__card__content">
+			<img src="https://randomuser.me/api/portraits/women/86.jpg" alt="Marisa da Silva">
+			<span class="name">
+				Marisa Silva
+				<i class="fas fa-wheelchair pcd"></i>
+			</span>
+			<span class="age">23 anos</span>
+			<span class="city">
+				<i class="fas fa-map-marker-alt"></i>
+				Sorocaba
+			</span>
+			<div class="info">
+				<span>ÚLTIMA EXPERIÊNCIA</span>
+				<p>Programadora PHP em Burh Brasil</p>
+			</div>
+		</div>
+
+		<div class="recruitment__user__card__footer">
+			<span>
+				<el-tooltip placement="top" content="Indicado">
+					<i class="fas fa-user-plus"></i>
+				</el-tooltip>
+			</span>
+			<span>
+				<el-tooltip placement="top" content="Reincidente">
+					<i class="fas fa-sync-alt"></i>
+				</el-tooltip>
+			</span>
+			<span>
+				<el-tooltip placement="top" content="Visualizado">
+					<i class="fas fa-eye"></i>
+				</el-tooltip>
+			</span>
+			<span>
+				<el-tooltip placement="top" content="Interno">
+					<i class="fas fa-building"></i>
+				</el-tooltip>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Checkbox } from 'element-ui';
+
+export default {
+	name: 'recruitment-user-card',
+	components: {
+		ElCheckbox: Checkbox
+	},
+	data() {
+		return {
+			isChecked: false,
+		};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+.recruitment__user__card {
+    background: #fff;
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.25s;
+    &:focus {
+        outline: none;
+        transform: translateY(-5px);
+    }
+    &:hover {
+        transform: translateY(-5px);
+    }
+
+    &__header {
+        width: 100%;
+        height: 70px;
+        overflow: hidden;
+        position: relative;
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), 80%, transparent);
+            z-index: 1;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        &__actions {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 15px;
+            z-index: 2;
+            .right {
+                display: flex;
+                align-items: center;
+                flex-direction: row;
+                button {
+                    color: #fff;
+                    border: 0;
+                    background: transparent;
+                    width: 32px;
+                    height: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .notes {
+                        position: relative;
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            top: -5px;
+                            right: -5px;
+                            width: 10px;
+                            height: 10px;
+                            background: #FF7D7E;
+                            border-radius: 100px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        img {
+            width: 120px;
+            height: 120px;
+            border-radius: 100px;
+            object-fit: cover;
+            margin-top: -20px;
+            z-index: 10;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .name {
+            font-size: 1.275rem;
+            font-weight: 500;
+            color: #1D364B;
+            padding-top: 20px;
+            .pcd {
+                color: #1F8CEB;
+                margin-left: 5px;
+            }
+        }
+        .age {
+            font-weight: 500;
+            font-size: 0.875rem;
+            color: #1F8CEB;
+            padding-bottom: 20px;
+        }
+
+        .city {
+            font-size: 1rem;
+            font-weight: 400;
+            color: #525F7F;
+        }
+
+        .info {
+            padding: 30px 0;
+            text-align: center;
+            span {
+                font-size: 0.75rem;
+                font-weight: 500;
+                color: #AEB6BE;
+            }
+            p {
+                margin: 0;
+                color: #525F7F;
+                font-size: 1rem;
+                font-weight: 400;
+            }
+        }
+    }
+    &__footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 20px;
+        span {
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin: 0 10px;
+            color: #AEB6BE;
+            &.new {
+                color: #1F8CEB;
+            }
+        }
+    }
+}
+
+</style>