taha12322
3 years ago
parent
2de1868c05
commit
d4aa9d6e64
46 changed files with 2189 additions and 69 deletions
@ -0,0 +1,62 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import '../../../style/chosecolor.scss'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Chosecolor = (props) => { |
||||||
|
const {color , setcolor} = props; |
||||||
|
|
||||||
|
const changeColorHandler = (value) => { |
||||||
|
setcolor(value) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const {isChecked} = props; |
||||||
|
return ( |
||||||
|
<>
|
||||||
|
{isChecked ? |
||||||
|
<div className='dark-mood'> |
||||||
|
<div className='nav-btn'> |
||||||
|
<div> |
||||||
|
<button onClick={() => changeColorHandler('dark-white')} id='red-btn-d' className='btn-color'> |
||||||
|
الف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className='nav-btn'> |
||||||
|
<button onClick={() => changeColorHandler('dark-brown')} id='green-btn-d' className='btn-color'> |
||||||
|
الف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className='nav-btn'> |
||||||
|
<button onClick={() => changeColorHandler('dark-blue')} id='blue-btn-d' className='btn-color'> |
||||||
|
الف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div>: |
||||||
|
<div className='light-mood'> |
||||||
|
<div className='nav-btn'> |
||||||
|
<div> |
||||||
|
<button onClick={() => changeColorHandler('light-white')} id='red-btn-w' className='btn-color'> |
||||||
|
الف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className='nav-btn'> |
||||||
|
<button onClick={() => changeColorHandler('light-brown')} id='green-btn-w' className='btn-color'> |
||||||
|
الف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className='nav-btn'> |
||||||
|
<button onClick={() => changeColorHandler('light-blue')} id='blue-btn-w' className='btn-color'> |
||||||
|
الف |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
} |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Chosecolor |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import React , { useState } from 'react'; |
||||||
|
import '../../../components/style/colorsComponents.scss'; |
||||||
|
import PalletColorOutline from '../../image/PalletColorOutline.svg'; |
||||||
|
import PalletColorbold from '../../image/PalletColorBold.svg'; |
||||||
|
import Chosecolor from './Colors/chosecolor' |
||||||
|
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; |
||||||
|
|
||||||
|
|
||||||
|
const Colors = (props) => { |
||||||
|
const [dropdownOpen, setDropdownOpen] = useState(false); |
||||||
|
const toggle = () => setDropdownOpen(prevState => !prevState); |
||||||
|
|
||||||
|
const {setIsChecked, isChecked , setcolor , color } = props; |
||||||
|
|
||||||
|
const [Icon, seticon] = useState(PalletColorOutline); |
||||||
|
const changeIcone = () => { |
||||||
|
seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<nav className='main-colors-setting'> |
||||||
|
<label class="switch"> |
||||||
|
<input type="checkbox" |
||||||
|
onChange={() => setIsChecked(!isChecked)} |
||||||
|
/> |
||||||
|
<span class="slider round"></span> |
||||||
|
</label> |
||||||
|
<Dropdown isOpen={dropdownOpen} toggle={toggle}> |
||||||
|
<DropdownToggle id='dropdown-btn'> |
||||||
|
<div onClick={()=>changeIcone()} > |
||||||
|
<img src={Icon} set="curved" className='palette-icon' alt='icon'/> |
||||||
|
</div> |
||||||
|
</DropdownToggle> |
||||||
|
<DropdownMenu className='nav-menu'> |
||||||
|
<Chosecolor
|
||||||
|
isChecked={isChecked} |
||||||
|
setcolor={setcolor} |
||||||
|
color={color} |
||||||
|
/> |
||||||
|
</DropdownMenu> |
||||||
|
</Dropdown> |
||||||
|
</nav> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Colors |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import '../../../components/style/fontsize.scss'; |
||||||
|
|
||||||
|
function ButtonIncrement(props) { |
||||||
|
return ( |
||||||
|
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}> |
||||||
|
+ |
||||||
|
</p> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function ButtonDecrement(props) { |
||||||
|
|
||||||
|
return ( |
||||||
|
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}> |
||||||
|
- |
||||||
|
</p> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function Display(props) { |
||||||
|
return ( |
||||||
|
<label >{props.message}</label> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const Fontsize = (props) => { |
||||||
|
|
||||||
|
const {countersize, setCounter} = props; |
||||||
|
const incrementCounter = () => setCounter(countersize + 1); |
||||||
|
let decrementCounter = () => setCounter(countersize - 1); |
||||||
|
|
||||||
|
if(countersize <= 1) { |
||||||
|
decrementCounter = () => setCounter(1); |
||||||
|
} |
||||||
|
return ( |
||||||
|
<div className='nav-fontBtn'> |
||||||
|
<nav> |
||||||
|
<ButtonIncrement onClickFunc={incrementCounter}/> |
||||||
|
<Display message={countersize}/>
|
||||||
|
<ButtonDecrement onClickFunc={decrementCounter}/> |
||||||
|
</nav> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Fontsize |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import '../../../style/fonts.scss'; |
||||||
|
|
||||||
|
const Fonts = (props) => { |
||||||
|
|
||||||
|
const {setname} = props; |
||||||
|
|
||||||
|
const fontHandler = (value) =>{ |
||||||
|
setname(value) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<nav className='nav-btn'> |
||||||
|
<button onClick={() => fontHandler('Sans')} className='btn-font'>سانس</button> |
||||||
|
<button onClick={() => fontHandler('Nazanin')} className='btn-font'>نازنین</button> |
||||||
|
</nav> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Fonts |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import React , { useState } from 'react'; |
||||||
|
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; |
||||||
|
import '../../../components/style/fontStyle.scss' |
||||||
|
import Fonts from './Fonts/fonts' |
||||||
|
|
||||||
|
const Fontstyle = (props) => { |
||||||
|
const {setname ,name} = props; |
||||||
|
|
||||||
|
|
||||||
|
const [dropdownOpen, setDropdownOpen] = useState(false); |
||||||
|
const toggle = () => setDropdownOpen(prevState => !prevState) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Dropdown isOpen={dropdownOpen} toggle={toggle}> |
||||||
|
<DropdownToggle id='dropdown-btn'> |
||||||
|
<button className='btn'> |
||||||
|
<p> |
||||||
|
{name === 'Sans' ? 'سانس': 'نازنین'} |
||||||
|
</p> |
||||||
|
</button> |
||||||
|
</DropdownToggle> |
||||||
|
<DropdownMenu className='nav-menu-font'> |
||||||
|
<Fonts
|
||||||
|
setname={setname} |
||||||
|
/> |
||||||
|
</DropdownMenu> |
||||||
|
</Dropdown> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Fontstyle |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import React from 'react' |
||||||
|
// import {FormatLineSpacingRoundedIcon} from '@material-ui/icons/FormatLineSpacingRounded'
|
||||||
|
import lineSpace from '../../image/lineSpace.svg' |
||||||
|
import '../../../components/style/lineheight.scss' |
||||||
|
|
||||||
|
function ButtonIncrement(props) { |
||||||
|
return ( |
||||||
|
<span type="button" outline onClick={props.onClickFunc}> |
||||||
|
{/* <FormatLineSpacingRoundedIcon className="line-space-icon" /> */} |
||||||
|
</span> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function ButtonDecrement(props) { |
||||||
|
return ( |
||||||
|
<img |
||||||
|
type="button" |
||||||
|
outline |
||||||
|
onClick={props.onClickFunc} |
||||||
|
src={lineSpace} |
||||||
|
alt="Icon" |
||||||
|
className="line-space-icon-" |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function Display(props) { |
||||||
|
return <label style={{ textAlign: 'center' }}>{props.message}</label> |
||||||
|
} |
||||||
|
|
||||||
|
const Lineheight = (props) => { |
||||||
|
const { counterline, setcounterline } = props |
||||||
|
|
||||||
|
const incrementCounter = () => setcounterline(counterline + 1) |
||||||
|
let decrementCounter = () => setcounterline(counterline - 1) |
||||||
|
|
||||||
|
if (counterline <= 1) { |
||||||
|
decrementCounter = () => setcounterline(1) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="nav-fontBtn"> |
||||||
|
<nav style={{ width: '70px' }}> |
||||||
|
<ButtonIncrement onClickFunc={incrementCounter} /> |
||||||
|
<Display message={counterline} /> |
||||||
|
<ButtonDecrement onClickFunc={decrementCounter} /> |
||||||
|
</nav> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Lineheight |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { UncontrolledCollapse, Card } from 'reactstrap' |
||||||
|
import '../../../src/components/style/setting.scss' |
||||||
|
import Fontstyle from './FontStyle/Fontstyle' |
||||||
|
import Colors from './FontColor/colors' |
||||||
|
import FontSize from './FontSize/fontsize' |
||||||
|
import LineHeight from './LineHeight/lineheight' |
||||||
|
|
||||||
|
const Setting = (props) => { |
||||||
|
const { |
||||||
|
setIsChecked, |
||||||
|
isChecked, |
||||||
|
countersize, |
||||||
|
setCounter, |
||||||
|
counterline, |
||||||
|
setcounterline, |
||||||
|
setname, |
||||||
|
name, |
||||||
|
setcolor, |
||||||
|
color, |
||||||
|
} = props |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
|
||||||
|
<Card> |
||||||
|
<nav className="nav-content"> |
||||||
|
<nav className="nav-items"> |
||||||
|
<Colors |
||||||
|
setIsChecked={setIsChecked} |
||||||
|
isChecked={isChecked} |
||||||
|
setcolor={setcolor} |
||||||
|
color={color} |
||||||
|
/> |
||||||
|
</nav> |
||||||
|
<nav className="nav-items"> |
||||||
|
<LineHeight |
||||||
|
counterline={counterline} |
||||||
|
setcounterline={setcounterline} |
||||||
|
/> |
||||||
|
<FontSize countersize={countersize} setCounter={setCounter} /> |
||||||
|
<Fontstyle name={name} setname={setname} /> |
||||||
|
</nav> |
||||||
|
</nav> |
||||||
|
</Card> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Setting |
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 351 B |
@ -0,0 +1,160 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.MuiDrawer-paperAnchorRight { |
||||||
|
background: white; |
||||||
|
&::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
width: 0px; |
||||||
|
font-family: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.MuiDrawer-paperAnchorRight { |
||||||
|
top: 35px !important; |
||||||
|
} |
||||||
|
.navbar-drawer { |
||||||
|
font-family: inherit; |
||||||
|
text-align: right !important; |
||||||
|
direction: rtl; |
||||||
|
&__header { |
||||||
|
height: 60px; |
||||||
|
background-color: white; |
||||||
|
width: 80% !important; |
||||||
|
align-items: center; |
||||||
|
&--right { |
||||||
|
margin-right: 10px; |
||||||
|
& h1 { |
||||||
|
margin-bottom: 0px; |
||||||
|
font-size: calc(100vw / 22); |
||||||
|
color: #4d4d4f; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
& div { |
||||||
|
color: #4d4d4f; |
||||||
|
font-size: calc(100vw / 34); |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--dropdown { |
||||||
|
left: 10px; |
||||||
|
top: 10px; |
||||||
|
} |
||||||
|
& img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
&__dropdown { |
||||||
|
width: calc(100vw * 0.8); |
||||||
|
.navbar-drawer-user { |
||||||
|
width: 100%; |
||||||
|
&__right { |
||||||
|
margin-right: 10px; |
||||||
|
& h1 { |
||||||
|
margin-bottom: 0px; |
||||||
|
font-size: calc(100vw / 22); |
||||||
|
color: #4d4d4f; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
& div { |
||||||
|
color: #4d4d4f; |
||||||
|
font-size: calc(100vw / 34); |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&__bottom { |
||||||
|
width: 100%; |
||||||
|
&--link { |
||||||
|
width: 100%; |
||||||
|
align-items: center; |
||||||
|
padding: 15px 10px; |
||||||
|
& img { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
& .badge { |
||||||
|
background-color: red; |
||||||
|
margin: 5px; |
||||||
|
position: absolute; |
||||||
|
left: 5px; |
||||||
|
top: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--button { |
||||||
|
width: 100%; |
||||||
|
height: 100px; |
||||||
|
color: white; |
||||||
|
padding: 15px 10px; |
||||||
|
cursor: pointer; |
||||||
|
& img { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
&--version { |
||||||
|
position: absolute; |
||||||
|
bottom: 5px; |
||||||
|
left: 0px; |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
font-size: 14px; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
& span { |
||||||
|
color: #cfcfcf; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.makeStyles-list-1 { |
||||||
|
width: 300px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiBackdrop-root { |
||||||
|
top: 35px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.navbar-drawer__bottom a { |
||||||
|
width: 100%; |
||||||
|
color: #666; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.navbar-drawer__bottom a:hover { |
||||||
|
color: $green; |
||||||
|
} |
||||||
|
|
||||||
|
.navbar-drawer__bottom--link .navbar-drawer__bottom--link div { |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiTabs-indicator { |
||||||
|
background-color: $green !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiTab-root { |
||||||
|
min-width: 100px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiTab-wrapper { |
||||||
|
color: $green; |
||||||
|
} |
||||||
|
|
||||||
|
.PrivateSwipeArea-root-15 { |
||||||
|
left: 0 !important; |
||||||
|
right: 0 !important; |
||||||
|
} |
||||||
|
.MuiPaper-elevation { |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-cansel { |
||||||
|
color: red; |
||||||
|
text-align: left; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.btn{ |
||||||
|
border: $green solid 1.5px !important; |
||||||
|
padding: 0px 3px 4px 3px !important; |
||||||
|
height: 1.5rem; |
||||||
|
color: $green !important; |
||||||
|
|
||||||
|
p{ |
||||||
|
font-size: 12px; |
||||||
|
margin: 0; |
||||||
|
padding: 2px 5px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn:hover{ |
||||||
|
color: $white !important; |
||||||
|
background-color: $green !important; |
||||||
|
} |
||||||
|
.btn:focus { |
||||||
|
box-shadow: none !important; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
$green : #009AA8; |
||||||
|
$white : #fff; |
||||||
|
$black : #000; |
||||||
|
$gray : #fafafa; |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.nav-fontBtn{ |
||||||
|
margin-right: 5px; |
||||||
|
nav{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
width: 60px; |
||||||
|
height: 1.5rem; |
||||||
|
border-radius: 5px; |
||||||
|
border: 1.5px solid $green; |
||||||
|
|
||||||
|
.counter{ |
||||||
|
font-size: 0.95rem; |
||||||
|
} |
||||||
|
|
||||||
|
p{ |
||||||
|
padding-left: 2px; |
||||||
|
padding-right: 2px; |
||||||
|
font-family: inherit; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.paragraph { |
||||||
|
text-align: justify; |
||||||
|
direction: rtl; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
.slider-btn-left { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.slider-btn-right { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-flex-items-pages { |
||||||
|
height: 100%; |
||||||
|
max-height: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.main-nav{ |
||||||
|
height: calc(100% - 90px); |
||||||
|
margin-top: 15px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 700px) { |
||||||
|
.slider-btn-left { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
opacity: 0; |
||||||
|
width: 40%; |
||||||
|
left: 0; |
||||||
|
top: 60px; |
||||||
|
z-index: 500; |
||||||
|
position: absolute; |
||||||
|
height: 85%; |
||||||
|
} |
||||||
|
|
||||||
|
.slider-btn-right{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
opacity: 0; |
||||||
|
width: 40%; |
||||||
|
right: 0; |
||||||
|
top: 60px; |
||||||
|
z-index: 500; |
||||||
|
position: absolute; |
||||||
|
height: 85%; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
|
||||||
|
.nav-icon { |
||||||
|
cursor: 'pointer'; |
||||||
|
z-index: 500; |
||||||
|
position: 'relative'; |
||||||
|
margin-left: 0.5rem; |
||||||
|
} |
||||||
|
@media only screen and (max-width: 900px ) { |
||||||
|
.display-icon { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
|
||||||
|
.nav-btn{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-color{ |
||||||
|
outline: none; |
||||||
|
border-radius: 5px; |
||||||
|
margin: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#red-btn-w{ |
||||||
|
background-color: #fff; |
||||||
|
color: #121212; |
||||||
|
border: $green solid 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#green-btn-w{ |
||||||
|
background-color: #fff4e1; |
||||||
|
color: #af622e; |
||||||
|
border: $green solid 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#blue-btn-w{ |
||||||
|
background-color: #86bbff ; |
||||||
|
color: rgb(88, 88, 211); |
||||||
|
border: $green solid 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#red-btn-d{ |
||||||
|
background-color: #121212; |
||||||
|
color: #fff; |
||||||
|
border: $green solid 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#green-btn-d{ |
||||||
|
background-color: #af622e; |
||||||
|
color: rgb(255, 244, 225); |
||||||
|
border: $green solid 1px; |
||||||
|
} |
||||||
|
|
||||||
|
#blue-btn-d{ |
||||||
|
background-color: #5858d3; |
||||||
|
color: #86bbff; |
||||||
|
border: $green solid 1px; |
||||||
|
} |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.switch { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
width: 35px; |
||||||
|
height: 18px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.switch input { |
||||||
|
opacity: 0; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.slider { |
||||||
|
position: absolute; |
||||||
|
cursor: pointer; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
background-color: rgb(187, 187, 187); |
||||||
|
-webkit-transition: .4s; |
||||||
|
transition: .4s; |
||||||
|
} |
||||||
|
|
||||||
|
.slider:before { |
||||||
|
position: absolute; |
||||||
|
content: ""; |
||||||
|
height: 12px; |
||||||
|
width: 12px; |
||||||
|
left: 2px; |
||||||
|
bottom: 3px; |
||||||
|
background-color: white; |
||||||
|
transition: .4s; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
input:checked + .slider { |
||||||
|
background-color: $green; |
||||||
|
} |
||||||
|
|
||||||
|
input:checked + .slider:before { |
||||||
|
background-color: black; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
input:focus + .slider { |
||||||
|
box-shadow: 0 0 1px $green; |
||||||
|
} |
||||||
|
|
||||||
|
input:checked + .slider:before { |
||||||
|
transform: translateX(18px); |
||||||
|
} |
||||||
|
|
||||||
|
/* Rounded sliders */ |
||||||
|
.slider.round { |
||||||
|
border-radius: 34px; |
||||||
|
} |
||||||
|
|
||||||
|
.slider.round:before { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.main-colors-setting{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#dropdown-btn{ |
||||||
|
background-color: white !important; |
||||||
|
border: none !important ; |
||||||
|
padding: 0px !important; |
||||||
|
margin: 0px !important; |
||||||
|
} |
||||||
|
|
||||||
|
#dropdown-btn:hover{ |
||||||
|
color: $green !important; |
||||||
|
} |
||||||
|
|
||||||
|
.palette-icon{ |
||||||
|
width: 1.4rem; |
||||||
|
margin-top: 2px; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
.nav-menu-font{ |
||||||
|
min-width: 4rem !important; |
||||||
|
transform: translate3d(-5px, 24px, 0px) !important; |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
|
||||||
|
.nav-btn{ |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.btn-font{ |
||||||
|
outline: none; |
||||||
|
border-radius: 5px; |
||||||
|
margin: 5px; |
||||||
|
border: $green solid 1.5px; |
||||||
|
color: $green; |
||||||
|
background-color: white; |
||||||
|
width: 2.8rem; |
||||||
|
font-size: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-font:hover{ |
||||||
|
border: $green solid 1.5px; |
||||||
|
color: white; |
||||||
|
background-color: $green; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
@import './colors'; |
||||||
|
@import './btnStyle'; |
||||||
|
@import './twobtnStyle'; |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.main-footer { |
||||||
|
width: 100%; |
||||||
|
background-color: white; |
||||||
|
height: 60px; |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
text-align: center; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-items { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
p { |
||||||
|
padding-right: 0.75rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.buy-btn-mobile { |
||||||
|
border: solid 1.5px white; |
||||||
|
background-color: #009AA8; |
||||||
|
border-radius: 5px; |
||||||
|
color: white; |
||||||
|
font-size: 12px; |
||||||
|
padding: 0.30rem 2rem; |
||||||
|
width: 112%; |
||||||
|
position: fixed; |
||||||
|
bottom: -1px; |
||||||
|
right: -20px; |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (min-width: 700px ) { |
||||||
|
.buy-btn-mobile { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.main-footer{ |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.nav-header { |
||||||
|
width: 100%; |
||||||
|
background-color: $green; |
||||||
|
height: 35px; |
||||||
|
color: $white; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.items { |
||||||
|
display: flex; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
|
||||||
|
.icon { |
||||||
|
margin-right: 5px; |
||||||
|
width: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.header-title { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.logo { |
||||||
|
width: 50px; |
||||||
|
margin-right: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.buy-btn { |
||||||
|
border: solid 1.5px white; |
||||||
|
background-color: $green; |
||||||
|
border-radius: 5px; |
||||||
|
color: white; |
||||||
|
margin-right: 7px; |
||||||
|
font-size: 12px; |
||||||
|
width: 8rem; |
||||||
|
} |
||||||
|
|
||||||
|
.buy-btn:hover{ |
||||||
|
color: $green; |
||||||
|
background-color: white; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 700px ) { |
||||||
|
.buy-btn { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,26 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.custom-drawer { |
||||||
|
height: 100%; |
||||||
|
width: 0px; |
||||||
|
position: relative; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes drawerActive { |
||||||
|
0% { |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
100% { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.custom-drawer-active { |
||||||
|
border-left: solid 1.5px #009aa882; |
||||||
|
border-radius: 9px; |
||||||
|
background-color: #fff; |
||||||
|
width: 300px; |
||||||
|
animation-name: drawerActive; |
||||||
|
animation-duration: 0.2s; |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Nazanin'; |
||||||
|
src: local('Nazanin'), url(../fonts/Nazanin.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Sans'; |
||||||
|
src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'SansNum'; |
||||||
|
src: local('IRANSansWebFaNum'), url(../fonts/IRANSansWebFaNum.woff) format('woff'); |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
color: $green; |
||||||
|
font-family: 'SansNum' , 'Sans' , 'Nazanin'; |
||||||
|
text-align: right; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
html,body,#root{ |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,14 @@ |
|||||||
|
@import './btnStyle'; |
||||||
|
@import './twobtnStyle'; |
||||||
|
|
||||||
|
|
||||||
|
.line-space-icon-{ |
||||||
|
font-size: 1rem !important; |
||||||
|
width: 1rem !important; |
||||||
|
margin: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.line-space-icon{ |
||||||
|
font-size: 1rem !important; |
||||||
|
width: 1rem !important; |
||||||
|
} |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.modal { |
||||||
|
top: 6rem !important; |
||||||
|
left: 6rem !important; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-content { |
||||||
|
width: 300px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-footer { |
||||||
|
justify-content: flex-start !important; |
||||||
|
} |
||||||
|
|
||||||
|
.title-input { |
||||||
|
text-align: right; |
||||||
|
direction: rtl; |
||||||
|
width: 100% !important; |
||||||
|
border: 1px gray solid; |
||||||
|
outline: none; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
font-size: 14px; |
||||||
|
border-radius: 3px; |
||||||
|
margin-bottom: 0.75rem; |
||||||
|
} |
||||||
|
|
||||||
|
.title-input::placeholder{ |
||||||
|
font-size: 10px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.dis-input { |
||||||
|
text-align: right; |
||||||
|
direction: rtl; |
||||||
|
outline: none; |
||||||
|
width: 100%; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
font-size: 12px; |
||||||
|
border-radius: 3px; |
||||||
|
resize: none; |
||||||
|
} |
||||||
|
|
||||||
|
.dis-input::placeholder{ |
||||||
|
font-size: 9px; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
.save-btn { |
||||||
|
border: none; |
||||||
|
background-color: $green; |
||||||
|
border-radius: 4px; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
color: #fff; |
||||||
|
font-size: 14px; |
||||||
|
margin-right: 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.close-btn { |
||||||
|
border: red solid 1px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 4px; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
color: red; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.save-number-page{ |
||||||
|
font-size: 10px; |
||||||
|
text-align: left; |
||||||
|
direction: ltr; |
||||||
|
} |
||||||
|
|
||||||
|
.span-num{ |
||||||
|
color: red; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.nav-btn-form{ |
||||||
|
text-align: left; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.lable-input{ |
||||||
|
font-size: 12px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.bookmark{ |
||||||
|
z-index: 2000; |
||||||
|
position: absolute; |
||||||
|
top: 3.75rem; |
||||||
|
left: 34.75rem; |
||||||
|
width: 8rem; |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.edit-progress{ |
||||||
|
direction: rtl; |
||||||
|
width: 90% !important; |
||||||
|
height: 5px !important; |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
.nav-search{ |
||||||
|
display: flex !important; |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.nav-color { |
||||||
|
background-color: #fff; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.nav-serch-items { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
border: solid 1.5px $green; |
||||||
|
border-radius: 12px; |
||||||
|
color: $green; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
form { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
svg { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.input-text { |
||||||
|
width: 100%; |
||||||
|
color: $green; |
||||||
|
font-size: 14px; |
||||||
|
padding: 5px 5px; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
input[type='search']::-webkit-search-cancel-button { |
||||||
|
height: 10px; |
||||||
|
width: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.input-submit { |
||||||
|
color: $green; |
||||||
|
font-size: 15px; |
||||||
|
padding: 5px 8px; |
||||||
|
border-right: solid 1.5px $green; |
||||||
|
border-left: none; |
||||||
|
border-top: none; |
||||||
|
border-bottom: none; |
||||||
|
outline: none; |
||||||
|
background-color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.input-submit:hover { |
||||||
|
color: #fff; |
||||||
|
background-color: $green; |
||||||
|
border-left: none; |
||||||
|
border-top: none; |
||||||
|
border-bottom: none; |
||||||
|
border-right: solid 1.5px $green; |
||||||
|
border-left: solid 1.5px $green; |
||||||
|
border-radius: 10px 0 0 10px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
.nav-content{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 0.25rem 1rem; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.nav-items{ |
||||||
|
display: flex; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.nav-menu{ |
||||||
|
min-width: 3rem !important; |
||||||
|
transform: translate3d(-12px, 24px, 0px) !important; |
||||||
|
padding: 2px !important; |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
@import './colors'; |
||||||
|
|
||||||
|
.main-tab { |
||||||
|
background-color: white !important; |
||||||
|
color: black !important; |
||||||
|
font-family: inherit !important; |
||||||
|
width: 100% !important; |
||||||
|
position: static !important; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
.MuiBox-root { |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
.MuiPaper-root{ |
||||||
|
box-shadow: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.list-note { |
||||||
|
margin-bottom: 0.5rem; |
||||||
|
padding: 15px 10px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: #666; |
||||||
|
align-items: center; |
||||||
|
font-family: 'Sans', 'SansNum'; |
||||||
|
border-bottom: solid 1px #009aa833; |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
font-size: 15px; |
||||||
|
|
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nav-list-book { |
||||||
|
border-bottom: solid 1px #009aa833; |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-list-book-active { |
||||||
|
background-color:#009aa85b; |
||||||
|
color: $green; |
||||||
|
border-bottom: solid 1px #009aa833; |
||||||
|
margin: 0; |
||||||
|
width: 100%; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-list-book:hover { |
||||||
|
background-color: rgba(200, 231, 231, 0.616); |
||||||
|
} |
||||||
|
|
||||||
|
.list-note:hover { |
||||||
|
background-color: rgba(200, 231, 231, 0.616); |
||||||
|
color: $green; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.MuiPaper-elevation{ |
||||||
|
box-shadow: none ; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.MuiTabs-indicator{ |
||||||
|
display: none !important ; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.border-tab{ |
||||||
|
font-family: inherit !important; |
||||||
|
font-size: 12px !important; |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.border-tab-active{ |
||||||
|
border-bottom: $green solid 1.5px !important; |
||||||
|
} |
||||||
Loading…
Reference in new issue