Change language dropdown to be similar to the theme dropdown
Not yet perfect but a step in the right direction.
This commit is contained in:
parent
48329928e3
commit
98f259fb22
3 changed files with 73 additions and 22 deletions
|
@ -1,29 +1,68 @@
|
||||||
.react-select {
|
.root .content.theme {
|
||||||
height: 20px;
|
.react-select {
|
||||||
z-index: 0;
|
height: 20px;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
.selected-option { cursor: pointer; }
|
.selected-option { cursor: pointer; }
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: #FFF;
|
background: #FFF;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
border: 1px solid #CCCCCC;
|
}
|
||||||
border-radius: 7px;
|
|
||||||
|
ul li {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
font-weight: normal;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
.react-select.language {
|
||||||
height: 100%;
|
.selected-option.ar {
|
||||||
width: 100%;
|
font-size: large;
|
||||||
display: block;
|
}
|
||||||
font-weight: normal;
|
|
||||||
&:hover {
|
ul {
|
||||||
cursor: pointer;
|
li {
|
||||||
background-color: lighten(#CCCCCC, 15%);
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
}
|
justify-content: flex-end;
|
||||||
|
font-size: medium;
|
||||||
|
min-height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.en {
|
||||||
|
font-family: "Kanit Regular";
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.ar {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: end;
|
||||||
|
line-height: 10px;
|
||||||
|
font-family: "Amiri Quran Regular";
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.theme.en {
|
||||||
|
.react-select.language {
|
||||||
|
ul li.en { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.theme.ar {
|
||||||
|
.react-select.language {
|
||||||
|
ul li.ar { display: none; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-select.theme {
|
.react-select.theme {
|
||||||
|
|
|
@ -23,4 +23,10 @@
|
||||||
.react-select.theme {
|
.react-select.theme {
|
||||||
ul li.blue { display: none; }
|
ul li.blue { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.react-select.language ul {
|
||||||
|
li {
|
||||||
|
color: $blue1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,5 +5,11 @@
|
||||||
@import "green/components/Icon";
|
@import "green/components/Icon";
|
||||||
|
|
||||||
.root .content.theme.green.ar {
|
.root .content.theme.green.ar {
|
||||||
|
@import "green/colors";
|
||||||
|
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
.react-select.language {
|
||||||
|
.selected-option { color: $green1; }
|
||||||
|
ul li { color: $green1; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue