Skip to content

Instantly share code, notes, and snippets.

@hilyin
Created April 1, 2020 04:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hilyin/9453ca3e8a320b2c5ae131a4aaaf4307 to your computer and use it in GitHub Desktop.
Save hilyin/9453ca3e8a320b2c5ae131a4aaaf4307 to your computer and use it in GitHub Desktop.
button#responsive-menu-pro-button,
#responsive-menu-pro-container {
display: none;
-webkit-text-size-adjust: 100%;
}
#responsive-menu-pro-container {
z-index: 99998;
}
@media screen and (max-width:912px) {
#responsive-menu-pro-container {
display: block;
position: fixed;
top: 0;
bottom: 0; padding-bottom: 5px;
margin-bottom: -5px;
outline: 1px solid transparent;
overflow-y: auto;
overflow-x: hidden;
}
#responsive-menu-pro-container .responsive-menu-pro-search-box {
width: 100%;
padding: 0 2%;
border-radius: 2px;
height: 50px;
-webkit-appearance: none;
}
#responsive-menu-pro-container.push-left,
#responsive-menu-pro-container.slide-left {
transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
}
.responsive-menu-pro-open #responsive-menu-pro-container.push-left,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-left {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
}
#responsive-menu-pro-container.push-top,
#responsive-menu-pro-container.slide-top {
transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
}
.responsive-menu-pro-open #responsive-menu-pro-container.push-top,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-top {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
}
#responsive-menu-pro-container.push-right,
#responsive-menu-pro-container.slide-right {
transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
}
.responsive-menu-pro-open #responsive-menu-pro-container.push-right,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-right {
transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
}
#responsive-menu-pro-container.push-bottom,
#responsive-menu-pro-container.slide-bottom {
transform: translateY(100%);
-ms-transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
}
.responsive-menu-pro-open #responsive-menu-pro-container.push-bottom,
.responsive-menu-pro-open #responsive-menu-pro-container.slide-bottom {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
}
#responsive-menu-pro-container,
#responsive-menu-pro-container:before,
#responsive-menu-pro-container:after,
#responsive-menu-pro-container *,
#responsive-menu-pro-container *:before,
#responsive-menu-pro-container *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#responsive-menu-pro-container #responsive-menu-pro-search-box,
#responsive-menu-pro-container #responsive-menu-pro-additional-content,
#responsive-menu-pro-container #responsive-menu-pro-title {
padding: 25px 5%;
}
#responsive-menu-pro-container #responsive-menu-pro,
#responsive-menu-pro-container #responsive-menu-pro ul {
width: 100%;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu {
display: none;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu.responsive-menu-pro-submenu-open {
display: block;
} #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu-depth-1 a.responsive-menu-pro-item-link {
padding-left:15%;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu-depth-2 a.responsive-menu-pro-item-link {
padding-left:15%;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu-depth-3 a.responsive-menu-pro-item-link {
padding-left:20%;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu-depth-4 a.responsive-menu-pro-item-link {
padding-left:25%;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu-depth-5 a.responsive-menu-pro-item-link {
padding-left:30%;
}
#responsive-menu-pro-container li.responsive-menu-pro-item {
width: 100%;
list-style: none;
}
#responsive-menu-pro-container li.responsive-menu-pro-item a {
width: 100%;
display: block;
text-decoration: none;
padding: 021px;
position: relative;
}
#responsive-menu-pro-container li.responsive-menu-pro-item a .glyphicon,
#responsive-menu-pro-container li.responsive-menu-pro-item a .fab,
#responsive-menu-pro-container li.responsive-menu-pro-item a .fas {
margin-right: 15px;
}
#responsive-menu-pro-container li.responsive-menu-pro-item a .responsive-menu-pro-subarrow {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
overflow: hidden;
}
#responsive-menu-pro-container li.responsive-menu-pro-item a .responsive-menu-pro-subarrow .glyphicon,
#responsive-menu-pro-container li.responsive-menu-pro-item a .responsive-menu-pro-subarrow .fab,
#responsive-menu-pro-container li.responsive-menu-pro-item a .responsive-menu-pro-subarrow .fas {
margin-right: 0;
}
button#responsive-menu-pro-button .responsive-menu-pro-button-icon-inactive {
display: none;
}
button#responsive-menu-pro-button {
z-index: 99999;
display: none;
overflow: hidden;
outline: none;
}
button#responsive-menu-pro-button img {
max-width: 100%;
}
.responsive-menu-pro-label {
display: inline-block;
font-weight: 600;
margin: 0 5px;
vertical-align: middle;
}
.responsive-menu-pro-accessible {
display: inline-block;
}
.responsive-menu-pro-accessible .responsive-menu-pro-box {
display: inline-block;
vertical-align: middle;
}
.responsive-menu-pro-label.responsive-menu-pro-label-top,
.responsive-menu-pro-label.responsive-menu-pro-label-bottom {
display: block;
margin: 0 auto;
}
button#responsive-menu-pro-button {
padding: 0 0;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
}
.responsive-menu-pro-box {
width:22px;
height:15px;
display: inline-block;
position: relative;
}
.responsive-menu-pro-inner {
display: block;
top: 50%;
margin-top:-1.5px;
}
.responsive-menu-pro-inner,
.responsive-menu-pro-inner::before,
.responsive-menu-pro-inner::after {
width:22px;
height:3px;
background-color:rgba(0, 0, 0, 1);
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.responsive-menu-pro-open .responsive-menu-pro-inner,
.responsive-menu-pro-open .responsive-menu-pro-inner::before,
.responsive-menu-pro-open .responsive-menu-pro-inner::after {
background-color:rgba(0, 0, 0, 1);
}
button#responsive-menu-pro-button:hover .responsive-menu-pro-inner,
button#responsive-menu-pro-button:hover .responsive-menu-pro-inner::before,
button#responsive-menu-pro-button:hover .responsive-menu-pro-inner::after,
button#responsive-menu-pro-button:hover .responsive-menu-pro-open .responsive-menu-pro-inner,
button#responsive-menu-pro-button:hover .responsive-menu-pro-open .responsive-menu-pro-inner::before,
button#responsive-menu-pro-button:hover .responsive-menu-pro-open .responsive-menu-pro-inner::after,
button#responsive-menu-pro-button:focus .responsive-menu-pro-inner,
button#responsive-menu-pro-button:focus .responsive-menu-pro-inner::before,
button#responsive-menu-pro-button:focus .responsive-menu-pro-inner::after,
button#responsive-menu-pro-button:focus .responsive-menu-pro-open .responsive-menu-pro-inner,
button#responsive-menu-pro-button:focus .responsive-menu-pro-open .responsive-menu-pro-inner::before,
button#responsive-menu-pro-button:focus .responsive-menu-pro-open .responsive-menu-pro-inner::after {
background-color:rgba(0, 0, 0, 1);
}
.responsive-menu-pro-inner::before,
.responsive-menu-pro-inner::after {
content: "";
display: block;
}
.responsive-menu-pro-inner::before {
top:-6px;
}
.responsive-menu-pro-inner::after {
bottom:-6px;
}.responsive-menu-pro-boring .responsive-menu-pro-inner,
.responsive-menu-pro-boring .responsive-menu-pro-inner::before,
.responsive-menu-pro-boring .responsive-menu-pro-inner::after {
transition-property: none;
}
.responsive-menu-pro-boring.is-active .responsive-menu-pro-inner {
transform: rotate(45deg);
}
.responsive-menu-pro-boring.is-active .responsive-menu-pro-inner::before {
top: 0;
opacity: 0;
}
.responsive-menu-pro-boring.is-active .responsive-menu-pro-inner::after {
bottom: 0;
transform: rotate(-90deg);
}
button#responsive-menu-pro-button {
width:44px;
height:80px;
position:fixed;
top:0px;right:12px;
display: inline-block;
transition: transform0.5s, background-color0.5s; }
button#responsive-menu-pro-button .responsive-menu-pro-box {
color:rgba(0, 0, 0, 1);
}
.responsive-menu-pro-open button#responsive-menu-pro-button .responsive-menu-pro-box {
color:rgba(0, 0, 0, 1);
}
.responsive-menu-pro-label {
color:#ffffff;
font-size:13px;
line-height:13px; }
.responsive-menu-pro-label .responsive-menu-pro-button-text-open {
display: none;
}
.responsive-menu-pro-fade-top #responsive-menu-pro-container,
.responsive-menu-pro-fade-left #responsive-menu-pro-container,
.responsive-menu-pro-fade-right #responsive-menu-pro-container,
.responsive-menu-pro-fade-bottom #responsive-menu-pro-container {
display: none;
}#content {
transition: transform0.5s;
}
html.responsive-menu-open,
.responsive-menu-open body {
width: 100%;
}
#responsive-menu-pro-container {
width:100%;top: 0; transition: transform0.5s;
text-align:left; }
#responsive-menu-pro-container #responsive-menu-pro-wrapper {
background:rgba(33, 33, 33, 1);
}
#responsive-menu-pro-container #responsive-menu-pro-additional-content {
color:#ffffff;
}
#responsive-menu-pro-container .responsive-menu-pro-search-box {
background:#ffffff;
border: 2px solid#dadada;
color:#333333;
}
#responsive-menu-pro-container .responsive-menu-pro-search-box:-ms-input-placeholder {
color:#c7c7cd;
}
#responsive-menu-pro-container .responsive-menu-pro-search-box::-webkit-input-placeholder {
color:#c7c7cd;
}
#responsive-menu-pro-container .responsive-menu-pro-search-box:-moz-placeholder {
color:#c7c7cd;
opacity: 1;
}
#responsive-menu-pro-container .responsive-menu-pro-search-box::-moz-placeholder {
color:#c7c7cd;
opacity: 1;
}
#responsive-menu-pro-container .responsive-menu-pro-item-link,
#responsive-menu-pro-container #responsive-menu-pro-title,
#responsive-menu-pro-container .responsive-menu-pro-subarrow {
transition: background-color0.5s,
border-color0.5s,
color0.5s;
}
#responsive-menu-pro-container #responsive-menu-pro-title {
background-color:#212121;
color:#ffffff;
font-size:13px;
text-align:left;
}
#responsive-menu-pro-container #responsive-menu-pro-title a {
color:#ffffff;
font-size:13px;
text-decoration: none;
}
#responsive-menu-pro-container #responsive-menu-pro-title a:hover {
color:#ffffff;
}
#responsive-menu-pro-container #responsive-menu-pro-title:hover {
background-color:#212121;
color:#ffffff;
}
#responsive-menu-pro-container #responsive-menu-pro-title:hover a {
color:#ffffff;
}
#responsive-menu-pro-container #responsive-menu-pro-title #responsive-menu-pro-title-image {
display: inline-block;
vertical-align: middle;
max-width: 100%;
margin-bottom: 15px;
}
#responsive-menu-pro-container #responsive-menu-pro-title #responsive-menu-pro-title-image img { max-width: 100%;
}
#responsive-menu-pro-container #responsive-menu-pro > li.responsive-menu-pro-item:first-child > a {
border-top:1px solidrgba(90, 90, 90, 1);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item .responsive-menu-pro-item-link {
font-size:18px;
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a {
line-height:49px;
border-bottom:1px solidrgba(90, 90, 90, 1);
color:#ffffff;
background-color:rgba(39, 39, 39, 1); height:49px; }
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a:hover {
color:rgba(255, 255, 255, 1);
background-color:rgba(39, 39, 39, 1);
border-color:rgba(90, 90, 90, 1);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a:hover .responsive-menu-pro-subarrow {
color:rgba(87, 157, 220, 1);
border-color:rgba(25, 25, 25, 1);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a:hover .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active {
color:rgba(87, 157, 220, 1);
border-color:rgba(25, 25, 25, 1);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow {right: 0;
height:52px;
line-height:52px;
width:65px;
color:rgba(87, 157, 220, 1);
border-left:1px solidrgba(25, 25, 25, 1);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active {
color:rgba(87, 157, 220, 1);
border-color:rgba(25, 25, 25, 1);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active:hover {
color:rgba(87, 157, 220, 1);
border-color:rgba(25, 25, 25, 1);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow:hover {
color:rgba(87, 157, 220, 1);
border-color:rgba(25, 25, 25, 1);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > .responsive-menu-pro-item-link {
background-color:rgba(39, 39, 39, 1);
color:rgba(255, 255, 255, 1);
border-color:rgba(90, 90, 90, 1);
}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item.responsive-menu-pro-current-item > .responsive-menu-pro-item-link:hover {
background-color:rgba(39, 39, 39, 1);
color:rgba(255, 255, 255, 1);
border-color:rgba(90, 90, 90, 1);
} #responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item .responsive-menu-pro-item-link { font-size:18px;
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a { height:42px; line-height:42px;
border-bottom:1px solidrgba(25, 25, 25, 1);
color:#ffffff;
background-color:rgba(25, 25, 25, 1);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a:hover {
color:#ffffff;
background-color:rgba(25, 25, 25, 1);
border-color:rgba(25, 25, 25, 1);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a:hover .responsive-menu-pro-subarrow {
color:#ffffff;
border-color:rgba(0, 0, 0, 0);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a:hover .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active {
color:#ffffff;
border-color:rgba(0, 0, 0, 0);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a .responsive-menu-pro-subarrow {right: 0;
height:39px;
line-height:39px;
width:40px;
color:#ffffff;
border-left:1px solidrgba(0, 0, 0, 0);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active {
color:#ffffff;
border-color:rgba(0, 0, 0, 0);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active:hover {
color:#ffffff;
border-color:rgba(0, 0, 0, 0);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item a .responsive-menu-pro-subarrow:hover {
color:#ffffff;
border-color:rgba(0, 0, 0, 0);
background-color:rgba(0, 0, 0, 0);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item.responsive-menu-pro-current-item > .responsive-menu-pro-item-link {
background-color:rgba(25, 25, 25, 1);
color:#ffffff;
border-color:rgba(25, 25, 25, 1);
}
#responsive-menu-pro-container #responsive-menu-pro ul.responsive-menu-pro-submenu li.responsive-menu-pro-item.responsive-menu-pro-current-item > .responsive-menu-pro-item-link:hover {
background-color:rgba(25, 25, 25, 1);
color:#ffffff;
border-color:rgba(25, 25, 25, 1);
}.topbg {
display: none !important;
}
} .admin-bar #responsive-menu-pro-header,
.admin-bar button#responsive-menu-pro-button,
.admin-bar #responsive-menu-pro-container {
margin-top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar #responsive-menu-pro-header,
.admin-bar button#responsive-menu-pro-button,
.admin-bar #responsive-menu-pro-container {
margin-top: 46px;
}
}#responsive-menu-pro-header {
width: 100%;
padding: 0 5%;
box-sizing: border-box;
top: 0;
right: 0;
left: 0;
display: none;
z-index: 99998;
}
#responsive-menu-pro-header .responsive-menu-pro-header-box {
display: inline-block;
}
#responsive-menu-pro-header .responsive-menu-pro-header-box,
#responsive-menu-pro-header .responsive-menu-pro-header-box img {
vertical-align: middle;
max-width: 100%;
}
#responsive-menu-pro-header #responsive-menu-pro-header-bar-logo img { height:80px; width:296px;}
#responsive-menu-pro-header button#responsive-menu-pro-button {
position: relative;
margin: 0;
left: auto;
right: auto;
bottom: auto;
}
#responsive-menu-pro-header .responsive-menu-pro-header-box {
margin-right: 2%;
}
@media screen and (max-width:912px) { body {
margin-top:80px;
}
#responsive-menu-pro-header {
position:fixed;
background-color:#ffffff;
height:80px;
color:#ffffff;
display: block;
font-size:14px; }
#responsive-menu-pro-header .responsive-menu-pro-header-bar-item {
line-height:80px;
}
#responsive-menu-pro-header a {
color:#ffffff;
text-decoration: none;
}
}#responsive-menu-pro-container {top:80px;}
#responsive-menu-pro-header {z-index: 99999;}
#responsive-menu-pro-item-3722 {border-bottom-style: outset; border-bottom-color: #191919; border-bottom-width: 2px;}
#responsive-menu-pro-item-3708 {border-top:1px dashed #b9c3c9;}
#responsive-menu-pro-item-3721 {border-bottom-style: outset; border-bottom-color: #191919; border-bottom-width: 2px;}
.responsive-menu-pro-box {padding:2px;border:2px solid #000;width:30px;height:28px;border-radius:3px;margin-left:10px;}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow {left:122px;border-left:0px;}
#responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a .responsive-menu-pro-subarrow.responsive-menu-pro-subarrow-active {background-color: rgba(0, 0, 0, 0);}
#responsive-menu-pro-container #responsive-menu-pro > li.responsive-menu-pro-item:nth-child(3) > a {color:#69abe4 !important;}
#responsive-menu-pro-container #responsive-menu-pro > li.responsive-menu-pro-item:nth-child(3) (background:#191919 !important;)
media (max-width: 320px) {
#responsive-menu-pro-header #responsive-menu-pro-header-bar-logo img {margin-left:0px;}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment