[sass] calendar

Viewer

copydownloadembedprintName: calendar
  1. .vanilla-calendar 
  2.         position: relative
  3.         display: flex
  4.         height: -webkit-max-content
  5.         height: max-content
  6.         width: -webkit-max-content
  7.         width: max-content
  8.         min-width: 275px
  9.         flex-direction: column
  10.         border-radius: .75rem
  11.         padding: 1rem
  12.         button:focus-visible 
  13.                 border-radius: .5rem
  14.                 outline-style: solid
  15.                 outline-width: 1px
  16.        
  17.         &.vanilla-calendar_multiple .vanilla-calendar-month, &.vanilla-calendar_multiple .vanilla-calendar-year 
  18.                 cursor: default
  19.                 &.vanilla-calendar-month_disabled, &.vanilla-calendar-year_disabled 
  20.                         pointer-events: auto
  21.                
  22.        
  23.         &.vanilla-calendar_multiple .vanilla-calendar-days 
  24.                 flex-grow: 0
  25.        
  26.         &_hidden 
  27.                 pointer-events: none
  28.                 visibility: hidden
  29.                 opacity: 0
  30.                 transition-property: all
  31.                 transition-timing-function: cubic-bezier(.4,0,.2,1)
  32.                 transition-duration: .15s
  33.        
  34.         &_to-input 
  35.                 position: absolute
  36.                 left: 0
  37.                 top: 100%
  38.                 margin-top: .25rem
  39.        
  40.         &-input-wrapper 
  41.                 position: relative
  42.        
  43.         &-controls 
  44.                 pointer-events: none
  45.                 position: absolute
  46.                 left: 0
  47.                 right: 0
  48.                 top: 0
  49.                 z-index: 20
  50.                 box-sizing: content-box
  51.                 display: flex
  52.                 align-items: center
  53.                 justify-content: space-between
  54.                 padding-left: 1rem
  55.                 padding-right: 1rem
  56.                 padding-top: 1.25rem
  57.        
  58.         &-arrow 
  59.                 pointer-events: auto
  60.                 position: relative
  61.                 display: block
  62.                 height: 1.5rem
  63.                 width: 1.5rem
  64.                 cursor: pointer
  65.                 border-width: 0px
  66.                 background-color: transparent
  67.                 &:before 
  68.                         position: absolute
  69.                         inset: 0
  70.                         content: var(--tw-content)
  71.                         content: ""
  72.                         -webkit-mask-image: url('data
  73.                         mask-image: url('data
  74.                         -webkit-mask-repeat: no-repeat
  75.                         mask-repeat: no-repeat
  76.                         -webkit-mask-position: 50% 50%
  77.                         mask-position: 50% 50%
  78.                
  79.                 &.vanilla-calendar-arrow_prev:before 
  80.                         -webkit-transform: rotateZ(90deg)
  81.                         transform: rotate(90deg)
  82.                
  83.                 &.vanilla-calendar-arrow_next:before 
  84.                         -webkit-transform: rotateZ(-90deg)
  85.                         transform: rotate(-90deg)
  86.                
  87.        
  88.         &-grid 
  89.                 display: grid
  90.                 flex-grow: 1
  91.                 grid-auto-flow: column
  92.                 gap: 1.75rem
  93.        
  94.         &-column 
  95.                 display: flex
  96.                 min-width: -webkit-min-content
  97.                 min-width: min-content
  98.                 flex-direction: column
  99.        
  100.         &-header 
  101.                 position: relative
  102.                 margin-bottom: .75rem
  103.                 display: flex
  104.                 align-items: center
  105.                 padding-left: .25rem
  106.                 padding-right: .25rem
  107.                 &__content 
  108.                         display: grid
  109.                         flex-grow: 1
  110.                         grid-auto-columns: -webkit-max-content
  111.                         grid-auto-columns: max-content
  112.                         grid-auto-flow: column
  113.                         align-items: center
  114.                         justify-content: center
  115.                         white-space: pre-wrap
  116.                         padding-left: 1rem
  117.                         padding-right: 1rem
  118.                
  119.        
  120.         &-month, &-year 
  121.                 cursor: pointer
  122.                 border-radius: .25rem
  123.                 border-width: 0px
  124.                 background-color: transparent
  125.                 padding: .25rem
  126.                 font-size: 1rem
  127.                 line-height: 1.5rem
  128.                 font-weight: 700
  129.                 &.vanilla-calendar-month_disabled, &.vanilla-calendar-year_disabled 
  130.                         pointer-events: none
  131.                
  132.        
  133.         &-months 
  134.                 display: grid
  135.                 flex-grow: 1
  136.                 grid-template-columns: repeat(4,minmax(0,1fr))
  137.                 align-items: center
  138.                 row-gap: 1rem
  139.                 -webkit-column-gap: .5rem
  140.                 column-gap: .5rem
  141.        
  142.         &-years 
  143.                 display: grid
  144.                 flex-grow: 1
  145.                 grid-template-columns: repeat(5,minmax(0,1fr))
  146.                 align-items: center
  147.                 row-gap: 1rem
  148.                 -webkit-column-gap: .5rem
  149.                 column-gap: .5rem
  150.        
  151.         &-months_selecting .vanilla-calendar-months__month, &-years_selecting .vanilla-calendar-years__year 
  152.                 cursor: pointer
  153.                 .vanilla-calendar-months__month_disabled, .vanilla-calendar-years__year_disabled 
  154.                         cursor: default
  155.                
  156.        
  157.         &-months__month, &-years__year 
  158.                 display: flex
  159.                 height: 2.5rem
  160.                 align-items: center
  161.                 justify-content: center
  162.                 word-break: break-all
  163.                 border-radius: .5rem
  164.                 border-width: 0px
  165.                 padding: .25rem
  166.                 text-align: center
  167.                 font-size: .75rem
  168.                 line-height: 1rem
  169.                 font-weight: 600
  170.                 &.vanilla-calendar-months__month_disabled, &.vanilla-calendar-years__year_disabled 
  171.                         pointer-events: none
  172.                
  173.        
  174.         &-week-numbers 
  175.                 display: flex
  176.                 flex-grow: 1
  177.                 flex-direction: column
  178.                 &__title 
  179.                         margin-bottom: .5rem
  180.                         display: flex
  181.                         align-items: center
  182.                         justify-content: center
  183.                         font-size: .75rem
  184.                         line-height: 1rem
  185.                         font-weight: 700
  186.                
  187.                 &__content 
  188.                         display: grid
  189.                         grid-auto-flow: row
  190.                         align-items: center
  191.                         justify-items: center
  192.                         row-gap: .25rem
  193.                
  194.        
  195.         &-week-number 
  196.                 display: flex
  197.                 height: 100%
  198.                 min-height: 1.875rem
  199.                 width: 100%
  200.                 min-width: 1.875rem
  201.                 cursor: pointer
  202.                 align-items: center
  203.                 justify-content: center
  204.                 font-size: .75rem
  205.                 line-height: 1rem
  206.                 font-weight: 600
  207.        
  208.         &-wrapper 
  209.                 display: flex
  210.                 flex-grow: 1
  211.        
  212.         &-content 
  213.                 display: flex
  214.                 flex-grow: 1
  215.                 flex-direction: column
  216.        
  217.         &-week 
  218.                 margin-bottom: .5rem
  219.                 display: grid
  220.                 grid-template-columns: repeat(7,1fr)
  221.                 justify-items: center
  222.                 &__day 
  223.                         display: flex
  224.                         height: 100%
  225.                         width: 100%
  226.                         min-width: 1.875rem
  227.                         align-items: center
  228.                         justify-content: center
  229.                         font-size: .75rem
  230.                         line-height: 1rem
  231.                         font-weight: 700
  232.                
  233.        
  234.         &-days 
  235.                 display: grid
  236.                 flex-grow: 1
  237.                 grid-template-columns: repeat(7,1fr)
  238.                 align-items: center
  239.                 justify-items: center
  240.                 row-gap: .25rem
  241.                 &_selecting .vanilla-calendar-day__btn 
  242.                         cursor: pointer
  243.                         &_disabled 
  244.                                 cursor: default
  245.                        
  246.                
  247.        
  248.         &-day 
  249.                 position: relative
  250.                 display: flex
  251.                 height: 100%
  252.                 width: 100%
  253.                 align-items: center
  254.                 justify-content: center
  255.                 &:focus-visible .vanilla-calendar-day__popup, &:hover .vanilla-calendar-day__popup 
  256.                         pointer-events: auto
  257.                         opacity: 1
  258.                
  259.                 &_selected-first .vanilla-calendar-day__btn_selected 
  260.                         border-top-right-radius: 0
  261.                         border-bottom-right-radius: 0
  262.                         border-top-left-radius: .5rem
  263.                         border-bottom-left-radius: .5rem
  264.                
  265.                 &_selected-last .vanilla-calendar-day__btn_selected 
  266.                         border-top-left-radius: 0
  267.                         border-bottom-left-radius: 0
  268.                         border-top-right-radius: .5rem
  269.                         border-bottom-right-radius: .5rem
  270.                
  271.                 &_selected-intermediate .vanilla-calendar-day__btn_intermediate 
  272.                         border-radius: 0
  273.                
  274.                 &__btn 
  275.                         display: flex
  276.                         height: 100%
  277.                         min-height: 1.875rem
  278.                         width: 100%
  279.                         min-width: 1.875rem
  280.                         cursor: default
  281.                         align-items: center
  282.                         justify-content: center
  283.                         border-radius: .5rem
  284.                         border-width: 0px
  285.                         font-size: .75rem
  286.                         line-height: 1rem
  287.                         font-weight: 400
  288.                         &_today 
  289.                                 font-weight: 700
  290.                        
  291.                         &_disabled 
  292.                                 pointer-events: none
  293.                        
  294.                
  295.                 &__popup 
  296.                         -webkit-transform: translateX(-50%)
  297.                         transform: translate(-50%)
  298.                         pointer-events: none
  299.                         position: absolute
  300.                         left: 50%
  301.                         top: 100%
  302.                         z-index: 20
  303.                         width: 8rem
  304.                         padding: 1rem .75rem .5rem
  305.                         font-size: .75rem
  306.                         line-height: 1rem
  307.                         font-weight: 400
  308.                         opacity: 0
  309.                         &:before 
  310.                                 content: var(--tw-content)
  311.                                 position: absolute
  312.                        
  313.                         &:after 
  314.                                 content: var(--tw-content)
  315.                                 position: absolute
  316.                        
  317.                         &:hover 
  318.                                 pointer-events: auto
  319.                                 opacity: 1
  320.                        
  321.                         &:before 
  322.                                 content: ""
  323.                                 left: 0
  324.                                 bottom: 0
  325.                                 z-index: -10
  326.                                 display: block
  327.                                 height: calc(100% - 8px)
  328.                                 width: 100%
  329.                                 border-radius: .5rem
  330.                        
  331.                         &:after 
  332.                                 content: ""
  333.                                 -webkit-transform: translateX(-50%)
  334.                                 transform: translate(-50%)
  335.                                 left: 50%
  336.                                 top: 1px
  337.                                 z-index: -10
  338.                                 display: block
  339.                                 height: 0px
  340.                                 width: 0px
  341.                                 border-left-width: 8px
  342.                                 border-right-width: 8px
  343.                                 border-top-width: 0px
  344.                                 border-bottom-width: 8px
  345.                                 border-style: solid
  346.                                 border-left-color: transparent
  347.                                 border-right-color: transparent
  348.                                 border-top-color: transparent
  349.                        
  350.                
  351.        
  352.         &-time 
  353.                 margin-top: .75rem
  354.                 display: grid
  355.                 grid-template-columns: auto 1fr
  356.                 gap: .75rem
  357.                 border-top-width: 1px
  358.                 border-bottom-width: 0px
  359.                 border-left-width: 0px
  360.                 border-right-width: 0px
  361.                 border-style: solid
  362.                 padding-top: .75rem
  363.                 &__content 
  364.                         display: grid
  365.                         grid-auto-flow: column
  366.                         align-items: center
  367.                
  368.                 &__hours 
  369.                         position: relative
  370.                         margin-right: .35rem
  371.                         width: 1.75rem
  372.                         &:after 
  373.                                 position: absolute
  374.                                 right: -5px
  375.                                 top: 50%
  376.                                 margin-top: calc(-50% 
  377.                                 display: block
  378.                                 -tw-content: "
  379.                                 content: var(--tw-content)
  380.                        
  381.                
  382.                 &__minutes 
  383.                         width: 1.75rem
  384.                
  385.                 &__hours input, &__minutes input 
  386.                         position: relative
  387.                         margin: 0
  388.                         box-sizing: border-box
  389.                         display: block
  390.                         width: 100%
  391.                         border-radius: .25rem
  392.                         border-width: 0px
  393.                         padding: .125rem
  394.                         text-align: center
  395.                         font-size: 1.125rem
  396.                         font-weight: 600
  397.                         line-height: 1.125rem
  398.                         &:focus-visible 
  399.                                 outline-style: solid
  400.                                 outline-width: 1px
  401.                        
  402.                         &:disabled 
  403.                                 cursor: default
  404.                        
  405.                         &:hover:disabled 
  406.                                 background-color: transparent
  407.                        
  408.                
  409.                 &__keeping 
  410.                         margin-left: 1px
  411.                         margin-top: .25rem
  412.                         width: 22px
  413.                         cursor: pointer
  414.                         border-radius: .25rem
  415.                         border-width: 0px
  416.                         background-color: transparent
  417.                         padding: 0
  418.                         font-size: 11px
  419.                         &:focus-visible 
  420.                                 outline-style: solid
  421.                                 outline-width: 1px
  422.                        
  423.                         &:disabled 
  424.                                 cursor: default
  425.                        
  426.                         &:hover:disabled 
  427.                                 background-color: transparent
  428.                        
  429.                
  430.                 &__ranges 
  431.                         display: grid
  432.                         grid-auto-flow: row
  433.                
  434.                 &__range 
  435.                         position: relative
  436.                         z-index: 10
  437.                         font-size: 0
  438.                         &:before 
  439.                                 content: var(--tw-content)
  440.                                 left: 0
  441.                        
  442.                         &:after 
  443.                                 content: var(--tw-content)
  444.                                 right: 0
  445.                        
  446.                         &:before, &:after 
  447.                                 content: ""
  448.                                 -webkit-transform: translateY(-50%)
  449.                                 transform: translateY(-50%)
  450.                                 pointer-events: none
  451.                                 position: absolute
  452.                                 top: 50%
  453.                                 z-index: 10
  454.                                 height: .5rem
  455.                                 width: 1px
  456.                        
  457.                         input 
  458.                                 position: relative
  459.                                 margin: 0
  460.                                 height: 1.25rem
  461.                                 width: 100%
  462.                                 cursor: pointer
  463.                                 -webkit-appearance: none
  464.                                 appearance: none
  465.                                 outline-width: 0px
  466.                                 &::-webkit-slider-thumb 
  467.                                         position: relative
  468.                                         z-index: 20
  469.                                         margin-top: -.5rem
  470.                                         box-sizing: border-box
  471.                                         height: 1rem
  472.                                         width: .75rem
  473.                                         cursor: pointer
  474.                                         -webkit-appearance: none
  475.                                         appearance: none
  476.                                         border-radius: .25rem
  477.                                         border-width: 1px
  478.                                         border-style: solid
  479.                                         -tw-shadow: 0 0 #0000
  480.                                         -tw-shadow-colored: 0 0 #0000
  481.                                         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
  482.                                
  483.                                 &::-moz-range-thumb 
  484.                                         position: relative
  485.                                         z-index: 20
  486.                                         box-sizing: border-box
  487.                                         height: 1rem
  488.                                         width: .75rem
  489.                                         cursor: pointer
  490.                                         border-radius: .25rem
  491.                                         border-width: 1px
  492.                                         border-style: solid
  493.                                         -tw-shadow: 0 0 #0000
  494.                                         -tw-shadow-colored: 0 0 #0000
  495.                                         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
  496.                                
  497.                                 &::-webkit-slider-runnable-track 
  498.                                         margin-top: 1px
  499.                                         box-sizing: border-box
  500.                                         height: 1px
  501.                                         width: 100%
  502.                                         cursor: pointer
  503.                                         -tw-shadow: 0 0 #0000
  504.                                         -tw-shadow-colored: 0 0 #0000
  505.                                         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
  506.                                
  507.                                 &::-moz-range-track 
  508.                                         margin-top: 1px
  509.                                         box-sizing: border-box
  510.                                         height: 1px
  511.                                         width: 100%
  512.                                         cursor: pointer
  513.                                         -tw-shadow: 0 0 #0000
  514.                                         -tw-shadow-colored: 0 0 #0000
  515.                                         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
  516.                                
  517.                        
  518.                
  519.        
  520.  
  521.  

Editor

You can edit this paste and save as new:


File Description
  • calendar
  • Paste Code
  • 06 Jun-2023
  • 11.02 Kb
You can Share it: