[#181] move stylesheets from layout to organised components/, leave overal structure in layout/_structure

src/web/TODO.md

@@ -26,6 +26,7 @@
 - `App.mjs` add a window resize listener for functions in setup if ( breakpoint )
 
 ### Misc:
+- check for remaining todos
 - check and add browser vendor prefixes throughout stylesheets where needed
 - comb through CSS and improve organisation for better DevX
 - write / complete UI tests

src/web/stylesheets/components/_banner.css

@@ -7,18 +7,13 @@
  */
 
 #banner {
-    position: absolute;
     padding-left: 12px;
     padding-right: 4px;
-    margin: 0;
-    width: 100%;
-    height: var(--banner-height);
     line-height: var(--banner-height);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
     border-bottom: 1px solid var(--primary-border-colour);
     justify-content: space-between; /* flex is applied through .row on the banner element */
-
 }
 
 #banner i {

src/web/stylesheets/components/_controls.css

@@ -7,13 +7,9 @@
  */
 
 #controls {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
     padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
-    height: var(--controls-height);
     overflow: hidden;
 }
 
@@ -58,14 +54,4 @@
     display: none !important;
 }
 
-.spin {
-    animation-name: spin;
-    animation-duration: 3s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
 
-@keyframes spin {
-    0%      {transform: rotate(0deg);}
-    100%    {transform: rotate(360deg);}
-}

src/web/stylesheets/components/_op-list.css

@@ -0,0 +1,24 @@
+/**
+ * Operation list styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.op-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.op-list .operation {
+    color: var(--op-list-operation-font-colour);
+    background-color: var(--op-list-operation-bg-colour);
+    border-color: var(--op-list-operation-border-colour);
+}
+
+.op-list .operation:hover {
+    filter: brightness(98%);
+}
+

src/web/stylesheets/components/_operation.css

@@ -18,10 +18,6 @@
     border-right: none;
 }
 
-#rec-list .operation {
-    padding: 14px;
-}
-
 .op-title {
     font-weight: var(--op-title-font-weight);
 }
@@ -321,6 +317,7 @@ input.toggle-string {
     background-color: var(--disabled-border-colour) !important;
 }
 
+/*@TODO: move below block elsewhere, think of a better name*/
 /* Mobile UI for the dropdown operations search */
 .dropdown-operations {
     position: relative;

src/web/stylesheets/components/_pane.css

@@ -20,6 +20,8 @@
     color: var(--title-colour);
     background-color: var(--title-background-colour);
     line-height: calc(var(--title-height) - 14px);
+    display: flex;
+    justify-content: space-between;
 }
 
 .pane-controls {

src/web/stylesheets/components/_recipe.css

@@ -1,9 +1,22 @@
+/**
+ * Recipe area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
 #recipe {
     position: relative;
 }
 
+#rec-list {
+    overflow-y: scroll;
+}
+
 #rec-list .operation {
     color: var(--rec-list-operation-font-colour);
     background-color: var(--rec-list-operation-bg-colour);
     border-color: var(--rec-list-operation-border-colour);
+    padding: 14px;
 }

src/web/stylesheets/components/_scrollbar.css

@@ -0,0 +1,20 @@
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-hover);
+}
+
+::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-track);
+}

src/web/stylesheets/components/io/_io.css

@@ -121,29 +121,6 @@ label[for="output-text"] {
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
 
-.pulse {
-    box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
-    animation: pulse 1.5s 1;
-}
-
-.pulse:hover {
-    animation-play-state: paused;
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-    70% {
-        transform: scale(1.1);
-        box-shadow: 0 0 0 20px rgba(90, 153, 212, 0);
-    }
-    100% {
-        transform: scale(1);
-        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
-    }
-}
-
 #input-find-options,
 #output-find-options {
     display: flex;

src/web/stylesheets/components/io/_search-results.css

@@ -1,3 +1,5 @@
+/* Not to be confused with #search-results in Operations */
+
 #input-search-results,
 #output-search-results {
     list-style: none;

src/web/stylesheets/components/operations/_categories.css

@@ -1,17 +1,3 @@
-/**
- * Operation list styles
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-.op-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
 .category-title {
     display: block;
     padding: 10px;
@@ -42,7 +28,6 @@
     border: none;
 }
 
-#search-results,
 #categories {
     position: absolute;
     top: 40px; /* the height of the input[type="search"] with pos relative */
@@ -54,3 +39,20 @@
     border-bottom: 1px solid var(--primary-border-colour);
     z-index: 20; /* to dropdown on top of all the other elements */
 }
+
+#categories a {
+    color: var(--category-list-font-colour);
+    cursor: pointer;
+}
+
+#categories a:hover {
+    filter: brightness(98%);
+}
+
+.favourites-hover {
+    color: var(--rec-list-operation-font-colour);
+    background-color: var(--rec-list-operation-bg-colour);
+    border: 2px dashed var(--rec-list-operation-font-colour) !important;
+    padding: 8px 8px 9px 8px;
+}
+

src/web/stylesheets/components/operations/_search.css

