관리-도구

편집 파일: control.css.map

{"mappings":"AAGE,8CAEE,sBAAA,CADA,YAAA,CAEA,6BCFJ,CDII,mEACE,SCFN,CDKI,kEACE,gBAAA,CACA,SCHN,CDMI,yEACE,UCJN,CDMM,gFACE,OCJR,CDOM,+EACE,UCLR,CDaI,yEACE,wBAAA,CACA,eCVN,CDgBM,+JACE,MCXR,CDeI,mHAGE,WAAA,CACA,gBAAA,CAFA,iBCXN,CDgBI,yDAEE,aEpDU,CFmDV,YCbN,CDiBI,0DAEE,aEjDmB,CFgDnB,oBCdN,CDoBA,2BAGE,cAAA,CADA,oBAAA,CADA,iBCfF,CDmBE,mEAEE,qBAAA,CACA,UAAA,CAEA,QAAA,CACA,SAAA,CAFA,iBAAA,CAGA,OAAA,CACA,+BAAA,CACA,0EClBJ,CDsBE,kCAIE,wBE1EsB,CF2EtB,wBAAA,CACA,iBAAA,CAJA,WAAA,CADA,UChBJ,CDwBE,iCAGE,qBEhFgB,CFmFhB,+BAAA,CAFA,iBAAA,CAFA,WAAA,CADA,UClBJ,CD2BA,2BACE,SCxBF,CDgCM,oEACE,wBE7GQ,CF8GR,kCC9BR,CDiCM,yEACE,oBC/BR,CDkCM,0EACE,YChCR","sources":["src/control.scss","%3Cinput%20css%20kvIa1f%3E","src/scss/_vars.scss"],"sourcesContent":["@import \"scss/vars\";\n\n.customize-control-kirki-toggle {\n .kirki-toggle {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n\n .kirki-control-label {\n width: 80%;\n }\n\n .kirki-control-form {\n text-align: right;\n width: 20%;\n }\n\n .kirki-toggle-switch-label {\n width: 100%;\n\n &:before {\n right: 0;\n }\n\n &:after {\n right: 18px;\n }\n }\n }\n}\n\n.customize-control-kirki-switch {\n .kirki-switch {\n .kirki-toggle-switch-label {\n padding: 10px 0 12px 44px;\n text-align: left;\n\n &:before {\n left: 0;\n }\n\n &:after {\n left: 0;\n }\n }\n\n .toggle-on,\n .toggle-off {\n position: relative;\n bottom: -2px;\n padding-left: 5px;\n }\n\n .toggle-on {\n display: none;\n color: $color-wp-blue;\n }\n\n .toggle-off {\n display: inline-block;\n color: $color-dark-silver-gray;\n }\n }\n}\n\n.kirki-toggle-switch-label {\n position: relative;\n display: inline-block;\n cursor: pointer;\n\n &:before,\n &:after {\n box-sizing: border-box;\n content: \"\";\n position: absolute;\n margin: 0;\n outline: 0;\n top: 50%;\n transform: translate3d(0, -50%, 0);\n transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),\n background-color 150ms ease;\n }\n\n &:before {\n width: 37px;\n height: 14px;\n // background-color: $color-silver-gray;\n background-color: $color-light-silver-gray;\n border: 1px solid $color-light-silver-gray;\n border-radius: 8px;\n }\n\n &:after {\n width: 22px;\n height: 22px;\n background-color: $color-medium-gray;\n border-radius: 50%;\n // box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);\n border: 1px solid rgba(0, 0, 0, 0.1);\n }\n}\n\n.kirki-toggle-switch-input {\n opacity: 0;\n\n &:checked {\n + .kirki-toggle-switch-label {\n &::before {\n // background-color: desaturate(lighten($color-wp-blue, 40%), 40%);\n }\n\n &::after {\n background-color: $color-wp-blue;\n transform: translate3d(100%, -50%, 0);\n }\n\n .toggle-on {\n display: inline-block;\n }\n\n .toggle-off {\n display: none;\n }\n }\n }\n}\n",".customize-control-kirki-toggle .kirki-toggle {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n}\n.customize-control-kirki-toggle .kirki-toggle .kirki-control-label {\n width: 80%;\n}\n.customize-control-kirki-toggle .kirki-toggle .kirki-control-form {\n text-align: right;\n width: 20%;\n}\n.customize-control-kirki-toggle .kirki-toggle .kirki-toggle-switch-label {\n width: 100%;\n}\n.customize-control-kirki-toggle .kirki-toggle .kirki-toggle-switch-label:before {\n right: 0;\n}\n.customize-control-kirki-toggle .kirki-toggle .kirki-toggle-switch-label:after {\n right: 18px;\n}\n\n.customize-control-kirki-switch .kirki-switch .kirki-toggle-switch-label {\n padding: 10px 0 12px 44px;\n text-align: left;\n}\n.customize-control-kirki-switch .kirki-switch .kirki-toggle-switch-label:before {\n left: 0;\n}\n.customize-control-kirki-switch .kirki-switch .kirki-toggle-switch-label:after {\n left: 0;\n}\n.customize-control-kirki-switch .kirki-switch .toggle-on,\n.customize-control-kirki-switch .kirki-switch .toggle-off {\n position: relative;\n bottom: -2px;\n padding-left: 5px;\n}\n.customize-control-kirki-switch .kirki-switch .toggle-on {\n display: none;\n color: #0073aa;\n}\n.customize-control-kirki-switch .kirki-switch .toggle-off {\n display: inline-block;\n color: #82878c;\n}\n\n.kirki-toggle-switch-label {\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n.kirki-toggle-switch-label:before, .kirki-toggle-switch-label:after {\n box-sizing: border-box;\n content: \"\";\n position: absolute;\n margin: 0;\n outline: 0;\n top: 50%;\n transform: translate3d(0, -50%, 0);\n transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background-color 150ms ease;\n}\n.kirki-toggle-switch-label:before {\n width: 37px;\n height: 14px;\n background-color: #b4b9be;\n border: 1px solid #b4b9be;\n border-radius: 8px;\n}\n.kirki-toggle-switch-label:after {\n width: 22px;\n height: 22px;\n background-color: #999;\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.kirki-toggle-switch-input {\n opacity: 0;\n}\n.kirki-toggle-switch-input:checked + .kirki-toggle-switch-label::after {\n background-color: #0073aa;\n transform: translate3d(100%, -50%, 0);\n}\n.kirki-toggle-switch-input:checked + .kirki-toggle-switch-label .toggle-on {\n display: inline-block;\n}\n.kirki-toggle-switch-input:checked + .kirki-toggle-switch-label .toggle-off {\n display: none;\n}\n/*# sourceMappingURL=control.css.map */\n","// See https://make.wordpress.org/design/handbook/design-guide/foundations/colors/\n// Colors copied from https://codepen.io/hugobaeta/pen/RNOzoV\n\n$color-wp-blue: #0073aa;\n$color-medium-blue: #00a0d2;\n$color-light-blue: #00b9eb;\n\n$color-ultra-dark-gray: #191e23;\n$color-dark-gray: #23282d;\n$color-base-gray: #32373c;\n$color-dark-medium-gray: lighten($color-base-gray,15%);\n$color-dark-silver-gray: #82878c;\n$color-silver-gray: #a0a5aa;\n$color-light-silver-gray: #b4b9be;\n// $color-medium-gray: mix($color-base-gray,$color-dark-silver-gray,20%);\n$color-medium-gray: #999;\n\n$color-gray-900: $color-ultra-dark-gray;\n$color-gray-800: $color-dark-gray;\n$color-gray-700: $color-base-gray;\n$color-gray-600: lighten($color-base-gray,6%);\n$color-gray-500: lighten($color-base-gray,15%);\n$color-gray-400: lighten($color-base-gray,20%);\n$color-gray-300: lighten($color-base-gray,25%);\n$color-gray-200: lighten($color-base-gray,32%);\n$color-gray-100: lighten($color-base-gray,38%);\n\n$color--gray-light-900: lighten($color-base-gray,45%);\n$color--gray-light-800: lighten($color-base-gray,52%);\n$color--gray-light-700: lighten($color-base-gray,60%);\n$color--gray-light-600: lighten($color-base-gray,64%);\n$color--gray-light-500: lighten($color-base-gray,68%);\n$color--gray-light-400: lighten($color-base-gray,70%);\n$color--gray-light-300: lighten($color-base-gray,72%);\n$color--gray-light-200: lighten($color-base-gray,74%);\n$color--gray-light-100: lighten($color-base-gray,77%);\n\n$color-accent-red: #dc3232;\n$color-accent-fire-orange: #d54e21;\n$color-accent-orange: #f56e28;\n$color-accent-yellow: #ffb900;\n$color-accent-green: #46b450; //old #64b450;\n$color-accent-blue: $color-medium-blue;\n$color-accent-purple: #826eb4;\n\n\n//Tints and Tones and Shades - Oh My!\n\n$color-accent-red-shade30: shade($color-accent-red,30%);\n$color-accent-red-shade20: shade($color-accent-red,20%);\n$color-accent-red-shade10: shade($color-accent-red,10%);\n$color-accent-red-tint20: tint($color-accent-red,20%);\n$color-accent-red-tint40: tint($color-accent-red,40%);\n$color-accent-red-tint60: tint($color-accent-red,60%);\n$color-accent-red-tint90: tint($color-accent-red,90%);\n\n$color-accent-fire-orange-shade10: shade($color-accent-fire-orange,10%);\n$color-accent-fire-orange-shade5: shade($color-accent-fire-orange,5%);\n$color-accent-orange-tint20: tint($color-accent-orange,20%);\n$color-accent-orange-tint40: tint($color-accent-orange,40%);\n$color-accent-orange-tint60: tint($color-accent-orange,60%);\n$color-accent-orange-tint90: tint($color-accent-orange,90%);\n\n$color-accent-yellow-tonefire40: mix($color-accent-fire-orange,$color-accent-yellow,40%);\n$color-accent-yellow-tonefire20: mix($color-accent-fire-orange,$color-accent-yellow,20%);\n$color-accent-yellow-tint20: tint($color-accent-yellow,20%);\n$color-accent-yellow-tint40: tint($color-accent-yellow,40%);\n$color-accent-yellow-tint60: tint($color-accent-yellow,60%);\n$color-accent-yellow-tint90: tint($color-accent-yellow,90%);\n\n$color-accent-green-toneblue5shade25: shade(mix($color-wp-blue, $color-accent-green,5%),25%);\n$color-accent-green-toneblue5shade15: shade(mix($color-wp-blue, $color-accent-green,5%),15%);\n$color-accent-green-tint20: tint($color-accent-green,20%);\n$color-accent-green-tint40: tint($color-accent-green,40%);\n$color-accent-green-tint60: tint($color-accent-green,60%);\n$color-accent-green-tint70: tint($color-accent-green,70%);\n$color-accent-green-tint90: tint($color-accent-green,90%);\n\n$color-accent-wp-blue-shade10: shade($color-wp-blue,10%);\n$color-accent-blue-toneblue80: mix($color-wp-blue,$color-accent-blue,80%);\n$color-accent-blue-toneblue60: mix($color-wp-blue,$color-accent-blue,60%);\n$color-accent-blue-toneblue40: mix($color-wp-blue,$color-accent-blue,40%);\n$color-accent-blue-tint20: tint($color-accent-blue,20%);\n$color-accent-blue-tint40: tint($color-accent-blue,40%);\n$color-accent-blue-tint60: tint($color-accent-blue,60%);\n$color-accent-blue-tint75: tint($color-accent-blue,75%);\n$color-accent-blue-tint90: tint($color-accent-blue,90%);\n\n$color-accent-purple-shade40: shade($color-accent-purple,40%);\n$color-accent-purple-shade20: shade($color-accent-purple,20%);\n$color-accent-purple-tint20: tint($color-accent-purple,20%);\n$color-accent-purple-tint40: tint($color-accent-purple,40%);\n$color-accent-purple-tint60: tint($color-accent-purple,60%);\n$color-accent-purple-tint90: tint($color-accent-purple,90%);\n\n//Text Colors\n$textcolor-dark: rgba($color-base-gray,.8);\n$textcolor-dark-mid: rgba($color-base-gray,.5);\n$textcolor-light: rgba(#fff,.8);\n$textcolor-light-mid: rgba(#fff,.5);\n"],"names":[],"version":3,"file":"control.css.map"}