Merge pull request #106 from picturepan2/hotfix/fix-resizer-tool

Update cleanup code and fix the responsive resizer layout bug

1 files changed, 128 insertions, 0 deletions

diff --git a/tools/resizer/assets/css/app.less b/tools/resizer/assets/css/app.less
new file mode 100644
index 0000000..3f16b46
--- /dev/null
+++ b/tools/resizer/assets/css/app.less
@@ -0,0 +1,128 @@
+/* Spectre Resizer */
+.app-container {
+  background: #5764C6;
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+.copyright {
+  bottom: 10px;
+  color: #d2d7ee;
+  left: 10px;
+  position: fixed;
+}
+.copyright h1 {
+  font-size: 14px;
+  margin: 0;
+}
+.browser {
+  background: #fff;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+  margin: 10vh auto;
+  transform: scale(1, 1);
+  transition: width .216s ease;
+  width: 80vw;
+}
+.browser .browser-header {
+  background: #f8f8f8;
+  border-radius: 3px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  flex: 0 0 42px;
+  width: 100%;
+}
+.browser .navbar-section {
+  flex: 1 0 33.33%;
+}
+.mobile .navbar-section-btns {
+  display: none;
+}
+.browser .browser-header .btn-refresh {
+  right: 0;
+  top: -2px;
+}
+.browser .browser-header .btn-action {
+  color: #999;
+  padding: 7px 5px;
+}
+.browser .browser-header .btn-action:hover,
+.browser .browser-header .btn-action:focus {
+  color: #666;
+}
+.browser .browser-header .form-input {
+  background: #eee;
+  border-color: transparent;
+  color: #666;
+  height: 28px;
+  padding: 5px 30px 5px 8px;
+}
+.browser .browser-header .form-input:hover,
+.browser .browser-header .form-input:focus {
+  background: #e8e8e8;
+  color: #333;
+}
+.browser .browser-header .form-select {
+  background-color: transparent;
+  border-color: transparent;
+  height: 28px;
+  padding: 3px 24px 3px 8px;
+}
+.browser .browser-body {
+  border-radius: 3px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  flex: 1 1 auto;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+.browser .browser-body iframe {
+  bottom: 0;
+  left: 0;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.browser .browser-footer {
+  background: #fefefe;
+  border-radius: 3px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  flex: 0 0 5px;
+  width: 100%;
+}
+.browser-action {
+  border-radius: 5px;
+  display: inline-block;
+  height: 10px;
+  margin: 3px 0 3px 6px;
+  vertical-align: middle;
+  width: 10px;
+}
+.browser-action.red {
+  background: #fc625d;
+}
+.browser-action.yellow {
+  background: #fec041;
+}
+.browser-action.green {
+  background: #35ca4a;
+}