jb-calendar
Version:
jalali calendar interface web component
322 lines (314 loc) • 11.1 kB
CSS
:host{
display: block;
width: max-content;
height: max-content;
}
.jb-calendar-web-component{
width: 272px;
height: auto;
color:var(--color);
font-size: 16px;
.navigator-section{
height: 32px;
width: 100%;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.arrow-btn{
background-color: var(--arrow-button-bgcolor);
width: 32px;
height: 32px;
border-radius: var(--arrow-button-border-radius);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
/*we cna't use:dir() because it only catch dir attribute and not css dir*/
&.--css-ltr {
svg{
transform: scaleX(-1);
}
}
svg{
fill:var(--arrow-fill-color);
}
}
.navigator-title{
user-select: none;
.month{
display: none;
&.--show{
display: inline;
&:hover{
font-weight: 600;
}
}
}
.year{
display: none;
&.--show{
display: inline;
&:hover{
font-weight: 600;
}
}
}
.year-range{
display: none;
&.--show{
display: inline;
}
}
}
}
.calendar-section{
height: auto;
width: 100%;
position: relative;
.day-selection-section{
display: none;
&.--show{
display:block;
}
.week-day-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 4px;
height: 32px;
width: 100%;
margin-bottom: 16px;
.week-day{
height: 32px;
text-align: center;
font-weight: 800;
font-variation-settings: "wght" 800;;
font-size: 1em;
user-select: none;
}
}
.month-day-container{
position: relative;
width: 100%;
height: auto;
overflow-x: hidden;
.month-day-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: 1fr;
gap: 4px 4px;
height: auto;
width: 100%;
user-select: none;
&.current-month-day-wrapper{
position: static;
}
&.prev-month-day-wrapper{
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
overflow: hidden;
&.--css-ltr{
left: -100%;
}
}
&.next-month-day-wrapper{
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
overflow: hidden;
&.--css-ltr{
left: 100%;
}
}
.day-wrapper{
position: relative;
height: 37px;
width: 32px;
user-select: none;
cursor: pointer;
&.--disable{
cursor: not-allowed;
.day-number-wrapper{
color:var(--day-text-color-disabled);
}
}
&.--today{
.day-number-wrapper{
color:var(--day-text-color-today);;
}
.status-point{
display: block;
}
}
&.--selected{
.day-number-wrapper{
color: var(--day-color-selected);
background-color: var(--day-bgcolor-selected);
}
&:hover{
.day-number-wrapper{
color: var(--day-color-selected-hover);
background-color: var(--day-bgcolor-selected-hover);
}
}
}
&:hover{
.day-number-wrapper{
background-color: var(--day-bgcolor-hover) ;
color: var(--day-color-hover);
}
}
.day-number-wrapper{
width: 32px;
height: 32px;
border-radius: var( --day-button-border-radius);
color:var(--day-text-color);
display: flex;
align-items: center;
justify-content: center;
.day-number{
display: flex;
align-items: center;
justify-content: center;
}
}
.status-point{
position: absolute;
width: 10px;
height: 10px;
background-color: var(--status-point-bgcolor-today) ;
border-radius: 6px;
bottom: 0px;
left: calc(50% - 5px);
display: none;
z-index: 1;
border:1px solid var(--status-point-border-color);
box-sizing: border-box;
}
}
}
}
}
.month-selection-section{
display: none;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap:12px 8px;
&.--show{
display: grid;
}
.month-wrapper{
width: 100%;
height: 32px;
cursor: pointer;
border-radius: var(--month-button-border-radius);
user-select: none;
&:hover{
background-color: var(--month-bgcolor-hover);
}
.month-name{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&:hover{
color: var(--month-color-hover);
}
}
}
}
.year-selection-section{
display: none;
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
&.--show{
display: block;
}
.years-wrapper{
display: grid;
width: 100%;
height: 100%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap:12px 8px;
user-select: none;
&.prev-years-wrapper{
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
overflow: hidden;
&.--css-ltr{
left: -100%;
}
}
&.current-years-wrapper{
position: static;
}
&.next-years-wrapper{
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
overflow: hidden;
&.--css-ltr{
left: 100%;
}
}
.year-wrapper{
width: 100%;
height: 32px;
cursor: pointer;
border-radius: var(--year-button-border-radius);
user-select: none;
&:hover{
background-color: var(--year-bgcolor-hover);
}
.year-number{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&:hover{
color: var(--year-color-hover)
}
}
}
}
}
.swipe-up-symbol{
display: none;
position: absolute;
bottom: 0px;
opacity: 0;
transition: all 0.1s 0s ease;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
&.--show{
display: flex;
}
.swipe-up-text{
font-size: 0.8rem;
}
.swipe-up-icon{
fill: var(--swipe-up-icon-color);
}
}
}
}