lp menus

css/global-style.css

@@ -399,23 +399,26 @@ label.middle {
   color: #333;
 }
 
-.input-group {
+.input-group, .searchtabs form {
   display: flex;
   width: 100%;
   margin-bottom: 1rem;
   align-items: stretch;
 }
-.input-group > :first-child, .input-group > :first-child.input-group-button > * {
+.input-group > :first-child, .searchtabs form > :first-child, .input-group > :first-child.input-group-button > *, .searchtabs .input-group > input[type=submit]:first-child > *, .searchtabs form > :first-child.input-group-button > *, .searchtabs form > input[type=submit]:first-child > * {
   border-radius: 6px 0 0 6px;
 }
-.input-group > :last-child, .input-group > :last-child.input-group-button > * {
+.input-group > :last-child, .searchtabs form > :last-child, .input-group > :last-child.input-group-button > *, .searchtabs .input-group > input[type=submit]:last-child > *, .searchtabs form > :last-child.input-group-button > *, .searchtabs form > input[type=submit]:last-child > * {
   border-radius: 0 6px 6px 0;
 }
 
-.input-group-button a,
+.input-group-button a, .searchtabs input[type=submit] a,
 .input-group-button input,
+.searchtabs input[type=submit] input,
 .input-group-button button,
-.input-group-button label, .input-group-button, .input-group-field, .input-group-label {
+.searchtabs input[type=submit] button,
+.input-group-button label,
+.searchtabs input[type=submit] label, .input-group-button, .searchtabs input[type=submit], .input-group-field, .searchtabs input[type=text], .input-group-label {
   margin: 0;
   white-space: nowrap;
 }
@@ -438,23 +441,26 @@ label.middle {
   border-left: 0;
 }
 
-.input-group-field {
+.input-group-field, .searchtabs input[type=text] {
   border-radius: 0;
   flex: 1 1 0px;
   min-width: 0;
 }
 
-.input-group-button {
+.input-group-button, .searchtabs input[type=submit] {
   padding-top: 0;
   padding-bottom: 0;
   text-align: center;
   display: flex;
   flex: 0 0 auto;
 }
-.input-group-button a,
+.input-group-button a, .searchtabs input[type=submit] a,
 .input-group-button input,
+.searchtabs input[type=submit] input,
 .input-group-button button,
-.input-group-button label {
+.searchtabs input[type=submit] button,
+.input-group-button label,
+.searchtabs input[type=submit] label {
   align-self: stretch;
   height: auto;
   padding-top: 0;
@@ -5848,7 +5854,7 @@ html.is-reveal-open body {
   max-width: 200px;
   margin-right: 1rem;
 }
-.top-bar .input-group-field {
+.top-bar .input-group-field, .top-bar .searchtabs input[type=text], .searchtabs .top-bar input[type=text] {
   width: 100%;
   margin-right: 0;
 }
@@ -17717,6 +17723,119 @@ ul.tabs {
   background-color: #fff;
 }
 
+.searchtabs__container {
+  margin-top: 1rem;
+  max-width: 90rem;
+  margin-right: auto;
+  margin-left: auto;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.searchtabs {
+  width: 100%;
+  position: relative;
+  margin: 0 0 1rem 0;
+  padding: 1rem;
+  border: 1px solid rgba(51, 51, 51, 0.25);
+  border-radius: 6px;
+  background-color: white;
+  color: #333;
+  background: #757575;
+  border: 0px;
+}
+.searchtabs > :first-child {
+  margin-top: 0;
+}
+.searchtabs > :last-child {
+  margin-bottom: 0;
+}
+.searchtabs ul {
+  border: 0px;
+}
+.searchtabs .tabs-title > a {
+  border-radius: 6px 6px 0 0;
+  color: #fefefe;
+  font-weight: 600;
+  font-size: 1.125rem;
+  font-family: "Roboto Condensed", sans-serif;
+  margin-right: 2px;
+  padding: 0px;
+  padding: 0.8rem 1rem;
+}
+@media print, screen and (min-width: 40em) {
+  .searchtabs .tabs-title > a {
+    padding: 0.8rem 1.5rem;
+  }
+}
+.searchtabs .tabs-title > a:hover {
+  color: #8c2004;
+}
+.searchtabs .tabs-title > a:focus, .searchtabs .tabs-title > a[aria-selected=true] {
+  color: #8c2004;
+  outline: none;
+}
+.searchtabs .tabs-content {
+  padding: 1rem;
+  border-radius: 0 6px 6px 6px;
+}
+
+.searchtabs input[type=submit] {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 1rem 0;
+  padding: 0.85em 1em;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  transition: background-color 0.25s ease-out, color 0.25s ease-out;
+  font-family: "Roboto Condensed", sans-serif;
+  font-size: 0.9rem;
+  -webkit-appearance: none;
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 0 6px 6px 0;
+  margin-bottom: 0;
+}
+[data-whatinput=mouse] .searchtabs input[type=submit] {
+  outline: 0;
+}
+.searchtabs input[type=submit], .searchtabs input[type=submit].disabled, .searchtabs input[type=submit][disabled], .searchtabs input[type=submit].disabled:hover, .searchtabs input[type=submit][disabled]:hover, .searchtabs input[type=submit].disabled:focus, .searchtabs input[type=submit][disabled]:focus {
+  background-color: #8c2004;
+  color: #fefefe;
+}
+.searchtabs input[type=submit]:hover, .searchtabs input[type=submit]:focus {
+  background-color: #771b03;
+  color: #fefefe;
+}
+.searchtabs input[type=submit], .searchtabs input[type=submit].disabled, .searchtabs input[type=submit][disabled], .searchtabs input[type=submit].disabled:hover, .searchtabs input[type=submit][disabled]:hover, .searchtabs input[type=submit].disabled:focus, .searchtabs input[type=submit][disabled]:focus {
+  background-color: #517e1b;
+  color: #fefefe;
+}
+.searchtabs input[type=submit]:hover, .searchtabs input[type=submit]:focus {
+  background-color: #416516;
+  color: #fefefe;
+}
+.searchtabs input[type=text] {
+  border-radius: 6px 0 0 6px;
+  background: #fff;
+}
+.searchtabs .tabs-panel {
+  padding-top: 1rem !important;
+  padding-right: 0rem !important;
+  padding-bottom: 0rem !important;
+  padding-left: 0rem !important;
+}
+.searchtabs .tabs {
+  background: #757575;
+}
+
+.searchtabs .tabs-title > a:focus, .searchtabs .tabs-title > a[aria-selected=true] {
+  color: #8C2004;
+  background: #fff;
+  outline: none;
+}
+
 /**
  * @file
  * Visual styles for a resizable textarea.
@@ -18038,7 +18157,7 @@ footer .social-media i {
   max-width: 200px;
   margin-right: 1rem;
 }
-.region-header .input-group-field {
+.region-header .input-group-field, .region-header .searchtabs input[type=text], .searchtabs .region-header input[type=text] {
   width: 100%;
   margin-right: 0;
 }

css/sass/components/_tabs.scss

@@ -36,3 +36,89 @@ ul.tabs {
 .tabs a:hover {
   background-color: #fff;
 }
+//lp search tabs
+.searchtabs__container {
+    margin-top: $global-margin;
+    @include flex-grid-row();
+    //@include callout;
+
+}
+.searchtabs {
+    width:100%;
+    @include callout;
+    background: #757575;
+    border:0px;
+    ul {
+
+        border:0px;
+    }
+    .tabs-title > a {
+
+        border-radius: $global-radius $global-radius 0 0;
+        color:$white;
+        font-weight:600;
+        font-size: rem-calc(18);
+        font-family: $roboto-condensed;
+        margin-right:2px;
+        padding:0px;
+    padding: 0.8rem 1rem;
+    @include breakpoint(medium) {
+        padding: 0.8rem 1.5rem;
+    }
+        &:hover {
+
+            color: $primary-color;
+        }
+
+    }
+    .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
+        color: $primary-color;
+        outline:none;
+    }
+    .tabs-content {
+        padding: $global-padding;
+        border-radius: 0 $global-radius $global-radius $global-radius;
+
+    }
+}
+
+.form-submit {
+}
+.searchtabs {
+    form {
+        @extend .input-group;
+    }
+    input[type="submit"] {
+
+        @extend .input-group-button;
+        @include button();
+        @include button-style(
+        //$background, 
+        $success-color,
+        //$background-hover, 
+        auto,
+        //$color
+        auto
+        );
+        border-radius: 0 $global-radius $global-radius 0;
+
+        margin-bottom:0;
+    }
+    input[type="text"] {
+
+        @extend .input-group-field;
+        //@include button();
+        border-radius: $global-radius 0 0 $global-radius;
+        background:#fff;
+    }
+    .tabs-panel {
+        @include padding(1,0,0,0);
+    }
+    .tabs {
+    background: #757575;}
+}
+.searchtabs .tabs-title > a:focus, .searchtabs .tabs-title > a[aria-selected='true'] {
+    color: #8C2004;
+    background: #fff;
+    outline: none;
+}