changes in resources search, menu and tags

dist/assets/scss/components/_forms.scss

@@ -1,74 +1,8 @@
-// search elements
-.search {
-  .input-group {
-    position: relative;
-    border-radius: 4rem;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    .appear {
-      right: 0;
-      position: absolute;
-      height: 100%;
-      padding: 0.3rem 1rem;
-    }
-  }
-  .input-group * {
-    margin: 0;
-  }
-  .button {
-    border-color: $primary-color;
-  }
-  .appear {
-    display:none;
-  }
-  input {
-    &:active {
-      border-color: $primary-color;
-      background-color: $input-background-focus;
-    }
-    &:focus,&:focus-within{
-      border-color: $primary-color;
-      background-color: $input-background;
-    }
-    &:not(:placeholder-shown) {
-      border:none;
-      background-color: $input-background-focus;
-      position: relative;
-      padding-right: $global-padding * 9;
-      + .appear {
-        display: block;
-        background-color: scale-color($input-background-focus, $lightness: -20%);
-        z-index: 2;
-        &:hover {
-          color: $white;
-          background-color: $primary-color;
-        }
-
-      }
-    }
-  }
-  .hollow {
-    border-color: $primary-color;
-    color: $primary-color;
-    &:after {
-    }
-    &:placeholder {
-      color: scale-color($primary-color, $lightness: -20%);
-    }
-    &:hover {
-      background-color: scale-color($primary-color, $lightness: 95%);
-    }
-    &:active {
-      background-color: scale-color($primary-color, $lightness: 85%);
-    }
-  }
-}
 //search block size in content
