diff --git a/functions.php b/functions.php index 5e511ab..bd42e1d 100644 --- a/functions.php +++ b/functions.php @@ -118,23 +118,25 @@ add_action( 'widgets_init', 'atticus_finch_widgets_init' ); * Enqueue scripts and styles. */ function atticus_finch_scripts() { - wp_enqueue_style( 'atticus-finch-style', get_stylesheet_uri(), array (), '0.4', 'screen' ); - wp_enqueue_style( 'atticus-finch-googlefont', 'http://fonts.googleapis.com/css?family=IM+Fell+English:400,400italic', 'atticus-finch-style', '0.4', 'all' ); if ( !wp_style_is( 'font-awesome.min.css', 'enqueued' ) ) { wp_enqueue_style( 'atticus-finch-fa', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', 'atticus-finch-style', '0.4', 'all' ); } + wp_enqueue_style( 'atticus-finch-style', get_stylesheet_uri( 'atticus-finch-navigation' ), array (), '0.4', 'screen' ); + wp_enqueue_style( 'atticus-finch-mobile', get_stylesheet_directory_uri() . '/styles/mobile.css', 'atticus-finch-style', '0.4', 'screen and (max-width: 640px)' ); wp_enqueue_style( 'atticus-finch-print', get_stylesheet_directory_uri() . '/styles/print.css', 'atticus-finch-style', '0.4', 'print' ); - wp_enqueue_style( 'atticus-finch-menu-style', get_template_directory_uri() . '/styles/superfish.css', 'atticus-finch-style', '0.4', 'screen' ); +// wp_enqueue_style( 'atticus-finch-menu-style', get_template_directory_uri() . '/styles/superfish.css', 'atticus-finch-style', '0.4', 'screen' ); - wp_enqueue_script( 'atticus-finch-navigation', get_template_directory_uri() . '/js/superfish.js', array(), '0.4', true ); +// wp_enqueue_script( 'atticus-finch-navigation', get_template_directory_uri() . '/js/superfish.js', array( 'jquery' ), '0.4', true ); - wp_enqueue_script( 'atticus-finch-mobile-menus', get_template_directory_uri() . '/js/menumaker.js', array('jquery'), '0.4', true ); + wp_enqueue_style( 'atticus-finch-menu-style', get_template_directory_uri() . '/styles/menumaker.css', 'atticus-finch-style', '0.4', 'screen' ); + + wp_enqueue_script( 'atticus-finch-mobile-menus', get_template_directory_uri() . '/js/menumaker.js', array( 'jquery' ), '0.4', true ); wp_enqueue_script( 'atticus-finch-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '0.4', true ); diff --git a/functions/customizer.php b/functions/customizer.php index 341b88f..cf97c30 100644 --- a/functions/customizer.php +++ b/functions/customizer.php @@ -707,6 +707,19 @@ $default_copyright = ' @@ -899,6 +938,12 @@ function atticus_finch_sanitize_mobile_menu_type( $input ){ } } +function atticus_finch_sanitize_int( $input ){ + if( is_numeric( $input) ) { + return intval( $input ); + } +} + function atticus_finch_sanitize_css( $input ) { // wp_filter_nohtml_kses( $input ); strip_tags( $input ); diff --git a/functions/mobile-menus.php b/functions/mobile-menus.php index 0108d1b..74f9a1b 100644 --- a/functions/mobile-menus.php +++ b/functions/mobile-menus.php @@ -5,19 +5,19 @@ function atticus_finch_mobile_menus(){ diff --git a/styles/menumaker.css b/styles/menumaker.css new file mode 100644 index 0000000..548a67c --- /dev/null +++ b/styles/menumaker.css @@ -0,0 +1,1037 @@ +#aboveheadermenu, +#aboveheadermenu ul, +#aboveheadermenu ul li, +#aboveheadermenu ul li a, +#aboveheadermenu #menu-button { + margin: 0; + padding: 0; + border: 0; + list-style: none; + line-height: 1; + display: block; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +#aboveheadermenu:after, +#aboveheadermenu > ul:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} +#aboveheadermenu #menu-button { + display: none; +} +#aboveheadermenu { + font-family: "IM Fell English", serif; + background: #fff; + border-bottom: solid 1px #333; +} +#aboveheadermenu > ul > li { + float: left; +} +#aboveheadermenu.align-center > ul { + font-size: 0; + text-align: center; +} +#aboveheadermenu.align-center > ul > li { + display: inline-block; + float: none; +} +#aboveheadermenu.align-center ul ul { + text-align: left; +} +#aboveheadermenu.align-right > ul > li { + float: right; +} +#aboveheadermenu > ul > li > a { + padding: 17px; + font-size: 12px; + letter-spacing: 1px; + text-decoration: none; + color: #333; + font-weight: 700; +} +#aboveheadermenu > ul > li:hover > a { + background: #333; + color: #ddd; +} + +/* +#aboveheadermenu > ul > li.has-sub > a { + padding-right: 30px; +} +#aboveheadermenu > ul > li.has-sub > a:after { + position: absolute; + top: 22px; + right: 11px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#aboveheadermenu > ul > li.has-sub > a:before { + position: absolute; + top: 19px; + right: 14px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#aboveheadermenu > ul > li.has-sub:hover > a:before { + top: 23px; + height: 0; +} +#aboveheadermenu ul ul { + position: absolute; + left: -9999px; +} +#aboveheadermenu.align-right ul ul { + text-align: right; +} +#aboveheadermenu ul ul li { + height: 0; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#aboveheadermenu li:hover > ul { + left: auto; +} +#aboveheadermenu.align-right li:hover > ul { + left: auto; + right: 0; +} +#aboveheadermenu li:hover > ul > li { + height: 35px; +} +#aboveheadermenu ul ul ul { + margin-left: 100%; + top: 0; +} +#aboveheadermenu.align-right ul ul ul { + margin-left: 0; + margin-right: 100%; +} +#aboveheadermenu ul ul li a { + border-bottom: 1px solid rgba(150, 150, 150, 0.15); + padding: 11px 15px; + width: 170px; + font-size: 12px; + text-decoration: none; + color: #dddddd; + font-weight: 400; + background: #333333; +} +#aboveheadermenu ul ul li:last-child > a, +#aboveheadermenu ul ul li.last-item > a { + border-bottom: 0; +} +#aboveheadermenu ul ul li:hover > a, +#aboveheadermenu ul ul li a:hover { + color: #ffffff; +} +#aboveheadermenu ul ul li.has-sub > a:after { + position: absolute; + top: 16px; + right: 11px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#aboveheadermenu.align-right ul ul li.has-sub > a:after { + right: auto; + left: 11px; +} +#aboveheadermenu ul ul li.has-sub > a:before { + position: absolute; + top: 13px; + right: 14px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#aboveheadermenu.align-right ul ul li.has-sub > a:before { + right: auto; + left: 14px; +} +#aboveheadermenu ul ul > li.has-sub:hover > a:before { + top: 17px; + height: 0; +} +*/ +#aboveheadermenu.small-screen { + width: 100%; +} +#aboveheadermenu.small-screen ul { + width: 100%; + display: none; +} +#aboveheadermenu.small-screen.align-center > ul { + text-align: left; +} +#aboveheadermenu.small-screen ul li { + width: 100%; + border-top: 1px solid rgba(120, 120, 120, 0.2); +} +#aboveheadermenu.small-screen ul ul li, +#aboveheadermenu.small-screen li:hover > ul > li { + height: auto; +} +#aboveheadermenu.small-screen ul li a, +#aboveheadermenu.small-screen ul ul li a { + width: 100%; + border-bottom: 0; +} +#aboveheadermenu.small-screen > ul > li { + float: none; +} +#aboveheadermenu.small-screen ul ul li a { + padding-left: 25px; +} +#aboveheadermenu.small-screen ul ul ul li a { + padding-left: 35px; +} +#aboveheadermenu.small-screen ul ul li a { + color: #dddddd; + background: none; +} +#aboveheadermenu.small-screen ul ul li:hover > a, +#aboveheadermenu.small-screen ul ul li.active > a { + color: #ffffff; +} +#aboveheadermenu.small-screen ul ul, +#aboveheadermenu.small-screen ul ul ul, +#aboveheadermenu.small-screen.align-right ul ul { + position: relative; + left: 0; + width: 100%; + margin: 0; + text-align: left; +} +#aboveheadermenu.small-screen > ul > li.has-sub > a:after, +#aboveheadermenu.small-screen > ul > li.has-sub > a:before, +#aboveheadermenu.small-screen ul ul > li.has-sub > a:after, +#aboveheadermenu.small-screen ul ul > li.has-sub > a:before { + display: none; +} +#aboveheadermenu.small-screen #menu-button { + display: block; + padding: 17px; + color: #dddddd; + cursor: pointer; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; +} +#aboveheadermenu.small-screen #menu-button:after { + position: absolute; + top: 22px; + right: 17px; + display: block; + height: 4px; + width: 20px; + border-top: 2px solid #dddddd; + border-bottom: 2px solid #dddddd; + content: ''; +} +#aboveheadermenu.small-screen #menu-button:before { + position: absolute; + top: 16px; + right: 17px; + display: block; + height: 2px; + width: 20px; + background: #dddddd; + content: ''; +} +#aboveheadermenu.small-screen #menu-button.menu-opened:after { + top: 23px; + border: 0; + height: 2px; + width: 15px; + background: #ffffff; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +#aboveheadermenu.small-screen #menu-button.menu-opened:before { + top: 23px; + background: #ffffff; + width: 15px; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +#aboveheadermenu.small-screen .submenu-button { + position: absolute; + z-index: 99; + right: 0; + top: 0; + display: block; + border-left: 1px solid rgba(120, 120, 120, 0.2); + height: 46px; + width: 46px; + cursor: pointer; +} +#aboveheadermenu.small-screen .submenu-button.submenu-opened { + background: #262626; +} +#aboveheadermenu.small-screen ul ul .submenu-button { + height: 34px; + width: 34px; +} +#aboveheadermenu.small-screen .submenu-button:after { + position: absolute; + top: 22px; + right: 19px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#aboveheadermenu.small-screen ul ul .submenu-button:after { + top: 15px; + right: 13px; +} +#aboveheadermenu.small-screen .submenu-button.submenu-opened:after { + background: #ffffff; +} +#aboveheadermenu.small-screen .submenu-button:before { + position: absolute; + top: 19px; + right: 22px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; +} +#aboveheadermenu.small-screen ul ul .submenu-button:before { + top: 12px; + right: 16px; +} +#aboveheadermenu.small-screen .submenu-button.submenu-opened:before { + display: none; +} +#aboveheadermenu.small-screen.select-list { + padding: 5px; +} + + +#belowheadermenu, +#belowheadermenu ul, +#belowheadermenu ul li, +#belowheadermenu ul li a, +#belowheadermenu #menu-button { + margin: 0; + padding: 0; + border: 0; + list-style: none; + line-height: 1; + display: block; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +#belowheadermenu:after, +#belowheadermenu > ul:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} +#belowheadermenu #menu-button { + display: none; +} +#belowheadermenu { + font-family: "IM Fell English", serif; + background: #fff; + border-top: solid 1px #333; +} +#belowheadermenu > ul > li { + float: left; +} +#belowheadermenu.align-center > ul { + font-size: 0; + text-align: center; +} +#belowheadermenu.align-center > ul > li { + display: inline-block; + float: none; +} +#belowheadermenu.align-center ul ul { + text-align: left; +} +#belowheadermenu.align-right > ul > li { + float: right; +} +#belowheadermenu > ul > li > a { + padding: 17px; + font-size: 12px; + letter-spacing: 1px; + text-decoration: none; + color: #333; + font-weight: 700; +} +#belowheadermenu > ul > li:hover > a { + color: #ffffff; +} +#belowheadermenu > ul > li.has-sub > a { + padding-right: 30px; +} +#belowheadermenu > ul > li.has-sub > a:after { + position: absolute; + top: 22px; + right: 11px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#belowheadermenu > ul > li.has-sub > a:before { + position: absolute; + top: 19px; + right: 14px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#belowheadermenu > ul > li.has-sub:hover > a:before { + top: 23px; + height: 0; +} +#belowheadermenu ul ul { + position: absolute; + left: -9999px; +} +#belowheadermenu.align-right ul ul { + text-align: right; +} +#belowheadermenu ul ul li { + height: 0; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#belowheadermenu li:hover > ul { + left: auto; +} +#belowheadermenu.align-right li:hover > ul { + left: auto; + right: 0; +} +#belowheadermenu li:hover > ul > li { + height: 35px; +} +#belowheadermenu ul ul ul { + margin-left: 100%; + top: 0; +} +#belowheadermenu.align-right ul ul ul { + margin-left: 0; + margin-right: 100%; +} +#belowheadermenu ul ul li a { + border-bottom: 1px solid rgba(150, 150, 150, 0.15); + padding: 11px 15px; + width: 170px; + font-size: 12px; + text-decoration: none; + color: #dddddd; + font-weight: 400; + background: #333333; +} +#belowheadermenu ul ul li:last-child > a, +#belowheadermenu ul ul li.last-item > a { + border-bottom: 0; +} +#belowheadermenu ul ul li:hover > a, +#belowheadermenu ul ul li a:hover { + color: #ffffff; +} +#belowheadermenu ul ul li.has-sub > a:after { + position: absolute; + top: 16px; + right: 11px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#belowheadermenu.align-right ul ul li.has-sub > a:after { + right: auto; + left: 11px; +} +#belowheadermenu ul ul li.has-sub > a:before { + position: absolute; + top: 13px; + right: 14px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#belowheadermenu.align-right ul ul li.has-sub > a:before { + right: auto; + left: 14px; +} +#belowheadermenu ul ul > li.has-sub:hover > a:before { + top: 17px; + height: 0; +} +#belowheadermenu.small-screen { + width: 100%; +} +#belowheadermenu.small-screen ul { + width: 100%; + display: none; +} +#belowheadermenu.small-screen.align-center > ul { + text-align: left; +} +#belowheadermenu.small-screen ul li { + width: 100%; + border-top: 1px solid rgba(120, 120, 120, 0.2); +} +#belowheadermenu.small-screen ul ul li, +#belowheadermenu.small-screen li:hover > ul > li { + height: auto; +} +#belowheadermenu.small-screen ul li a, +#belowheadermenu.small-screen ul ul li a { + width: 100%; + border-bottom: 0; +} +#belowheadermenu.small-screen > ul > li { + float: none; +} +#belowheadermenu.small-screen ul ul li a { + padding-left: 25px; +} +#belowheadermenu.small-screen ul ul ul li a { + padding-left: 35px; +} +#belowheadermenu.small-screen ul ul li a { + color: #dddddd; + background: none; +} +#belowheadermenu.small-screen ul ul li:hover > a, +#belowheadermenu.small-screen ul ul li.active > a { + color: #ffffff; +} +#belowheadermenu.small-screen ul ul, +#belowheadermenu.small-screen ul ul ul, +#belowheadermenu.small-screen.align-right ul ul { + position: relative; + left: 0; + width: 100%; + margin: 0; + text-align: left; +} +#belowheadermenu.small-screen > ul > li.has-sub > a:after, +#belowheadermenu.small-screen > ul > li.has-sub > a:before, +#belowheadermenu.small-screen ul ul > li.has-sub > a:after, +#belowheadermenu.small-screen ul ul > li.has-sub > a:before { + display: none; +} +#belowheadermenu.small-screen #menu-button { + display: block; + padding: 17px; + color: #dddddd; + cursor: pointer; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; +} +#belowheadermenu.small-screen #menu-button:after { + position: absolute; + top: 22px; + right: 17px; + display: block; + height: 4px; + width: 20px; + border-top: 2px solid #dddddd; + border-bottom: 2px solid #dddddd; + content: ''; +} +#belowheadermenu.small-screen #menu-button:before { + position: absolute; + top: 16px; + right: 17px; + display: block; + height: 2px; + width: 20px; + background: #dddddd; + content: ''; +} +#belowheadermenu.small-screen #menu-button.menu-opened:after { + top: 23px; + border: 0; + height: 2px; + width: 15px; + background: #ffffff; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +#belowheadermenu.small-screen #menu-button.menu-opened:before { + top: 23px; + background: #ffffff; + width: 15px; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +#belowheadermenu.small-screen .submenu-button { + position: absolute; + z-index: 99; + right: 0; + top: 0; + display: block; + border-left: 1px solid rgba(120, 120, 120, 0.2); + height: 46px; + width: 46px; + cursor: pointer; +} +#belowheadermenu.small-screen .submenu-button.submenu-opened { + background: #262626; +} +#belowheadermenu.small-screen ul ul .submenu-button { + height: 34px; + width: 34px; +} +#belowheadermenu.small-screen .submenu-button:after { + position: absolute; + top: 22px; + right: 19px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#belowheadermenu.small-screen ul ul .submenu-button:after { + top: 15px; + right: 13px; +} +#belowheadermenu.small-screen .submenu-button.submenu-opened:after { + background: #ffffff; +} +#belowheadermenu.small-screen .submenu-button:before { + position: absolute; + top: 19px; + right: 22px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; +} +#belowheadermenu.small-screen ul ul .submenu-button:before { + top: 12px; + right: 16px; +} +#belowheadermenu.small-screen .submenu-button.submenu-opened:before { + display: none; +} +#belowheadermenu.small-screen.select-list { + padding: 5px; +} + + + +#footermenu, +#footermenu ul, +#footermenu ul li, +#footermenu ul li a, +#footermenu #menu-button { + margin: 0; + padding: 0; + border: 0; + list-style: none; + line-height: 1; + display: block; + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +#footermenu:after, +#footermenu > ul:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} +#footermenu #menu-button { + display: none; +} +#footermenu { + font-family: "IM Fell English", serif; + background: #333333; +} +#footermenu > ul > li { + float: left; +} +#footermenu.align-center > ul { + font-size: 0; + text-align: center; +} +#footermenu.align-center > ul > li { + display: inline-block; + float: none; +} +#footermenu.align-center ul ul { + text-align: left; +} +#footermenu.align-right > ul > li { + float: right; +} +#footermenu > ul > li > a { + padding: 17px; + font-size: 12px; + letter-spacing: 1px; + text-decoration: none; + color: #dddddd; + font-weight: 700; +} +#footermenu > ul > li:hover > a { + color: #ffffff; +} +#footermenu > ul > li.has-sub > a { + padding-right: 30px; +} +#footermenu > ul > li.has-sub > a:after { + position: absolute; + top: 22px; + right: 11px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#footermenu > ul > li.has-sub > a:before { + position: absolute; + top: 19px; + right: 14px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#footermenu > ul > li.has-sub:hover > a:before { + top: 23px; + height: 0; +} +#footermenu ul ul { + position: absolute; + left: -9999px; +} +#footermenu.align-right ul ul { + text-align: right; +} +#footermenu ul ul li { + height: 0; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#footermenu li:hover > ul { + left: auto; +} +#footermenu.align-right li:hover > ul { + left: auto; + right: 0; +} +#footermenu li:hover > ul > li { + height: 35px; +} +#footermenu ul ul ul { + margin-left: 100%; + top: 0; +} +#footermenu.align-right ul ul ul { + margin-left: 0; + margin-right: 100%; +} +#footermenu ul ul li a { + border-bottom: 1px solid rgba(150, 150, 150, 0.15); + padding: 11px 15px; + width: 170px; + font-size: 12px; + text-decoration: none; + color: #dddddd; + font-weight: 400; + background: #333333; +} +#footermenu ul ul li:last-child > a, +#footermenu ul ul li.last-item > a { + border-bottom: 0; +} +#footermenu ul ul li:hover > a, +#footermenu ul ul li a:hover { + color: #ffffff; +} +#footermenu ul ul li.has-sub > a:after { + position: absolute; + top: 16px; + right: 11px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#footermenu.align-right ul ul li.has-sub > a:after { + right: auto; + left: 11px; +} +#footermenu ul ul li.has-sub > a:before { + position: absolute; + top: 13px; + right: 14px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; + -webkit-transition: all .25s ease; + -moz-transition: all .25s ease; + -ms-transition: all .25s ease; + -o-transition: all .25s ease; + transition: all .25s ease; +} +#footermenu.align-right ul ul li.has-sub > a:before { + right: auto; + left: 14px; +} +#footermenu ul ul > li.has-sub:hover > a:before { + top: 17px; + height: 0; +} +#footermenu.small-screen { + width: 100%; +} +#footermenu.small-screen ul { + width: 100%; + display: none; +} +#footermenu.small-screen.align-center > ul { + text-align: left; +} +#footermenu.small-screen ul li { + width: 100%; + border-top: 1px solid rgba(120, 120, 120, 0.2); +} +#footermenu.small-screen ul ul li, +#footermenu.small-screen li:hover > ul > li { + height: auto; +} +#footermenu.small-screen ul li a, +#footermenu.small-screen ul ul li a { + width: 100%; + border-bottom: 0; +} +#footermenu.small-screen > ul > li { + float: none; +} +#footermenu.small-screen ul ul li a { + padding-left: 25px; +} +#footermenu.small-screen ul ul ul li a { + padding-left: 35px; +} +#footermenu.small-screen ul ul li a { + color: #dddddd; + background: none; +} +#footermenu.small-screen ul ul li:hover > a, +#footermenu.small-screen ul ul li.active > a { + color: #ffffff; +} +#footermenu.small-screen ul ul, +#footermenu.small-screen ul ul ul, +#footermenu.small-screen.align-right ul ul { + position: relative; + left: 0; + width: 100%; + margin: 0; + text-align: left; +} +#footermenu.small-screen > ul > li.has-sub > a:after, +#footermenu.small-screen > ul > li.has-sub > a:before, +#footermenu.small-screen ul ul > li.has-sub > a:after, +#footermenu.small-screen ul ul > li.has-sub > a:before { + display: none; +} +#footermenu.small-screen #menu-button { + display: block; + padding: 17px; + color: #dddddd; + cursor: pointer; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; +} +#footermenu.small-screen #menu-button:after { + position: absolute; + top: 22px; + right: 17px; + display: block; + height: 4px; + width: 20px; + border-top: 2px solid #dddddd; + border-bottom: 2px solid #dddddd; + content: ''; +} +#footermenu.small-screen #menu-button:before { + position: absolute; + top: 16px; + right: 17px; + display: block; + height: 2px; + width: 20px; + background: #dddddd; + content: ''; +} +#footermenu.small-screen #menu-button.menu-opened:after { + top: 23px; + border: 0; + height: 2px; + width: 15px; + background: #ffffff; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +#footermenu.small-screen #menu-button.menu-opened:before { + top: 23px; + background: #ffffff; + width: 15px; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +#footermenu.small-screen .submenu-button { + position: absolute; + z-index: 99; + right: 0; + top: 0; + display: block; + border-left: 1px solid rgba(120, 120, 120, 0.2); + height: 46px; + width: 46px; + cursor: pointer; +} +#footermenu.small-screen .submenu-button.submenu-opened { + background: #262626; +} +#footermenu.small-screen ul ul .submenu-button { + height: 34px; + width: 34px; +} +#footermenu.small-screen .submenu-button:after { + position: absolute; + top: 22px; + right: 19px; + width: 8px; + height: 2px; + display: block; + background: #dddddd; + content: ''; +} +#footermenu.small-screen ul ul .submenu-button:after { + top: 15px; + right: 13px; +} +#footermenu.small-screen .submenu-button.submenu-opened:after { + background: #ffffff; +} +#footermenu.small-screen .submenu-button:before { + position: absolute; + top: 19px; + right: 22px; + display: block; + width: 2px; + height: 8px; + background: #dddddd; + content: ''; +} +#footermenu.small-screen ul ul .submenu-button:before { + top: 12px; + right: 16px; +} +#footermenu.small-screen .submenu-button.submenu-opened:before { + display: none; +} +#footermenu.small-screen.select-list { + padding: 5px; +} \ No newline at end of file diff --git a/styles/mobile.css b/styles/mobile.css index 88babe2..8380ce3 100644 --- a/styles/mobile.css +++ b/styles/mobile.css @@ -69,348 +69,3 @@ body > footer{ /* Menumaker Adjust as needed */ - -@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); -#cssmenu, -#cssmenu ul, -#cssmenu ul li, -#cssmenu ul li a, -#cssmenu #menu-button { - margin: 0; - padding: 0; - border: 0; - list-style: none; - line-height: 1; - display: block; - position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -#cssmenu:after, -#cssmenu > ul:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} -#cssmenu #menu-button { - display: none; -} -#cssmenu { - font-family: Montserrat, sans-serif; - background: #333333; -} -#cssmenu > ul > li { - float: left; -} -#cssmenu.align-center > ul { - font-size: 0; - text-align: center; -} -#cssmenu.align-center > ul > li { - display: inline-block; - float: none; -} -#cssmenu.align-center ul ul { - text-align: left; -} -#cssmenu.align-right > ul > li { - float: right; -} -#cssmenu > ul > li > a { - padding: 17px; - font-size: 12px; - letter-spacing: 1px; - text-decoration: none; - color: #dddddd; - font-weight: 700; - text-transform: uppercase; -} -#cssmenu > ul > li:hover > a { - color: #ffffff; -} -#cssmenu > ul > li.has-sub > a { - padding-right: 30px; -} -#cssmenu > ul > li.has-sub > a:after { - position: absolute; - top: 22px; - right: 11px; - width: 8px; - height: 2px; - display: block; - background: #dddddd; - content: ''; -} -#cssmenu > ul > li.has-sub > a:before { - position: absolute; - top: 19px; - right: 14px; - display: block; - width: 2px; - height: 8px; - background: #dddddd; - content: ''; - -webkit-transition: all .25s ease; - -moz-transition: all .25s ease; - -ms-transition: all .25s ease; - -o-transition: all .25s ease; - transition: all .25s ease; -} -#cssmenu > ul > li.has-sub:hover > a:before { - top: 23px; - height: 0; -} -#cssmenu ul ul { - position: absolute; - left: -9999px; -} -#cssmenu.align-right ul ul { - text-align: right; -} -#cssmenu ul ul li { - height: 0; - -webkit-transition: all .25s ease; - -moz-transition: all .25s ease; - -ms-transition: all .25s ease; - -o-transition: all .25s ease; - transition: all .25s ease; -} -#cssmenu li:hover > ul { - left: auto; -} -#cssmenu.align-right li:hover > ul { - left: auto; - right: 0; -} -#cssmenu li:hover > ul > li { - height: 35px; -} -#cssmenu ul ul ul { - margin-left: 100%; - top: 0; -} -#cssmenu.align-right ul ul ul { - margin-left: 0; - margin-right: 100%; -} -#cssmenu ul ul li a { - border-bottom: 1px solid rgba(150, 150, 150, 0.15); - padding: 11px 15px; - width: 170px; - font-size: 12px; - text-decoration: none; - color: #dddddd; - font-weight: 400; - background: #333333; -} -#cssmenu ul ul li:last-child > a, -#cssmenu ul ul li.last-item > a { - border-bottom: 0; -} -#cssmenu ul ul li:hover > a, -#cssmenu ul ul li a:hover { - color: #ffffff; -} -#cssmenu ul ul li.has-sub > a:after { - position: absolute; - top: 16px; - right: 11px; - width: 8px; - height: 2px; - display: block; - background: #dddddd; - content: ''; -} -#cssmenu.align-right ul ul li.has-sub > a:after { - right: auto; - left: 11px; -} -#cssmenu ul ul li.has-sub > a:before { - position: absolute; - top: 13px; - right: 14px; - display: block; - width: 2px; - height: 8px; - background: #dddddd; - content: ''; - -webkit-transition: all .25s ease; - -moz-transition: all .25s ease; - -ms-transition: all .25s ease; - -o-transition: all .25s ease; - transition: all .25s ease; -} -#cssmenu.align-right ul ul li.has-sub > a:before { - right: auto; - left: 14px; -} -#cssmenu ul ul > li.has-sub:hover > a:before { - top: 17px; - height: 0; -} -#cssmenu.small-screen { - width: 100%; -} -#cssmenu.small-screen ul { - width: 100%; - display: none; -} -#cssmenu.small-screen.align-center > ul { - text-align: left; -} -#cssmenu.small-screen ul li { - width: 100%; - border-top: 1px solid rgba(120, 120, 120, 0.2); -} -#cssmenu.small-screen ul ul li, -#cssmenu.small-screen li:hover > ul > li { - height: auto; -} -#cssmenu.small-screen ul li a, -#cssmenu.small-screen ul ul li a { - width: 100%; - border-bottom: 0; -} -#cssmenu.small-screen > ul > li { - float: none; -} -#cssmenu.small-screen ul ul li a { - padding-left: 25px; -} -#cssmenu.small-screen ul ul ul li a { - padding-left: 35px; -} -#cssmenu.small-screen ul ul li a { - color: #dddddd; - background: none; -} -#cssmenu.small-screen ul ul li:hover > a, -#cssmenu.small-screen ul ul li.active > a { - color: #ffffff; -} -#cssmenu.small-screen ul ul, -#cssmenu.small-screen ul ul ul, -#cssmenu.small-screen.align-right ul ul { - position: relative; - left: 0; - width: 100%; - margin: 0; - text-align: left; -} -#cssmenu.small-screen > ul > li.has-sub > a:after, -#cssmenu.small-screen > ul > li.has-sub > a:before, -#cssmenu.small-screen ul ul > li.has-sub > a:after, -#cssmenu.small-screen ul ul > li.has-sub > a:before { - display: none; -} -#cssmenu.small-screen #menu-button { - display: block; - padding: 17px; - color: #dddddd; - cursor: pointer; - font-size: 12px; - text-transform: uppercase; - font-weight: 700; -} -#cssmenu.small-screen #menu-button:after { - position: absolute; - top: 22px; - right: 17px; - display: block; - height: 4px; - width: 20px; - border-top: 2px solid #dddddd; - border-bottom: 2px solid #dddddd; - content: ''; -} -#cssmenu.small-screen #menu-button:before { - position: absolute; - top: 16px; - right: 17px; - display: block; - height: 2px; - width: 20px; - background: #dddddd; - content: ''; -} -#cssmenu.small-screen #menu-button.menu-opened:after { - top: 23px; - border: 0; - height: 2px; - width: 15px; - background: #ffffff; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); -} -#cssmenu.small-screen #menu-button.menu-opened:before { - top: 23px; - background: #ffffff; - width: 15px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); -} -#cssmenu.small-screen .submenu-button { - position: absolute; - z-index: 99; - right: 0; - top: 0; - display: block; - border-left: 1px solid rgba(120, 120, 120, 0.2); - height: 46px; - width: 46px; - cursor: pointer; -} -#cssmenu.small-screen .submenu-button.submenu-opened { - background: #262626; -} -#cssmenu.small-screen ul ul .submenu-button { - height: 34px; - width: 34px; -} -#cssmenu.small-screen .submenu-button:after { - position: absolute; - top: 22px; - right: 19px; - width: 8px; - height: 2px; - display: block; - background: #dddddd; - content: ''; -} -#cssmenu.small-screen ul ul .submenu-button:after { - top: 15px; - right: 13px; -} -#cssmenu.small-screen .submenu-button.submenu-opened:after { - background: #ffffff; -} -#cssmenu.small-screen .submenu-button:before { - position: absolute; - top: 19px; - right: 22px; - display: block; - width: 2px; - height: 8px; - background: #dddddd; - content: ''; -} -#cssmenu.small-screen ul ul .submenu-button:before { - top: 12px; - right: 16px; -} -#cssmenu.small-screen .submenu-button.submenu-opened:before { - display: none; -} -#cssmenu.small-screen.select-list { - padding: 5px; -} \ No newline at end of file