Commit a5c99429 authored by Leonardo Piccioni de Almeida's avatar Leonardo Piccioni de Almeida
Browse files

CSS fixes

parent 53f22576
......@@ -62,6 +62,9 @@ $border-width--large: 4px;
$border-color--light: $color--high-light;
$border-color--dark: $color--primary-dark;
// Transições
$transition--default: all 0.3s ease-in-out;
// Box shadows
$box-shadow--default: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.24);
......
......@@ -44,6 +44,9 @@
--hl--border-color--light: #{$border-color--light};
--hl--border-color--dark: #{$border-color--dark};
// Animações
--hl-transition--default: #{$transition--default};
// box shadows
--hl--box-shadow--default: #{$box-shadow--default};
......
......@@ -72,7 +72,6 @@
width: 0;
height: 0;
border-style: solid;
-moz-transform: scale(.9999);
@if $direction ==top {
border-width: 0 $sizeV $sizeH $sizeV;
......@@ -123,15 +122,11 @@
@if $direction == 'up' {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
} @else if $direction == 'down' {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
} @else if $direction == 'left' {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
} @else if $direction == 'right' {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
}
......@@ -4,6 +4,7 @@
cursor: pointer;
line-height: $line-height--none;
padding: $padding--small $padding--medium;
transition: $transition--default;
// Styles
......
......@@ -7,7 +7,7 @@
rect {
transform-origin: 50% 50%;
transition: all 0.3s ease-in-out;
transition: $transition--default;
}
&--open {
......
.tag{
border: $border-width--medium solid $color--low-pure;
border-radius: $border-radius--medium;
cursor: pointer;
line-height: $line-height--normal;
padding: $padding--x-small $padding--small;
text-decoration: none;
font-size: $font-size--x-small;
font-weight: $font-weight--bold;
&:is(a) {
cursor: pointer;
}
// Styles
&--solid {
background-color: var(--hl-button-color, $color--low-pure);
background-color: var(--hl-tag-color, $color--low-pure);
border-color: var(--hl-tag-color, $color--low-pure);
color: $color--high-pure;
&:active, &:hover {
background-color: var(--hl-button-hover-color, $color--low-pure);
&:is(a) {
&:active, &:hover {
background-color: $color--high-pure;
color: var(--hl-tag-color, $color--low-pure);
}
}
}
&--outline {
background-color: $color--high-pure;
border-color: var(--hl-button-color);
color: var(--hl-button-color, $color--low-pure);
border-color: var(--hl-tag-color, $color--low-pure);
color: var(--hl-tag-color, $color--low-pure);
&:is(a) {
&:active, &:hover {
background-color: $color--high-light;
&:active, &:hover {
background-color: var(--hl-tag-color, $color--low-pure);
color: $color--high-pure;
}
}
}
// Colors
&--highlight {
border: $border-width--medium solid $color--highlight-dark;
background-color: $color--highlight-pure;
color: $color--highlight-light;
--hl-tag-color: #{$color--highlight-pure};
}
&--primary {
border: $border-width--medium solid $color--primary-pure;
background-color: $color--primary-dark;
color: $color--primary-light;
--hl-tag-color: #{$color--primary-pure};
}
&--secondary {
border: $border-width--medium solid $color--secondary-pure;
background-color: $color--secondary-dark;
color: $color--secondary-light;
--hl-tag-color: #{$color--secondary-pure};
}
&--helper {
border: $border-width--medium solid $color--helper-pure;
background-color: $color--helper-dark;
color: $color--helper-light;
--hl-tag-color: #{$color--helper-pure};
}
&--warning {
border: $border-width--medium solid $color--warning-pure;
background-color: $color--warning-dark;
color: $color--warning-light;
--hl-tag-color: #{$color--warning-pure};
}
}
......@@ -4,23 +4,22 @@
border: $border-width--small solid $color--primary-pure;
&__header {
padding: $padding--medium;
position: relative;
color: $color--low-pure;
font-family: $font-family--primary;
font-size: $font-size--large;
letter-spacing: -0.6px;
padding: $padding--medium;
position: relative;
&::marker {
content: "";
}
&::before {
content: "";
transition: transform 0.2s ease;
content: '';
position: absolute;
right: $padding--medium;
top: 1.5rem;
transition: $transition--default;
@include arrow('down', $border-width--medium, $color--primary-pure);
}
}
......@@ -31,7 +30,6 @@
&__content {
background-color: $color--high-light;
padding: $padding--medium calc($padding--small * 3);
padding: $padding--medium;
}
}
......@@ -11,13 +11,11 @@
max-width: $grid--wide;
@include mobile{
padding-left: $padding--x-large;
padding-right: $padding--x-large;
padding-inline: $padding--x-large;
}
.wp-block-heading{
margin-top: $margin--small;
margin-bottom: $margin--small;
margin-block: $margin--small;
}
}
}
......@@ -4,9 +4,9 @@
left: 0;
position: sticky;
top: 0;
z-index: 100;
transition: $transition--default;
width: 100%;
transition: all 0.3s;
z-index: 100;
&__content {
align-items: center;
......
......@@ -180,22 +180,22 @@ get_header();
<hr/>
<code>componente: card default</code>
<?php get_template_part( 'template-parts/post-card', null, ['post' => '1'] ); ?>
<?php get_template_part( 'template-parts/post-card', null ); ?>
<hr/>
<code>componente: card vertical</code>
<?php get_template_part( 'template-parts/post-card', 'vertical', ['post' => '1'] ); ?>
<?php get_template_part( 'template-parts/post-card', 'vertical' ); ?>
<hr/>
<code>componente: card horizontal</code>
<?php get_template_part( 'template-parts/post-card', 'horizontal', ['post' => '1'] ); ?>
<?php get_template_part( 'template-parts/post-card', 'horizontal' ); ?>
<hr/>
<code>componente: card cover</code>
<?php get_template_part( 'template-parts/post-card', 'cover', ['post' => '1'] ); ?>
<?php get_template_part( 'template-parts/post-card', 'cover' ); ?>
<hr/>
......@@ -204,14 +204,15 @@ get_header();
<div class="accordeon__content">Content</div>
</details>
<h2>Tags</h2>
<a class="tag" href="#">Teste</a>
<a class="tag tag--highlight" href='#'>Teste</a>
<a class="tag tag--primary tag--solid" href="/category/saude">Teste</a>
<span class="tag tag--secondary">Teste</span>
<span class="tag tag--helper">Teste</span>
<a class="tag tag--warning tag--outline" href="/category/saude">Teste</a>
<hr/>
<h2>Tags</h2>
<a class="tag tag--solid" href="#">Teste</a>
<a class="tag tag--solid tag--primary" href="/category/saude">Teste</a>
<a class="tag tag--outline tag--highlight" href="#">Teste</a>
<span class="tag tag--solid tag--secondary">Teste</span>
<span class="tag tag--solid tag--helper">Teste</span>
<a class="tag tag--outline tag--warning" href="/category/saude">Teste</a>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment