demo
taha12322 3 years ago
parent a0d2306a29
commit d7495fa874
  1. 12
      src/components/Setting/FontStyle/Fonts/fonts.js
  2. 4
      src/components/Setting/FontStyle/Fontstyle.js
  3. 54
      src/components/style/fontStyle.scss
  4. 54
      src/components/style/fonts.scss

@ -7,26 +7,22 @@ const Fonts = (props) => {
const changeFontStyle = (id) => { const changeFontStyle = (id) => {
setDropdownOpen(!dropdownOpen) setDropdownOpen(!dropdownOpen)
console.log()
if (id === 1) { if (id === 1) {
setBookStyle({ ...bookStyle, fontFamily: "Sans" }); setBookStyle({ ...bookStyle, fontFamily: "Sans" });
} else { } else {
setBookStyle({ ...bookStyle, fontFamily: "Nazanin" }); setBookStyle({ ...bookStyle, fontFamily: "Nazanin" });
} }
console.log(bookStyle)
}; };
return ( return (
<> <>
<nav className="nav-btn"> <DropdownItem className="button-body-fontFamily mb-1" onClick={() => changeFontStyle(1)}>
<DropdownItem onClick={() => changeFontStyle(1)}> <button>سانس</button>
<button className="btn-font">سانس</button>
</DropdownItem> </DropdownItem>
<DropdownItem onClick={() => changeFontStyle(2)}> <DropdownItem className="button-body-fontFamily" onClick={() => changeFontStyle(2)}>
<button className="btn-font">نازنین</button> <button>نازنین</button>
</DropdownItem> </DropdownItem>
</nav>
</> </>
); );
}; };

@ -16,8 +16,8 @@ const Fontstyle = (props) => {
return ( return (
<div> <div>
<Dropdown isOpen={dropdownOpen} toggle={toggle}> <Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id="dropdown-btn"> <DropdownToggle>
<button className="btn-font"> <button className="button-head-fontFamily">
<p>{bookStyle.fontFamily === "Sans" ? "سانس" : "نازنین"}</p> <p>{bookStyle.fontFamily === "Sans" ? "سانس" : "نازنین"}</p>
</button> </button>
</DropdownToggle> </DropdownToggle>

@ -6,28 +6,42 @@
transform: translate3d(-5px, 24px, 0px) !important; transform: translate3d(-5px, 24px, 0px) !important;
} }
.btn-font { // .btn-font {
display: flex; // display: flex;
outline: none; // outline: none;
border-radius: 5px; // border-radius: 5px;
border: $green solid 1.5px; // border: $green solid 1.5px;
color: $green; // color: $green;
background-color: white; // background-color: white;
// p {
// margin: 0;
// padding: 1px 5px !important;
// color: $green;
// }
// }
// .btn-font:hover {
// border-radius: 5px;
// border: $green solid 1.5px;
// color: white;
// background-color: $green;
// p {
// margin: 0;
// color: #fff;
// }
// }
p { .button-head-fontFamily{
padding: 0 5px !important; border: solid 1.5px $green;
margin: 0; border-radius: 5px;
padding: 0 4px !important;
margin: 0 !important;
color: $green; color: $green;
}
}
.btn-font:hover { p{
border: $green solid 1.5px; padding: 0 !important;
color: white; margin: 0 !important;
background-color: $green;
p {
padding: 0 5px !important;
margin: 0;
color: #fff;
} }
} }

@ -1,24 +1,46 @@
@import './colors'; @import "./colors";
// .nav-btn {
// text-align: center;
.nav-btn{ // .btn-font {
text-align: center; // display: flex;
// outline: none;
// border-radius: 5px;
// border: $green solid 1.5px;
// color: $green;
// background-color: white;
.btn-font{ // p {
outline: none; // padding: 0 5px !important;
// margin: 0;
// color: $green;
// }
// }
// .btn-font:hover {
// border: $green solid 1.5px;
// color: white;
// background-color: $green;
// }
// }
.button-body-fontFamily{
border: solid 1.5px $green !important;
border-radius: 5px; border-radius: 5px;
margin: 5px; padding: 0 4px !important;
border: $green solid 1.5px; margin: 0 !important;
color: $green; color: $green;
background-color: white; font-size: 14px !important;
width: 2.8rem;
font-size: 10px;
}
.btn-font:hover{
border: $green solid 1.5px; p{
color: white; font-weight: lighter !important;
background-color: $green; padding: 0 !important;
margin: 0 !important;
}
} }
} .button-body-fontFamily:active , .button-body-fontFamily:hover {
background-color: #fff !important;
}
Loading…
Cancel
Save