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