Reza_ashrafi
/
tailwind-shop-design-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza created comments comp

Browse Source
master
Reza_ashrafi 3 years ago
parent 082d3bf253 dd78851e61
commit 37b6c90dca
7 changed files with 17438 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17317
      package-lock.json
  2. 78
      src/components/Calendar/index.css
  3. 4
      src/components/Calendar/index.js
  4. 21
      src/components/RangeDatePicker/index.js
  5. 2
      src/components/SidebarCategoryHover/list.js
  6. 19
      src/components/SimpleDatePicker/index.js
  7. 49
      src/redux/data.js

17317
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

78
src/components/Calender/index.css → src/components/Calendar/index.css
Unescape View File

@ -6,11 +6,17 @@
.DatePicker__input {
background: #fff;
border: 1px solid #ddd;
padding: 0.4em 0.8em;
font-family: inherit;
border: 1px solid rgba(0, 0, 0, 0.4);
padding: 0.6em 1.2em;
font-family:'iranSans';
text-align: center;
font-size: 12px;
border-radius: 7px;
}
.DatePicker__input:focus{
outline:1px solid #06BACE;
color: #06BACE;
}
.DatePicker__input.-rtl {
@ -20,6 +26,9 @@
.DatePicker__input::placeholder {
color: #979797;
}
.DatePicker__input:focus::placeholder{
color: #06BACE;
}
.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow {
top: auto;
@ -72,6 +81,7 @@
--cl-color-black: #444444;
--cl-color-disabled: #d4d4d4;
--cl-color-error: #ff2929;
font-family:'iranSans';
font-size: 10px;
background: rgba(245, 245, 245, 0.53);
border:1px solid #DBDBDB;
@ -85,7 +95,7 @@
width: 40em;
z-index: 10;
max-width: 90vw;
min-height: 36.7em;
min-height: 38.7em;
}
.DatePicker .Calendar,
@ -129,7 +139,7 @@
z-index: 1;
opacity: 1;
transition: 0.2s;
background-color: royalblue;
background-color: #06BACE;
}
.Calendar__monthArrowWrapper:focus {
@ -144,18 +154,18 @@
}
.Calendar__monthArrowWrapper.-left {
transform: rotate(90deg);
transform: rotate(180deg);
}
.Calendar.-rtl .Calendar__monthArrowWrapper.-left {
transform: rotate(-90deg);
transform: rotate(-180deg);
}
.Calendar__monthArrowWrapper.-right {
transform: rotate(-90deg);
transform: rotate(-0deg);
}
.Calendar.-rtl .Calendar__monthArrowWrapper.-right {
transform: rotate(90deg);
transform: rotate(0deg);
}
.Calendar__monthArrowWrapper:active .Calendar__monthArrow {
@ -163,15 +173,18 @@
}
.Calendar__monthArrow {
border-radius: 50%;
border-radius: 7px;
padding: 12px;
transition: var(--animation-duration) transform;
pointer-events: none;
background-repeat: no-repeat;
display: block;
width: 1.7em;
height: 1.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-size: 100% 100%;
width: 0.7em;
height: 0.7em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E"); background-size: 100% 100%;
background-color: #06BACE;
background-size: 10px;
background-position: center;
}
.Calendar__monthYearContainer {
@ -180,7 +193,7 @@
}
.Calendar__monthYear {
font-size: 1.6em;
font-size: 2em;
font-weight: 500;
display: flex;
align-items: center;
@ -457,8 +470,16 @@
.Calendar__weekDay {
display: block;
width: calc(100% / 7);
text-align: center;
text-decoration: none;
border: 0px;
color: #06BACE;
margin:0.2em;
white-space: nowrap;
}
.Calendar__weekDay[title]{
text-decoration: none;
}
.Calendar__sectionWrapper {
@ -521,7 +542,7 @@
text-align: center;
padding: calc(0.25em - 1px);
font-size: 1.6em;
border-radius: 11px;
border-radius: 7px;
transition: 0.2s;
border: 1px solid transparent;
margin:0.2em;
@ -532,6 +553,7 @@
cursor: pointer;
background-color: #F3F3F3;
color:#06BACE;
}
.Calendar__day:focus {
@ -559,36 +581,38 @@
.Calendar__day.-selected,
.Calendar__day.-selectedStart,
.Calendar__day.-selectedEnd {
background: #06BACE;
background: #006C94;
color: #fff;
}
.Calendar__day.-ltr.-selectedStart {
border-radius: 0;
border-top-left-radius: 100em;
border-bottom-left-radius: 100em;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.Calendar__day.-rtl.-selectedStart {
border-radius: 0;
border-top-right-radius: 100em;
border-bottom-right-radius: 100em;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.Calendar__day.-selectedBetween {
background: var(--cl-color-primary-light);
color: var(--cl-color-primary);
background:rgba(0, 108, 148, 0.07);
border-radius: 0;
}
.Calendar__day.-ltr.-selectedEnd {
border-top-right-radius: 100em;
border-bottom-right-radius: 100em;
border-radius: 0;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.Calendar__day.-rtl.-selectedEnd {
border-top-left-radius: 100em;
border-bottom-left-radius: 100em;
border-radius: 0;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) {

4
src/components/Calender/index.js → src/components/Calendar/index.js
Unescape View File

@ -4,7 +4,7 @@ import {Calendar, utils} from "react-modern-calendar-datepicker";
import './index.css';
const Calender = () =>{
const SimpleCalendar = () =>{
const [selectedDay, setSelectedDay] = useState(null);
return(
<div className="flex items-center justify-center w-full my-2">
@ -20,4 +20,4 @@ const Calender = () =>{
};
export default Calender;
export default SimpleCalendar;

21
src/components/RangeDatePicker/index.js
Unescape View File

@ -0,0 +1,21 @@
import React, { useState } from "react";
import "../Calendar/index.css";
import DatePicker from "react-modern-calendar-datepicker";
const RangeDatePicker = () => {
const [selectedDayRange, setSelectedDayRange] = useState({
from: null,
to: null
});
return (
<DatePicker
value={selectedDayRange}
onChange={setSelectedDayRange}
inputPlaceholder="یک بازه زمانی انتخاب کنید"
shouldHighlightWeekends
locale='fa'
/>
);
};
export default RangeDatePicker;

2
src/components/SidebarCategoryHover/list.js
Unescape View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import _, { set } from "lodash";
import Col from "./col";
import Col from "./Col";
export default function List({ activeItem, item, setActiveItem, colLength }) {
const [cols, setCols] = useState(null);

19
src/components/SimpleDatePicker/index.js
Unescape View File

@ -0,0 +1,19 @@
import React, { useState } from 'react';
import DatePicker from "react-modern-calendar-datepicker";
import '../Calendar/index.css';
const SimpleDatePicker = () =>{
const [selectedDay, setSelectedDay] = useState(null);
return(
<div className='flex items-center justify-center w-full my-2'>
<DatePicker
value={selectedDay}
onChange={setSelectedDay}
inputPlaceholder="انتخاب تاریخ"
shouldHighlightWeekends
locale='fa'
/>
</div>
)
}
export default SimpleDatePicker;

49
src/redux/data.js
Unescape View File

@ -21,8 +21,10 @@ import CircularProgressbar from "../components/CircularProgressbar";
import Stepper from "../components/Stepper";
import Product from "../components/Product";
import Navbar from "../components/Navbar";
import Calender from "../components/Calender";
import SimpleCalendar from '../components/Calendar';
import Footer from "../components/Footer";
import SimpleDatePicker from "../components/SimpleDatePicker";
import RangeDatePicker from '../components/RangeDatePicker';
const components = [
{
@ -445,14 +447,14 @@ const components = [
},
},
{
name : "Calender",
name : "SimpleCalendar",
author: "Keshavarzi",
props : [
],
content : {
name : "Calender",
component : <Calender />,
name : "SimpleCalendar",
component : <SimpleCalendar />,
code : null,
}
},
@ -477,25 +479,26 @@ const components = [
},
},
{
name: "SimpleDatePicker",
author: "Keshavarzi",
props: [],
content: {
name: "SimpleDatePicker",
component: <SimpleDatePicker />,
code: null,
},
},
{
name: "RangeDatePicker",
author: "Keshavarzi",
props: [],
content: {
name: "RangeDatePicker",
component: <div className="flex items-center justify-center w-full my-2"><RangeDatePicker /></div>,
code: null,
},
},
];
export default components;

Write Preview
Loading…
Cancel
Save