Commit 54fbc897 authored by Danilo Woznica's avatar Danilo Woznica

fix(All): A lot of fixes

parent 3eb81d8d
......@@ -23,5 +23,10 @@
{% include gtm/body.html %}
{{ content }}
<script src="/main.js"></script>
<!--[if IE]>
<script src="/polyfill/modernizr.js"></script>
<script src="/polyfill/respond.min.js"></script>
<script src="/polyfill/calc.min.min.js"></script>
<![endif]-->
</body>
</html>
......@@ -32,7 +32,7 @@
.card_icon--mini {
padding-left: $gutter;
padding-right: $gutter;
align-self: flex-start;
@include align-self(flex-start);
}
.card--shadow {
......@@ -116,8 +116,8 @@
}
.card--blog__data {
display: flex;
align-items: center;
@include flexbox();
@include align-items(center);
}
.card--blog__category {
......
......@@ -5,8 +5,8 @@
@media screen and (min-width: $tablet) {
padding-top: 5em;
padding-bottom: 5em;
display: flex;
justify-content: space-between;
@include flexbox();
@include justify-content(space-between);
}
}
......@@ -25,7 +25,7 @@
@media screen and (min-width: $tablet) {
margin-top: 0;
max-width: 13em;
order: -1;
@include order(-1);
}
}
......@@ -33,9 +33,9 @@
display: none;
@media screen and (min-width: $tablet) {
display: flex;
@include flexbox();
margin-bottom: 3em;
flex: 1;
@include flex(1);
}
img {
......@@ -182,7 +182,7 @@ input:checked + .app-footer_pre-menu:after {
}
.app-footer_download {
display: flex;
@include flexbox();
transition: color 0.3s ease;
span {
......
......@@ -15,9 +15,9 @@
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
@include flexbox();
@include justify-content(space-between);
@include align-items(center);
}
&:after {
......@@ -29,11 +29,11 @@
}
.app-header_logo {
display: flex;
@include flexbox();
padding: 1.5em 0;
@media screen and (min-width: 60em) {
flex: 1;
@include flex(1);
}
img {
......@@ -53,9 +53,9 @@
transition: all 0.3s ease;
@media screen and (min-width: $tablet) {
display: flex;
flex: 3;
justify-content: space-between;
@include flexbox();
@include justify-content(space-between);
@include flex(3);
position: static;
padding: 0 !important;
height: auto !important;
......@@ -82,7 +82,7 @@
margin-top: 1em;
margin-bottom: 1em;
padding-top: 1em;
display: flex;
@include flexbox();
transition: color 0.3s ease;
@media screen and (min-width: $tablet) {
......
......@@ -4,8 +4,8 @@
padding: 0.5em;
margin-top: 1em;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
@include flexbox();
@include justify-content(space-between);
@media screen and (min-width: $tablet) {
margin-top: 2em;
......
body.index {
section {
padding-bottom: 9em;
}
......@@ -15,7 +13,8 @@ body.index {
color: #fff;
padding: 0;
.left, .right {
.left,
.right {
margin-bottom: 3em;
}
......@@ -29,7 +28,7 @@ body.index {
.wrapper {
padding-bottom: 285px;
background-image: url('../images/index/devices.png');
background-image: url("../images/index/devices.png");
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
......@@ -68,11 +67,14 @@ body.index {
.github {
margin-top: 2em;
.name, .stars, .forks {
.name,
.stars,
.forks {
float: left;
}
a, a:visited {
a,
a:visited {
color: $color-dark;
}
......@@ -95,7 +97,8 @@ body.index {
font-weight: 600;
}
.stars, .forks {
.stars,
.forks {
padding: 0 1.2em;
border-left: 1px solid #fff;
text-transform: uppercase;
......@@ -173,7 +176,7 @@ body.index {
}
.apps {
background-image: url('../images/index/clients.png');
background-image: url("../images/index/clients.png");
background-position: right;
background-repeat: no-repeat;
padding-top: 12em;
......@@ -222,7 +225,8 @@ body.index {
text-align: center;
color: #fff;
.wrapper, .content {
.wrapper,
.content {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
......@@ -260,7 +264,8 @@ body.index {
padding-bottom: 220px;
}
.left, .right {
.left,
.right {
float: none;
width: 100%;
padding: 0 2em;
......@@ -274,7 +279,10 @@ body.index {
.mwc {
margin-top: 5em;
a, div, .logo, .date {
a,
div,
.logo,
.date {
float: none;
display: block;
}
......@@ -288,9 +296,14 @@ body.index {
background-image: none;
}
.community, .features, .livechat, .translation, .apps, .own {
.left, .right {
.community,
.features,
.livechat,
.translation,
.apps,
.own {
.left,
.right {
margin: 0;
}
......@@ -313,5 +326,4 @@ body.index {
}
}
}
}
......@@ -129,7 +129,13 @@
}
.blog__col-recents {
justify-content: space-between;
@include justify-content(space-between);
// only IE
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@include justify-content(start);
}
.col {
max-width: 40em;
}
......@@ -156,9 +162,9 @@
border-bottom: 1px solid $space-grey;
padding-bottom: 1em;
margin-bottom: 2em;
justify-content: space-between;
align-items: flex-end;
display: flex;
@include justify-content(space-between);
@include align-items(flex-end);
@include flexbox();
line-height: 1;
@media screen and (min-width: $tablet) {
margin-top: 0;
......@@ -170,7 +176,7 @@
padding: 0 0 0.5em 0 !important;
border-radius: 2px;
margin: 4em 0 0;
flex: 1;
@include flex(1);
@media screen and (min-width: $tablet) {
margin: 0 1em 0 0;
}
......
......@@ -19,7 +19,7 @@
padding-bottom: 20em;
@media (min-width: $tablet) {
display: flex;
@include flexbox();
padding-bottom: 0;
background-image: url("/images/download/mobile.png");
background-size: auto 90%;
......@@ -28,7 +28,7 @@
.wrap {
padding: 2em;
flex: 0.3;
max-width: 30%;
}
}
......@@ -37,7 +37,7 @@
.wrap {
padding: 3em 4em;
flex: 0.5;
max-width: 50%;
}
}
......
......@@ -3,7 +3,7 @@
//
.home-hero {
@media screen and (min-width: $tablet) {
display: flex;
@include flexbox();
min-height: 70vh;
}
......@@ -27,7 +27,7 @@
@media screen and (min-width: $tablet) {
margin: 6em 0;
flex: 0.4;
@include flex-basis(40%);
}
}
......@@ -56,19 +56,19 @@
position: relative;
@media screen and (min-width: $tablet) {
display: flex;
@include flexbox();
background-position: left top;
}
}
.home_box-wrap {
padding: 2em $gutter;
flex: 0.38;
font-size: 14px;
position: relative;
z-index: 2;
@media screen and (min-width: $tablet) {
max-width: 48.5%;
padding: 4em 6.5em 4em 7em;
}
}
......@@ -78,7 +78,7 @@
//
.home-community {
background-color: $space-b;
justify-content: flex-end;
@include justify-content(flex-end);
@media screen and (min-width: $tablet) {
background-size: 60% auto;
......@@ -149,7 +149,7 @@
}
span {
flex: 1;
@include flex(1);
}
img {
......@@ -168,6 +168,10 @@
}
.home-community_github-link {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
width: 100%;
margin-top: 1.5em;
......@@ -290,7 +294,7 @@
padding-bottom: 20em;
@media (min-width: $tablet) {
display: flex;
@include flexbox();
padding-bottom: 0;
background-image: url("/images/download/mobile.png");
background-size: auto 90%;
......@@ -298,7 +302,6 @@
.wrap {
padding: 2em;
flex: 0.3;
}
}
......@@ -307,7 +310,7 @@
.wrap {
padding: 3em 4em;
flex: 0.4;
max-width: 50%;
}
}
}
......@@ -340,13 +343,13 @@
// Home clients
//
.home-clients {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
@include flexbox();
@include align-items(center);
@include flex-wrap(wrap);
@include justify-content(space-around);
@media (min-width: $tablet) {
flex-wrap: nowrap;
@include flex-wrap(nowrap);
}
span {
......
......@@ -86,18 +86,18 @@
}
}
@keyframes appears {
@include keyframes(appears) {
0% {
opacity: 0;
transform: scale(0);
@include transform(scale(0));
}
100% {
opacity: 1;
transform: scale(1);
@include transform(scale(1));
}
}
@keyframes appearsBox {
@include keyframes(appearsBox) {
0% {
opacity: 0;
margin-bottom: -3em;
......@@ -111,7 +111,7 @@
.team-map__profile {
background: rgba($grey-dark, 0.55);
position: absolute;
transform: translate(calc(-50% + 0.25em), -5.5em);
@include transform(translate(calc(-50% + 0.25em), -5.5em));
border-radius: 2px;
padding: 0.7em 1em 0.6em 2em;
max-width: 12em;
......@@ -119,7 +119,7 @@
text-align: center;
line-height: 1;
opacity: 0;
transform-origin: 50% 100%;
@include transform-origin: 50% 100%;
&:after {
content: "";
......@@ -175,9 +175,9 @@
}
.team-grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@include flexbox();
@include justify-content(space-between);
@include flex-wrap(wrap);
}
.team-item {
......@@ -221,7 +221,7 @@
}
.team-item__name {
display: flex;
@include flexbox();
margin-bottom: 0.3em;
height: 1.5em;
overflow: hidden;
......
......@@ -16,7 +16,7 @@
line-height: 1.5;
text-align: center;
display: inline-flex;
justify-content: space-around;
@include justify-content(space-around);
vertical-align: top;
padding: 0.9em 1.14em;
border-radius: 2px;
......
......@@ -17,22 +17,22 @@
margin-right: -$gutter / 2;
@media (min-width: $tablet) {
display: flex;
@include flexbox();
margin-left: -$gutter-larger / 2;
margin-right: -$gutter-larger / 2;
}
&.grid--center {
align-items: center;
@include align-items(center);
}
&.grid--justify-around {
justify-content: space-around;
@include justify-content(space-around);
}
&.grid--reverse {
@media screen and (min-width: $tablet) {
flex-direction: row-reverse;
@include flex-direction(row-reverse);
}
}
......@@ -40,9 +40,10 @@
padding-left: $gutter / 2;
padding-right: $gutter / 2;
margin-bottom: $gutter;
width: 100%;
@media (min-width: $tablet) {
flex: 1;
@include flex(1);
margin-bottom: $gutter-larger;
padding-left: $gutter-larger / 2;
padding-right: $gutter-larger / 2;
......@@ -70,6 +71,7 @@
@media (min-width: $tablet) {
max-width: 50%;
@include flex-basis(50%);
}
}
......@@ -78,6 +80,7 @@
@media (min-width: $tablet) {
max-width: 33%;
@include flex-basis(33%);
}
}
......@@ -86,6 +89,7 @@
@media (min-width: $tablet) {
max-width: 25%;
@include flex-basis(25%);
}
}
......@@ -94,6 +98,7 @@
@media (min-width: $tablet) {
max-width: 20%;
@include flex-basis(20%);
}
}
......@@ -102,12 +107,13 @@
@media (min-width: $tablet) {
max-width: 75%;
@include flex-basis(75%);
}
}
}
.flex-grid--nobreak {
display: flex;
@include flexbox();
margin-left: -$gutter / 2;
margin-right: -$gutter / 2;
......@@ -117,10 +123,11 @@
}
@mixin column {
flex: 1;
@include flex(1);
padding-left: $gutter / 2;
padding-right: $gutter / 2;
margin-bottom: $gutter;
width: 100%;
@media (min-width: $tablet) {
margin-bottom: $gutter-larger;
......@@ -146,21 +153,25 @@
> .col--haft {
@include column;
max-width: 50%;
@include flex-basis(50%);
}
> .col--third {
@include column;
max-width: 33%;
@include flex-basis(33%);
}
> .col--fourth {
@include column;
max-width: 25%;
@include flex-basis(25%);
}
> .col--fifth {
@include column;
max-width: 20%;
@include flex-basis(20%);
}
}
@mixin transform-origin ($origin) {
moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin flex-direction($direction) {
-webkit-flex-direction: $direction;
-moz-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-moz-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@mixin flex-flow($flow) {
-webkit-flex-flow: $flow;
-moz-flex-flow: $flow;
-ms-flex-flow: $flow;
flex-flow: $flow;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin flex-grow($grow) {
-webkit-flex-grow: $grow;
-moz-flex-grow: $grow;
-ms-flex-grow: $grow;
flex-grow: $grow;
}
@mixin flex-shrink($shrink) {
-webkit-flex-shrink: $shrink;
-moz-flex-shrink: $shrink;
-ms-flex-shrink: $shrink;
flex-shrink: $shrink;
}
@mixin flex-basis($width) {
-webkit-flex-basis: $width;
-moz-flex-basis: $width;
-ms-flex-basis: $width;
flex-basis: $width;
}
@mixin justify-content($justify) {
-webkit-justify-content: $justify;
-moz-justify-content: $justify;
-ms-justify-content: $justify;
justify-content: $justify;
-ms-flex-pack: $justify;
}
@mixin align-content($align) {
-webkit-align-content: $align;
-moz-align-content: $align;
-ms-align-content: $align;
align-content: $align;
}
@mixin align-items($align) {
-webkit-align-items: $align;
-moz-align-items: $align;
-ms-align-items: $align;
align-items: $align;
}
@mixin align-self($align) {
-webkit-align-self: $align;
-moz-align-self: $align;
-ms-align-self: $align;
align-self: $align;
}
.table {
@media screen and (min-width: $tablet) {
display: flex;
@include flexbox();
}
.table--layout {
......@@ -30,7 +30,7 @@
width: 100%;
@media screen and (min-width: $tablet) {
flex: 1;
@include flex(1);
margin-bottom: 0;
~ table {
......
......@@ -179,8 +179,9 @@ redirect_from:
<a href="/feed.xml" target="_blank" class="button--link button--with-arrow">Subscribe to updates</a>
</div>
</div>
<div class="space--6"></div>
</div>
<div class="space--6"></div>