218 lines
6.4 KiB
SCSS
218 lines
6.4 KiB
SCSS
// Categorie Style
|
|
.categorie-area-4 {
|
|
.categorie-grid {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
background: transparent;
|
|
padding: 0;
|
|
text-align: left;
|
|
|
|
.icon {
|
|
font-size: 40px;
|
|
margin: 0 20px 0 0;
|
|
.computer-science {
|
|
font-size: 33px;
|
|
}
|
|
.health-fitness {
|
|
font-size: 46px;
|
|
}
|
|
.personal-development {
|
|
font-size: 44px;
|
|
}
|
|
.art-design {
|
|
font-size: 45px;
|
|
}
|
|
.video-photography {
|
|
font-size: 37px;
|
|
}
|
|
.data-science {
|
|
font-size: 41px;
|
|
}
|
|
}
|
|
&.color-primary-style,
|
|
&.color-secondary-style,
|
|
&.color-extra01-style,
|
|
&.color-extra02-style,
|
|
&.color-extra03-style,
|
|
&.color-extra04-style,
|
|
&.color-extra05-style,
|
|
&.color-extra06-style,
|
|
&.color-extra07-style,
|
|
&.color-tertiary-style{
|
|
background-color: transparent;
|
|
}
|
|
&.categorie-style-4 {
|
|
.content {
|
|
margin-top: 13px;
|
|
.title {
|
|
font-size: 16px;
|
|
margin-bottom: 5px;
|
|
}
|
|
span {
|
|
display: block;
|
|
}
|
|
}
|
|
&.color-primary-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-secondary-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra01-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra01);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra02-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra02);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra03-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra03);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra04-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra04);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra05-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra06-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra06);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra07-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra07);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-tertiary-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
&.color-primary-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-primary);
|
|
}
|
|
}
|
|
&.color-secondary-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
}
|
|
&.color-extra01-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-extra01);
|
|
}
|
|
}
|
|
&.color-extra02-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-extra02);
|
|
}
|
|
}
|
|
&.color-extra03-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-extra03);
|
|
}
|
|
}
|
|
&.color-extra04-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-extra04);
|
|
}
|
|
}
|
|
&.color-extra05-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-extra05);
|
|
}
|
|
}
|
|
&.color-extra06-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-extra06);
|
|
}
|
|
}
|
|
&.color-extra07-style {
|
|
.icon {
|
|
background-color: var(--color-extra07);
|
|
}
|
|
}
|
|
&.color-tertiary-style {
|
|
background-color: transparent;
|
|
.icon {
|
|
background-color: var(--color-tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: transparent;
|
|
|
|
.content {
|
|
.title {
|
|
color: var(--color-heading);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|