-article,.omekas-entry-content {
+article,aside,.omekas-entry-content {
-  .search{
+  .search,.widget_search{
     @include xy-grid();
-    .input-group {
+    .input-group,.search-form {
       @include breakpoint(small){
         @include xy-cell (12);
         margin-left: auto;
@@ -87,67 +21,188 @@ article,.omekas-entry-content {
     }
   }
 }
-// wordpress
+// search elements
-.search-form {
+.search {
-  display: flex;
+  .input-group {
-  justify-content: center;
+    position: relative;
-  align-content: center;
+    border-radius: $global-padding*4;
-  .search-field {
+    overflow: hidden;
-    margin-bottom: 0;
+    padding: 0;
-  }
+    margin: 0;
-  label {
+    .appear {
-    width: 40vw;
+      right: 0;
-    max-width: 30rem;
+      position: absolute;
-  }
+      height: 100%;
-  input[type="search"] {
+      padding: $global-padding*0.3 $global-padding;
-    padding-left: $global-padding;
-    padding-right: $global-padding;
-    border: $input-border;
-    background-color: $input-background-focus;
-    border-radius: $global-radius-archive;
-  }
-  input[type="submit"]{
-    @extend button;
-    width:0px;
-    min-width: unset !important;
-    height:0px;
-    background-color: $input-background-focus;
-    border-radius: $global-radius-archive;
-  }
-  &:active,&:focus,&:focus-within{
-    label {
-      width: calc(40vw + 10rem);
-      margin-right: -10rem;
     }
-    input[type="submit"] { 
+  }
-      width:auto;
+  .input-group * {
-      min-width: 10rem !important;
+    margin: 0;
-      height:auto;
+  }
-      background-color: scale-color($input-background-focus, $lightness: -20%);
+  .button {
-    }
+    border-color: $primary-color;
-    input[type="search"] {
+  }
-      padding-right: 11rem;
+  .appear {
+    display:none;
+  }
+  input {
+    border-radius: $global-radius-archive;
+    &:active {
       border-color: $primary-color;
       background-color: $input-background-focus;
-      &:not(:placeholder-shown) {
+    }
-        border:none;
+    &:focus,&:focus-within{
-        background-color: $input-background-focus;
+      border-color: $input-background;
-        color: $primary-color;
+      background-color: $input-background;
-        //position: relative;
+    }
-        //padding-right: $global-padding * 9;
+    &:not(:placeholder-shown) {
-        //+ .appear {
+      border:none;
-        //  display: block;
+      background-color: $input-background-focus;
-        //  background-color: scale-color($input-background-focus, $lightness: -20%);
+      position: relative;
-        //  z-index: 2;
+      padding-right: $global-padding * 9;
-        //  &:hover {
+      + .appear {
-        //    color: $white;
+        display: block;
-        //    background-color: $primary-color;
+        background-color: scale-color($input-background-focus, $lightness: -20%);
-        //   }
+        z-index: 2;
-        //}
+        &:hover {
+          color: $white;
+          background-color: $primary-color;
+        }
+      }
+    }
+  }
+  .hollow {
+    border-color: $primary-color;
+    color: $primary-color;
+    &:after {
+    }
+    &::placeholder {
+      color: scale-color($primary-color, $lightness: -20%);
+    }
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 95%);
+    }
+    &:active {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+  &-form {
+    @extend .search;
+    position: relative;
+    min-width: 40vw;
+    input:not(:placeholder-shown) {
+      padding: $global-padding/2 $global-padding;
+    }
+    .search-submit {
+      @extend button;
+      padding: $global-padding/2 $global-padding;
+      display:none;
+    }
+    .search-field {
+      &:active,&:focus,&:not(:placeholder-shown) {
+        padding-right: $global-padding * 8;
+      }
+    }
+    label {
+      width:100%;
+      &:active,&:focus,&:focus-within {
+        + .search-submit {
+          display: inline;
+          position: absolute;
+          right: 0;
+          width: auto;
+          min-width: unset;
+          background-color: scale-color($input-background-focus, $lightness: -20%);
+        }
       }
     }
   }
 }
+// wordpress
+.search-form {
+   // display: flex;
+   // justify-content: center;
+   // align-content: center;
+  // .search-field {
+  //   margin-bottom: 0;
+  // }
+  // label {
+  //   width: 40vw;
+  //   max-width: 30rem;
+  // }
+  // input {
+  //   border: $input-border;
+  //   &:active,&:focus,&:focus-within {
+  //     border: $input-border;
+  //   }
+    // &.search-field {
+      // border-color: $primary-color;
+      // color: $primary-color;
+      // &::after {
+      // }
+      // &::placeholder {
+      //   color: scale-color($primary-color, $lightness: -20%);
+      // }
+      // &:hover {
+      //   background-color: scale-color($primary-color, $lightness: 95%);
+      // }
+      // &:active {
+      //   background-color: scale-color($primary-color, $lightness: 85%);
+      // }
+    // }
+  // }
+  // input[type="search"] {
+  //   padding-left: $global-padding;
+  //   padding-right: $global-padding;
+  //   border: $input-border;
+  //   border-radius: $global-radius-archive;
+  //   background-color: $input-background;
+  // }
+  // input[type="submit"]{
+  //   @extend button;
+  //   // width:0px;
+  //   min-width: unset !important;
+  //   // height:0px;
+  //   color: $white;
+  //   background-color: $input-background-focus;
+  //   border-radius: $global-radius-archive;
+  // }
+  // &:active{
+  //   input[type="submit"] {
+  //     background-color: scale-color($input-background-focus, $lightness: -20%);
+  //   }
+  //   input[type="search"] {
+  //     background-color: $input-background-focus;
+  //   }
+  // }
+  // &:focus,&:focus-within{
+  //   input[type="submit"] {
+  //     // width:auto;
+  //     // min-width: 10rem !important;
+  //     // height:auto;
+  //     background-color: $input-background;
+  //   }
+  //   input[type="search"] {
+  //     padding-right: 11rem;
+  //     border:$input-border;
+  //     // border-color: $primary-color;
+  //     background-color: $input-background;
+  //     &:not(:placeholder-shown) {
+  //       border:none;
+  //       background-color: $input-background-focus;
+  //       color: $primary-color;
+  //     }
+  //   }
+  // }
+}
+.hero {
+  .search-form {
+    input[type="submit"]{
+      color: $white;
+    }
+  }
+}
+
 // contact form 7
 //
 

dist/assets/scss/modules/_content.scss

@@ -362,7 +362,6 @@ main {
       }
       .widget_tag_cloud {
         position: relative;
-        overflow: visible;
         margin-left: $global-margin;
         $tags-background-color: scale-color($anchor-color, $lightness: 95%);
         a {
@@ -386,25 +385,40 @@ main {
         }
         &:hover{
           .tagcloud {
-            top: 0;
+            top: 1.6rem;
             visibility: visible;
             opacity: 1;
             transform: translateY(0px);
+            background-color: rgba(255,255,255,0.1);
+            @include breakpoint(small){
+              width: 80vw;
+              right: -1rem;
+              text-align: right;
+            }
+            @include breakpoint(medium){
+              width: 90vw;
+              right: -15vw;
+            }
+            @include breakpoint(large){
+              width: 90vw;
+              right: -25vw;
+            }
+
           }
         }
         .tagcloud {
           position: absolute;
           visibility:hidden;
           opacity:0;
-          transition: transform 0.5s;
+          transition: transform 0.5s,background-color 0.5s;
           transform: translateY(-$global-padding);
-          padding: $global-padding*3;
+          background-color: $tags-background-color;
-          height:0;
+          padding: $global-padding;
-          width:50vw;
           a {
             display: inline-block;
             background-color: $tags-background-color;
             padding:$global-padding/4 $global-padding/2;
+            font-size: $global-font-size * 0.7 !important;
             &:before {
               content: '#';
               display: inline-block;

dist/assets/scss/modules/_navigation.scss

@@ -60,39 +60,6 @@
       }
     }
   }
-  // .widget_tag_cloud {
-  //   h6 {
-  //     display:none;
-  //   }
-  //   .tagcloud {
-  //     display: none;
-  //     padding: $global-padding*3;
-  //     width:50vw;
-  //     // max-width: 20rem;
-  //     a {
-  //       display: inline-block;
-  //       background-color:  scale-color($anchor-color, $lightness: 90%);
-  //       padding:$global-padding/4 $global-padding/2;
-  //       &:before {
-  //         content: '#';
-  //         display: inline-block;
-  //       }
-  //     }
-  //   }
-  //   &:before {
-  //     content: '#tags';
-  //     color: $primary-color;
-  //     background-color:  scale-color($anchor-color, $lightness: 90%);
-  //     padding:$global-padding/4 $global-padding/2;
-  //   }
-  //   &:hover{
-  //     .tagcloud {
-  //       display: inline-block;
-  //       position: absolute;
-  //       top: 0;
-  //     }
-  //   }
-  // }
 @include breakpoint(small){
 }
 @include breakpoint(medium){

src/assets/scss/components/_forms.scss

@@ -1,74 +1,8 @@
-// search elements
-.search {
-  .input-group {
-    position: relative;
-    border-radius: 4rem;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    .appear {
-      right: 0;
-      position: absolute;
-      height: 100%;
-      padding: 0.3rem 1rem;
-    }
-  }
-  .input-group * {
-    margin: 0;
-  }
-  .button {
-    border-color: $primary-color;
-  }
-  .appear {
-    display:none;
-  }
-  input {
-    &:active {
-      border-color: $primary-color;
-      background-color: $input-background-focus;
-    }
-    &:focus,&:focus-within{
-      border-color: $primary-color;
-      background-color: $input-background;
-    }
-    &:not(:placeholder-shown) {
-      border:none;
-      background-color: $input-background-focus;
-      position: relative;
-      padding-right: $global-padding * 9;
-      + .appear {
-        display: block;
-        background-color: scale-color($input-background-focus, $lightness: -20%);
-        z-index: 2;
-        &:hover {
-          color: $white;
-          background-color: $primary-color;
-        }
-
-      }
-    }
-  }
-  .hollow {
-    border-color: $primary-color;
-    color: $primary-color;
-    &:after {
-    }
-    &:placeholder {
-      color: scale-color($primary-color, $lightness: -20%);
-    }
-    &:hover {
-      background-color: scale-color($primary-color, $lightness: 95%);
-    }
-    &:active {
-      background-color: scale-color($primary-color, $lightness: 85%);
-    }
-  }
-}
 //search block size in content
-article,.omekas-entry-content {
+article,aside,.omekas-entry-content {
-  .search{
+  .search,.widget_search{
     @include xy-grid();
-    .input-group {
+    .input-group,.search-form {
       @include breakpoint(small){
         @include xy-cell (12);
         margin-left: auto;
@@ -87,67 +21,188 @@ article,.omekas-entry-content {
     }
   }
 }
-// wordpress
+// search elements
-.search-form {
+.search {
-  display: flex;
+  .input-group {
-  justify-content: center;
+    position: relative;
-  align-content: center;
+    border-radius: $global-padding*4;
-  .search-field {
+    overflow: hidden;
-    margin-bottom: 0;
+    padding: 0;
-  }
+    margin: 0;
-  label {
+    .appear {
-    width: 40vw;
+      right: 0;
-    max-width: 30rem;
+      position: absolute;
-  }
+      height: 100%;
-  input[type="search"] {
+      padding: $global-padding*0.3 $global-padding;
-    padding-left: $global-padding;
-    padding-right: $global-padding;
-    border: $input-border;
-    background-color: $input-background-focus;
-    border-radius: $global-radius-archive;
-  }
-  input[type="submit"]{
-    @extend button;
-    width:0px;
-    min-width: unset !important;
-    height:0px;
-    background-color: $input-background-focus;
-    border-radius: $global-radius-archive;
-  }
-  &:active,&:focus,&:focus-within{
-    label {
-      width: calc(40vw + 10rem);
-      margin-right: -10rem;
     }
-    input[type="submit"] { 
+  }
-      width:auto;
+  .input-group * {
-      min-width: 10rem !important;
+    margin: 0;
-      height:auto;
+  }
-      background-color: scale-color($input-background-focus, $lightness: -20%);
+  .button {
-    }
+    border-color: $primary-color;
-    input[type="search"] {
+  }
-      padding-right: 11rem;
+  .appear {
+    display:none;
+  }
+  input {
+    border-radius: $global-radius-archive;
+    &:active {
       border-color: $primary-color;
       background-color: $input-background-focus;
-      &:not(:placeholder-shown) {
+    }
-        border:none;
+    &:focus,&:focus-within{
-        background-color: $input-background-focus;
+      border-color: $input-background;
-        color: $primary-color;
+      background-color: $input-background;
-        //position: relative;
+    }
-        //padding-right: $global-padding * 9;
+    &:not(:placeholder-shown) {
-        //+ .appear {
+      border:none;
-        //  display: block;
+      background-color: $input-background-focus;
-        //  background-color: scale-color($input-background-focus, $lightness: -20%);
+      position: relative;
-        //  z-index: 2;
+      padding-right: $global-padding * 9;
-        //  &:hover {
+      + .appear {
-        //    color: $white;
+        display: block;
-        //    background-color: $primary-color;
+        background-color: scale-color($input-background-focus, $lightness: -20%);
-        //   }
+        z-index: 2;
-        //}
+        &:hover {
+          color: $white;
+          background-color: $primary-color;
+        }
+      }
+    }
+  }
+  .hollow {
+    border-color: $primary-color;
+    color: $primary-color;
+    &:after {
+    }
+    &::placeholder {
+      color: scale-color($primary-color, $lightness: -20%);
+    }
+    &:hover {
+      background-color: scale-color($primary-color, $lightness: 95%);
+    }
+    &:active {
+      background-color: scale-color($primary-color, $lightness: 85%);
+    }
+  }
+  &-form {
+    @extend .search;
+    position: relative;
+    min-width: 40vw;
+    input:not(:placeholder-shown) {
+      padding: $global-padding/2 $global-padding;
+    }
+    .search-submit {
+      @extend button;
+      padding: $global-padding/2 $global-padding;
+      display:none;
+    }
+    .search-field {
+      &:active,&:focus,&:not(:placeholder-shown) {
+        padding-right: $global-padding * 8;
+      }
+    }
+    label {
+      width:100%;
+      &:active,&:focus,&:focus-within {
+        + .search-submit {
+          display: inline;
+          position: absolute;
+          right: 0;
+          width: auto;
+          min-width: unset;
+          background-color: scale-color($input-background-focus, $lightness: -20%);
+        }
       }
     }
   }
 }
+// wordpress
+.search-form {
+   // display: flex;
+   // justify-content: center;
+   // align-content: center;
+  // .search-field {
+  //   margin-bottom: 0;
+  // }
+  // label {
+  //   width: 40vw;
+  //   max-width: 30rem;
+  // }
+  // input {
+  //   border: $input-border;
+  //   &:active,&:focus,&:focus-within {
+  //     border: $input-border;
+  //   }
+    // &.search-field {
+      // border-color: $primary-color;
+      // color: $primary-color;
+      // &::after {
+      // }
+      // &::placeholder {
+      //   color: scale-color($primary-color, $lightness: -20%);
+      // }
+      // &:hover {
+      //   background-color: scale-color($primary-color, $lightness: 95%);
+      // }
+      // &:active {
+      //   background-color: scale-color($primary-color, $lightness: 85%);
+      // }
+    // }
+  // }
+  // input[type="search"] {
+  //   padding-left: $global-padding;
+  //   padding-right: $global-padding;
+  //   border: $input-border;
+  //   border-radius: $global-radius-archive;
+  //   background-color: $input-background;
+  // }
+  // input[type="submit"]{
+  //   @extend button;
+  //   // width:0px;
+  //   min-width: unset !important;
+  //   // height:0px;
+  //   color: $white;
+  //   background-color: $input-background-focus;
+  //   border-radius: $global-radius-archive;
+  // }
+  // &:active{
+  //   input[type="submit"] {
+  //     background-color: scale-color($input-background-focus, $lightness: -20%);
+  //   }
+  //   input[type="search"] {
+  //     background-color: $input-background-focus;
+  //   }
+  // }
+  // &:focus,&:focus-within{
+  //   input[type="submit"] {
+  //     // width:auto;
+  //     // min-width: 10rem !important;
+  //     // height:auto;
+  //     background-color: $input-background;
+  //   }
+  //   input[type="search"] {
+  //     padding-right: 11rem;
+  //     border:$input-border;
+  //     // border-color: $primary-color;
+  //     background-color: $input-background;
+  //     &:not(:placeholder-shown) {
+  //       border:none;
+  //       background-color: $input-background-focus;
+  //       color: $primary-color;
+  //     }
+  //   }
+  // }
+}
+.hero {
+  .search-form {
+    input[type="submit"]{
+      color: $white;
+    }
+  }
+}
+
 // contact form 7
 //
 

src/assets/scss/modules/_content.scss

@@ -362,7 +362,6 @@ main {
       }
       .widget_tag_cloud {
         position: relative;
-        overflow: visible;
         margin-left: $global-margin;
         $tags-background-color: scale-color($anchor-color, $lightness: 95%);
         a {
@@ -386,25 +385,40 @@ main {
         }
         &:hover{
           .tagcloud {
-            top: 0;
+            top: 1.6rem;
             visibility: visible;
             opacity: 1;
             transform: translateY(0px);
+            background-color: rgba(255,255,255,0.1);
+            @include breakpoint(small){
+              width: 80vw;
+              right: -1rem;
+              text-align: right;
+            }
+            @include breakpoint(medium){
+              width: 90vw;
+              right: -15vw;
+            }
+            @include breakpoint(large){
+              width: 90vw;
+              right: -25vw;
+            }
+
           }
         }
         .tagcloud {
           position: absolute;
           visibility:hidden;
           opacity:0;
-          transition: transform 0.5s;
+          transition: transform 0.5s,background-color 0.5s;
           transform: translateY(-$global-padding);
-          padding: $global-padding*3;
+          background-color: $tags-background-color;
-          height:0;
+          padding: $global-padding;
-          width:50vw;
           a {
             display: inline-block;
             background-color: $tags-background-color;
             padding:$global-padding/4 $global-padding/2;
+            font-size: $global-font-size * 0.7 !important;
             &:before {
               content: '#';
               display: inline-block;

src/assets/scss/modules/_navigation.scss

@@ -60,39 +60,6 @@
       }
     }
   }
-  // .widget_tag_cloud {
-  //   h6 {
-  //     display:none;
-  //   }
-  //   .tagcloud {
-  //     display: none;
-  //     padding: $global-padding*3;
-  //     width:50vw;
-  //     // max-width: 20rem;
-  //     a {
-  //       display: inline-block;
-  //       background-color:  scale-color($anchor-color, $lightness: 90%);
-  //       padding:$global-padding/4 $global-padding/2;
-  //       &:before {
-  //         content: '#';
-  //         display: inline-block;
-  //       }
-  //     }
-  //   }
-  //   &:before {
-  //     content: '#tags';
-  //     color: $primary-color;
-  //     background-color:  scale-color($anchor-color, $lightness: 90%);
-  //     padding:$global-padding/4 $global-padding/2;
-  //   }
-  //   &:hover{
-  //     .tagcloud {
-  //       display: inline-block;
-  //       position: absolute;
-  //       top: 0;
-  //     }
-  //   }
-  // }
 @include breakpoint(small){
 }
 @include breakpoint(medium){