Commit b35217dd authored by Agami4's avatar Agami4
Browse files

Issue #3239444 by agami4: Improve elements of the hero section - RTL mode

parent 7f0ee396
......@@ -20,13 +20,6 @@
align-items: center;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__share {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.socialblue--sky .hero__banner .hero-footer__share > span {
padding-right: 1.25rem;
font-size: .875rem;
......@@ -178,11 +171,6 @@
padding-right: 0;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > *:last-child, [dir='rtl']
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > *:last-child {
padding-left: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left {
position: relative;
}
......@@ -207,13 +195,6 @@
padding-right: 0;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group > * {
padding: 0 10px;
}
......@@ -343,13 +324,6 @@
line-height: 2;
}
[dir='rtl'] .socialblue--sky .hero__banner--static .metainfo__content {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.socialblue--sky .hero__banner--static .metainfo__content a {
text-decoration: none;
}
......@@ -521,14 +495,6 @@
border-bottom: 1px solid #d5d6d2;
}
[dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__header {
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__text {
margin-top: 0;
}
......@@ -543,6 +509,12 @@
margin-bottom: 10px;
}
[dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .article__special-field {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .article__special-field:last-child {
margin-bottom: 0;
}
......@@ -709,19 +681,10 @@
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > * {
padding-right: 15px;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > *, [dir='rtl']
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > * {
padding-right: 0;
padding-left: 15px;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > *:last-child,
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > *:last-child {
padding-right: 0;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > *:last-child, [dir='rtl']
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > *:last-child {
padding-left: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left {
margin-bottom: 0;
}
......@@ -742,8 +705,6 @@
margin-bottom: 0;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
padding-left: 0;
padding-right: 15px;
margin-bottom: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .btn {
......@@ -764,12 +725,6 @@
-ms-flex-pack: justify;
justify-content: space-between;
}
[dir='rtl'] .socialblue--sky .hero__banner--static .hero-footer {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.socialblue--sky .hero__banner--static .hero-footer > * {
margin-bottom: 0;
-webkit-box-flex: 0;
......@@ -827,12 +782,8 @@
.socialblue--sky .hero__banner .hero-footer .vote-widget {
width: auto;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 0 -10px;
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > * + * {
padding-left: .5rem;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .btn {
font-size: .75rem;
......@@ -849,6 +800,11 @@
.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-image {
margin-bottom: 1.75rem;
}
[dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .article__special-field {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.socialblue--sky.path-group .cover-wrap:not(.cover-wrap--course-statistic) .page-title {
display: -webkit-box;
display: -ms-flexbox;
......@@ -873,14 +829,26 @@
-ms-flex-align: start;
align-items: flex-start;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > * {
padding: 0;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > *, [dir='rtl']
.socialblue--sky .hero__banner .hero-footer__list .meta-engage > * {
padding-left: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 -10px -10px;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
margin: 0 -10px 1rem;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.socialblue--sky.path-user .cover-wrap {
min-height: 160px;
}
......
......@@ -26,10 +26,6 @@
justify-content: flex-end;
align-items: center;
[dir='rtl'] & {
flex-direction: row-reverse;
}
@include for-phone-only {
justify-content: flex-start;
}
......@@ -148,22 +144,18 @@
margin-bottom: 0;
flex-wrap: wrap;
> *:first-child {
padding-left: 0;
}
@include for-tablet-landscape-down {
align-items: flex-start;
[dir='rtl'] & {
align-items: flex-end;
}
> * {
padding: 0;
}
}
> *:first-child {
padding-left: 0;
}
.badge--large {
padding-left: 0;
font-size: 1rem;
......@@ -178,30 +170,21 @@
[dir='rtl'] & {
padding-right: 0;
padding-left: 1rem;
@include for-tablet-landscape-down {
padding-left: 0;
}
}
&:last-child {
padding-right: 0;
[dir='rtl'] & {
padding-left: 0;
}
}
@include for-tablet-landscape-up {
padding-right: 15px;
[dir='rtl'] & {
padding-right: 0;
padding-left: 15px;
}
&:last-child {
padding-right: 0;
[dir='rtl'] & {
padding-left: 0;
}
}
}
}
......@@ -211,6 +194,12 @@
[dir='rtl'] & {
margin-bottom: 0;
@include for-phone-only {
> * + * {
padding-left: .5rem;
}
}
}
@include for-tablet-landscape-up {
......@@ -245,25 +234,24 @@
padding-left: 0;
padding-right: 0;
[dir='rtl'] & {
flex-direction: row-reverse;
}
@include for-tablet-landscape-up {
padding-left: 15px;
margin-bottom: 0;
[dir='rtl'] & {
padding-left: 0;
padding-right: 15px;
margin-bottom: 0;
}
}
@include for-phone-only {
@include for-tablet-landscape-down {
width: 100%;
justify-content: space-between;
margin: 0 0 -10px;
margin: 0 -10px -10px;
[dir='rtl'] & {
margin: 0 -10px 1rem;
justify-content: flex-end;
}
}
> * {
......@@ -405,10 +393,6 @@
margin-right: -5px;
line-height: 2;
[dir='rtl'] & {
flex-direction: row-reverse;
}
a {
text-decoration: none;
......@@ -486,10 +470,6 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
[dir='rtl'] & {
flex-direction: row-reverse;
}
}
> * {
......@@ -634,11 +614,6 @@
margin-bottom: 1.25rem;
border-bottom: 1px solid #d5d6d2;
[dir='rtl'] & {
width: 100%;
flex-direction: column-reverse;
}
@include for-tablet-portrait-up {
flex-direction: row;
align-items: flex-end;
......@@ -677,6 +652,14 @@
.article__special-field {
margin-bottom: 10px;
[dir='rtl'] & {
justify-content: flex-end;
@include for-phone-only {
justify-content: flex-start;
}
}
&:last-child {
margin-bottom: 0;
}
......
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