@@ -0,0 +1,19 @@
+#search {
+    padding-left: 10px;
+    padding-right: 10px;
+    background-image:
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
+        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
+}
+
+#search-results {
+    position: absolute;
+    top: 40px; /* the height of the input[type="search"] with pos relative */
+    left: 0;
+    right: 0;
+    height: auto;
+    max-height: 60vh;
+    overflow: scroll;
+    border-bottom: 1px solid var(--primary-border-colour);
+    z-index: 20; /* to dropdown on top of all the other elements */
+}

src/web/stylesheets/index.css

@@ -12,6 +12,7 @@
 @import "./themes/_geocities.css";
 @import "./themes/_solarizedDark.css";
 @import "./themes/_solarizedLight.css";
+@import "./themes/_animations.css";
 
 /* Utilities */
 @import "./utils/_overrides.css";
@@ -21,11 +22,20 @@
 @import "./preloader.css";
 
 /* Components */
+@import "./components/_banner.css";
 @import "./components/_button.css";
-@import "./components/_list.css";
+@import "./components/_op-list.css";
 @import "./components/_operation.css";
 @import "./components/_pane.css";
+@import "./components/_modals.css";
 @import "./components/_recipe.css";
+@import "./components/_scrollbar.css";
+@import "./components/_controls.css";
+/* Components: Operations group */
+@import "./components/operations/_search.css";
+@import "./components/operations/_categories.css";
+/* Components: IO group */
+@import "./components/io/_io.css";
 @import "./components/io/_search-results.css";
 @import "./components/io/_tabs.css";
 @import "./components/io/_icons.css";
@@ -34,12 +44,6 @@
 @import "./components/io/_file-details.css";
 
 /* Layout */
-@import "./layout/_banner.css";
-@import "./layout/_controls.css";
-@import "./layout/_io.css";
-@import "./layout/_modals.css";
-@import "./layout/_operations.css";
-@import "./layout/_recipe.css";
 @import "./layout/_structure.css";
 
 /* Operations */

src/web/stylesheets/layout/_operations.css

@@ -1,40 +0,0 @@
-/**
- * Operation area styles
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-.op-list .operation {
-    color: var(--op-list-operation-font-colour);
-    background-color: var(--op-list-operation-bg-colour);
-    border-color: var(--op-list-operation-border-colour);
-}
-
-#search {
-    padding-left: 10px;
-    padding-right: 10px;
-    background-image:
-        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
-        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
-}
-
-.favourites-hover {
-    color: var(--rec-list-operation-font-colour);
-    background-color: var(--rec-list-operation-bg-colour);
-    border: 2px dashed var(--rec-list-operation-font-colour) !important;
-    padding: 8px 8px 9px 8px;
-}
-
-#categories a {
-    color: var(--category-list-font-colour);
-    cursor: pointer;
-}
-
-#categories a:hover,
-.op-list .operation:hover {
-    filter: brightness(98%);
-}
-
-

src/web/stylesheets/layout/_recipe.css

@@ -1,11 +0,0 @@
-/**
- * Recipe area styles
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-#rec-list {
-    overflow-y: scroll;
-}

src/web/stylesheets/layout/_structure.css

@@ -10,6 +10,14 @@ body {
     overflow: hidden;
 }
 
+#banner {
+    position: absolute;
+    top: 0;
+    margin: 0;
+    width: 100%;
+    height: var(--banner-height);
+}
+
 #content-wrapper {
     position: absolute;
     top: 0;
@@ -27,23 +35,17 @@ body {
     height: 20vh;
 }
 
-#input, #output {
+#input,
+#output {
     height: 25vh;
 }
 
-#operations .title,
-#recipe .title,
-#input .title,
-#output .title {
-    display: flex;
-    justify-content: space-between;
-}
-
 #controls {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
+    height: var(--controls-height);
 }
 
 @media only screen and ( min-width: 768px ) {

src/web/stylesheets/themes/_animations.css

@@ -0,0 +1,40 @@
+/* Spin */
+.spin {
+    animation-name: spin;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes spin {
+    0%      {transform: rotate(0deg);}
+    100%    {transform: rotate(360deg);}
+}
+
+
+
+/* Pulse */
+.pulse {
+    box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
+    animation: pulse 1.5s 1;
+}
+
+.pulse:hover {
+    animation-play-state: paused;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    70% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 20px rgba(90, 153, 212, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
+    }
+}
+
+

src/web/stylesheets/utils/_general.css

@@ -59,26 +59,6 @@ body {
     transform: rotate(180deg);
 }
 
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-hover);
-}
-
-::-webkit-scrollbar-corner {
-    background-color: var(--scrollbar-track);
-}
 
 /* Highlighters */
 .hl1 { background-color: var(--hl1); }
@@ -87,7 +67,8 @@ body {
 .hl4 { background-color: var(--hl4); }
 .hl5 { background-color: var(--hl5); }
 
-/* Device bound UI visibility */
+
+/* Screen-bound UI visibility */
 .desktop-only {
     display: none;
 }