Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza completed chatroom and start product

Browse Source
master
ravino 3 years ago
parent 422e4ae6fb
commit b94acb6143
9 changed files with 323 additions and 257 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 114
      src/views/ChatRoom/Info/FileTabs/index.js
  2. 64
      src/views/ChatRoom/Info/FileTabs/index.scss
  3. 118
      src/views/ChatRoom/Info/index.js
  4. 16
      src/views/ChatRoom/Info/index.scss
  5. 6
      src/views/ChatRoom/index.js
  6. 38
      src/views/Product/BreadCrumb/index.js
  7. 5
      src/views/Product/BreadCrumb/index.scss
  8. 4
      src/views/Product/index.js
  9. 133
      src/views/Product/index.scss

114
src/views/ChatRoom/Info/FileTabs/index.js
Unescape View File

@ -1,12 +1,32 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import './index.scss'; import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
mobile: {
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
},
};
export default class FileTabs extends Component { export default class FileTabs extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
type: 'media', type: 'media',
tabs : [
{id : 0, value: 'media', name: 'رسانه'},
{id : 1, value: 'video', name: 'ویدیو'},
{id : 2, value: 'voice', name: 'صوت'},
{id : 3, value: 'link', name: 'لینک'},
{id : 4, value: 'file', name: 'فایل'},
],
}; };
} }
setType = (val) => { setType = (val) => {
@ -16,49 +36,28 @@ export default class FileTabs extends Component {
}; };
render() { render() {
return ( return (
<>
{
window.innerWidth < 1000 ?
<div className="file-tabs d-flex flex-column"> <div className="file-tabs d-flex flex-column">
<div className="file-tabs__types d-flex"> <ul className="file-tabs__types d-flex flex-row-reverse">
<li
style={{ {
borderBottom: this.state.type === 'media' ? '2px solid rgb(13, 84, 150)' : 'none', this.state.tabs.map((item,i) => (
}}
onClick={() => this.setType('media')}
>
Media
</li>
<li
style={{
borderBottom: this.state.type === 'file' ? '2px solid rgb(13, 84, 150)' : 'none',
}}
onClick={() => this.setType('file')}
>
Files
</li>
<li
style={{
borderBottom: this.state.type === 'link' ? '2px solid rgb(13, 84, 150)' : 'none',
}}
onClick={() => this.setType('link')}
>
Links
</li>
<li
style={{
borderBottom: this.state.type === 'music' ? '2px solid rgb(13, 84, 150)' : 'none',
}}
onClick={() => this.setType('music')}
>
Music
</li>
<li <li
style={{ style={{
borderBottom: this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none', borderBottom: this.state.type === item.value ? '3px solid #00CC69' : 'none',
fontSize: fontSize.mobile.li,
color: this.state.type === item.value ? '#00CC69' : '#000'
}} }}
onClick={() => this.setType('voice')} onClick={() => this.setType(item.value)}
key={i}
> >
Voice {item.name}
</li> </li>
</div> ))
}
</ul>
{this.state.type === 'media' ? ( {this.state.type === 'media' ? (
<div className="file-tabs__media d-flex flex-wrap"> <div className="file-tabs__media d-flex flex-wrap">
<div className="file-tabs__media--item"></div> <div className="file-tabs__media--item"></div>
@ -84,7 +83,48 @@ export default class FileTabs extends Component {
<div className="file-tabs__media--item"></div> <div className="file-tabs__media--item"></div>
</div> </div>
) : null} ) : null}
</div> : null
}
{
window.innerWidth > 1000 ?
<div className="desktop-file-tabs d-flex flex-column">
<ul className="desktop-file-tabs__types d-flex flex-row-reverse">
{
this.state.tabs.map((item,i) => (
<li
style={{
borderBottom: this.state.type === item.value ? '3px solid #00CC69' : 'none',
fontSize: fontSize.desktop.li,
color: this.state.type === item.value ? '#00CC69' : '#000'
}}
onClick={() => this.setType(item.value)}
key={i}
>
{item.name}
</li>
))
}
</ul>
{this.state.type === 'media' ? (
<div className="desktop-file-tabs__media d-flex flex-wrap">
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
</div> </div>
) : null}
</div> : null
}
</>
); );
} }
} }

64
src/views/ChatRoom/Info/FileTabs/index.scss
Unescape View File

