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. 56
      src/components/style/fontStyle.scss
  4. 58
      src/components/style/fonts.scss

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

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

@ -6,28 +6,42 @@
transform: translate3d(-5px, 24px, 0px) !important;
}
.btn-font {
display: flex;
outline: none;
// .btn-font {
// display: flex;
// outline: none;
// border-radius: 5px;
// border: $green solid 1.5px;
// color: $green;
// 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;
// }
// }
.button-head-fontFamily{
border: solid 1.5px $green;
border-radius: 5px;
border: $green solid 1.5px;
padding: 0 4px !important;
margin: 0 !important;
color: $green;
background-color: white;
p {
padding: 0 5px !important;
margin: 0;
color: $green;
p{
padding: 0 !important;
margin: 0 !important;
}
}
.btn-font:hover {
border: $green solid 1.5px;
color: white;
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{
text-align: center;
// .btn-font {
// display: flex;
// outline: none;
// border-radius: 5px;
// border: $green solid 1.5px;
// color: $green;
// background-color: white;
.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;
}
// p {
// 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;
padding: 0 4px !important;
margin: 0 !important;
color: $green;
font-size: 14px !important;
.btn-font:hover{
border: $green solid 1.5px;
color: white;
background-color: $green;
p{
font-weight: lighter !important;
padding: 0 !important;
margin: 0 !important;
}
}
}
.button-body-fontFamily:active , .button-body-fontFamily:hover {
background-color: #fff !important;
}
Loading…
Cancel
Save