From 8c976782e52496a0951d9fc41bd238e1293bd8cc Mon Sep 17 00:00:00 2001 From: hisato-kawaji Date: Fri, 14 May 2021 15:11:18 +0900 Subject: [PATCH] changed the path of index.css --- example/pages/_app.js | 2 +- example/pages/index.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 example/pages/index.css diff --git a/example/pages/_app.js b/example/pages/_app.js index 32ae4cd..4f71b06 100644 --- a/example/pages/_app.js +++ b/example/pages/_app.js @@ -1,4 +1,4 @@ -import 'react-dat-gui/dist/index.css'; +import './index.css'; function MyApp({ Component, pageProps }) { return ; diff --git a/example/pages/index.css b/example/pages/index.css new file mode 100644 index 0000000..4fbc399 --- /dev/null +++ b/example/pages/index.css @@ -0,0 +1 @@ +.react-dat-gui{position:fixed;right:16px;top:0;width:280px;font-size:12px;font-family:Lucida Grande,sans-serif;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.react-dat-gui *,.react-dat-gui :after,.react-dat-gui :before{box-sizing:inherit}.react-dat-gui .dg{margin:0;padding:0;color:#eee;overflow:hidden}.react-dat-gui .dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.react-dat-gui .dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.react-dat-gui .dg.main::-webkit-scrollbar-corner{height:0;display:none}.react-dat-gui .dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.react-dat-gui .cr{display:block;background-color:#1a1a1a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-dat-gui .cr:not(:last-child){border-bottom:1px solid #272727}.react-dat-gui .cr label{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:1px 2px 1px 8px}.react-dat-gui .cr .label-text{width:40%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-dat-gui .cr input[type=number],.react-dat-gui .cr input[type=text]{background:#303030;border:3px solid #1a1a1a;border-radius:0;margin:0;outline:none;font-size:inherit}.react-dat-gui .cr input[type=number]:hover,.react-dat-gui .cr input[type=text]:hover{background:#3c3c3c}.react-dat-gui .cr input[type=number]:focus,.react-dat-gui .cr input[type=text]:focus{background:#494949;color:#fff}.react-dat-gui .cr input[type=number]::-ms-clear,.react-dat-gui .cr input[type=text]::-ms-clear{display:none}.react-dat-gui .cr.boolean{position:relative;border-left:5px solid #806787}.react-dat-gui .cr.boolean label{cursor:pointer}.react-dat-gui .cr.boolean .label-text{display:block;padding:5px 0}.react-dat-gui .cr.boolean .checkbox-container{width:100%}.react-dat-gui .cr.boolean input[type=checkbox]{margin:0;vertical-align:middle}.react-dat-gui .cr.button{border-left:5px solid #e61d5f}.react-dat-gui .cr.button:hover{background:#111}.react-dat-gui .cr.button .label-text{display:block;width:100%;padding:6px 2px 6px 8px;cursor:pointer}.react-dat-gui li.folder{display:block;padding:0}.react-dat-gui li.folder .title{font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;cursor:pointer;padding:5px 5px 5px 16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 48% no-repeat}.react-dat-gui li.folder ul{margin-left:4px;width:calc(100% - 4px)}.react-dat-gui li.folder.closed .title{background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==) 6px 48% no-repeat}.react-dat-gui li.folder.closed ul{display:none}.react-dat-gui .cr.number{border-left:5px solid #2fa1d6}.react-dat-gui .cr.number input[type=number],.react-dat-gui .cr.number input[type=text]{color:#2fa1d6;height:25px}.react-dat-gui .cr.number .slider{display:block;position:relative;border:3px solid #1a1a1a;border-right-width:1px;background-color:#303030;background-image:linear-gradient(90deg,#2fa1d6,#2fa1d6);background-size:0 100%;background-repeat:no-repeat;cursor:ew-resize;height:25px}.react-dat-gui .cr.string{border-left:5px solid #1ed36f}.react-dat-gui .cr.string input[type=text]{color:#1ed36f;padding:2px 5px;width:100%}.react-dat-gui .cr.select{border-left:5px solid #f4d450}.react-dat-gui .cr.select label{padding:6px 2px 6px 8px}.react-dat-gui .cr.color{border-left:5px solid #1a1a1a}.react-dat-gui .cr.color .swatch{text-align:center;font-weight:700;color:#fff;text-shadow:rgba(0,0,0,.7) 0 1px 1px;padding:2px 5px;border:3px solid #1a1a1a;cursor:pointer}.react-dat-gui .cr.color .popover{position:absolute;z-index:2;right:5px}.react-dat-gui .cr.color .cover{position:fixed;top:0;right:0;bottom:0;left:0}.react-dat-gui .cr.color .picker{background:#fff;box-shadow:0 0 2px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.3);box-sizing:initial;width:auto;font-family:Menlo,sans-serif;margin-top:-3px}.react-dat-gui .cr.color .picker .body{padding:0}.react-dat-gui .cr.color .picker .body .controls{display:flex}.react-dat-gui .cr.color .picker .body .controls .toggles{flex:1}.react-dat-gui .cr.color .picker .body .controls .toggles .hue-wrap{height:10px;position:relative}.react-dat-gui .cr.color .picker .saturation-wrap{width:100%;padding-bottom:55%;position:relative;overflow:hidden}.react-dat-gui .cr.color .fields-wrap{display:flex}.react-dat-gui .cr.color .fields-wrap .fields{flex:1;display:flex;margin-left:-6px}.react-dat-gui .cr.color .fields-wrap .fields .field{padding-left:6px;width:100%}.react-dat-gui .cr.color .fields-wrap .fields .field input{font-size:11px;color:#333;border-radius:2px;border:none;box-shadow:inset 0 0 0 1px #dadada;height:21px;text-align:center}.react-dat-gui .cr.color .fields-wrap .fields .field input:focus{outline:none}.react-dat-gui .cr.color .fields-wrap .fields .field label{text-transform:uppercase;font-size:11px;line-height:11px;color:#969696;text-align:center;display:block;margin-top:12px}.react-dat-gui .cr.color .pointer{width:12px;height:12px;border-radius:6px;transform:translate(-6px,-1px);background-color:#f8f8f8;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);position:absolute;z-index:3}.react-dat-gui .cr.color .pointer-circle{width:12px;height:12px;border-radius:6px;box-shadow:inset 0 0 0 1px #fff;transform:translate(-6px,-6px)}.react-dat-gui .cr.presets{border-left:5px solid #dad5cb}.react-dat-gui .cr.presets label{padding:6px 2px 6px 8px}.react-dat-gui .cr.presets label select{width:100%} \ No newline at end of file