@ -1,24 +1,23 @@
@media screen and (max-width: 4500px) { @media screen and (max-width: 4500px) {
.file-tabs { .file-tabs {
width: 100%; width: 100%;
height: 100%; height: calc(100% - 55px);
position: relative; position: relative;
direction: rtl; direction: rtl;
position: sticky; position: sticky;
top: 0-5px; overflow-y: scroll;
font-family: numeralLight;
&__types { &__types {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 3px calc((100vw - 310px) / 2) 3px calc((100vw - 310px) / 2);
direction: ltr; direction: ltr;
border-top: 8px solid rgb(13, 84, 150);
margin-top: 20px; margin-top: 20px;
background-color: #128c7e; margin-left: auto;
margin-right:auto;
padding: 0px 10px;
& li { & li {
font-size: 16px;
list-style: none; list-style: none;
font-weight: 600;
} }
} }
&__media { &__media {
@ -26,11 +25,54 @@
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 52px; padding-bottom: 52px;
&--item { &--item {
width: calc(100% / 3); width: calc(100% / 3.6);
height: calc(100vw / 3); height: calc(100vw / 3.6);
border: 2px solid rgb(200, 183, 232); margin: 10px;
background-color: red; background-color: #eee;
}
}
}
}
.desktop-file-tabs {
width: 100%;
position: relative;
direction: rtl;
position: sticky;
min-height: 150px;
top: -5px;
&__types {
text-align: right;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 0px;
padding: 0px;
direction: ltr;
margin-top: 20px;
padding: 5px 10px;
& li {
font-family: numeralLight;
font-size: 16px;
list-style: none;
padding: 0px 0px 7px 0px;
cursor: pointer;
}
} }
&__media {
width: 100%;
overflow-y: scroll;
padding-bottom: 52px;
&::-webkit-scrollbar{
display: none;
width: 0px;
}
&--item {
width: calc(100% / 3.35);
height: 120px;
background-color: #eee;
margin: 5px;
cursor: pointer;
} }
} }
} }

118
src/views/ChatRoom/Info/index.js
Unescape View File

