From c05b4403fb01eba8564d9c3d11930a4a091ad4f0 Mon Sep 17 00:00:00 2001 From: redhoodsu Date: Mon, 18 Jun 2018 17:56:12 +0800 Subject: [PATCH] Use prettier to format style code --- package.json | 2 +- src/Console/Console.scss | 185 ++++++------ src/Console/Logger.scss | 224 ++++++++------- src/DevTools/DevTools.scss | 45 ++- src/DevTools/NavBar.scss | 80 +++--- src/Elements/Elements.scss | 531 ++++++++++++++++++----------------- src/Elements/Highlight.scss | 108 +++---- src/EntryBtn/EntryBtn.scss | 13 +- src/Info/Info.scss | 85 +++--- src/Network/Network.scss | 76 ++--- src/Resources/Resources.scss | 182 ++++++------ src/Settings/Settings.scss | 398 +++++++++++++------------- src/Snippets/Snippets.scss | 95 +++---- src/Sources/Sources.scss | 202 ++++++------- src/lib/json.scss | 160 +++++------ src/style/icon.css | 36 +-- src/style/mixin.scss | 84 +++--- src/style/reset.scss | 165 ++++++++--- src/style/style.scss | 72 ++--- src/style/variable.scss | 7 +- 20 files changed, 1444 insertions(+), 1306 deletions(-) diff --git a/package.json b/package.json index d92aa68..599a1ce 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "dev": "webpack-dev-server --config script/webpack.dev.js --host 0.0.0.0", "test": "karma start", "test:sauce": "karma start karma.sauce.js", - "format": "prettier *.js eustia/*.js src/**/*.js src/*.js script/*.js test/*.js --write", + "format": "prettier *.js eustia/*.js src/**/*.js src/*.js script/*.js test/*.js src/**/*.scss src/**/*.css --write", "lint": "eslint src/**/*.js", "setup": "node script/cpTestLib", "genIcon": "node script/icomoon", diff --git a/src/Console/Console.scss b/src/Console/Console.scss index bec168d..d94aaa3 100644 --- a/src/Console/Console.scss +++ b/src/Console/Console.scss @@ -1,99 +1,102 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .console { - .control { - @include absolute(100%, 40px); - cursor: default; - padding: 10px 10px 10px 40px; - background: #fff; - line-height: 20px; - .icon-ban, .icon-info-circle { - display: inline-block; - color: $gray; - padding: 10px; - font-size: $font-size-l; - position: absolute; - top: 1px; - cursor: pointer; - transition: color $anim-duration; - &:active { - color: $gray-dark; - } - } - .icon-ban { - left: 0; - } - .icon-info-circle { - right: 0; - } - .filter { - cursor: pointer; - color: $gray; - margin: 0 1px; - font-size: $font-size-s; - height: 20px; - display: inline-block; - padding: 0 4px; - line-height: 20px; - border-radius: $border-radius; - transition: background $anim-duration, color $anim-duration; - &.active { - background: $gray; - color: #fff; - } - } + .control { + @include absolute(100%, 40px); + cursor: default; + padding: 10px 10px 10px 40px; + background: #fff; + line-height: 20px; + .icon-ban, + .icon-info-circle { + display: inline-block; + color: $gray; + padding: 10px; + font-size: $font-size-l; + position: absolute; + top: 1px; + cursor: pointer; + transition: color $anim-duration; + &:active { + color: $gray-dark; + } } - padding-top: 40px; - padding-bottom: 40px; - .js-input { - position: absolute; - z-index: 100; - left: 0; - bottom: 0; - width: 100%; - background: #fff; + .icon-ban { + left: 0; + } + .icon-info-circle { + right: 0; + } + .filter { + cursor: pointer; + color: $gray; + margin: 0 1px; + font-size: $font-size-s; + height: 20px; + display: inline-block; + padding: 0 4px; + line-height: 20px; + border-radius: $border-radius; + transition: background $anim-duration, color $anim-duration; + &.active { + background: $gray; + color: #fff; + } + } + } + padding-top: 40px; + padding-bottom: 40px; + .js-input { + position: absolute; + z-index: 100; + left: 0; + bottom: 0; + width: 100%; + background: #fff; + height: 40px; + .buttons { + display: none; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 40px; + color: $gray; + font-size: $font-size-s; + border-bottom: 1px solid $gray-light; + .button { + cursor: pointer; + width: 50%; + display: inline-block; + text-align: center; + border-right: 1px solid $gray-light; height: 40px; - .buttons { - display: none; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 40px; - color: $gray; - font-size: $font-size-s; - border-bottom: 1px solid $gray-light; - .button { - cursor: pointer; - width: 50%; - display: inline-block; - text-align: center; - border-right: 1px solid $gray-light; - height: 40px; - line-height: 40px; - float: left; - &:last-child { - border-right: none; - } - transition: background $anim-duration, color $anim-duration; - &:active { - background: $blue; - color: #fff; - } - } + line-height: 40px; + float: left; + &:last-child { + border-right: none; } - textarea { - padding: 10px; - outline: none; - border: none; - font-size: 14px; - width: 100%; - height: 100%; - user-select: text; - resize: none; + transition: background $anim-duration, color $anim-duration; + &:active { + background: $blue; + color: #fff; } + } } + textarea { + padding: 10px; + outline: none; + border: none; + font-size: 14px; + width: 100%; + height: 100%; + user-select: text; + resize: none; + } + } } -} } + } +} diff --git a/src/Console/Logger.scss b/src/Console/Logger.scss index f87b745..76899d9 100644 --- a/src/Console/Logger.scss +++ b/src/Console/Logger.scss @@ -1,125 +1,131 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { .console { - .logs { +.dev-tools { + .tools { + .console { + .logs { @include overflow-auto(y); height: 100%; font-size: $font-size; padding-top: 1px; .header { - @include overflow-auto(x); - white-space: nowrap; - margin: 5px 0; - padding: 0 $padding; - font-size: $font-size-s; - color: $gray; + @include overflow-auto(x); + white-space: nowrap; + margin: 5px 0; + padding: 0 $padding; + font-size: $font-size-s; + color: $gray; } .log-item { - position: relative; - @include clear-float(); + position: relative; + @include clear-float(); + background: #fff; + padding: $padding; + border-bottom: 1px solid $gray-light; + border-top: 1px solid $gray-light; + margin-top: -1px; + a { + color: $blue !important; + } + .count, + .icon-container { + float: left; + margin-right: 5px; + } + .icon-container { + .icon { + line-height: 20px; + font-size: 12px; + color: $gray-dark; + } + .icon-chevron-right { + color: $blue; + } + .icon-info-circle { + color: $blue; + } + .icon-times-circle { + color: $red; + } + .icon-exclamation-triangle { + color: $yellow-dark; + } + } + .count { + background: $blue; + padding: 2px 4px; + color: #fff; + border-radius: 10px; + } + .log-content-wrapper { + overflow: hidden; + } + .log-content { + @include overflow-auto(x); + white-space: pre-wrap; + user-select: text; + line-height: 20px; + * { + user-select: text; + } + } + &.input { background: #fff; - padding: $padding; - border-bottom: 1px solid $gray-light; - border-top: 1px solid $gray-light; - margin-top: -1px; - a { - color: $blue !important; + } + &.html, + &.table { + table { + width: 100%; + background: #fff; + border-bottom: 1px solid $gray-light; + border-collapse: collapse; + th { + background: $blue; + color: #fff; + } + th, + td { + padding: 10px; + } } - .count, .icon-container { - float: left; - margin-right: 5px; + .blue { + color: $blue; } - .icon-container { - .icon { - line-height: 20px; - font-size: 12px; - color: $gray-dark; - } - .icon-chevron-right { - color: $blue; - } - .icon-info-circle { - color: $blue; - } - .icon-times-circle { - color: $red; - } - .icon-exclamation-triangle { - color: $yellow-dark; - } + } + &.error { + z-index: 50; + background: $red-light; + color: $red; + border-top: 1px solid $red; + border-bottom: 1px solid $red; + .stack { + padding-left: 1.2em; + white-space: nowrap; } .count { - background: $blue; - padding: 2px 4px; - color: #fff; - border-radius: 10px; - } - .log-content-wrapper { - overflow: hidden; - } - .log-content - { - @include overflow-auto(x); - white-space: pre-wrap; - user-select: text; - line-height: 20px; - * { - user-select: text; - } - } - &.input { - background: #fff; - } - &.html, &.table { - table { - width: 100%; - background: #fff; - border-bottom: 1px solid $gray-light; - border-collapse: collapse; - th { - background: $blue; - color: #fff; - } - th, td { - padding: 10px; - } - } - .blue { - color: $blue; - } - } - &.error { - z-index: 50; - background: $red-light; - color: $red; - border-top: 1px solid $red; - border-bottom: 1px solid $red; - .stack { - padding-left: 1.2em; - white-space: nowrap; - } - .count { - background: $red; - } - } - &.debug { - z-index: 20; - color: $blue; - } - &.warn { - z-index: 40; - background: #fffbe6; - border-top: 1px solid $yellow; - border-bottom: 1px solid $yellow; - } - &.info { - z-index: 30; - color: $blue; - } - &.output { - color: $gray-dark; + background: $red; } + } + &.debug { + z-index: 20; + color: $blue; + } + &.warn { + z-index: 40; + background: #fffbe6; + border-top: 1px solid $yellow; + border-bottom: 1px solid $yellow; + } + &.info { + z-index: 30; + color: $blue; + } + &.output { + color: $gray-dark; + } } + } } -} } } + } +} diff --git a/src/DevTools/DevTools.scss b/src/DevTools/DevTools.scss index 7f973fd..335d7ae 100644 --- a/src/DevTools/DevTools.scss +++ b/src/DevTools/DevTools.scss @@ -1,28 +1,27 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; .dev-tools { - position: absolute; - width: 100%; + position: absolute; + width: 100%; + height: 100%; + left: 0; + bottom: 0; + background: #fff; + z-index: 500; + display: none; + opacity: 0; + transition: opacity $anim-duration; + .tools { + @include overflow-auto(); height: 100%; - left: 0; - bottom: 0; - background: #fff; - z-index: 500; - display: none; - opacity: 0; - transition: opacity $anim-duration; - .tools { - @include overflow-auto(); - height: 100%; - width: 100%; - position: relative; - .tool { - @include absolute(); - overflow: hidden; - display: none; - background: #f8f9fa; - } + width: 100%; + position: relative; + .tool { + @include absolute(); + overflow: hidden; + display: none; + background: #f8f9fa; } + } } - diff --git a/src/DevTools/NavBar.scss b/src/DevTools/NavBar.scss index ed70cd5..caf92cf 100644 --- a/src/DevTools/NavBar.scss +++ b/src/DevTools/NavBar.scss @@ -1,46 +1,46 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; $height: 55px; $item-width: 69px; .dev-tools { - .nav-bar { - @include absolute(100%, $height); - @include overflow-auto(x); - box-shadow: $box-shadow; - z-index: 100; - background: $blue; - font-size: 0; - white-space: nowrap; - .nav-bar-item { - cursor: pointer; - display: inline-block; - height: $height; - line-height: $height; - padding: 0 10px; - color: #fff; - font-size: $font-size-s; - text-align: center; - text-transform: capitalize; - transition: all $anim-duration; - &:active { - background: $gray-dark; - opacity: 0.5; - } - &.active { - background: $gray-light; - color: $gray-dark; - opacity: 0.5; - } - } - .bottom-bar { - transition: left $anim-duration, width $anim-duration; - height: 3px; - background: #fff; - position: absolute; - bottom: 0; - left: 0; - } + .nav-bar { + @include absolute(100%, $height); + @include overflow-auto(x); + box-shadow: $box-shadow; + z-index: 100; + background: $blue; + font-size: 0; + white-space: nowrap; + .nav-bar-item { + cursor: pointer; + display: inline-block; + height: $height; + line-height: $height; + padding: 0 10px; + color: #fff; + font-size: $font-size-s; + text-align: center; + text-transform: capitalize; + transition: all $anim-duration; + &:active { + background: $gray-dark; + opacity: 0.5; + } + &.active { + background: $gray-light; + color: $gray-dark; + opacity: 0.5; + } } -} \ No newline at end of file + .bottom-bar { + transition: left $anim-duration, width $anim-duration; + height: 3px; + background: #fff; + position: absolute; + bottom: 0; + left: 0; + } + } +} diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index 60bfb80..107c3f6 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -1,279 +1,288 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .elements { - padding-bottom: 40px; - font-size: 14px; - .show-area { - @include overflow-auto(y); - height: 100%; - } - .parents { - @include overflow-auto(x); - background: #fff; - padding: $padding; - white-space: nowrap; - border-bottom: 1px solid $gray-light; - cursor: pointer; - font-size: $font-size-s; - li { - display: inline-block; - .parent { - display: inline-block; - } - &:last-child { - margin-right: 0; - } - } - .icon-chevron-right { - font-size: 8px; - } - } - .breadcrumb { - @include breadcrumb(); - cursor: pointer; - transition: background $anim-duration, color $anim-duration; - &:active { - background: $blue; - color: #fff; - span { - color: #fff; - } - } - } - .section { - h2 { - .btn { - margin-left: 10px; - float: right; - text-align: center; - width: 18px; - height: 18px; - line-height: 18px; - font-size: 12px; - } - background: $blue; - padding: $padding; - color: #fff; - font-size: $font-size; - transition: background $anim-duration; - &.active-effect { - cursor: pointer; - } - &.active-effect:active { - background: $blue-dark; - } - } - margin-bottom: 10px; - } - .children { - background: #fff; - margin-bottom: 10px !important; - border-bottom: 1px solid $gray-light; - li { - @include overflow-auto(x); - cursor: default; - padding: $padding; - border-top: 1px solid $gray-light; - white-space: nowrap; - transition: background $anim-duration, color $anim-duration; - span { - transition: color $anim-duration; - } - &.active-effect { - cursor: pointer; - } - &.active-effect:active { - background: $blue; - color: #fff; - span { - color: #fff; - } - } - } - } - .attributes { - background: #fff; - font-size: 12px; - a { - color: $blue; - } - .table-wrapper { - @include overflow-auto(x); - } - table { - td { - padding: 5px 10px; - } - } - } - .text-content { - background: #fff; - .content { - @include overflow-auto(x); - padding: $padding; - } - } - .style-color { - width: 7px; - height: 7px; - margin-right: 2px; - border: 1px solid $gray-dark; + padding-bottom: 40px; + font-size: 14px; + .show-area { + @include overflow-auto(y); + height: 100%; + } + .parents { + @include overflow-auto(x); + background: #fff; + padding: $padding; + white-space: nowrap; + border-bottom: 1px solid $gray-light; + cursor: pointer; + font-size: $font-size-s; + li { + display: inline-block; + .parent { display: inline-block; + } + &:last-child { + margin-right: 0; + } } - .box-model { - @include overflow-auto(x); - background: #fff; - font-size: $font-size-s; - padding: $padding; + .icon-chevron-right { + font-size: 8px; + } + } + .breadcrumb { + @include breadcrumb(); + cursor: pointer; + transition: background $anim-duration, color $anim-duration; + &:active { + background: $blue; + color: #fff; + span { + color: #fff; + } + } + } + .section { + h2 { + .btn { + margin-left: 10px; + float: right; text-align: center; - white-space: nowrap; - border-bottom: 1px solid $gray-light; - .label { - position: absolute; - margin-left: 3px; - padding: 0 2px; - } - .top, .left, .right, .bottom { - display: inline-block; - } - .left, .right { - vertical-align: middle; - } - .position, .margin, .border, .padding, .content { - position: relative; - background: #fff; - display: inline-block; - text-align: center; - vertical-align: middle; - padding: 3px; - margin: 3px; - } - .position { - border: 1px grey dotted; - } - .margin { - border: 1px dashed; - background: rgba(246, 178, 107, 0.66); - } - .border { - border: 1px #000 solid; - background: rgba(255, 229, 153, 0.66); - } - .padding { - border: 1px grey dashed; - background: rgba(147, 196, 125, 0.55); - } - .content { - border: 1px grey solid; - min-width: 100px; - background: rgba(111, 168, 220, 0.66); - } + width: 18px; + height: 18px; + line-height: 18px; + font-size: 12px; + } + background: $blue; + padding: $padding; + color: #fff; + font-size: $font-size; + transition: background $anim-duration; + &.active-effect { + cursor: pointer; + } + &.active-effect:active { + background: $blue-dark; + } } - .computed-style { + margin-bottom: 10px; + } + .children { + background: #fff; + margin-bottom: 10px !important; + border-bottom: 1px solid $gray-light; + li { + @include overflow-auto(x); + cursor: default; + padding: $padding; + border-top: 1px solid $gray-light; + white-space: nowrap; + transition: background $anim-duration, color $anim-duration; + span { + transition: color $anim-duration; + } + &.active-effect { + cursor: pointer; + } + &.active-effect:active { + background: $blue; + color: #fff; + span { + color: #fff; + } + } + } + } + .attributes { + background: #fff; + font-size: 12px; + a { + color: $blue; + } + .table-wrapper { + @include overflow-auto(x); + } + table { + td { + padding: 5px 10px; + } + } + } + .text-content { + background: #fff; + .content { + @include overflow-auto(x); + padding: $padding; + } + } + .style-color { + width: 7px; + height: 7px; + margin-right: 2px; + border: 1px solid $gray-dark; + display: inline-block; + } + .box-model { + @include overflow-auto(x); + background: #fff; + font-size: $font-size-s; + padding: $padding; + text-align: center; + white-space: nowrap; + border-bottom: 1px solid $gray-light; + .label { + position: absolute; + margin-left: 3px; + padding: 0 2px; + } + .top, + .left, + .right, + .bottom { + display: inline-block; + } + .left, + .right { + vertical-align: middle; + } + .position, + .margin, + .border, + .padding, + .content { + position: relative; + background: #fff; + display: inline-block; + text-align: center; + vertical-align: middle; + padding: 3px; + margin: 3px; + } + .position { + border: 1px grey dotted; + } + .margin { + border: 1px dashed; + background: rgba(246, 178, 107, 0.66); + } + .border { + border: 1px #000 solid; + background: rgba(255, 229, 153, 0.66); + } + .padding { + border: 1px grey dashed; + background: rgba(147, 196, 125, 0.55); + } + .content { + border: 1px grey solid; + min-width: 100px; + background: rgba(111, 168, 220, 0.66); + } + } + .computed-style { + background: #fff; + font-size: $font-size-s; + a { + color: $blue; + } + .table-wrapper { + @include overflow-auto(y); + max-height: 200px; + } + table { + td { + padding: 5px 10px; + &.key { + white-space: nowrap; + color: $red; + } + } + } + } + .styles { + background: #fff; + font-size: 12px; + .style-wrapper { + padding: $padding; + .style-rules { + border-radius: $border-radius; + box-shadow: $box-shadow; + padding: $padding; background: #fff; - font-size: $font-size-s; - a { + margin-bottom: 10px; + .rule { + padding-left: 2em; + word-break: break-all; + a { color: $blue; + } + span { + color: $red; + } } - .table-wrapper { - @include overflow-auto(y); - max-height: 200px; - } - table { - td { - padding: 5px 10px; - &.key { - white-space: nowrap; - color: $red; - } - } + &:last-child { + margin-bottom: 0; } + } } - .styles { + } + .listeners { + background: #fff; + font-size: 12px; + .listener-wrapper { + padding: $padding; + .listener { + box-shadow: $box-shadow; + margin-bottom: 10px; background: #fff; - font-size: 12px; - .style-wrapper { + border-radius: $border-radius; + overflow: hidden; + .listener-type { + padding: $padding; + background: $blue; + color: #fff; + } + .listener-content { + li { + @include overflow-auto(x); padding: $padding; - .style-rules { - border-radius: $border-radius; - box-shadow: $box-shadow; - padding: $padding; - background: #fff; - margin-bottom: 10px; - .rule { - padding-left: 2em; - word-break: break-all; - a { - color: $blue; - } - span { - color: $red; - } - } - &:last-child { - margin-bottom: 0; - } + border-top: none; + &.capture { + background: $gray-light; } + } } + } } - .listeners { - background: #fff; - font-size: 12px; - .listener-wrapper { - padding: $padding; - .listener { - box-shadow: $box-shadow; - margin-bottom: 10px; - background: #fff; - border-radius: $border-radius; - overflow: hidden; - .listener-type { - padding: $padding; - background: $blue; - color: #fff; - } - .listener-content { - li { - @include overflow-auto(x); - padding: $padding; - border-top: none; - &.capture { - background: $gray-light; - } - } - } - } - } - } - .bottom-bar { - height: 40px; - background: #fff; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - font-size: 0; - border-top: 1px solid $gray-light; - .btn { - cursor: pointer; - text-align: center; - color: $gray; - font-size: 14px; - line-height: 40px; - width: 25%; - display: inline-block; - transition: background $anim-duration, color $anim-duration; - &:active { - background: $blue; - color: #fff; - } - &.active { - color: $blue; - } - } + } + .bottom-bar { + height: 40px; + background: #fff; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + font-size: 0; + border-top: 1px solid $gray-light; + .btn { + cursor: pointer; + text-align: center; + color: $gray; + font-size: 14px; + line-height: 40px; + width: 25%; + display: inline-block; + transition: background $anim-duration, color $anim-duration; + &:active { + background: $blue; + color: #fff; + } + &.active { + color: $blue; + } } + } } -} } - + } +} diff --git a/src/Elements/Highlight.scss b/src/Elements/Highlight.scss index 1248b32..b354882 100644 --- a/src/Elements/Highlight.scss +++ b/src/Elements/Highlight.scss @@ -1,59 +1,59 @@ -@import "../style/variable"; +@import '../style/variable'; .elements-highlight { - display: none; + display: none; + position: absolute; + left: 0; + right: 0; + z-index: -100; + pointer-events: none !important; + * { + pointer-events: none !important; + } + .indicator { + opacity: 0.5; position: absolute; left: 0; right: 0; - z-index: -100; - pointer-events: none !important; - * { - pointer-events: none !important; - } - .indicator { - opacity: .5; - position: absolute; - left: 0; - right: 0; - width: 100%; - height: 100%; - } - .margin { - position: absolute; - background: #e8925b; - z-index: 100; - } - .border { - position: absolute; - left: 0; - right: 0; - width: 100%; - height: 100%; - background: #ffcd7c; - z-index: 200; - } - .padding { - position: absolute; - background: #86af76; - z-index: 300; - } - .content { - position: absolute; - background: #5e88c1; - z-index: 400; - } - .size { - position: absolute; - top: 0; - left: 0; - background: #333740; - color: #d9d9d9; - font-size: 12px; - height: 25px; - line-height: 25px; - text-align: center; - padding: 0 5px; - white-space: nowrap; - overflow-x: hidden; - } -} \ No newline at end of file + width: 100%; + height: 100%; + } + .margin { + position: absolute; + background: #e8925b; + z-index: 100; + } + .border { + position: absolute; + left: 0; + right: 0; + width: 100%; + height: 100%; + background: #ffcd7c; + z-index: 200; + } + .padding { + position: absolute; + background: #86af76; + z-index: 300; + } + .content { + position: absolute; + background: #5e88c1; + z-index: 400; + } + .size { + position: absolute; + top: 0; + left: 0; + background: #333740; + color: #d9d9d9; + font-size: 12px; + height: 25px; + line-height: 25px; + text-align: center; + padding: 0 5px; + white-space: nowrap; + overflow-x: hidden; + } +} diff --git a/src/EntryBtn/EntryBtn.scss b/src/EntryBtn/EntryBtn.scss index e7836f2..c18cc43 100644 --- a/src/EntryBtn/EntryBtn.scss +++ b/src/EntryBtn/EntryBtn.scss @@ -1,4 +1,5 @@ -.container { .entry-btn { +.container { + .entry-btn { width: 40px; height: 40px; background: #000; @@ -6,12 +7,14 @@ border-radius: 10px; position: relative; z-index: 1000; - transition: opacity .3s; + transition: opacity 0.3s; color: #fff; font-size: 25px; text-align: center; line-height: 40px; - &.active, &:active { - opacity: .8; + &.active, + &:active { + opacity: 0.8; } -} } + } +} diff --git a/src/Info/Info.scss b/src/Info/Info.scss index 5dc3a91..f29bc8a 100644 --- a/src/Info/Info.scss +++ b/src/Info/Info.scss @@ -1,44 +1,49 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .info.tool { - @include overflow-auto(y); - li { - border-radius: $border-radius; - background: #fff; - margin: 10px; - box-shadow: $box-shadow; - .title, .content { - padding: $padding; - } - .title { - padding-bottom: 0; - font-size: $font-size-l; - color: $blue; - } - .content { - margin: 0; - user-select: text; - word-break: break-all; - table { - width: 100%; - border-collapse: collapse; - th, td { - border: 1px solid $gray-light; - padding: 10px; - } - } - * { - user-select: text; - } - a { - color: $blue; - } - } - .device-key, .system-key { - width: 100px; - } + @include overflow-auto(y); + li { + border-radius: $border-radius; + background: #fff; + margin: 10px; + box-shadow: $box-shadow; + .title, + .content { + padding: $padding; } + .title { + padding-bottom: 0; + font-size: $font-size-l; + color: $blue; + } + .content { + margin: 0; + user-select: text; + word-break: break-all; + table { + width: 100%; + border-collapse: collapse; + th, + td { + border: 1px solid $gray-light; + padding: 10px; + } + } + * { + user-select: text; + } + a { + color: $blue; + } + } + .device-key, + .system-key { + width: 100px; + } + } } -} } + } +} diff --git a/src/Network/Network.scss b/src/Network/Network.scss index a74854e..009b157 100644 --- a/src/Network/Network.scss +++ b/src/Network/Network.scss @@ -1,42 +1,44 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .network { - @include overflow-auto(y); - .title { - @include right-circle-btn(); - background: $gray; - padding: $padding; - color: #fff; - } - .requests { - background: #fff; - border-bottom: 1px solid $gray-light; - margin-bottom: 10px; - li { - @include overflow-auto(x); - cursor: pointer; - border-top: 1px solid $gray-light; - height: 41px; - white-space: nowrap; - &.error { - span { - color: $red; - } - } - span { - display: inline-block; - line-height: 40px; - height: 40px; - padding: 0 10px; - font-size: $font-size-s; - vertical-align: top; - } - &:nth-child(even) { - background: $gray-light; - } + @include overflow-auto(y); + .title { + @include right-circle-btn(); + background: $gray; + padding: $padding; + color: #fff; + } + .requests { + background: #fff; + border-bottom: 1px solid $gray-light; + margin-bottom: 10px; + li { + @include overflow-auto(x); + cursor: pointer; + border-top: 1px solid $gray-light; + height: 41px; + white-space: nowrap; + &.error { + span { + color: $red; } + } + span { + display: inline-block; + line-height: 40px; + height: 40px; + padding: 0 10px; + font-size: $font-size-s; + vertical-align: top; + } + &:nth-child(even) { + background: $gray-light; + } } + } } -} } + } +} diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss index ecc6466..8b16abf 100644 --- a/src/Resources/Resources.scss +++ b/src/Resources/Resources.scss @@ -1,98 +1,100 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .resources { - @include overflow-auto(y); - padding: 10px; - font-size: 14px; - .section { - margin-bottom: 10px; - border-radius: 4px; - box-shadow: $box-shadow; - overflow: hidden; + @include overflow-auto(y); + padding: 10px; + font-size: 14px; + .section { + margin-bottom: 10px; + border-radius: 4px; + box-shadow: $box-shadow; + overflow: hidden; + } + .title { + @include right-circle-btn(); + padding: $padding; + color: #fff; + background: $blue; + &.ok { + background: $green; } - .title { - @include right-circle-btn(); - padding: $padding; - color: #fff; - background: $blue; - &.ok { - background: $green; - } - &.warn { - background: $yellow; - } - &.danger { - background: $red; - } + &.warn { + background: $yellow; } - .link-list { - font-size: $font-size-s; - li { - padding: 10px; - background: #fff; - word-break: break-all; - a { - color: $blue !important; - } - } + &.danger { + background: $red; } - .image-list { - @include clear-float(); - font-size: $font-size-s; - background: #fff; - display: flex; - flex-wrap: wrap; - padding: $padding !important; - li { - flex-grow: 1; - cursor: pointer; - &.image { - height: 100px; - font-size: 0; - } - overflow-y: hidden; - img { - height: 100px; - min-width: 100%; - object-fit: cover; - } - } + } + .link-list { + font-size: $font-size-s; + li { + padding: 10px; + background: #fff; + word-break: break-all; + a { + color: $blue !important; + } } - table { - border-collapse: collapse; - width: 100%; - font-size: $font-size-s; - td { - padding: 10px; - word-break: break-all; - &.key { - @include overflow-auto(x); - white-space: nowrap; - max-width: 120px; - } - &.control { - padding: 0; - font-size: 0; - width: 40px; - .icon-trash { - cursor: pointer; - color: $red; - font-size: $font-size; - display: inline-block; - width: 40px; - height: 40px; - text-align: center; - line-height: 40px; - transition: color $anim-duration; - &:active { - color: $red-dark; - } - } - } - } - background: #fff; + } + .image-list { + @include clear-float(); + font-size: $font-size-s; + background: #fff; + display: flex; + flex-wrap: wrap; + padding: $padding !important; + li { + flex-grow: 1; + cursor: pointer; + &.image { + height: 100px; + font-size: 0; + } + overflow-y: hidden; + img { + height: 100px; + min-width: 100%; + object-fit: cover; + } } + } + table { + border-collapse: collapse; + width: 100%; + font-size: $font-size-s; + td { + padding: 10px; + word-break: break-all; + &.key { + @include overflow-auto(x); + white-space: nowrap; + max-width: 120px; + } + &.control { + padding: 0; + font-size: 0; + width: 40px; + .icon-trash { + cursor: pointer; + color: $red; + font-size: $font-size; + display: inline-block; + width: 40px; + height: 40px; + text-align: center; + line-height: 40px; + transition: color $anim-duration; + &:active { + color: $red-dark; + } + } + } + } + background: #fff; + } } -} } + } +} diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss index 03a06cb..4f37ab0 100644 --- a/src/Settings/Settings.scss +++ b/src/Settings/Settings.scss @@ -1,204 +1,222 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .settings { - @include overflow-auto(y); - .separator { - height: 10px; + @include overflow-auto(y); + .separator { + height: 10px; + } + .text { + padding: $padding; + color: $gray-dark; + font-size: 12px; + } + .select, + .range, + .color { + cursor: pointer; + } + .select .head, + .switch, + .range .head, + .color .head { + padding: $padding; + background: #fff; + font-size: $font-size; + border-bottom: 1px solid $gray-light; + border-top: 1px solid $gray-light; + margin-top: -1px; + } + .select .head, + .range .head, + .color .head { + transition: background $anim-duration, color $anim-duration; + span { + float: right; } - .text { - padding: $padding; - color: $gray-dark; - font-size: 12px; + &:active { + background: $blue; + color: #fff; } - .select, .range, .color { - cursor: pointer; + } + .color .head span { + display: inline-block; + border: 1px solid $gray-dark; + width: 15px; + height: 15px; + } + .select ul { + display: none; + &.open { + display: block; } - .select .head, .switch, .range .head, .color .head { - padding: $padding; - background: #fff; - font-size: $font-size; - border-bottom: 1px solid $gray-light; - border-top: 1px solid $gray-light; - margin-top: -1px; + li { + padding: $padding; + background: $gray-light; + transition: background $anim-duration, color $anim-duration; + &:active { + background: $blue; + color: #fff; + } } - .select .head, .range .head, .color .head { - transition: background $anim-duration, color $anim-duration; - span { - float: right; - } - &:active { - background: $blue; - color: #fff; + } + .color ul { + display: none; + padding: $padding; + font-size: 0; + background: $gray-light; + &.open { + display: block; + } + li { + display: inline-block; + width: 20px; + border: 1px solid $gray-dark; + height: 20px; + margin-right: 10px; + } + } + .range .input-container { + display: none; + padding: $padding; + background: $gray-light; + position: relative; + &.open { + display: block; + } + .range-track { + height: 4px; + width: 100%; + padding: 0 $padding; + position: absolute; + left: 0; + top: 16px; + .range-track-bar { + background: $gray; + border-radius: 2px; + overflow: hidden; + width: 100%; + height: 4px; + .range-track-progress { + height: 100%; + background: $gray-dark; + width: 50%; } + } } - .color .head span { - display: inline-block; - border: 1px solid $gray-dark; - width: 15px; - height: 15px; + input { + -webkit-appearance: none; + background: transparent; + height: 4px; + width: 100%; + position: relative; + top: -3px; + margin: 0 auto; + outline: none; + border-radius: 2px; } - .select ul { - display: none; - &.open { - display: block; - } - li { - padding: $padding; - background: $gray-light; - transition: background $anim-duration, color $anim-duration; - &:active { - background: $blue; - color: #fff; - } - } + input::-webkit-slider-thumb { + -webkit-appearance: none; + position: relative; + top: 0px; + z-index: 1; + width: 16px; + border: none; + height: 16px; + border-radius: 10px; + background: radial-gradient( + circle at center, + $gray 0, + $gray 15%, + #fff 22%, + #fff 100% + ); + box-shadow: $box-shadow; } - .color ul { - display: none; - padding: $padding; - font-size: 0; - background: $gray-light; - &.open { - display: block; - } - li { - display: inline-block; - width: 20px; - border: 1px solid $gray-dark; - height: 20px; - margin-right: 10px; - } - } - .range .input-container { - display: none; - padding: $padding; - background: $gray-light; + } + .switch { + .checkbox { + float: right; + position: relative; + vertical-align: top; + width: 46px; + height: 20px; + padding: 3px; + border-radius: 18px; + box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); + cursor: pointer; + background-image: linear-gradient(to bottom, #eeeeee, white 25px); + .input { + position: absolute; + top: 0; + left: 0; + opacity: 0; + } + .label { + pointer-events: none; position: relative; - &.open { - display: block; - } - .range-track { - height: 4px; - width: 100%; - padding: 0 $padding; - position: absolute; - left: 0; - top: 16px; - .range-track-bar { - background: $gray; - border-radius: 2px; - overflow: hidden; - width: 100%; - height: 4px; - .range-track-progress { - height: 100%; - background: $gray-dark; - width: 50%; - } - } - } - input { - -webkit-appearance: none; - background: transparent; - height: 4px; - width: 100%; - position: relative; - top: -3px; - margin: 0 auto; - outline: none; - border-radius: 2px; - } - input::-webkit-slider-thumb { - -webkit-appearance: none; - position: relative; - top: 0px; - z-index: 1; - width: 16px; - border: none; - height: 16px; - border-radius: 10px; - background: radial-gradient(circle at center, $gray 0, $gray 15%, #fff 22%, #fff 100%); - box-shadow: $box-shadow; - } - } - .switch { - .checkbox { - float: right; - position: relative; - vertical-align: top; - width: 46px; - height: 20px; - padding: 3px; - border-radius: 18px; - box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); - cursor: pointer; - background-image: linear-gradient(to bottom, #eeeeee, white 25px); - .input { - position: absolute; - top: 0; - left: 0; - opacity: 0; - } - .label { - pointer-events: none; - position: relative; - display: block; - height: 14px; - font-size: 10px; - text-transform: uppercase; - background: #eceeef; - border-radius: inherit; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); - transition: 0.15s ease-out; - transition-property: opacity background; - &:before, &:after { - position: absolute; - top: 50%; - margin-top: -.5em; - line-height: 1; - transition: inherit; - } - } - .input:checked ~ .label { - background: $blue; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); - } - .input:checked ~ .label:before { - opacity: 0; - } - .input:checked ~ .label:after { - opacity: 1; - } - .handle { - position: absolute; - pointer-events: none; - top: 0; - left: 0; - width: 18px; - height: 18px; - border-radius: 10px; - box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); - background-image: linear-gradient(to bottom, white 40%, #f0f0f0); - transition: left 0.15s ease-out; - } - .handle:before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - margin: -6px 0 0 -6px; - width: 12px; - height: 12px; - border-radius: 6px; - box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); - background-image: linear-gradient(to bottom, #eeeeee, white); - } - .input:checked ~ .handle { - left: 30px; - box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); - } + display: block; + height: 14px; + font-size: 10px; + text-transform: uppercase; + background: #eceeef; + border-radius: inherit; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), + inset 0 0 2px rgba(0, 0, 0, 0.15); + transition: 0.15s ease-out; + transition-property: opacity background; + &:before, + &:after { + position: absolute; + top: 50%; + margin-top: -0.5em; + line-height: 1; + transition: inherit; } + } + .input:checked ~ .label { + background: $blue; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), + inset 0 0 3px rgba(0, 0, 0, 0.2); + } + .input:checked ~ .label:before { + opacity: 0; + } + .input:checked ~ .label:after { + opacity: 1; + } + .handle { + position: absolute; + pointer-events: none; + top: 0; + left: 0; + width: 18px; + height: 18px; + border-radius: 10px; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); + background-image: linear-gradient(to bottom, white 40%, #f0f0f0); + transition: left 0.15s ease-out; + } + .handle:before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + margin: -6px 0 0 -6px; + width: 12px; + height: 12px; + border-radius: 6px; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); + background-image: linear-gradient(to bottom, #eeeeee, white); + } + .input:checked ~ .handle { + left: 30px; + box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); + } } + } } -} } \ No newline at end of file + } +} diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss index 05ebdf3..5a78537 100644 --- a/src/Snippets/Snippets.scss +++ b/src/Snippets/Snippets.scss @@ -1,53 +1,54 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .snippets { - @include overflow-auto(y); - padding: $padding; - .section { - margin-bottom: 10px; - border-radius: $border-radius; - box-shadow: $box-shadow; - overflow: hidden; - cursor: pointer; - &:active { - .name { - background: $gray-dark; - } - .description { - background: $gray-light; - } - } - .name { - padding: $padding; - color: #fff; - background: $gray; - transition: background $anim-duration; - .btn { - margin-left: 10px; - float: right; - text-align: center; - width: 18px; - height: 18px; - line-height: 18px; - font-size: 12px; - } - } - .description { - background: #fff; - padding: $padding; - transition: background $anim-duration; - } + @include overflow-auto(y); + padding: $padding; + .section { + margin-bottom: 10px; + border-radius: $border-radius; + box-shadow: $box-shadow; + overflow: hidden; + cursor: pointer; + &:active { + .name { + background: $gray-dark; + } + .description { + background: $gray-light; + } } + .name { + padding: $padding; + color: #fff; + background: $gray; + transition: background $anim-duration; + .btn { + margin-left: 10px; + float: right; + text-align: center; + width: 18px; + height: 18px; + line-height: 18px; + font-size: 12px; + } + } + .description { + background: #fff; + padding: $padding; + transition: background $anim-duration; + } + } } -} } - -.search-highlight-block { - display: inline; - .keyword { - background: $yellow; - color: #fff; - } + } } +.search-highlight-block { + display: inline; + .keyword { + background: $yellow; + color: #fff; + } +} diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index f9bd1c0..163d6c1 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -1,108 +1,112 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; -.dev-tools { .tools { +.dev-tools { + .tools { .sources { - @include overflow-auto(y); - .code-wrapper, .raw-wrapper { - @include overflow-auto(x); - width: 100%; - background: #fff; - min-height: 100%; + @include overflow-auto(y); + .code-wrapper, + .raw-wrapper { + @include overflow-auto(x); + width: 100%; + background: #fff; + min-height: 100%; + } + .raw { + user-select: text; + padding: $padding; + } + .code { + font-family: $font-family-code; + font-size: $font-size-s; + .content * { + user-select: text; } - .raw { - user-select: text; - padding: $padding; - } - .code { - font-family: $font-family-code; - font-size: $font-size-s; - .content * { - user-select: text; - } - } - pre.code { - padding: $padding; - } - table.code { - border-collapse: collapse; - .gutter { - background: $gray-light; - color: $gray; - } - .line-num { - border-right: 1px solid $gray; - padding: 0 3px 0 5px; - text-align: right; - } - .code-line { - padding: 0 4px; - white-space: pre; - } - } - .image { - .breadcrumb { - @include breadcrumb(); - } - .img-container { - text-align: center; - img { - max-width: 100%; - box-shadow: $box-shadow; - } - } - .img-info { - text-align: center; - margin: 20px 0; - color: $gray; - } - } - .json { - background: #fff; + } + pre.code { + padding: $padding; + } + table.code { + border-collapse: collapse; + .gutter { + background: $gray-light; + color: $gray; + } + .line-num { + border-right: 1px solid $gray; + padding: 0 3px 0 5px; + text-align: right; + } + .code-line { + padding: 0 4px; + white-space: pre; + } + } + .image { + .breadcrumb { + @include breadcrumb(); + } + .img-container { + text-align: center; + img { + max-width: 100%; + box-shadow: $box-shadow; + } + } + .img-info { + text-align: center; + margin: 20px 0; + color: $gray; + } + } + .json { + background: #fff; + padding: $padding; + * { + user-select: text; + } + } + .http { + .breadcrumb { + @include breadcrumb(); + } + .section { + background: #fff; + h2 { + background: $blue; padding: $padding; + color: #fff; + font-size: $font-size; + } + margin-bottom: 10px; + table { * { - user-select: text; + user-select: text; } + td { + font-size: $font-size-s; + padding: 5px 10px; + } + .key { + white-space: nowrap; + } + } } - .http { - .breadcrumb { - @include breadcrumb(); - } - .section { - background: #fff; - h2 { - background: $blue; - padding: $padding; - color: #fff; - font-size: $font-size; - } - margin-bottom: 10px; - table { - * { - user-select: text; - } - td { - font-size: $font-size-s; - padding: 5px 10px; - } - .key { - white-space: nowrap; - } - } - } - .response, .data { - user-select: text; - @include overflow-auto(x); - background: #fff; - padding: $padding; - font-size: $font-size-s; - margin-bottom: 10px; - white-space: pre-wrap; - } - } - iframe { - width: 100%; - height: 100%; + .response, + .data { + user-select: text; + @include overflow-auto(x); + background: #fff; + padding: $padding; + font-size: $font-size-s; + margin-bottom: 10px; + white-space: pre-wrap; } + } + iframe { + width: 100%; + height: 100%; + } } -} } + } +} diff --git a/src/lib/json.scss b/src/lib/json.scss index 7c6509a..4c7dd09 100644 --- a/src/lib/json.scss +++ b/src/lib/json.scss @@ -1,83 +1,83 @@ -@import "../style/variable"; -@import "../style/mixin"; +@import '../style/variable'; +@import '../style/mixin'; .container .json { - @include overflow-auto(x); - cursor: default; - font-family: $font-family-code; - font-size: $font-size-s; - line-height: 1.2; - min-height: 100%; - color: $gray-dark; - &, ul { - list-style: none !important; - } - ul { - padding: 0 !important; - padding-left: 15px !important; - margin: 0 !important; - } - li { - position: relative; - white-space: nowrap; - line-height: 16px; - min-height: 16px; - } - & > li > .key { - display: none; - } - & > li { - padding: $padding 0; - } - .array .object .key { - display: inline; - } - .null { - color: #0086b3; - } - .string { - color: #183691; - } - .number { - color: #0086b3; - } - .boolean { - color: #0086b3; - } - .special { - color: $gray; - } - .key { - color: #a71d5d; - } - .key-lighter { - color: #d391b5; - } - .expanded:before { - content: ""; - width: 0; - height: 0; - border: 4px solid transparent; - position: absolute; - border-top-color: $gray; - left: -12px; - top: 6px; - } - .collapsed:before { - content: ""; - border-left-color: $gray; - border-top-color: transparent; - left: -10px; - top: 4px; - } - li .collapsed ~ .close:before { - color: #999; - } - .hidden ~ ul { - display: none; - } - span { - position: static !important; - } + @include overflow-auto(x); + cursor: default; + font-family: $font-family-code; + font-size: $font-size-s; + line-height: 1.2; + min-height: 100%; + color: $gray-dark; + &, + ul { + list-style: none !important; + } + ul { + padding: 0 !important; + padding-left: 15px !important; + margin: 0 !important; + } + li { + position: relative; + white-space: nowrap; + line-height: 16px; + min-height: 16px; + } + & > li > .key { + display: none; + } + & > li { + padding: $padding 0; + } + .array .object .key { + display: inline; + } + .null { + color: #0086b3; + } + .string { + color: #183691; + } + .number { + color: #0086b3; + } + .boolean { + color: #0086b3; + } + .special { + color: $gray; + } + .key { + color: #a71d5d; + } + .key-lighter { + color: #d391b5; + } + .expanded:before { + content: ''; + width: 0; + height: 0; + border: 4px solid transparent; + position: absolute; + border-top-color: $gray; + left: -12px; + top: 6px; + } + .collapsed:before { + content: ''; + border-left-color: $gray; + border-top-color: transparent; + left: -10px; + top: 4px; + } + li .collapsed ~ .close:before { + color: #999; + } + .hidden ~ ul { + display: none; + } + span { + position: static !important; + } } - diff --git a/src/style/icon.css b/src/style/icon.css index e9e3c64..a8bddc9 100644 --- a/src/style/icon.css +++ b/src/style/icon.css @@ -1,11 +1,13 @@ @font-face { font-family: 'eruda-icon'; - src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'); + src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABEAAAsAAAAAELQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFi2NtYXAAAAFoAAAAVAAAAFQXVtKVZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAADKQAAAykjK19FmhlYWQAAA5oAAAANgAAADYPCS8LaGhlYQAADqAAAAAkAAAAJAfCA9RobXR4AAAOxAAAAEwAAABMOSwAm2xvY2EAAA8QAAAAKAAAACgZ4h0QbWF4cAAADzgAAAAgAAAAIAAZAIVuYW1lAAAPWAAAAYYAAAGGmUoJ+3Bvc3QAABDgAAAAIAAAACAAAwAAAAMDUwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6Q4DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkO//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAHAAcDZgNmACIARQAAAREUBiMiJi8BBw4BIyImLwEuATU0Nj8BJy4BNTQ2MyEyFhUBFAYPARceARUUBiMhIiY1ETQ2MzIWHwE3PgEzMhYfAR4BFQG3Fg8HDQVTvQMHBAMHA0ECBAQCvlIGBRUPAQAPFgGvAwK+UgUGFg//AA8VFQ8IDQVSvgMHAwQHAkICAwGS/wAPFQUGUr4CBAQCQQMHAwQHA71TBQ0HDxYWDwGAAwcDvlIFDQgPFRUPAQAPFgYFUr4CAwMCQgIHBAAAAAIAAAAAA24DbgAiAEUAAAEUBg8BFx4BFRQGIyEiJjURNDYzMhYfATc+ATMyFh8BHgEVAREUBiMiJi8BBw4BIyImLwEuATU0Nj8BJy4BNTQ2MyEyFhUBrwMCvlIFBhUP/wAPFhYPBw0FU70DBwMEBwNBAgMBvxYPBw0GUr4CBwQDBwNBAwMDA75TBQUVDwEADxYBWwMHA71TBQ0HDxYWDwEADxUGBVK+AgMDAkEDBwQB7v8ADxUFBVO+AwMDA0EDBwMEBwK+UgYNBw8WFg8AAAADAAAAAANuA24AJgA7AFQAACU1NCcmKwERNCcmKwEiBwYdARQXFjsBFSMiBwYdARQXFjMhMjc2NQM1NCcmKwEiBwYdARQXFjsBMjc2NQUUBwYHBiMiJyYnJjU0NzY3NjMyFxYXFhUCSQUFCDcFBQi3CAUFBQUINzcIBQUFBQgBAAgFBUkFBQhuCAUFBQUIbggFBQFuOztlZXd4ZGU7Ozs7ZWR4d2VlOzulWwgFBQElCAUFBQUIXAgFBbcFBQhbCAYFBQYIAgBbCAUFBQUIWwgGBQUGCO54ZGU7Ozs7ZWR4d2VlOzs7O2VldwAAAAMAAAAAA24DcQANABkAOQAAATQnARYzMjc2NzY3NjUFASYjIgcGBwYVFBclFAcGBwYHBiMiJyYnJicmNTQ3Njc2NzYzMhcWFxYXFgLuMv5RTlw/OjkqKhgZ/cUBr01eVUdIKSozArsjIzs6UlFZWVJROzojIyMjOjtRUllZUVI6OyMjAblcTP5SMxkZKSo6OkCrAa80KipISFRdTqtaUlI6OyMjIyM7OlJSWllSUTs7IyMjIzs7UVIAAAAAAgAAAAADbgNuAA8AggAAATQnJiMiBwYVFBcWMzI3NiUVFAcGDwEGBxYXFhUUBwYHBiMiLwEGBwYHBisBIicmNScmJwcGIyInJicmNTQ3Njc2NyYvASYnJj0BNDc2PwE2NyYnJjU0NzY3NjMyHwE2NzY3NjsBMhcWHwEWFzc2MzIXFhcWFRQHBgcGBxYfARYXFhUCSSsrPD0rKiorPTwrKwElBQQHagsLFCkGBg8pKQ0HCE8ZGwkHBBF/CAYGEBwYUAYICAdIFgQFCBUUCxAIaAgEBQUEBmsIDhcmBgUPKikNBwdPGRsJCAQQfwgGBgEQHBdRBggIBkoVBAUIFRUKDwloCAQFAbc8KysrKzw9KyoqK3t/BwYGARAfFR0yBwcIBhUoKQU+DQlNHRAFBQdpCQw9BQZCHgYIBgcMGhoOHRwPAQYGCH4HBwYBEBobIC4HBwYHFSkpBj0NCE4dEAUFB2oJDD0GBkQdBQgHBgwaGg4dGxABBgYIAAUAAAAAAyUDbgAUACkAPgBGAHMAACURNCcmKwEiBwYVERQXFjsBMjc2NTMRNCcmKwEiBwYVERQXFjsBMjc2NTMRNCcmKwEiBwYVERQXFjsBMjc2NQEhJyYnIwYHBRUUBwYrAREUBwYjISInJjURIyInJj0BNDc2OwE3Njc2OwEyFxYfATMyFxYVASUGBQgkCAUGBgUIJAgFBpIFBQglCAUFBQUIJQgFBZIFBQglCAUFBQUIJQgFBf7JAQAbBAa1BgQB9wYFCDcaGyb+JSYbGzcIBQUFBQixKAgXFhe3FxYWCSiwCAUGpQGSCAUFBQUI/m4IBgUFBggBkggFBQUFCP5uCAYFBQYIAZIIBQUFBQj+bggGBQUGCAI2QwUCAgVVJAgGBf3jMCIjISIvAiAFBggkCAUFYBUPDw8PFWAFBQgAAQAAAAADbgNuAEcAAAERFAcGIyEiJyY/ASYjIgcGBwYHBhUUFxYXFhcWMzI3Njc2NzIfARYVFAcGBwYjIicmJyYnJjU0NzY3Njc2MzIXFhc3NhcWFQNuCwsP/wAYCgkRT1RzPDY2JycYFxcYJyc2NjxEPD0qBAkIBk4GBD9YWWJZUVI6OyMjIyM7OlJRWVROTz1KERcXAyX/AA8LCxcWEU9OFxcnKDY2Ozw2NicnGBceHjYGAQVPBQcHBksqKSMjOzpSUVlZUVE7OyMjICA5SRIKCRgAAAAAAQAzAA8CgwOoABoAAAkBBiMiLwEmNTQ3CQEmNTQ/ATYzMhcBFhUUBwJ5/lgLDw8LXwsLATD+0AsLXwsPDwsBqAoKAcL+WAsLXwoPDwsBLwEwCw8OC18LC/5YCw8OCwAAAQBYAA8CqAOoABoAAAkCFhUUDwEGIyInASY1NDcBNjMyHwEWFRQHAp3+0QEvCwtfCw4PC/5YCwsBqAsPDgtfCwsDC/7Q/tELDw8KXwsLAagLDg8LAagLC18LDg8LAAAABQAA/7cDtwO3AD4AbQBxAHUAegAAASIHBhURJyYjIgcGFRQXExYzITI3Nj8BNj0BNCcmIyIHBhUjNTQnJiMiBwYdASM1NCcmIyIHBh0BIxE0JyYjNTIXFh0BNjMyFzYzMhc2MzIXFh0BFA8BBgcGIyEiJyYnAyY1NDc2MzIXETQ3NjMTNSMVMzUjFTM1IxUzAW4fFRVXFyYeFRUP2xYlAZoNCgoCNQ4QEBcXEBASExIbGxITExUVHx4VFhIVFR89KisNBTkqGx5AKQ8RNiUlEDUJHh0m/mYjHx8U3B0rKjwpISsrPUkSpBKkEhIDbhYVHv4Acx8WFh0ZE/7bHQgHDNM3OHwXEREQEBcjHBMTExMaJTQfFxYVFR83AUYgFhdJLC09fgIoDDIEJic1fEM+0iUXFxAPGwElJzE8KysUATk8Kyv829zc3Nzc3AADAAAASQQAAtsAGAAxAEoAAAEmJxYVFAcGIyInJjU0NwYHFhcWMzI3NjclNCcmIyIHBhUUFxYzMjc2NTQ3NjMyNzY1BRQHBgcGIyInJicmNTQ3Njc2MzIXFhcWFQO3V4MjS0tqaktLI4NXTHNyhoZyc0z+ZAgIC0c0MwgIDAsICCMjMQsICAHlC1CIh5aWh4hQCwtQiIeWloeIUAsBkodDO0ZpS0xMS2lGO0OHdUVGRkV13AsICDMzSAsICAgICzIiIwgIDNwTFIRPT1BPgxQTFBSDT09PT4MUFAAAAQAAAAADbgNuAEkAAAEUBwYHBgcGIyInJicmNTY/ATYzFhcWFxYzMjc2NzY3NjU0JyYnJicmIyIHBgcXFgcGIyEiJyY1ETQ3Nh8BNjc2MzIXFhcWFxYVA24jIzs7UVFZYllZPgQBBE8FCQkEKjw9RDs2NignFxcXFycoNjY7ODQzKE4SCgkY/wAPCwsXFhFLPU5PVFlRUTs7IyMBt1lRUjo7IyMpKksGBwcFTwUBBjYeHhcYJyc2Njw7NjYoJxcXFBQmTxEWFwsLDwEAGAkKEkk5ICAjIzs7UVFZAAMACQAAA/cDtwAUACkAQQAAJTU0JyYrASIHBh0BFBcWOwEyNzY1JxM0JyYrASIHBhUTFBcWOwEyNzY3AwEWBwYHBiMhIicmJyY3ATY3NjMyFxYXAkkFBgduBwYFBQYHbgcGBQEKBQgGfgYIBQkGBghqCAUFAQgBtxQVChERE/ySExERChUUAbcKEREUFBERCqVtCAUGBgUIbQgFBgYFCNYBBgcEBgYECP77BgQDAwQGAhb82yQkEQkKCgkRJCQDJRELCgoLEQAAAgAAAAADbgNuACsARAAAATQvATc2NTQvASYjIg8BJyYjIg8BBhUUHwEHBhUUHwEWMzI/ARcWMzI/ATY3FAcGBwYjIicmJyY1NDc2NzYzMhcWFxYVApELaGgLCzQLDw8LZ2gKDxALMwsLZ2cLCzMLEA8KaGcLDw8LNAvdOztlZXd4ZGU7Ozs7ZWR4d2VlOzsBNg8KaGcLDw8LNAsLaGgLCzQLDw8LZ2gKDxALMwsLZ2cLCzMLkXhkZTs7OztlZHh3ZWU7Ozs7ZWV3AAAAAQAA//8DFwNuAAsAAAkBBiY1ETQ2FwEWFAMX/QkNExMNAvcNAaX+WgcLDwNJDwwI/lsIFQAAAAABAAAAAAAA0YpcH18PPPUACwQAAAAAANX1dVAAAAAA1fV1UAAA/7cEAAO3AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAATBAAAAAAAAAAAAAAAAgAAAANuAAcDbgAAA24AAANuAAADbgAAAyUAAANuAAACtwAzAwAAWAO3AAAEAAAAA24AAAQAAAkDbgAAAykAAAAAAAAACgAUAB4AhgDuAWQBwgJ+Ax4DigO6A+oEkAT+BWwF0AY2BlIAAQAAABMAgwAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=') + format('woff'); font-weight: normal; font-style: normal; } -[class^="eruda-icon-"], [class*=" eruda-icon-"] { +[class^='eruda-icon-'], +[class*=' eruda-icon-'] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'eruda-icon' !important; speak: none; @@ -21,47 +23,47 @@ } .icon-play:before { - content: "\e90e"; + content: '\e90e'; } .icon-compress:before { - content: "\e900"; + content: '\e900'; } .icon-expand:before { - content: "\e901"; + content: '\e901'; } .icon-rotate-left:before { - content: "\e90b"; + content: '\e90b'; } .icon-hand-pointer-o:before { - content: "\e909"; + content: '\e909'; } .icon-eye:before { - content: "\e90a"; + content: '\e90a'; } .icon-info-circle:before { - content: "\e902"; + content: '\e902'; } .icon-ban:before { - content: "\e903"; + content: '\e903'; } .icon-cog:before { - content: "\e904"; + content: '\e904'; } .icon-trash:before { - content: "\e905"; + content: '\e905'; } .icon-repeat:before { - content: "\e906"; + content: '\e906'; } .icon-chevron-right:before { - content: "\e907"; + content: '\e907'; } .icon-chevron-left:before { - content: "\e908"; + content: '\e908'; } .icon-exclamation-triangle:before { - content: "\e90c"; + content: '\e90c'; } .icon-times-circle:before { - content: "\e90d"; + content: '\e90d'; } diff --git a/src/style/mixin.scss b/src/style/mixin.scss index 388f286..a459b31 100644 --- a/src/style/mixin.scss +++ b/src/style/mixin.scss @@ -1,57 +1,57 @@ -@import "./variable"; +@import './variable'; @mixin absolute($width: 100%, $height: 100%) { - position: absolute; - width: $width; - height: $height; - left: 0; - top: 0; + position: absolute; + width: $width; + height: $height; + left: 0; + top: 0; } @mixin overflow-auto($direction: 'both') { - @if $direction == 'both' { - overflow: auto; - } @else { - overflow-#{$direction}: auto; - } - -webkit-overflow-scrolling: touch; + @if $direction == 'both' { + overflow: auto; + } @else { + overflow-#{$direction}: auto; + } + -webkit-overflow-scrolling: touch; } @mixin breadcrumb { - background: #fff; - user-select: text; - margin-bottom: 10px; - word-break: break-all; - padding: $padding; - font-size: $font-size-l; - min-height: 40px; - border-bottom: 1px solid $gray-light; + background: #fff; + user-select: text; + margin-bottom: 10px; + word-break: break-all; + padding: $padding; + font-size: $font-size-l; + min-height: 40px; + border-bottom: 1px solid $gray-light; } @mixin clear-float { - &:after { - content: ''; - display: block; - clear: both; - } + &:after { + content: ''; + display: block; + clear: both; + } } @mixin right-circle-btn { - .btn { - margin-left: 10px; - float: right; - background: #fff; - color: $gray; - text-align: center; - width: 18px; - height: 18px; - line-height: 18px; - border-radius: 50%; - font-size: 12px; - cursor: pointer; - transition: color $anim-duration; - &:active { - color: $gray-dark; - } + .btn { + margin-left: 10px; + float: right; + background: #fff; + color: $gray; + text-align: center; + width: 18px; + height: 18px; + line-height: 18px; + border-radius: 50%; + font-size: 12px; + cursor: pointer; + transition: color $anim-duration; + &:active { + color: $gray-dark; } -} \ No newline at end of file + } +} diff --git a/src/style/reset.scss b/src/style/reset.scss index ff803e9..afd65bb 100644 --- a/src/style/reset.scss +++ b/src/style/reset.scss @@ -1,44 +1,125 @@ .container { - html, body, div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, - a, abbr, acronym, address, big, cite, code, - del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, - b, u, i, center, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, embed, - figure, figcaption, footer, header, hgroup, - menu, nav, output, ruby, section, summary, - time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - } - article, aside, details, figcaption, figure, - footer, header, hgroup, menu, nav, section { - display: block; - } - body { - line-height: 1; - } - ol, ul { - list-style: none; - } - blockquote, q { - quotes: none; - } - blockquote:before, blockquote:after, - q:before, q:after { - content: ''; - content: none; - } - table { - border-collapse: collapse; - border-spacing: 0; - } + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + menu, + nav, + section { + display: block; + } + body { + line-height: 1; + } + ol, + ul { + list-style: none; + } + blockquote, + q { + quotes: none; + } + blockquote:before, + blockquote:after, + q:before, + q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } } diff --git a/src/style/style.scss b/src/style/style.scss index 4292a10..c4ccb14 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -1,50 +1,52 @@ -@import "variable"; -@import "mixin"; +@import 'variable'; +@import 'mixin'; .container { - pointer-events: none; - will-change: transform; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 100000; - color: $gray-dark; - transform: translateZ(0); - font-family: $font-family; - font-size: $font-size; - direction: ltr; - * { - box-sizing: border-box; - pointer-events: all; - user-select: none; - -webkit-tap-highlight-color: transparent; - -webkit-text-size-adjust: none; - } - ul { - list-style: none; - padding: 0; - margin: 0; - } - h1, h2, h3, h4 { - margin: 0; - } + pointer-events: none; + will-change: transform; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 100000; + color: $gray-dark; + transform: translateZ(0); + font-family: $font-family; + font-size: $font-size; + direction: ltr; + * { + box-sizing: border-box; + pointer-events: all; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-text-size-adjust: none; + } + ul { + list-style: none; + padding: 0; + margin: 0; + } + h1, + h2, + h3, + h4 { + margin: 0; + } } .hidden { - display: none; + display: none; } .blue { - color: $blue; + color: $blue; } .red { - color: $red; + color: $red; } .green { - color: $green; + color: $green; } - diff --git a/src/style/variable.scss b/src/style/variable.scss index f2b9352..e5020e6 100644 --- a/src/style/variable.scss +++ b/src/style/variable.scss @@ -1,4 +1,5 @@ -$box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08), 0 3px 1px -2px rgba(0, 0, 0, .2); +$box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.08), + 0 3px 1px -2px rgba(0, 0, 0, 0.2); $border-radius: 4px; $padding: 10px; @@ -10,7 +11,7 @@ $font-size-l: 16px; $font-family: 'Helvetica Neue', Helvetica, Arial, sans-seri; $font-family-code: Consolas, Lucida Console, Monaco, MonoSpace; -$anim-duration: .3s; +$anim-duration: 0.3s; // https://www.google.com/design/spec/style/color.html#color-color-palette $blue: #2196f3; @@ -25,4 +26,4 @@ $red-dark: #b71c1c; $green: #009688; $yellow: #ffc107; $yellow-light: #ffecb3; -$yellow-dark: #ff6f00; \ No newline at end of file +$yellow-dark: #ff6f00;