update scss in scaffolds

OnroerendErfgoed · Jun 26, 2019 · 72bc226 · 72bc226
1 parent 2ddc3fb
commit 72bc226
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 54 deletions.
diff --git a/.../pyoes_admin_scaffold/+package+/static/admin/src/app/resources/scss/pyoes/_oe-header.scss b/.../pyoes_admin_scaffold/+package+/static/admin/src/app/resources/scss/pyoes/_oe-header.scss
@@ -21,25 +21,65 @@
 .logo-block img { float:$default-float; padding:40px 0px 0 5px; vertical-align:bottom; width: 65px; }
 .bgimage { background:url(../img/pyoes/header-img.jpg) no-repeat right; width: 80%; height:135px; position:absolute; right:0; z-index:0 }
 @media (min-width: 1900px) {
-	.bgimage { background:url(../img/pyoes/header-img-white.jpg) no-repeat right; width: 75%;}
+  .bgimage { background:url(../img/pyoes/header-img-white.jpg) no-repeat right; width: 75%;}
 }
 .bgimage-bouwkunde { background:url(../img/pyoes/dibe_1.jpg) no-repeat right; width: 80%; height:135px; position:absolute; right:0; z-index:0 }
 
-.header-links a {
-	color: $link-color;
-  text-decoration: none;
-  outline: 0;
-  margin: 0 16px;
-  border-bottom: solid 1px transparent;
-  -webkit-transform: scaleX(0);
-  -webkit-transition: border-bottom-color .3s ease-out;
-     -moz-transition: border-bottom-color .3s ease-out;
-      -ms-transition: border-bottom-color .3s ease-out;
-       -o-transition: border-bottom-color .3s ease-out;
-          transition: border-bottom-color .3s ease-out;
-
-  &:hover {
-    border-bottom: solid 1px $link-color;
+.header-links {
+  height: 135px;
+  overflow: hidden;
+  position: relative;
+
+  nav {
+    background-color: rgba($white, 0.6);
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(0, -50%);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+
+    li {
+      display: inline-block;
+      color: $white;
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        height: 100%;
+        background-color: #d1d8df;
+        -webkit-transform: rotate(-18deg);
+        -ms-transform: rotate(-18deg);
+        transform: rotate(-18deg);
+      }
+      &:last-child:after {
+        display: none;
+      }
+    }
+  }
+  a {
+    color: $link-color;
+    text-decoration: none;
+    outline: 0;
+    margin: 0 16px;
+    border-bottom: solid 1px transparent;
+    -webkit-transform: scaleX(0);
+    -webkit-transition: border-bottom-color .3s ease-out;
+       -moz-transition: border-bottom-color .3s ease-out;
+        -ms-transition: border-bottom-color .3s ease-out;
+         -o-transition: border-bottom-color .3s ease-out;
+            transition: border-bottom-color .3s ease-out;
+
+    &:hover {
+      border-bottom: solid 1px $link-color;
+    }
   }
 }
 
@@ -77,8 +117,34 @@ nav#main-navigation .main-navigation-inner {padding:0;position:relative;}
 #service-navigation { position:relative;z-index:100;background-color:white; filter:alpha(opacity=90); opacity:.6;padding:3px 0 8px 0;margin-top:10px}
 
 .inner{ margin: 0 auto; max-width: 1142px; padding: 0;}
-.inner-nav{ margin: 0 auto; max-width: 1142px} 
+.inner-nav{ margin: 0 auto; max-width: 1142px}
 
 
 .iw2-wrapper.iw2-custom-margin { padding:0 21px !important; }
-.iw2-layout.iw2-custom-breakpoint { min-width: 73.25rem !important; }
+.iw2-layout.iw2-custom-breakpoint { min-width: 73.25rem !important; }
+
+// transition op de mobile menu drop down
+nav.top-bar {
+  transition: max-height .3s ease-in-out;
+  max-height: $topbar-height;
+  height: auto;
+  &.expanded {
+    max-height: 666px;
+
+    // verander menu icoon in 'X' als het menu open is
+    .toggle-topbar a span::after {
+      content: "\2715";
+      box-shadow: none;
+      font-size: 1.8em;
+      font-weight: 100;
+      color: #fff;
+      -webkit-font-smoothing: antialiased;
+      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+      display: inline-block;
+      position: relative;
+      top: 4px;
+      right: -7px;
+      width: 0;
+    }
+  }
+}
diff --git a/...yoes_admin_scaffold/+package+/static/admin/src/app/resources/scss/pyoes/_oe-settings.scss b/...yoes_admin_scaffold/+package+/static/admin/src/app/resources/scss/pyoes/_oe-settings.scss
@@ -244,6 +244,9 @@ $topbar-bg: $topbar-bg-color;
 $topbar-margin-bottom: 30px;
 $topbar-dropdown-bg: $mid-purple;
 $topbar-dropdown-link-bg: $mid-purple;
+$topbar-menu-link-color-toggled: $white;
+$topbar-menu-icon-color-toggled: $white;
+$topbar-breakpoint: #{lower-bound($large-range)};
 
 // Set the link colors and styles for top-level nav
 

diff --git a/...roces_scaffold/proces/+package+/static/admin/src/app/resources/scss/pyoes/_oe-header.scss b/...roces_scaffold/proces/+package+/static/admin/src/app/resources/scss/pyoes/_oe-header.scss
@@ -21,25 +21,65 @@
 .logo-block img { float:$default-float; padding:40px 0px 0 5px; vertical-align:bottom; width: 65px; }
 .bgimage { background:url(../img/pyoes/header-img.jpg) no-repeat right; width: 80%; height:135px; position:absolute; right:0; z-index:0 }
 @media (min-width: 1900px) {
-	.bgimage { background:url(../img/pyoes/header-img-white.jpg) no-repeat right; width: 75%;}
+  .bgimage { background:url(../img/pyoes/header-img-white.jpg) no-repeat right; width: 75%;}
 }
 .bgimage-bouwkunde { background:url(../img/pyoes/dibe_1.jpg) no-repeat right; width: 80%; height:135px; position:absolute; right:0; z-index:0 }
 
-.header-links a {
-	color: $link-color;
-  text-decoration: none;
-  outline: 0;
-  margin: 0 16px;
-  border-bottom: solid 1px transparent;
-  -webkit-transform: scaleX(0);
-  -webkit-transition: border-bottom-color .3s ease-out;
-     -moz-transition: border-bottom-color .3s ease-out;
-      -ms-transition: border-bottom-color .3s ease-out;
-       -o-transition: border-bottom-color .3s ease-out;
-          transition: border-bottom-color .3s ease-out;
-
-  &:hover {
-    border-bottom: solid 1px $link-color;
+.header-links {
+  height: 135px;
+  overflow: hidden;
+  position: relative;
+
+  nav {
+    background-color: rgba($white, 0.6);
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(0, -50%);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+
+    li {
+      display: inline-block;
+      color: $white;
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        height: 100%;
+        background-color: #d1d8df;
+        -webkit-transform: rotate(-18deg);
+        -ms-transform: rotate(-18deg);
+        transform: rotate(-18deg);
+      }
+      &:last-child:after {
+        display: none;
+      }
+    }
+  }
+  a {
+    color: $link-color;
+    text-decoration: none;
+    outline: 0;
+    margin: 0 16px;
+    border-bottom: solid 1px transparent;
+    -webkit-transform: scaleX(0);
+    -webkit-transition: border-bottom-color .3s ease-out;
+       -moz-transition: border-bottom-color .3s ease-out;
+        -ms-transition: border-bottom-color .3s ease-out;
+         -o-transition: border-bottom-color .3s ease-out;
+            transition: border-bottom-color .3s ease-out;
+
+    &:hover {
+      border-bottom: solid 1px $link-color;
+    }
   }
 }
 
@@ -77,8 +117,34 @@ nav#main-navigation .main-navigation-inner {padding:0;position:relative;}
 #service-navigation { position:relative;z-index:100;background-color:white; filter:alpha(opacity=90); opacity:.6;padding:3px 0 8px 0;margin-top:10px}
 
 .inner{ margin: 0 auto; max-width: 1142px; padding: 0;}
-.inner-nav{ margin: 0 auto; max-width: 1142px} 
+.inner-nav{ margin: 0 auto; max-width: 1142px}
 
 
 .iw2-wrapper.iw2-custom-margin { padding:0 21px !important; }
-.iw2-layout.iw2-custom-breakpoint { min-width: 73.25rem !important; }
+.iw2-layout.iw2-custom-breakpoint { min-width: 73.25rem !important; }
+
+// transition op de mobile menu drop down
+nav.top-bar {
+  transition: max-height .3s ease-in-out;
+  max-height: $topbar-height;
+  height: auto;
+  &.expanded {
+    max-height: 666px;
+
+    // verander menu icoon in 'X' als het menu open is
+    .toggle-topbar a span::after {
+      content: "\2715";
+      box-shadow: none;
+      font-size: 1.8em;
+      font-weight: 100;
+      color: #fff;
+      -webkit-font-smoothing: antialiased;
+      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+      display: inline-block;
+      position: relative;
+      top: 4px;
+      right: -7px;
+      width: 0;
+    }
+  }
+}
diff --git a/...ces_scaffold/proces/+package+/static/admin/src/app/resources/scss/pyoes/_oe-settings.scss b/...ces_scaffold/proces/+package+/static/admin/src/app/resources/scss/pyoes/_oe-settings.scss
@@ -244,6 +244,9 @@ $topbar-bg: $topbar-bg-color;
 $topbar-margin-bottom: 30px;
 $topbar-dropdown-bg: $mid-purple;
 $topbar-dropdown-link-bg: $mid-purple;
+$topbar-menu-link-color-toggled: $white;
+$topbar-menu-icon-color-toggled: $white;
+$topbar-breakpoint: #{lower-bound($large-range)};
 
 // Set the link colors and styles for top-level nav
 

diff --git a/pyoes/scaffolds/pyoes_scaffold/+package+/static/scss/pyoes/_oe-header.scss b/pyoes/scaffolds/pyoes_scaffold/+package+/static/scss/pyoes/_oe-header.scss
@@ -21,25 +21,65 @@
 .logo-block img { float:$default-float; padding:40px 0px 0 5px; vertical-align:bottom; width: 65px; }
 .bgimage { background:url(../img/pyoes/header-img.jpg) no-repeat right; width: 80%; height:135px; position:absolute; right:0; z-index:0 }
 @media (min-width: 1900px) {
-	.bgimage { background:url(../img/pyoes/header-img-white.jpg) no-repeat right; width: 75%;}
+  .bgimage { background:url(../img/pyoes/header-img-white.jpg) no-repeat right; width: 75%;}
 }
 .bgimage-bouwkunde { background:url(../img/pyoes/dibe_1.jpg) no-repeat right; width: 80%; height:135px; position:absolute; right:0; z-index:0 }
 
-.header-links a {
-	color: $link-color;
-  text-decoration: none;
-  outline: 0;
-  margin: 0 16px;
-  border-bottom: solid 1px transparent;
-  -webkit-transform: scaleX(0);
-  -webkit-transition: border-bottom-color .3s ease-out;
-     -moz-transition: border-bottom-color .3s ease-out;
-      -ms-transition: border-bottom-color .3s ease-out;
-       -o-transition: border-bottom-color .3s ease-out;
-          transition: border-bottom-color .3s ease-out;
-
-  &:hover {
-    border-bottom: solid 1px $link-color;
+.header-links {
+  height: 135px;
+  overflow: hidden;
+  position: relative;
+
+  nav {
+    background-color: rgba($white, 0.6);
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(0, -50%);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+
+    li {
+      display: inline-block;
+      color: $white;
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        height: 100%;
+        background-color: #d1d8df;
+        -webkit-transform: rotate(-18deg);
+        -ms-transform: rotate(-18deg);
+        transform: rotate(-18deg);
+      }
+      &:last-child:after {
+        display: none;
+      }
+    }
+  }
+  a {
+    color: $link-color;
+    text-decoration: none;
+    outline: 0;
+    margin: 0 16px;
+    border-bottom: solid 1px transparent;
+    -webkit-transform: scaleX(0);
+    -webkit-transition: border-bottom-color .3s ease-out;
+       -moz-transition: border-bottom-color .3s ease-out;
+        -ms-transition: border-bottom-color .3s ease-out;
+         -o-transition: border-bottom-color .3s ease-out;
+            transition: border-bottom-color .3s ease-out;
+
+    &:hover {
+      border-bottom: solid 1px $link-color;
+    }
   }
 }
 
@@ -77,8 +117,34 @@ nav#main-navigation .main-navigation-inner {padding:0;position:relative;}
 #service-navigation { position:relative;z-index:100;background-color:white; filter:alpha(opacity=90); opacity:.6;padding:3px 0 8px 0;margin-top:10px}
 
 .inner{ margin: 0 auto; max-width: 1142px; padding: 0;}
-.inner-nav{ margin: 0 auto; max-width: 1142px} 
+.inner-nav{ margin: 0 auto; max-width: 1142px}
 
 
 .iw2-wrapper.iw2-custom-margin { padding:0 21px !important; }
-.iw2-layout.iw2-custom-breakpoint { min-width: 73.25rem !important; }
+.iw2-layout.iw2-custom-breakpoint { min-width: 73.25rem !important; }
+
+// transition op de mobile menu drop down
+nav.top-bar {
+  transition: max-height .3s ease-in-out;
+  max-height: $topbar-height;
+  height: auto;
+  &.expanded {
+    max-height: 666px;
+
+    // verander menu icoon in 'X' als het menu open is
+    .toggle-topbar a span::after {
+      content: "\2715";
+      box-shadow: none;
+      font-size: 1.8em;
+      font-weight: 100;
+      color: #fff;
+      -webkit-font-smoothing: antialiased;
+      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+      display: inline-block;
+      position: relative;
+      top: 4px;
+      right: -7px;
+      width: 0;
+    }
+  }
+}
diff --git a/pyoes/scaffolds/pyoes_scaffold/+package+/static/scss/pyoes/_oe-settings.scss b/pyoes/scaffolds/pyoes_scaffold/+package+/static/scss/pyoes/_oe-settings.scss
@@ -244,6 +244,9 @@ $topbar-bg: $topbar-bg-color;
 $topbar-margin-bottom: 30px;
 $topbar-dropdown-bg: $mid-purple;
 $topbar-dropdown-link-bg: $mid-purple;
+$topbar-menu-link-color-toggled: $white;
+$topbar-menu-icon-color-toggled: $white;
+$topbar-breakpoint: #{lower-bound($large-range)};
 
 // Set the link colors and styles for top-level nav