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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background: rgba(220, 220, 220, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -5,6 +5,10 @@
|
|||
.root .content.theme.blue {
|
||||
@import "blue/base/colors";
|
||||
|
||||
.color-white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
|
|
@ -8,12 +8,6 @@
|
|||
color: $primary-color;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
span.id {
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
.root .content.theme.green.rtl {
|
||||
@import "green/base/colors";
|
||||
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
|
@ -18,6 +17,22 @@
|
|||
.color-accent {
|
||||
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";
|
||||
|
|
|
@ -9,11 +9,6 @@
|
|||
|
||||
@media (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>
|
||||
<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) => (
|
||||
<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
|
||||
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",
|
||||
"h-10": locale.direction === "rtl",
|
||||
"w-full": locale.direction === "rtl",
|
||||
"w-11/12": locale.direction === "ltr",
|
||||
},
|
||||
)}
|
||||
href={`/${locale.name}/${surah.roman.slug}/`}
|
||||
>
|
||||
{locale.direction === "ltr" ? (
|
||||
<span className="color-secondary font-extrabold w-10 text-center">
|
||||
{formatNumber(locale, surah.id)}
|
||||
</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>
|
||||
{locale.direction === "ltr" && (
|
||||
<div className="flex justify-end grow pr-3">
|
||||
|
|
Loading…
Reference in a new issue