@ -8,26 +8,38 @@ import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined";
import Switch from "@material-ui/core/Switch"; import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from "@material-ui/core/styles";
import BlockIcon from '@material-ui/icons/Block'; import BlockIcon from '@material-ui/icons/Block';
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
import CloseIcon from '@material-ui/icons/Close';
import user2 from "../../../assets/images/user2.png"; import user2 from "../../../assets/images/user2.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
h3: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, h3: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 23,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
}, },
}; };
export default class ChatInfo extends Component { export default class ChatInfo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
gallery : false,
alarms: false, alarms: false,
buttons: [ buttons: [
{ {
@ -55,7 +67,6 @@ export default class ChatInfo extends Component {
backgroundColor: "grey", backgroundColor: "grey",
}, },
], ],
gallery: null,
user: { user: {
profileImages: [ profileImages: [
{ id: 0, src: user2 }, { id: 0, src: user2 },
@ -93,7 +104,16 @@ export default class ChatInfo extends Component {
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<section className="desktop-contact-info d-flex flex-column"> <section className="desktop-contact-info d-flex flex-column">
<header className="desktop-contact-info__header d-flex align-items-center justify-content-center"></header> <header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{
this.state.gallery ?
<KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> :
<CloseIcon onClick={ () => this.props.parent.handleDrawerClose()} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
}
</header>
{
!this.state.gallery ?
<div className="desktop-contact-info__body d-flex flex-column align-items-center"> <div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img <img
className="desktop-contact-info__body--profileImage" className="desktop-contact-info__body--profileImage"
@ -107,7 +127,7 @@ export default class ChatInfo extends Component {
<h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2> <h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2>
<ul> <ul>
{user.educationalInfo.map((item, i) => ( {user.educationalInfo.map((item, i) => (
<li key={i}>{item}</li> <li key={i} style={{ fontSize: fontSize.desktop.p}}>{item}</li>
))} ))}
</ul> </ul>
</div> </div>
@ -127,50 +147,88 @@ export default class ChatInfo extends Component {
<div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center"> <div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<div> <div>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3> <h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3>
<span style={{color: alarms ? '#00CC69' : 'red'}}>{alarms ? 'روشن ': 'خاموش'}</span> <span style={{ fontSize: fontSize.desktop.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div> </div>
<AntSwitch <AntSwitch
checked={alarms} checked={alarms}
onChange={() => this.handleChange()} onChange={() => this.handleChange()}
/> />
</div> </div>
<div className="desktop-contact-info__body--options d-flex justify-content-between"> <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
<span style={{ color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</span> <h3 style={{ fontSize: fontSize.desktop.h3 }}>رسانه,فیلم,عکس</h3>
<BlockIcon style={{width : 35, height : 35, color : 'red'}} /> <KeyboardArrowLeftIcon style={{width : 30, height : 30, color : 'grey'}} />
</div> </div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</h3>
<BlockIcon style={{width : 30, height : 30, color : 'red'}} />
</div> </div>
</div> : <FileTabs />
}
</section> </section>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="contact-info d-flex flex-column"> <section className="desktop-contact-info d-flex flex-column">
<div className="chat-info__image d-flex"> <header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{
this.state.gallery ?
<KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> :
<CloseIcon onClick={ () => window.innerWidth > 1000 ? this.props.parent.handleDrawerClose() : this.props.parent.setState({ page : 'chatroom' })} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
}
</header>
{
!this.state.gallery ?
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img <img
className="desktop-contact-info__body--profileImage"
src={user.profileImages[0].src} src={user.profileImages[0].src}
onClick={() => this.setGallery("profile")} alt="عکس کاربر"
alt=""
/> />
<div <h1 style={{ fontSize: fontSize.mobile.h1 }}>{user.name}</h1>
className="chat-info__image--float d-flex" <div className="desktop-contact-info__body--bio d-flex flex-column">
onClick={() => this.props.parent.handleDrawerClose()} <h2 style={{ fontSize: fontSize.mobile.h2 }}>اطلاعات</h2>
> <p style={{ fontSize: fontSize.mobile.p }}>{user.bio}</p>
<ChatIcon style={{ color: "white", width: 46, height: 46 }} /> <h2 style={{ fontSize: fontSize.mobile.h2 }}>مشخصات تحصیلی</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i} style={{ fontSize: fontSize.mobile.p}}>{item}</li>
))}
</ul>
</div> </div>
<div className="desktop-contact-info__body--buttons d-flex justify-content-around">
{buttons.map((item, i) => (
<li style={{ backgroundColor: item.backgroundColor }} key={i}>
{item.icon}
</li>
))}
</div> </div>
<div className="chat-info__box d-flex flex-column"> <div className="desktop-contact-info__body--options d-flex justify-content-between">
<div className="chat-info__box--status d-flex flex-column"> <h3 style={{ fontSize: fontSize.mobile.h3 }}>نام کاربری</h3>
<h1>{user.name}</h1> <span style={{ fontSize: fontSize.mobile.span }}>
<p>{user.lastAct}</p> {user.username}@
</span>
</div> </div>
<div className="chat-info__box--description d-flex"> <div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<p>{user.bio}</p> <div>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>اعلانات</h3>
<span style={{ fontSize: fontSize.mobile.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div> </div>
<FileTabs onClick={this.setGallery} /> <AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div> </div>
{gallery === "profile" ? ( <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
<Gallery data={user.profileImages} onClick={this.setGallery} /> <h3 style={{ fontSize: fontSize.mobile.h3 }}>رسانه,فیلم,عکس</h3>
) : null} <KeyboardArrowLeftIcon style={{width : 30, height : 30, color : 'grey'}} />
{gallery === "media" ? <Gallery data={null} /> : null} </div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color : 'red',fontSize: fontSize.mobile.h3 }}>مسدود سازی مخاطب</h3>
<BlockIcon style={{width : 30, height : 30, color : 'red'}} />
</div> </div>
</div> : <FileTabs />
}
</section>
) : null} ) : null}
</> </>
); );

16
src/views/ChatRoom/Info/index.scss
Unescape View File

@ -93,17 +93,19 @@
width: 0px; width: 0px;
} }
&__header{ &__header{
height: 55px; min-height: 55px;
width : 100%; width : 100%;
border-bottom: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224);
position: relative;
} }
&__body{ &__body{
width: 100%; width: 100%;
height: calc(100% - 55px); height: calc(100% - 55px);
padding-top: 20px; padding-top: 20px;
overflow-x: hidden;
&--profileImage{ &--profileImage{
width: 100px; width: 140px;
height: 100px; min-height: 140px;
border-radius: 50%; border-radius: 50%;
} }
h1{ h1{
@ -114,9 +116,11 @@
&--bio{ &--bio{
width: 100%; width: 100%;
padding: 0px 10px; padding: 0px 10px;
margin-top: 10px;
h2{ h2{
font-family: numeralMedium; font-family: numeralMedium;
color: #00CC69; color: #00CC69;
margin-top: 10px;
} }
p{ p{
font-family: numeralLight; font-family: numeralLight;
@ -138,6 +142,7 @@
&--buttons{ &--buttons{
width: 80%; width: 80%;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 25px;
li{ li{
list-style: none; list-style: none;
padding: 10px; padding: 10px;
@ -148,14 +153,19 @@
width: calc(100% - 20px); width: calc(100% - 20px);
padding: 15px 0px; padding: 15px 0px;
border-bottom: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224);
margin-top: 10px;
h3{ h3{
font-family: numeralMedium; font-family: numeralMedium;
color: #6F7074; color: #6F7074;
margin: 0px;
} }
span{ span{
font-family: numeralLight; font-family: numeralLight;
color: #6F7074; color: #6F7074;
} }
&__click{
cursor: pointer;
}
} }
} }
} }

6
src/views/ChatRoom/index.js
Unescape View File

@ -53,18 +53,18 @@ export default class ChatRoom extends Component {
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="chat-room d-flex flex-column"> <div className="chat-room d-flex flex-column">
{this.state.page === "chatroom" ? (
<>
<Header <Header
page={this.state.page} page={this.state.page}
setPage={this.setPage} setPage={this.setPage}
parent={this} parent={this}
/> />
{this.state.page === "chatroom" ? (
<>
<Body id={this.props.id} setPage={this.setPage} /> <Body id={this.props.id} setPage={this.setPage} />
</> </>
) : ( ) : (
<> <>
<Info /> <Info parent={this} />
</> </>
)} )}
</div> </div>

38
src/views/Product/BreadCrumb/index.js
Unescape View File

@ -0,0 +1,38 @@
import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom';
import './index.scss';
function handleClick(event) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
};
export default function ActiveLastBreadcrumb() {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}>
محصولات
</Link>
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}>
پایه هفتم
</Link>
<Link
style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}}
to="/products/1"
onClick={handleClick}
>
زیست شناسی
</Link>
</Breadcrumbs>
);
}

