Iterate on rtl design
This commit is contained in:
parent
8d7efdaa8a
commit
e77533a947
6 changed files with 45 additions and 19 deletions
|
@ -20,6 +20,12 @@ body .root .content.theme {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
&:hover {
|
||||||
|
background: rgba(220, 220, 220, 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,10 @@
|
||||||
.root .content.theme.blue {
|
.root .content.theme.blue {
|
||||||
@import "blue/base/colors";
|
@import "blue/base/colors";
|
||||||
|
|
||||||
|
.color-white {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
.color-primary {
|
.color-primary {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,12 +8,6 @@
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
&:hover {
|
|
||||||
background: $accent-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.id {
|
span.id {
|
||||||
color: $secondary-color;
|
color: $secondary-color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
.root .content.theme.green.rtl {
|
.root .content.theme.green.rtl {
|
||||||
@import "green/base/colors";
|
@import "green/base/colors";
|
||||||
|
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,6 +17,22 @@
|
||||||
.color-accent {
|
.color-accent {
|
||||||
color: $accent-color;
|
color: $accent-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-white {
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-primary {
|
||||||
|
background: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-secondary {
|
||||||
|
background: $secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-accent {
|
||||||
|
background: $accent-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "green/base";
|
@import "green/base";
|
||||||
|
|
|
@ -9,11 +9,6 @@
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $primary-color;
|
|
||||||
color: $accent-color;
|
|
||||||
span:first-child {
|
|
||||||
color: $accent-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,20 +40,32 @@ export function SurahIndex({ locale, surahs, t }: Props) {
|
||||||
</Head>
|
</Head>
|
||||||
<ul className="body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6">
|
<ul className="body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6">
|
||||||
{index.map((surah, key) => (
|
{index.map((surah, key) => (
|
||||||
<li className="flex justify-center surah" key={key}>
|
<li
|
||||||
|
className={classNames("flex justify-center surah", {
|
||||||
|
"w-full": locale.direction === "ltr",
|
||||||
|
"w-11/12": locale.direction === "rtl",
|
||||||
|
})}
|
||||||
|
key={key}
|
||||||
|
>
|
||||||
<a
|
<a
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex items-center color-primary no-underline rounded w-11/12",
|
"flex items-center color-primary no-underline rounded h-14",
|
||||||
{
|
{
|
||||||
"h-14": locale.direction === "ltr",
|
"w-full": locale.direction === "rtl",
|
||||||
"h-10": locale.direction === "rtl",
|
"w-11/12": locale.direction === "ltr",
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
href={`/${locale.name}/${surah.roman.slug}/`}
|
href={`/${locale.name}/${surah.roman.slug}/`}
|
||||||
>
|
>
|
||||||
|
{locale.direction === "ltr" ? (
|
||||||
<span className="color-secondary font-extrabold w-10 text-center">
|
<span className="color-secondary font-extrabold w-10 text-center">
|
||||||
{formatNumber(locale, surah.id)}
|
{formatNumber(locale, surah.id)}
|
||||||
</span>
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="flex items-center justify-center color-white background-secondary w-8 h-8 p-1 mr-5 ml-5 rounded">
|
||||||
|
{formatNumber(locale, surah.id)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
<span>{surah.name}</span>
|
<span>{surah.name}</span>
|
||||||
{locale.direction === "ltr" && (
|
{locale.direction === "ltr" && (
|
||||||
<div className="flex justify-end grow pr-3">
|
<div className="flex justify-end grow pr-3">
|
||||||
|
|
Loading…
Reference in a new issue