Commit abfc3c76 authored by Agami4's avatar Agami4
Browse files

YANG-5943- Improve hero section - rtl

parent 7c42ffeb
......@@ -20,12 +20,24 @@
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;
font-weight: 600;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__share > span {
padding-right: 0;
padding-left: 1.25rem;
}
.socialblue--sky .hero__banner .shariff.card__block {
display: -webkit-box;
display: -ms-flexbox;
......@@ -124,43 +136,6 @@
font-size: .875rem;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 -10px;
padding-left: 10px;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group > * {
padding: 0 10px;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group .btn {
padding: 4px 15px;
font-size: .875rem;
font-weight: 600;
border-radius: 5px !important;
margin-bottom: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group .add-to-calendar .caret {
margin-left: 10px;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group .meta-addtocal {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group .meta-addtocal .btn {
margin: 0;
}
.socialblue--sky .hero__banner .hero-footer__list svg {
width: 20px;
height: 20px;
......@@ -192,19 +167,79 @@
padding-right: 1rem;
}
[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: 1rem;
}
.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 {
position: relative;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left {
margin-bottom: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left > * {
margin-bottom: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 -10px 1rem;
padding-left: 0;
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;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .btn {
padding: 4px 15px;
font-size: .875rem;
font-weight: 600;
border-radius: 5px !important;
margin-bottom: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .add-to-calendar .caret {
margin-left: 10px;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .meta-addtocal {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .meta-addtocal .btn {
margin: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-follow {
margin-left: 0;
-ms-flex-preferred-size: auto;
......@@ -250,11 +285,24 @@
margin-bottom: .25rem;
}
[dir='rtl'] .socialblue--sky .hero__banner--static .hero-header {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
text-align: right;
}
.socialblue--sky .hero__banner--static .hero-header > * {
margin-right: 1rem;
margin-bottom: .5rem;
}
[dir='rtl'] .socialblue--sky .hero__banner--static .hero-header > * {
margin-left: 1rem;
margin-right: 0;
}
.socialblue--sky .hero__banner--static .teaser__title {
margin: 0 0 1rem;
max-height: none;
......@@ -295,6 +343,13 @@
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;
}
......@@ -466,6 +521,14 @@
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;
}
......@@ -615,6 +678,12 @@
-ms-flex-align: end;
align-items: flex-end;
}
[dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__header {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__text {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
......@@ -632,12 +701,6 @@
}
@media (min-width: 900px) {
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group {
padding-left: 15px;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group .btn {
font-size: 1rem;
}
.socialblue--sky .hero__banner .hero-footer__list svg {
width: 26px;
margin-right: 10px;
......@@ -646,10 +709,19 @@
.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;
}
......@@ -661,6 +733,22 @@
right: 0;
background-color: #adadad;
}
[dir='rtl'] .socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero-footer__list-left:before {
right: auto;
left: 0;
}
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group {
padding-left: 15px;
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 {
font-size: 1rem;
}
.socialblue--sky .hero__banner--static .teaser__title {
font-size: 2.25rem;
}
......@@ -676,6 +764,12 @@
-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;
......@@ -733,18 +827,14 @@
.socialblue--sky .hero__banner .hero-footer .vote-widget {
width: auto;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group {
.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;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group > * {
padding: 0;
margin-bottom: 10px;
}
.socialblue--sky .hero__banner .hero-footer__list .hero_btn-group .btn {
.socialblue--sky .hero__banner .hero-footer__list .meta-engage .hero_btn-group .btn {
font-size: .75rem;
}
.socialblue--sky .hero__banner--static {
......@@ -783,6 +873,11 @@
-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;
}
......
......@@ -26,6 +26,10 @@
justify-content: flex-end;
align-items: center;
[dir='rtl'] & {
flex-direction: row-reverse;
}
@include for-phone-only {
justify-content: flex-start;
}
......@@ -34,6 +38,11 @@
padding-right: 1.25rem;
font-size: .875rem;
font-weight: 600;
[dir='rtl'] & {
padding-right: 0;
padding-left: 1.25rem;
}
}
}
......@@ -123,60 +132,6 @@
}
}
.hero_btn-group {
display: flex;
align-items: center;
margin: 0 -10px;
padding-left: 10px;
@include for-tablet-landscape-up {
padding-left: 15px;
}
@include for-phone-only {
width: 100%;
justify-content: space-between;
margin: 0 0 -10px;
}
> * {
padding: 0 10px;
@include for-phone-only {
padding: 0;
margin-bottom: 10px;
}
}
.btn {
padding: 4px 15px;
font-size: .875rem;
font-weight: 600;
border-radius: 5px !important;
margin-bottom: 0;
@include for-tablet-landscape-up {
font-size: 1rem;
}
@include for-phone-only {
font-size: .75rem;
}
}
.add-to-calendar .caret {
margin-left: 10px;
}
.meta-addtocal {
order: 0;
.btn {
margin: 0;
}
}
}
svg {
width: 20px;
height: 20px;
......@@ -200,6 +155,10 @@
@include for-tablet-landscape-down {
align-items: flex-start;
[dir='rtl'] & {
align-items: flex-end;
}
> * {
padding: 0;
}
......@@ -216,15 +175,33 @@
margin-right: 0;
padding-right: 1rem;
[dir='rtl'] & {
padding-right: 0;
padding-left: 1rem;
}
&: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;
}
}
}
}
......@@ -232,6 +209,10 @@
.hero-footer__list-left {
position: relative;
[dir='rtl'] & {
margin-bottom: 0;
}
@include for-tablet-landscape-up {
margin-bottom: 0;
}
......@@ -248,6 +229,72 @@
width: 1px;
right: 0;
background-color: #adadad;
[dir='rtl'] & {
right: auto;
left: 0;
}
}
}
}
.hero_btn-group {
display: flex;
align-items: center;
margin: 0 -10px 1rem;
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 {
width: 100%;
justify-content: space-between;
margin: 0 0 -10px;
}
> * {
padding: 0 10px;
}
.btn {
padding: 4px 15px;
font-size: .875rem;
font-weight: 600;
border-radius: 5px !important;
margin-bottom: 0;
@include for-tablet-landscape-up {
font-size: 1rem;
}
@include for-phone-only {
font-size: .75rem;
}
}
.add-to-calendar .caret {
margin-left: 10px;
}
.meta-addtocal {
order: 0;
.btn {
margin: 0;
}
}
}
......@@ -305,9 +352,20 @@
.hero-header {
margin-bottom: .25rem;
[dir='rtl'] & {
flex-direction: row-reverse;
text-align: right;
}
> * {
margin-right: 1rem;
margin-bottom: .5rem;
[dir='rtl'] & {
margin-left: 1rem;
margin-right: 0;
}
}
}
......@@ -347,6 +405,10 @@
margin-right: -5px;
line-height: 2;
[dir='rtl'] & {
flex-direction: row-reverse;
}
a {
text-decoration: none;
......@@ -424,6 +486,10 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
[dir='rtl'] & {
flex-direction: row-reverse;
}
}
> * {
......@@ -568,9 +634,18 @@
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;
[dir='rtl'] & {
flex-direction: row-reverse;
}
}
@include for-tablet-landscape-up {
......
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