5
src/views/Product/BreadCrumb/index.scss
Unescape View File

@ -0,0 +1,5 @@
a {
text-decoration: none;
font-family: numeralLight;
color: #6F7074;
}

4
src/views/Product/index.js
Unescape View File

@ -4,6 +4,7 @@ import {Link} from 'react-router-dom';
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Comment from './Comment/index'; import Comment from './Comment/index';
import Breadcrumbs from './BreadCrumb/index';
import book2 from "../../assets/images/book2.png"; import book2 from "../../assets/images/book2.png";
@ -17,7 +18,10 @@ export default class Product extends Component {
<> <>
<div className="product d-flex flex-column"> <div className="product d-flex flex-column">
<Navbar /> <Navbar />
<Breadcrumbs />
<header class="product__header d-flex mt-4">
</header>
</div> </div>
<Footer /> <Footer />
</> </>

133
src/views/Product/index.scss
Unescape View File

@ -154,137 +154,6 @@
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
&__header{ &__header{
width: 100%; width: 100%;
img{ padding: 0px 10px;
height: calc(100vh / 2.7);
}
h1{
margin-top: 10px;
font-family: numeralBold;
font-size: calc(100vw / 20);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralMedium;
font-size: calc(100vw / 28);
color: #6f7074;
}
a{
border: 0px;
font-family: numeralMedium;
font-size: calc(100vw / 25);
padding: 15px 0px;
width: 150px;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
}
&--purchase{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white !important;
}
&--sampleButton{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #efefef;
color: #6f7074 !important;
}
}
&__abstraction{
margin-top: 30px;
width: 100%;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__modules{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #baffdc2f;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
}
}
&__tips{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #074f8b;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #074f8b;
letter-spacing: -1px;
margin-bottom: 3px;
}
}
}
&__description{
width: 100%;
margin-top: 20px;
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__comments{
max-width: 100%;
margin-top: 30px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list{
width: 100vw;
overflow-x: scroll !important;
transform: translateX(10px);
}
} }
} }

Write Preview
Loading…
Cancel
Save