fixed concession page and some css

parent 23c4fb15
......@@ -33,11 +33,9 @@ layout: default
</div>
<section class="banner container">
<div class="col">
<div class="banner_wrap align--center {% if page.theme == 'light' %}card theme_box--light{% else %}card theme_box--dark-strong{% endif %}">
<p class="{% if page.theme == 'dark' %}theme_type--grey{% endif %}"><strong>Participe do nosso Webinar ao vivo sobre o Livechat e confira como ele impulsiona</strong><br/><strong>o crescimento de milhares de empresas que conversam online com seus clientes.</strong><br/>Será no dia 21 de junho, às 11h (UTC -3). Inscreva-se <a target="_blank" href="https://rocket.chat/pt/webinars" rel="noopener noreferrer"> <strong> aqui.</strong> </a> 🚀</p>
</div>
</div>
<div class="banner_wrap align--center {% if page.theme == 'light' %}card theme_box--light{% else %}card theme_box--dark-strong{% endif %}">
<p class="{% if page.theme == 'dark' %}theme_type--grey{% endif %}"><strong>Participe do nosso Webinar ao vivo sobre o Livechat e confira como ele impulsiona</strong><br/><strong>o crescimento de milhares de empresas que conversam online com seus clientes.</strong><br/>Será no dia 21 de junho, às 11h (UTC -3). Inscreva-se <a target="_blank" href="https://rocket.chat/pt/webinars" rel="noopener noreferrer"> <strong> aqui.</strong> </a> 🚀</p>
</div>
</section>
{{ content }}
......
section {
padding: 3em 0;
padding: 3em 0;
}
.banner {
position: relative;
z-index: 999;
@media (min-width: $tablet) {
margin-bottom: 3em;
}
.col {
position: relative;
margin-bottom: 0;
}
}
.banner_wrap {
position: relative;
top: 1em;
margin-top: 1em;
font-size: 0.9em;
border-radius: 4px;
padding: 0.7em;
@media (min-width: $tablet) {
left: 0;
right: 0;
position: absolute;
}
}
body.index {
......
.hero {
text-align: center;
padding: 2em;
min-height: 30em;
position: relative;
min-height: 30em;
position: relative;
@media screen and (min-width: $tablet) {
padding-top: 5em;
height: 75vh;
padding-top: 2em;
max-height: 39em;
}
......
fieldset {
position: relative;
position: relative;
}
//
......@@ -7,164 +7,164 @@ fieldset {
//
.input,
.input-child input {
font-weight: 500;
line-height: 1.4;
color: $space;
font-size: 1em;
display: inline-block;
padding: 0.6em 1em;
width: 100%;
margin-bottom: 1em;
border-radius: 2px;
border: 1.5px solid $grey-smoke;
transition: border $tranitions;
@include placeholder($grey);
@media screen and (min-width: $tablet) {
padding: 0.9em 1.14em 1em;
font-size: 0.8em;
}
&[disabled],
&.disabled {
background: $grey-bg;
color: $grey-smoke-dark;
@include placeholder($grey-smoke-dark);
}
&:focus {
border-color: $grey-light;
}
font-weight: 500;
line-height: 1.4;
color: $space;
font-size: 1em;
display: inline-block;
padding: 0.6em 1em;
width: 100%;
margin-bottom: 1em;
border-radius: 2px;
border: 1.5px solid $grey-smoke;
transition: border $tranitions;
@include placeholder($grey);
@media screen and (min-width: $tablet) {
padding: 0.9em 1.14em 1em;
font-size: 0.8em;
}
&[disabled],
&.disabled {
background: $grey-bg;
color: $grey-smoke-dark;
@include placeholder($grey-smoke-dark);
}
&:focus {
border-color: $grey-light;
}
}
.input-child {
margin-bottom: 0 !important;
margin-bottom: 0 !important;
}
// prefix
[data-prefix] {
position: relative;
&:before {
content: attr(data-prefix);
display: inline-block;
padding-left: 1em;
padding-right: 1em;
position: absolute;
left: 2px;
top: 2px;
bottom: 1.4em;
line-height: 3.1;
font-size: 0.8em;
@media screen and (min-width: $tablet) {
bottom: 1.2em;
}
}
.error-message {
display: none;
}
input {
padding-left: 7em;
}
position: relative;
&:before {
content: attr(data-prefix);
display: inline-block;
padding-left: 1em;
padding-right: 1em;
position: absolute;
left: 2px;
top: 2px;
bottom: 1.4em;
line-height: 3.1;
font-size: 0.8em;
@media screen and (min-width: $tablet) {
bottom: 1.2em;
}
}
.error-message {
display: none;
}
input {
padding-left: 7em;
}
}
// icons
.input--icon-user {
background-image: url(../images/contact/user.svg);
background-position: 1em center;
background-repeat: no-repeat;
padding-left: 3em;
background-image: url(../images/contact/user.svg);
background-position: 1em center;
background-repeat: no-repeat;
padding-left: 3em;
}
.input--icon-email {
background-image: url(../images/contact/email.svg);
background-position: 1em center;
background-repeat: no-repeat;
padding-left: 3em;
background-image: url(../images/contact/email.svg);
background-position: 1em center;
background-repeat: no-repeat;
padding-left: 3em;
}
// error
.error-message {
color: $warning;
text-transform: uppercase;
font-size: 0.6em;
position: absolute;
right: 0;
top: 0.7em;
animation: slide 0.3s ease;
color: $warning;
text-transform: uppercase;
font-size: 0.6em;
position: absolute;
right: 0;
top: 0.7em;
animation: slide 0.3s ease;
}
@keyframes slide {
0% {
transform: translateY(1.3em);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
0% {
transform: translateY(1.3em);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
//
// selects
//
.select {
font-size: 1em;
border-radius: 2px;
position: relative;
transition: border $tranitions;
&:after {
content: '';
width: 0.4em;
height: 0.4em;
display: block;
transform: rotate(135deg);
position: absolute;
top: 0.8em;
right: 0.8em;
}
select {
width: calc(100% - 0.7em);
padding: 0.4em 1em;
}
&.error {
border-color: $warning !important;
}
.error-message {
display: none;
}
@media (min-width: $tablet) {
font-size: 0.8em;
select {
padding: 0.82em 1em;
}
&:after {
width: 0.5em;
height: 0.5em;
top: 1em;
right: 1em;
}
}
font-size: 1em;
border-radius: 2px;
position: relative;
transition: border $tranitions;
&:after {
content: '';
width: 0.4em;
height: 0.4em;
display: block;
transform: rotate(135deg);
position: absolute;
top: 0.8em;
right: 0.8em;
}
select {
width: calc(100% - 0.7em);
padding: 0.4em 1em;
}
&.error {
border-color: $warning !important;
}
.error-message {
display: none;
}
@media (min-width: $tablet) {
font-size: 0.8em;
select {
padding: 0.82em 1em;
}
&:after {
width: 0.5em;
height: 0.5em;
top: 1em;
right: 1em;
}
}
}
// space rules
.label--small {
+ .select,
+ .input-child,
+ .input {
margin-top: 0.3em;
margin-bottom: 1em;
}
+ .select,
+ .input-child,
+ .input {
margin-top: 0.3em;
margin-bottom: 1em;
}
}
......@@ -9,6 +9,11 @@
padding-left: $gutter-larger;
padding-right: $gutter-larger;
}
&--hero {
padding-top: 2em;
padding-bottom: 2em;
}
}
.container--full {
......
......@@ -39,10 +39,10 @@
@mixin inlineflexbox() {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@mixin flex($values) {
......
......@@ -4,24 +4,24 @@
*/
* {
margin: 0; /* 1 */
padding: 0; /* 1 */
background-repeat: no-repeat; /* 1 */
box-sizing: inherit; /* 2 */
border: 0;
margin: 0; /* 1 */
padding: 0; /* 1 */
background-repeat: no-repeat; /* 1 */
box-sizing: inherit; /* 2 */
border: 0;
}
/**
* 1. Prevent certain mobile browsers from automatically zooming fonts.
* 2. Border box sizing
* 3. Smooth scroll
* 2. Border box sizing
* 3. Smooth scroll
*/
html {
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 1 */
box-sizing: border-box; /* 2 */
scroll-behavior: smooth; /* 3 */
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 1 */
box-sizing: border-box; /* 2 */
scroll-behavior: smooth; /* 3 */
}
/**
......@@ -31,10 +31,10 @@ html {
*/
body {
font: 16px/1.6 sans-serif; /* 1 */
-moz-osx-font-smoothing: grayscale; /* 2 */
-webkit-font-smoothing: antialiased; /* 2 */
overflow-x: hidden; /* 3 */
font: 16px/1.6 sans-serif; /* 1 */
-moz-osx-font-smoothing: grayscale; /* 2 */
-webkit-font-smoothing: antialiased; /* 2 */
overflow-x: hidden; /* 3 */
}
/**
......@@ -46,21 +46,21 @@ h2,
h3,
h4,
h5 {
font-size: 1em;
font-weight: normal;
font-size: 1em;
font-weight: normal;
}
/**
* 1. Reset link styles
* 1. Reset link styles
* 2. Links are more dynamic now
* 3. Remove the gray background on active links in IE 10.
*/
a {
text-decoration: none; /* 1 */
color: inherit; /* 1 */
display: inline-block; /* 2 */
background-color: transparent; /* 3 */
text-decoration: none; /* 1 */
color: inherit; /* 1 */
display: inline-block; /* 2 */
background-color: transparent; /* 3 */
}
/**
......@@ -69,11 +69,11 @@ a {
ol,
ul {
list-style: none;
list-style: none;
}
/**
* Remove all default styles and all elements looks the same
* Remove all default styles and all elements looks the same
*/
button,
......@@ -81,17 +81,17 @@ input,
optgroup,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: visible;
border: 0;
outline: 0;
font: inherit;
-webkit-font-smoothing: inherit;
letter-spacing: inherit;
background: none;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: visible;
border: 0;
outline: 0;
font: inherit;
-webkit-font-smoothing: inherit;
letter-spacing: inherit;
background: none;
vertical-align: top;
}
/**
......@@ -99,7 +99,7 @@ textarea {
*/
textarea {
resize: none;
resize: none;
}
/**
......@@ -108,7 +108,7 @@ textarea {
input[type='button'],
button {
cursor: pointer;
cursor: pointer;
}
/**
......@@ -117,7 +117,7 @@ button {
button[disabled],
html input[disabled] {
cursor: default;
cursor: default;
}
/**
......@@ -127,10 +127,10 @@ html input[disabled] {
*/
img {
display: block; /* 1 */
max-width: 100%; /* 2 */
height: auto; /* 2 */
border-style: none; /* 3 */
display: block; /* 1 */
max-width: 100%; /* 2 */
height: auto; /* 2 */
border-style: none; /* 3 */
}
/**
......@@ -138,7 +138,7 @@ img {
*/
svg {
fill: currentColor;
fill: currentColor;
}
/**
......@@ -146,15 +146,15 @@ svg {
*/
table {
border-spacing: 0;
border-spacing: 0;
}
::-moz-selection {
color: $grey-smoke;
background: $brand;
color: $grey-smoke;
background: $brand;
}
::selection {
color: $grey-smoke;
background: $brand;
color: $grey-smoke;
background: $brand;
}
......@@ -84,46 +84,46 @@
}
// Border-radius rules
table {
tr {
&:first-child td {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
@media screen and (min-width: $tablet) {
border-radius: 0;
}
}
&:last-child td {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
@media screen and (min-width: $tablet) {
border-radius: 0;
}
}
}
&:first-child {
tr {
&:first-child td {
border-top-left-radius: 3px;
}
&:last-child td {
border-bottom-left-radius: 3px;
}
}
}
&:last-child {
tr {
&:first-child td {
border-top-right-radius: 3px;
}
&:last-child td {
border-bottom-right-radius: 3px;
}
}
}
}
table {
tr {
&:first-child td {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
@media screen and (min-width: $tablet) {
border-radius: 0;
}
}
&:last-child td {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
@media screen and (min-width: $tablet) {
border-radius: 0;
}
}
}
&:first-child {
tr {
&:first-child td {
border-top-left-radius: 3px;
}
&:last-child td {
border-bottom-left-radius: 3px;
}
}
}
&:last-child {
tr {
&:first-child td {
border-top-right-radius: 3px;
}
&:last-child td {
border-bottom-right-radius: 3px;
}
}
}
}
}
// Body
body.dark {
background: $space;
background: $space;
}
body.light {
background: #fff;
background: #fff;
}
// Type
.theme_type--brand {
color: $brand;
color: $brand;
}
.theme_type--dark {
color: #fff;
color: #fff;
}
.theme_type--grey {
color: $grey-light;
color: $grey-light;
}
.theme_type--kinda-white {
color: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
}
.theme_type--light {
color: $grey;
color: $grey;
}
.theme_type--space {
color: $space;
color: $space;
}
// Box
.theme_box--brand {
background-color: $brand;
background-color: $brand;
}
.theme_box--space {
background-color: $space;
background-color: $space;
}
.theme_box--dark-strong {
background-color: $space-b;
background-color: $space-b;
}
.theme_box--dark {
background-color: $space-grey;
background-color: $space-grey;
}
.theme_box--dark-medium {
background-color: $grey-dark;
background-color: $grey-dark;
}
.theme_box--light {
background-color: $grey-bg;
background-color: $grey-bg;
}
.theme_box--white {
background-color: #fff;
background-color: #fff;
}