From 726e4a6ca4b55a6c70185ee8bd88e954f54e32fe Mon Sep 17 00:00:00 2001 From: iko Date: Wed, 15 Sep 2021 15:02:58 +0300 Subject: [PATCH] Added new override markup (#97) * Issue#94 * up * up * up * removed npm generated files Co-authored-by: Alexander --- .gitignore | 1 + octopod-css/development/layouts/index.html | 163 +++++++++++++++--- octopod-css/development/layouts/staging.html | 69 ++++---- octopod-css/development/styles/_button.css | 27 +++ octopod-css/development/styles/_input.css | 54 +++++- octopod-css/development/styles/_listing.css | 16 +- octopod-css/development/styles/_overrides.css | 65 ++++++- octopod-css/development/styles/_spot.css | 11 ++ .../development/vectors/button-loader.svg | 5 + .../development/vectors/spot-loader.svg | 3 + octopod-css/development/vectors/spot-undo.svg | 3 + octopod-css/package.json | 2 +- 12 files changed, 358 insertions(+), 61 deletions(-) create mode 100644 octopod-css/development/vectors/button-loader.svg create mode 100644 octopod-css/development/vectors/spot-loader.svg create mode 100644 octopod-css/development/vectors/spot-undo.svg diff --git a/.gitignore b/.gitignore index d69b660..c4ee278 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ octopod-css/node_modules dev/certs/* tmp/* octopod-css/production +.idea/ \ No newline at end of file diff --git a/octopod-css/development/layouts/index.html b/octopod-css/development/layouts/index.html index 421705e..0c6b122 100755 --- a/octopod-css/development/layouts/index.html +++ b/octopod-css/development/layouts/index.html @@ -106,13 +106,20 @@
- ENVIRONENT: production + ENVIRONMENT: + production
- app_api_url: http://my-api.my-domain.com + app_api_url: + http://my-api.my-domain.com
- SECRET_CODE: asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen + SECRET_CODE: + asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen +
+
+ INFO: + New Project Staging
+
@@ -634,9 +657,23 @@
+
- + +
+
+ +
+ +
+
+
+
@@ -657,30 +694,61 @@
-
+
-
- +
+
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
- + +
    +
  • SECRET_PASSWORD
    • +
  • SECRET_INFO
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
  • Soviet Socialist Republics
    • +
- +
-
@@ -690,6 +758,20 @@
+ +
+
+ +
+
+ +
+ +
@@ -714,7 +796,34 @@
- + +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
Duplicate key values
@@ -724,19 +833,29 @@
-
- +
+ +
Duplicate key values
- + +
+ +
+
+
+ +
Empty key value
+
+
+
-
diff --git a/octopod-css/development/layouts/staging.html b/octopod-css/development/layouts/staging.html index 84c64da..45e2dd3 100755 --- a/octopod-css/development/layouts/staging.html +++ b/octopod-css/development/layouts/staging.html @@ -116,13 +116,20 @@
- ENVIRONENT: production + ENVIRONMENT: + production
- app_api_url: http: //my-api.my-domain.com + app_api_url: + http://my-api.my-domain.com
- SECRET_CODE: asdfaisdjri235868ear7%^&IUAK$^%&asdfasdfij + SECRET_CODE: + asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen +
+
+ INFO: + New Project Staging
@@ -459,6 +466,20 @@
+ +
+
+ +
+
+ +
+ +
@@ -492,20 +513,6 @@ Delete
-
-
- -
-
- -
- -
-
@@ -515,6 +522,20 @@
+ +
+
+ +
+
+ +
+ +
@@ -548,20 +569,6 @@ Delete
-
-
- -
-
- -
- -
-
diff --git a/octopod-css/development/styles/_button.css b/octopod-css/development/styles/_button.css index e06a3d4..e51687e 100755 --- a/octopod-css/development/styles/_button.css +++ b/octopod-css/development/styles/_button.css @@ -100,6 +100,33 @@ background-repeat: no-repeat; } +.button--save-loading { + position: relative; + padding-left: 40px; + color: rgba(255, 255, 255, 0.6); + cursor: default; +} + +.button--save-loading:hover { + background-color: var(--primary); +} + +.button--save-loading::before { + content: ""; + position: absolute; + display: block; + width: 24px; + height: 24px; + left: 11px; + top: 0; + bottom: 0; + margin: auto; + background-image: url("../vectors/button-loader.svg"); + background-repeat: no-repeat; + animation: loading 2.2s linear infinite; +} + + .button--logs { padding-left: 40px; background-image: url("../vectors/common-use-logs.svg"); diff --git a/octopod-css/development/styles/_input.css b/octopod-css/development/styles/_input.css index 2c31346..e197eb3 100755 --- a/octopod-css/development/styles/_input.css +++ b/octopod-css/development/styles/_input.css @@ -18,6 +18,8 @@ color: rgba(0, 0, 0, 0.87); } + + .input__widget:hover { box-shadow: inset 0 -1px #326EE6; } @@ -71,12 +73,16 @@ background-position: left center; } - .input--error { } .input--error .input__widget { - box-shadow: inset 0 -2px var(--red); + color: var(--red); + box-shadow: inset 0 -1px var(--red); + } + + .input--error .input__widget::placeholder { + color: rgba(212, 42, 42, 0.5); } .input__output { @@ -89,3 +95,47 @@ .input__output + .input__output { margin-top: 3px; } + + + +.input--default { + +} + + .input--default .input__widget { + font-weight: 300; + font-style: italic; + } + + +.input--deleted { + +} + + .input--deleted .input__widget { + font-weight: 300; + font-style: italic; + text-decoration-line: line-through; + opacity: 0.2; + } + + .input--deleted .input__widget:hover { + box-shadow: inset 0 -1px #B0B0B0; + } + + +.input--disable { + +} + + .input--disable .input__widget { + color: #B0B0B0; + } + + .input--disable .input__widget::placeholder { + color: #B0B0B0; + } + + .input--disable .input__widget:hover { + box-shadow: inset 0 -1px #B0B0B0; + } diff --git a/octopod-css/development/styles/_listing.css b/octopod-css/development/styles/_listing.css index 4b65197..ba44dfc 100755 --- a/octopod-css/development/styles/_listing.css +++ b/octopod-css/development/styles/_listing.css @@ -41,10 +41,24 @@ .listing--for-text .listing__item:first-child { margin-top: 0; } - .listing--for-text b { + .listing--for-text .listing__key { font-weight: 500; } + .listing--for-text .listing__value { + font-weight: 400; + } + + .listing--for-text .listing__key.default { + font-weight: 300; + font-style: italic; + } + + .listing--for-text .listing__value.default { + font-weight: 300; + font-style: italic; + } + .listing--for-text .listing__more { margin-top: 8px; } diff --git a/octopod-css/development/styles/_overrides.css b/octopod-css/development/styles/_overrides.css index 99a3d3d..0b03634 100755 --- a/octopod-css/development/styles/_overrides.css +++ b/octopod-css/development/styles/_overrides.css @@ -2,13 +2,14 @@ } .overrides__item { - margin-top: 8px; + position: relative; + margin-bottom: 8px; display: flex; align-self: flex-start; } - .overrides__item:first-child { - margin-top: 0; + .overrides__item:last-child { + margin-bottom: 0; } .overrides__key { width: 400px; @@ -23,6 +24,62 @@ margin-left: 2px; } + .overrides__search { + z-index: 2; + position: absolute; + top: 30px; + background: #FFFFFF; + padding: 8px 0; + list-style: none; + border-radius: 2px; + box-shadow: 0 8px 8px 0 #0000003D, 0 0 8px 0 #0000001F; + max-height: 274px; + overflow-y: auto; + } + + .overrides__search-item { + font-size: 16px; + line-height: 24px; + padding: 12px 16px; + cursor: pointer; + color: rgba(0, 0, 0, 0.87); + font-weight: 400; + } + + .overrides__search-item b { + font-weight: 700; + } + + .overrides__search-item:hover { + background: #F8F8F8; + } + + .overrides__placeholder { + position: relative; + width: 400px; + height: 40px; + padding: 14px 0; + box-shadow: inset 0 -1px 0 rgba(176, 176, 176, 0.2); + } + + .overrides__placeholder::before { + position: relative; + content: ""; + display: block; + height: 12px; + width: 350px; + border-radius: 2px; + background: rgba(238, 238, 238, 0.5); + } + + .overrides__placeholder:first-child { + margin-right: 16px; + } + + .overrides__placeholder:first-child::before { + width: 200px; + } + .overrides__add { - margin-top: 4px; + padding: 8px 0 8px 24px !important; } diff --git a/octopod-css/development/styles/_spot.css b/octopod-css/development/styles/_spot.css index 1b45842..aa2bcbe 100755 --- a/octopod-css/development/styles/_spot.css +++ b/octopod-css/development/styles/_spot.css @@ -23,3 +23,14 @@ .spot--cancel:hover { opacity: 1; } + +.spot--undo { + opacity: 1; + background-image: url("../vectors/spot-undo.svg"); +} + +.spot--loader { + opacity: 1; + background-image: url("../vectors/spot-loader.svg"); + animation: loading 2.2s linear infinite; +} \ No newline at end of file diff --git a/octopod-css/development/vectors/button-loader.svg b/octopod-css/development/vectors/button-loader.svg new file mode 100644 index 0000000..3ff0a6f --- /dev/null +++ b/octopod-css/development/vectors/button-loader.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/octopod-css/development/vectors/spot-loader.svg b/octopod-css/development/vectors/spot-loader.svg new file mode 100644 index 0000000..4004405 --- /dev/null +++ b/octopod-css/development/vectors/spot-loader.svg @@ -0,0 +1,3 @@ + + + diff --git a/octopod-css/development/vectors/spot-undo.svg b/octopod-css/development/vectors/spot-undo.svg new file mode 100644 index 0000000..4992814 --- /dev/null +++ b/octopod-css/development/vectors/spot-undo.svg @@ -0,0 +1,3 @@ + + + diff --git a/octopod-css/package.json b/octopod-css/package.json index 02c53a5..5e54e08 100755 --- a/octopod-css/package.json +++ b/octopod-css/package.json @@ -17,4 +17,4 @@ "postcss-sprites": "3.1.2", "run-sequence": "1.2.2" } -} \ No newline at end of file +}