@burh/nuxt-core 1.0.291 → 1.0.292

package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue

@@ -1,496 +1,497 @@
-<template>
-	<div class="bg-white content-middle">
-		<!-- FERRAMENTAS -->
-		<div class="tools mt-3">
-			<button
-				@click="
-					isLocked && tool.event !== 'share'
-						? $emit('open-contact')
-						: $emit(tool.event)
-				"
-				class="ml-3 burh-color"
-				:class="{
-					'disabled-button': isLocked && tool.event !== 'share'
-				}"
-				v-for="(tool, index) in tools"
-				:key="index"
-			>
-				<i
-					v-show="isLocked && tool.event !== 'share'"
-					class="fas fa-lock mr-1"
-				></i>
-				{{ tool.name }}
-			</button>
-		</div>
-
-		<!-- SOBRE -->
-		<div class="about content-block mt-5 ml-3 mr-3">
-			<h5 class="font-weight-bold">Sobre</h5>
-			<p
-				id="USER_ABOUT"
-				class="mb-0"
-				:class="
-					!wordIsLesserThan(
-						userData.user_complementary_information.about
-					) && 'readmore'
-				"
-				v-html="
-					highlightText(
-						search,
-						userData.user_complementary_information.about
-					)
-				"
-			></p>
-			<a
-				href="#"
-				aria-label="expandir conteudo"
-				v-show="
-					userData.user_complementary_information.about &&
-						!wordIsLesserThan(
-							userData.user_complementary_information.about
-						)
-				"
-				@click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
-			>Ler mais</a
-			>
-
-			<p v-show="!userData.user_complementary_information.about" class="">
-				Nenhuma informação adicionada
-			</p>
-		</div>
-
-		<!-- EDUCAÇÃO -->
-		<h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
-		<div class="no-info ml-3" v-show="userData.user_education.length === 0">
-			<p>
-				Nenhuma informação adicionada
-			</p>
-		</div>
-		<div
-			class="education ml-3"
-			v-show="userData.user_education.length > 0"
-			v-for="(edu, index) in userData.user_education"
-			:key="index"
-		>
-			<p
-				class="sub-title"
-				v-html="highlightText(search, edu.formation)"
-			></p>
-			<p class="info-text">{{ edu.institution }}</p>
-			<span class="info-text">
-				{{ edu.start_month }}/{{ edu.start_year }} -
-				{{ treatEndDate(edu.end_month, edu.end_year) }}
-				{{ getTime(false, edu) }}
-				{{
-					edu.user_education_period
-						? '-' + edu.user_education_period.name
-						: ''
-				}} </span
-			><br />
-			<span
-				class="info-text"
-				v-html="
-					highlightText(
-						search,
-						edu.formation_level_id | formationLevel
-					)
-				"
-			></span>
-		</div>
-
-		<!-- EXPERIÊNCIAS -->
-		<h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
-		<div
-			class="no-info ml-3"
-			v-show="userData.user_experience.length === 0"
-		>
-			<p>
-				Nenhuma informação adicionada
-			</p>
-		</div>
-		<div
-			v-show="userData.user_experience.length > 0"
-			class="experience ml-3 mr-3"
-			v-for="(exp, index) in userData.user_experience"
-			:key="`experience-${index}`"
-		>
-			<p
-				class="sub-title"
-				v-html="highlightText(search, exp.job_title)"
-			></p>
-			<p
-				class="info-text"
-				v-html="
-					highlightText(search, `${exp.company}, ${exp.location}`)
-				"
-			></p>
-			<span class="info-text">
-				{{ exp.start_month }}/{{ exp.start_year }} -
-				{{ treatEndDate(exp.end_month, exp.end_year) }}
-				{{ getTime(true, exp) }}
-			</span>
-
-			<p
-				:id="`USER_EXPERIENCE-${index}`"
-				class="description mt-4 mb-0"
-				:class="!wordIsLesserThan(exp.description) && 'readmore'"
-				v-html="highlightText(search, exp.description)"
-			></p>
-
-			<a
-				href="#"
-				aria-label="expandir conteudo"
-				v-show="!wordIsLesserThan(exp.description)"
-				@click.prevent.stop="
-					toggleReadMore($event, `USER_EXPERIENCE-${index}`)
-				"
-			>Ler mais</a
-			><br /><br />
-		</div>
-
-		<!-- CURSOS -->
-		<h5 class="font-weight-bold mt-1 ml-3">Cursos Complementares</h5>
-		<div class="no-info ml-3" v-show="userData.user_course.length === 0">
-			<p>
-				Nenhuma informação adicionada
-			</p>
-		</div>
-		<div
-			v-show="userData.user_course.length > 0"
-			class="courses ml-3"
-			v-for="(cou, index) in userData.user_course"
-			:key="`course-${index}`"
-		>
-			<p
-				class="sub-title"
-				v-html="highlightText(search, cou.institution)"
-			></p>
-			<p
-				class="info-text mb-3"
-				v-html="
-					highlightText(
-						search,
-						`${cou.name} - ${cou.end_year || ''} ${getTime(
-							false,
-							cou
-						)}`
-					)
-				"
-			>
-				{{ cou.name }} - {{ cou.end_year }}
-				{{ getTime(false, cou) }}
-			</p>
-		</div>
-	</div>
-</template>
-
-<script>
-import getPrefixes from '~/util/getPrefixes.js';
-
-export default {
-	name: 'user-cv-middle',
-	props: {
-		userData: Object,
-		tools: {
-			type: Array,
-			default: () => []
-		},
-		search: {
-			type: String,
-			default: ''
-		}
-	},
-	filters: {
-		formationLevel(id) {
-			const typeFormation = {
-				1: 'Ensino Médio',
-				2: 'Ensino Técnico',
-				3: 'Graduação',
-				4: 'Pós-Graduação',
-				5: 'Mestrado',
-				6: 'Doutorado'
-			};
-
-			return typeFormation[id] || '-';
-		}
-	},
-	data() {
-		return {
-			isLocked: !this.companyHasProduct(
-				this.$store.state.loja.showableProducts['INTERACAO_USUARIO']
-			)
-		};
-	},
-	mounted() {
-		this.userData.user_experience = this.filterByDate(
-			this.userData.user_experience,
-			'old'
-		);
-		this.userData.user_education = this.filterByDate(
-			this.userData.user_education,
-			'old'
-		);
-		this.userData.user_course = this.filterByDate(
-			this.userData.user_course,
-			'old'
-		);
-	},
-	watch: {
-		userData() {
-			this.userData.user_experience = this.filterByDate(
-				this.userData.user_experience,
-				'old'
-			);
-			this.userData.user_education = this.filterByDate(
-				this.userData.user_education,
-				'old'
-			);
-			this.userData.user_course = this.filterByDate(
-				this.userData.user_course,
-				'old'
-			);
-		}
-	},
-	methods: {
-		highlightText(search, text) {
-			if (search.length < 2) return text;
-
-			const regex = new RegExp(search.toLowerCase(), 'gmi');
-			return String(text || '').replace(
-				regex,
-				`<span class="search-highlight">${search}</span>`
-			);
-		},
-		filterByDate(data, by = 'new') {
-			let sortedArray = data.sort((a, b) => {
-				a = [
-					a.start_month,
-					a.start_year,
-					a.end_month || 12,
-					a.end_year || 9999
-				];
-
-				b = [
-					b.start_month,
-					b.start_year,
-					b.end_month || 12,
-					b.end_year || 9999
-				];
-
-				// Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
-				// Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
-
-				let byStart;
-				let byEnd;
-
-				switch (by) {
-				case 'old':
-					byStart =
-                            new Date(a[1], a[0], 1).getTime() -
-                            new Date(b[1], b[0], 1).getTime();
-					byEnd =
-                            new Date(b[3], b[2], 1).getTime() -
-                            new Date(a[3], a[2], 1).getTime();
-					break;
-
-				default:
-					byStart =
-                            new Date(b[1], b[0], 1).getTime() -
-                            new Date(a[1], a[0], 1).getTime();
-					byEnd =
-                            new Date(b[3], b[2], 1).getTime() -
-                            new Date(a[3], a[2], 1).getTime();
-					break;
-				}
-
-				return byEnd - byStart;
-			});
-
-			return sortedArray;
-		},
-		toggleReadMore(event, id) {
-			const element = document.getElementById(id);
-			element.classList.toggle('readmore');
-			event.target.innerText == 'Ler mais'
-				? (event.target.innerText = 'Esconder')
-				: (event.target.innerText = 'Ler mais');
-		},
-		getTime(
-			isExperience,
-			{ start_year = null, end_year = null, start_month, end_month },
-			textHappening = 'Cursando'
-		) {
-			const isHappening = !end_month && !end_year;
-
-			if (isHappening) {
-				return isExperience === true ? 'Atualmente' : textHappening;
-			}
-
-			const dateInitial = this.$moment(
-				['1', start_month.toString(), start_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const dateDone = this.$moment(
-				['1', end_month.toString(), end_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const diffDuration = this.$moment.duration(
-				dateDone.diff(dateInitial)
-			);
-			const years = diffDuration.years();
-			const months = diffDuration.months();
-
-			if (years) {
-				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
-			}
-
-			return months > 1
-				? `(${months} meses)`
-				: months == 1
-					? `(${months} mês)`
-					: '';
-		},
-		languageLevel(level) {
-			switch (parseInt(level)) {
-			case 1:
-				return 'Iniciante';
-			case 2:
-				return 'Elementar';
-			case 3:
-				return 'Pré-intermediário';
-			case 4:
-				return 'Intermediário';
-			case 5:
-				return 'Intermediário Superior';
-			case 6:
-				return 'Avançado';
-			case 7:
-				return 'Fluente';
-			default:
-				return '';
-			}
-		},
-		treatPhone(phone) {
-			if (phone) {
-				if (phone == '0' || phone.length < 9 || !phone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return phone;
-		},
-		treatCellphone(cellphone) {
-			if (cellphone) {
-				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return cellphone;
-		},
-		handleGetPrefixes(name = '') {
-			return getPrefixes(name);
-		},
-		treatEndDate(end_month, end_year) {
-			if (end_month && end_year) {
-				return `${end_month}/${end_year}`;
-			}
-			return '';
-		},
-		wordIsLesserThan(word, value = 300) {
-			return word && word.length < value;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .search-highlight {
-    background: rgb(255, 252, 61);
-    color: #000;
-}
-
-.content-middle {
-    width: 50%;
-    border-right: 1px solid #ececec5c;
-    word-break: break-word !important;
-}
-
-.readmore {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-}
-
-.tools {
-    flex-wrap: wrap;
-    button {
-        width: 117px;
-        height: 29px;
-        border: none;
-        margin-top: 15px;
-
-        background: #4460F4;
-        border-radius: 16px;
-        color: #fff;
-
-        font-size: 12px;
-        font-weight: 600;
-        outline: 0;
-    }
-}
-
-.education {
-    margin-top: 15px;
-}
-
-.experience {
-    .description {
-        font-size: 14px;
-        color: #62778c;
-    }
-
-    a {
-        margin-bottom: 1px;
-    }
-}
-
-.sub-title {
-    margin-bottom: 1px;
-
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 21px;
-    color: #62778c;
-    text-transform: uppercase;
-}
-
-.info-text {
-    margin-bottom: 1px;
-
-    font-size: 14px;
-    color: #8da2b5;
-}
-
-.content-block {
-    p {
-        font-size: 14px;
-        color: #62778c;
-    }
-}
-
-.no-info {
-    p {
-        font-size: 0.875rem;
-        color: #62778c;
-    }
-}
-
-.disabled-button {
-    opacity: 0.5;
-}
-</style>
+<template>
+	<div class="bg-white content-middle">
+		<!-- FERRAMENTAS -->
+		<div class="tools mt-3">
+			<button
+				@click="
+					isLocked && tool.event !== 'share'
+						? $emit('open-contact')
+						: $emit(tool.event)
+				"
+				class="ml-3 burh-color"
+				:class="{
+					'disabled-button': isLocked && tool.event !== 'share'
+				}"
+				v-for="(tool, index) in tools"
+				:key="index"
+			>
+				<i
+					v-show="isLocked && tool.event !== 'share'"
+					class="fas fa-lock mr-1"
+				></i>
+				{{ tool.name }}
+			</button>
+		</div>
+		<!-- SOBRE -->
+		<div class="about content-block mt-5 ml-3 mr-3">
+			<h5 class="font-weight-bold">Sobre</h5>
+			<p
+				id="USER_ABOUT"
+				class="mb-0"
+				:class="
+					!wordIsLesserThan(
+						userData.user_complementary_information.about
+					) && 'readmore'
+				"
+				v-html="
+					highlightText(
+						search,
+						userData.user_complementary_information.about
+					)
+				"
+			></p>
+			<a
+				href="#"
+				aria-label="expandir conteudo"
+				v-show="
+					userData.user_complementary_information.about &&
+						!wordIsLesserThan(
+							userData.user_complementary_information.about
+						)
+				"
+				@click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
+			>Ler mais</a
+			>
+
+			<p v-show="!userData.user_complementary_information.about" class="">
+				Nenhuma informação adicionada
+			</p>
+		</div>
+		<!-- CONTATO -->
+		<h5 class="font-weight-bold mt-4 ml-3">Contatos</h5>
+		<div class="ml-3">
+			<span v-if="userData.email != null">Email: {{userData.email}}</span><br>
+			<span v-if="userData.user_contact.cellphone != null">Celular: {{userData.user_contact.cellphone}}</span><br>
+			<span v-if="userData.user_contact.phone != null">Telefone: {{userData.user_contact.phone}}</span>
+		</div>
+
+		<!-- EDUCAÇÃO -->
+		<h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
+		<div
+			class="education ml-3"
+			v-show="userData.user_education.length > 0"
+			v-for="(edu, index) in userData.user_education"
+			:key="index"
+		>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, edu.formation)"
+			></p>
+			<p class="info-text">{{ edu.institution }}</p>
+			<span class="info-text">
+				{{ edu.start_month }}/{{ edu.start_year }} -
+				{{ treatEndDate(edu.end_month, edu.end_year) }}
+				{{ getTime(false, edu) }}
+				{{
+					edu.user_education_period
+						? '-' + edu.user_education_period.name
+						: ''
+				}} </span
+			><br />
+			<span
+				class="info-text"
+				v-html="
+					highlightText(
+						search,
+						edu.formation_level_id | formationLevel
+					)
+				"
+			></span>
+		</div>
+
+		<!-- EXPERIÊNCIAS -->
+		<h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
+		<div
+			class="no-info ml-3"
+			v-show="userData.user_experience.length === 0"
+		>
+			<p>
+				Nenhuma informação adicionada
+			</p>
+		</div>
+		<div
+			v-show="userData.user_experience.length > 0"
+			class="experience ml-3 mr-3"
+			v-for="(exp, index) in userData.user_experience"
+			:key="`experience-${index}`"
+		>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, exp.job_title)"
+			></p>
+			<p
+				class="info-text"
+				v-html="
+					highlightText(search, `${exp.company}, ${exp.location}`)
+				"
+			></p>
+			<span class="info-text">
+				{{ exp.start_month }}/{{ exp.start_year }} -
+				{{ treatEndDate(exp.end_month, exp.end_year) }}
+				{{ getTime(true, exp) }}
+			</span>
+
+			<p
+				:id="`USER_EXPERIENCE-${index}`"
+				class="description mt-4 mb-0"
+				:class="!wordIsLesserThan(exp.description) && 'readmore'"
+				v-html="highlightText(search, exp.description)"
+			></p>
+
+			<a
+				href="#"
+				aria-label="expandir conteudo"
+				v-show="!wordIsLesserThan(exp.description)"
+				@click.prevent.stop="
+					toggleReadMore($event, `USER_EXPERIENCE-${index}`)
+				"
+			>Ler mais</a
+			><br /><br />
+		</div>
+
+		<!-- CURSOS -->
+		<h5 class="font-weight-bold mt-1 ml-3">Cursos Complementares</h5>
+		<div class="no-info ml-3" v-show="userData.user_course.length === 0">
+			<p>
+				Nenhuma informação adicionada
+			</p>
+		</div>
+		<div
+			v-show="userData.user_course.length > 0"
+			class="courses ml-3"
+			v-for="(cou, index) in userData.user_course"
+			:key="`course-${index}`"
+		>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, cou.institution)"
+			></p>
+			<p
+				class="info-text mb-3"
+				v-html="
+					highlightText(
+						search,
+						`${cou.name} - ${cou.end_year || ''} ${getTime(
+							false,
+							cou
+						)}`
+					)
+				"
+			>
+				{{ cou.name }} - {{ cou.end_year }}
+				{{ getTime(false, cou) }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import getPrefixes from '~/util/getPrefixes.js';
+
+export default {
+	name: 'user-cv-middle',
+	props: {
+		userData: Object,
+		tools: {
+			type: Array,
+			default: () => []
+		},
+		search: {
+			type: String,
+			default: ''
+		}
+	},
+	filters: {
+		formationLevel(id) {
+			const typeFormation = {
+				1: 'Ensino Médio',
+				2: 'Ensino Técnico',
+				3: 'Graduação',
+				4: 'Pós-Graduação',
+				5: 'Mestrado',
+				6: 'Doutorado'
+			};
+
+			return typeFormation[id] || '-';
+		}
+	},
+	data() {
+		return {
+			isLocked: !this.companyHasProduct(
+				this.$store.state.loja.showableProducts['INTERACAO_USUARIO']
+			)
+		};
+	},
+	mounted() {
+		this.userData.user_experience = this.filterByDate(
+			this.userData.user_experience,
+			'old'
+		);
+		this.userData.user_education = this.filterByDate(
+			this.userData.user_education,
+			'old'
+		);
+		this.userData.user_course = this.filterByDate(
+			this.userData.user_course,
+			'old'
+		);
+	},
+	watch: {
+		userData() {
+			this.userData.user_experience = this.filterByDate(
+				this.userData.user_experience,
+				'old'
+			);
+			this.userData.user_education = this.filterByDate(
+				this.userData.user_education,
+				'old'
+			);
+			this.userData.user_course = this.filterByDate(
+				this.userData.user_course,
+				'old'
+			);
+		}
+	},
+	methods: {
+		highlightText(search, text) {
+			if (search.length < 2) return text;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(
+				regex,
+				`<span class="search-highlight">${search}</span>`
+			);
+		},
+		filterByDate(data, by = 'new') {
+			let sortedArray = data.sort((a, b) => {
+				a = [
+					a.start_month,
+					a.start_year,
+					a.end_month || 12,
+					a.end_year || 9999
+				];
+
+				b = [
+					b.start_month,
+					b.start_year,
+					b.end_month || 12,
+					b.end_year || 9999
+				];
+
+				// Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
+				// Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
+
+				let byStart;
+				let byEnd;
+
+				switch (by) {
+				case 'old':
+					byStart =
+                            new Date(a[1], a[0], 1).getTime() -
+                            new Date(b[1], b[0], 1).getTime();
+					byEnd =
+                            new Date(b[3], b[2], 1).getTime() -
+                            new Date(a[3], a[2], 1).getTime();
+					break;
+
+				default:
+					byStart =
+                            new Date(b[1], b[0], 1).getTime() -
+                            new Date(a[1], a[0], 1).getTime();
+					byEnd =
+                            new Date(b[3], b[2], 1).getTime() -
+                            new Date(a[3], a[2], 1).getTime();
+					break;
+				}
+
+				return byEnd - byStart;
+			});
+
+			return sortedArray;
+		},
+		toggleReadMore(event, id) {
+			const element = document.getElementById(id);
+			element.classList.toggle('readmore');
+			event.target.innerText == 'Ler mais'
+				? (event.target.innerText = 'Esconder')
+				: (event.target.innerText = 'Ler mais');
+		},
+		getTime(
+			isExperience,
+			{ start_year = null, end_year = null, start_month, end_month },
+			textHappening = 'Cursando'
+		) {
+			const isHappening = !end_month && !end_year;
+
+			if (isHappening) {
+				return isExperience === true ? 'Atualmente' : textHappening;
+			}
+
+			const dateInitial = this.$moment(
+				['1', start_month.toString(), start_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const dateDone = this.$moment(
+				['1', end_month.toString(), end_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const diffDuration = this.$moment.duration(
+				dateDone.diff(dateInitial)
+			);
+			const years = diffDuration.years();
+			const months = diffDuration.months();
+
+			if (years) {
+				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
+			}
+
+			return months > 1
+				? `(${months} meses)`
+				: months == 1
+					? `(${months} mês)`
+					: '';
+		},
+		languageLevel(level) {
+			switch (parseInt(level)) {
+			case 1:
+				return 'Iniciante';
+			case 2:
+				return 'Elementar';
+			case 3:
+				return 'Pré-intermediário';
+			case 4:
+				return 'Intermediário';
+			case 5:
+				return 'Intermediário Superior';
+			case 6:
+				return 'Avançado';
+			case 7:
+				return 'Fluente';
+			default:
+				return '';
+			}
+		},
+		treatPhone(phone) {
+			if (phone) {
+				if (phone == '0' || phone.length < 9 || !phone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return phone;
+		},
+		treatCellphone(cellphone) {
+			if (cellphone) {
+				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+					return 'não cadastrado';
+				}
+			}
+
+			return cellphone;
+		},
+		handleGetPrefixes(name = '') {
+			return getPrefixes(name);
+		},
+		treatEndDate(end_month, end_year) {
+			if (end_month && end_year) {
+				return `${end_month}/${end_year}`;
+			}
+			return '';
+		},
+		wordIsLesserThan(word, value = 300) {
+			return word && word.length < value;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .search-highlight {
+    background: rgb(255, 252, 61);
+    color: #000;
+}
+
+.content-middle {
+    width: 50%;
+    border-right: 1px solid #ececec5c;
+    word-break: break-word !important;
+}
+
+.readmore {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+.tools {
+    flex-wrap: wrap;
+    button {
+        width: 117px;
+        height: 29px;
+        border: none;
+        margin-top: 15px;
+
+        background: #4460F4;
+        border-radius: 16px;
+        color: #fff;
+
+        font-size: 12px;
+        font-weight: 600;
+        outline: 0;
+    }
+}
+
+.education {
+    margin-top: 15px;
+}
+
+.experience {
+    .description {
+        font-size: 14px;
+        color: #62778c;
+    }
+
+    a {
+        margin-bottom: 1px;
+    }
+}
+
+.sub-title {
+    margin-bottom: 1px;
+
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    color: #62778c;
+    text-transform: uppercase;
+}
+
+.info-text {
+    margin-bottom: 1px;
+
+    font-size: 14px;
+    color: #8da2b5;
+}
+
+.content-block {
+    p {
+        font-size: 14px;
+        color: #62778c;
+    }
+}
+
+.no-info {
+    p {
+        font-size: 0.875rem;
+        color: #62778c;
+    }
+}
+
+.disabled-button {
+    opacity: 0.5;
+}
+</style>