From 1e17c3d5c15776ba32556aeba73b9c1ec112a500 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Thu, 16 Jun 2016 14:31:25 -0400 Subject: [PATCH] Updated foundation --- css/app.css | 577 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 415 insertions(+), 162 deletions(-) diff --git a/css/app.css b/css/app.css index 7f45a32..778bb1f 100644 --- a/css/app.css +++ b/css/app.css @@ -1,5 +1,5 @@ meta.foundation-version { - font-family: "/5.5.2/"; } + font-family: "/5.5.3/"; } meta.foundation-mq-small { font-family: "/only screen/"; @@ -43,13 +43,10 @@ meta.foundation-data-attribute-namespace { html, body { height: 100%; } -html { - box-sizing: border-box; } - *, *:before, *:after { - -webkit-box-sizing: inherit; - -moz-box-sizing: inherit; - box-sizing: inherit; } + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } html, body { font-size: 100%; } @@ -1109,7 +1106,8 @@ select { } .accordion { - margin-bottom: 0; } + margin-bottom: 0; + margin-left: 0; } .accordion:before, .accordion:after { content: " "; display: table; } @@ -1119,7 +1117,8 @@ select { display: block; margin-bottom: 0 !important; } .accordion .accordion-navigation.active > a, .accordion dd.active > a { - background: #e8e8e8; } + background: #e8e8e8; + color: #222222; } .accordion .accordion-navigation > a, .accordion dd > a { background: #EFEFEF; color: #222222; @@ -1625,8 +1624,12 @@ button, .button { padding: 0.625rem 1.25rem 0.6875rem 1.25rem; font-size: 0.6875rem; } button.expand, .button.expand { - padding-left: 0; - padding-right: 0; + padding: 1rem 2rem 1.0625rem 2rem; + font-size: 1rem; + padding-bottom: 1.0625rem; + padding-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; width: 100%; } button.left-align, .button.left-align { text-align: left; @@ -1850,7 +1853,8 @@ button::-moz-focus-inner { @media only screen and (max-width: 40em) { .button-group.stack-for-small > li { display: block; - margin: 0; } + margin: 0; + width: 100%; } .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } @@ -2457,8 +2461,6 @@ button::-moz-focus-inner { margin: 0; } .f-dropdown li:hover, .f-dropdown li:focus { background: #FFFFFF; } - .f-dropdown li.radius { - border-radius: 3px; } .f-dropdown li a { display: block; padding: 0.5rem; @@ -2484,6 +2486,8 @@ button::-moz-focus-inner { margin-top: 0; } .f-dropdown.content > *:last-child { margin-bottom: 0; } + .f-dropdown.radius { + border-radius: 3px; } .f-dropdown.tiny { max-width: 200px; } .f-dropdown.small { @@ -2620,7 +2624,12 @@ label { /* Adjust padding, alignment and radius if pre/post element is a button */ .postfix.button { - border-color: true; } + border: none; + padding-left: 0; + padding-right: 0; + padding-bottom: 0; + padding-top: 0; + text-align: center; } .prefix.button { border: none; @@ -2667,11 +2676,12 @@ span.prefix, label.prefix { span.postfix, label.postfix { background: #f2f2f2; + border-left: none; color: #333333; border-color: #cccccc; } /* We use this to get basic styling on all basic form elements */ -input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea { +input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; @@ -2696,17 +2706,17 @@ input[type="text"], input[type="password"], input[type="date"], input[type="date -ms-transition: border-color 0.15s linear, background 0.15s linear; -o-transition: border-color 0.15s linear, background 0.15s linear; transition: border-color 0.15s linear, background 0.15s linear; } - input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus { + input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus { background: #fafafa; border-color: #999999; outline: none; } - input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="color"]:disabled, textarea:disabled { + input:not([type]):disabled, input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="color"]:disabled, textarea:disabled { background-color: #DDDDDD; cursor: default; } - input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea { + input:not([type])[disabled], input:not([type])[readonly], fieldset[disabled] input:not([type]), input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea { background-color: #DDDDDD; cursor: default; } - input[type="text"].radius, input[type="password"].radius, input[type="date"].radius, input[type="datetime"].radius, input[type="datetime-local"].radius, input[type="month"].radius, input[type="week"].radius, input[type="email"].radius, input[type="number"].radius, input[type="search"].radius, input[type="tel"].radius, input[type="time"].radius, input[type="url"].radius, input[type="color"].radius, textarea.radius { + input:not([type]).radius, input[type="text"].radius, input[type="password"].radius, input[type="date"].radius, input[type="datetime"].radius, input[type="datetime-local"].radius, input[type="month"].radius, input[type="week"].radius, input[type="email"].radius, input[type="number"].radius, input[type="search"].radius, input[type="tel"].radius, input[type="time"].radius, input[type="url"].radius, input[type="color"].radius, textarea.radius { border-radius: 3px; } form .row .prefix-radius.row.collapse input, form .row .prefix-radius.row.collapse textarea, form .row .prefix-radius.row.collapse select, form .row .prefix-radius.row.collapse button { @@ -2772,18 +2782,18 @@ textarea { max-width: 100%; } ::-webkit-input-placeholder { - color: #cccccc; } + color: #666666; } :-moz-placeholder { /* Firefox 18- */ - color: #cccccc; } + color: #666666; } ::-moz-placeholder { /* Firefox 19+ */ - color: #cccccc; } + color: #666666; } :-ms-input-placeholder { - color: #cccccc; } + color: #666666; } /* Add height value for select elements to match text input height */ select { @@ -2791,7 +2801,7 @@ select { -moz-appearance: none !important; background-color: #FAFAFA; border-radius: 0; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+'); background-position: 100% center; background-repeat: no-repeat; border-style: solid; @@ -2808,7 +2818,7 @@ select { display: none; } select.radius { border-radius: 3px; } - select:hover { + select:focus { background-color: #f3f3f3; border-color: #999999; } select:disabled { @@ -2839,10 +2849,9 @@ fieldset { margin: 1.125rem 0; padding: 1.25rem; } fieldset legend { - background: #FFFFFF; font-weight: bold; - margin-left: -0.1875rem; margin: 0; + margin-left: -0.1875rem; padding: 0 0.1875rem; } /* Error Handling */ @@ -3138,9 +3147,10 @@ label.error { .inline-list { list-style: none; + margin-top: 0; + margin-bottom: 1.0625rem; margin-left: -1.375rem; margin-right: 0; - margin: 0 auto 1.0625rem auto; overflow: hidden; padding: 0; } .inline-list > li { @@ -3165,7 +3175,7 @@ label.error { position: absolute; top: 0; width: 95%; - z-index: 101; + z-index: 103; left: 2.5%; } .lt-ie9 .joyride-tip-guide { @@ -3273,7 +3283,7 @@ label.error { z-index: 9999; } /* Styles for screens that are at least 768px; */ -@media only screen and (min-width:40em) { +@media only screen { .joyride-tip-guide { width: 300px; left: inherit; } @@ -3618,7 +3628,8 @@ ul.pagination { background: #e6e6e6; } ul.pagination li.unavailable a, ul.pagination li.unavailable button { cursor: default; - color: #999999; } + color: #999999; + pointer-events: none; } ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus, ul.pagination li.unavailable:hover button, ul.pagination li.unavailable button:focus { background: transparent; } ul.pagination li.current a, ul.pagination li.current button { @@ -3741,19 +3752,45 @@ ul.pagination { .progress .meter { background: #008CBA; display: block; - height: 100%; } + height: 100%; + float: left; + width: 0%; } + .progress .meter.secondary { + background: #e7e7e7; + display: block; + height: 100%; + float: left; + width: 0%; } + .progress .meter.success { + background: #43AC6A; + display: block; + height: 100%; + float: left; + width: 0%; } + .progress .meter.alert { + background: #f04124; + display: block; + height: 100%; + float: left; + width: 0%; } .progress.secondary .meter { background: #e7e7e7; display: block; - height: 100%; } + height: 100%; + float: left; + width: 0%; } .progress.success .meter { background: #43AC6A; display: block; - height: 100%; } + height: 100%; + float: left; + width: 0%; } .progress.alert .meter { background: #f04124; display: block; - height: 100%; } + height: 100%; + float: left; + width: 0%; } .progress.radius { border-radius: 3px; } .progress.radius .meter { @@ -3889,11 +3926,14 @@ ul.pagination { .reveal-modal { top: 6.25rem; } } .reveal-modal.radius { + box-shadow: none; border-radius: 3px; } .reveal-modal.round { + box-shadow: none; border-radius: 1000px; } .reveal-modal.collapse { - padding: 0; } + padding: 0; + box-shadow: none; } @media only screen and (min-width:40em) { .reveal-modal.tiny { left: 0; @@ -4277,7 +4317,7 @@ table { padding: 1rem 2rem; } .tabs dd > a:hover, .tabs .tab-title > a:hover { background-color: #e1e1e1; } - .tabs dd.active a, .tabs .tab-title.active a { + .tabs dd.active > a, .tabs .tab-title.active > a { background-color: #FFFFFF; color: #222222; } .tabs.radius dd:first-child a, .tabs.radius .tab:first-child a { @@ -4378,8 +4418,8 @@ table { z-index: 1006; left: 50%; } .tooltip > .nub { - border-color: transparent transparent #333333 transparent; border: solid 5px; + border-color: transparent transparent #333333 transparent; display: block; height: 0; pointer-events: none; @@ -4406,7 +4446,7 @@ table { font-size: 0.625rem; font-weight: normal; } -@media only screen and (min-width:40em) { +@media only screen { .tooltip > .nub { border-color: transparent transparent #333333 transparent; top: -10px; } @@ -4784,12 +4824,17 @@ meta.foundation-mq-topbar { height: 1.75rem; position: relative; top: 0.375rem; } + .top-bar .has-form > .button, .top-bar .has-form > button { + font-size: 0.875rem; + height: 1.75rem; + position: relative; + top: 0.375rem; } .top-bar.expanded { background: transparent; } .contain-to-grid .top-bar { - margin-bottom: 0; margin: 0 auto; + margin-bottom: 0; max-width: 62.5rem; } .top-bar-section { @@ -5186,12 +5231,6 @@ ul, ol, dl { ul { margin-left: 1.1rem; } - ul.no-bullet { - margin-left: 0; } - ul.no-bullet li ul, ul.no-bullet li ol { - margin-left: 1.25rem; - margin-bottom: 0; - list-style: none; } /* Unordered Lists */ ul li ul, ul li ol { @@ -5208,8 +5247,6 @@ ul.circle { ul.disc { list-style-type: disc; margin-left: 1.1rem; } -ul.no-bullet { - list-style: none; } /* Ordered Lists */ ol { @@ -5218,6 +5255,14 @@ ol { margin-left: 1.25rem; margin-bottom: 0; } +.no-bullet { + list-style-type: none; + margin-left: 0; } + .no-bullet li ul, .no-bullet li ol { + margin-left: 1.25rem; + margin-bottom: 0; + list-style: none; } + /* Definition Lists */ dl dt { margin-bottom: 0.3rem; @@ -5300,12 +5345,63 @@ blockquote, blockquote p { font-size: 1rem; } } +/* + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) + */ +@media print { + * { + background: transparent !important; + color: #000000 !important; + /* Black prints faster: h5bp.com/s */ + box-shadow: none !important; + text-shadow: none !important; } + + a, a:visited { + text-decoration: underline; } + + a[href]:after { + content: " (" attr(href) ")"; } + + abbr[title]:after { + content: " (" attr(title) ")"; } + + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; } + + pre, blockquote { + border: 1px solid #999999; + page-break-inside: avoid; } + + thead { + display: table-header-group; + /* h5bp.com/t */ } + + tr, img { + page-break-inside: avoid; } + + img { + max-width: 100% !important; } + + @page { + margin: 0.34in; } + + p, h2, h3 { + orphans: 3; + widows: 3; } + + h2, h3 { + page-break-after: avoid; } + } + .off-canvas-wrap { -webkit-backface-visibility: hidden; position: relative; width: 100%; overflow: hidden; } - .off-canvas-wrap.move-right, .off-canvas-wrap.move-left { + .off-canvas-wrap.move-right, .off-canvas-wrap.move-left, .off-canvas-wrap.move-bottom, .off-canvas-wrap.move-top { min-height: 100%; -webkit-overflow-scrolling: touch; } @@ -5406,17 +5502,16 @@ blockquote, blockquote p { overflow-x: hidden; overflow-y: auto; position: absolute; - top: 0; transition: transform 500ms ease 0s; width: 15.625rem; z-index: 1001; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate(-100%, 0); - -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); - left: 0; } + left: 0; + top: 0; } .left-off-canvas-menu * { -webkit-backface-visibility: hidden; } @@ -5430,20 +5525,67 @@ blockquote, blockquote p { overflow-x: hidden; overflow-y: auto; position: absolute; - top: 0; transition: transform 500ms ease 0s; width: 15.625rem; z-index: 1001; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate(100%, 0); - -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); - right: 0; } + right: 0; + top: 0; } .right-off-canvas-menu * { -webkit-backface-visibility: hidden; } +.top-off-canvas-menu { + -webkit-backface-visibility: hidden; + background: #690433; + bottom: 0; + box-sizing: content-box; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + transition: transform 500ms ease 0s; + width: 15.625rem; + z-index: 1001; + -webkit-transform: translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0); + -ms-transform: translate(0, -100%); + -o-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + top: 0; + width: 100%; + height: 18.75rem; } + .top-off-canvas-menu * { + -webkit-backface-visibility: hidden; } + +.bottom-off-canvas-menu { + -webkit-backface-visibility: hidden; + background: #690433; + bottom: 0; + box-sizing: content-box; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + transition: transform 500ms ease 0s; + width: 15.625rem; + z-index: 1001; + -webkit-transform: translate3d(0, 100%, 0); + -moz-transform: translate3d(0, 100%, 0); + -ms-transform: translate(0, 100%); + -o-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + bottom: 0; + width: 100%; + height: 18.75rem; } + .bottom-off-canvas-menu * { + -webkit-backface-visibility: hidden; } + ul.off-canvas-list { list-style-type: none; margin: 0; @@ -5474,7 +5616,6 @@ ul.off-canvas-list { -webkit-transform: translate3d(15.625rem, 0, 0); -moz-transform: translate3d(15.625rem, 0, 0); -ms-transform: translate(15.625rem, 0); - -ms-transform: translate3d(15.625rem, 0, 0); -o-transform: translate3d(15.625rem, 0, 0); transform: translate3d(15.625rem, 0, 0); } .move-right .exit-off-canvas { @@ -5500,7 +5641,6 @@ ul.off-canvas-list { -webkit-transform: translate3d(-15.625rem, 0, 0); -moz-transform: translate3d(-15.625rem, 0, 0); -ms-transform: translate(-15.625rem, 0); - -ms-transform: translate3d(-15.625rem, 0, 0); -o-transform: translate3d(-15.625rem, 0, 0); transform: translate3d(-15.625rem, 0, 0); } .move-left .exit-off-canvas { @@ -5522,7 +5662,57 @@ ul.off-canvas-list { background: rgba(255, 255, 255, 0.05); } } -.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { +.move-top > .inner-wrap { + -webkit-transform: translate3d(0, -18.75rem, 0); + -moz-transform: translate3d(0, -18.75rem, 0); + -ms-transform: translate(0, -18.75rem); + -o-transform: translate3d(0, -18.75rem, 0); + transform: translate3d(0, -18.75rem, 0); } +.move-top .exit-off-canvas { + -webkit-backface-visibility: hidden; + box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5); + cursor: pointer; + transition: background 300ms ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background: rgba(255, 255, 255, 0.2); + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1002; } + @media only screen and (min-width:40em) { + .move-top .exit-off-canvas:hover { + background: rgba(255, 255, 255, 0.05); } + } + +.move-bottom > .inner-wrap { + -webkit-transform: translate3d(0, 18.75rem, 0); + -moz-transform: translate3d(0, 18.75rem, 0); + -ms-transform: translate(0, 18.75rem); + -o-transform: translate3d(0, 18.75rem, 0); + transform: translate3d(0, 18.75rem, 0); } +.move-bottom .exit-off-canvas { + -webkit-backface-visibility: hidden; + box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5); + cursor: pointer; + transition: background 300ms ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background: rgba(255, 255, 255, 0.2); + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1002; } + @media only screen and (min-width:40em) { + .move-bottom .exit-off-canvas:hover { + background: rgba(255, 255, 255, 0.05); } + } + +.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu, .offcanvas-overlap .top-off-canvas-menu, .offcanvas-overlap .bottom-off-canvas-menu { -ms-transform: none; -webkit-transform: none; -moz-transform: none; @@ -5600,14 +5790,74 @@ ul.off-canvas-list { background: rgba(255, 255, 255, 0.05); } } +.offcanvas-overlap-top .bottom-off-canvas-menu { + -ms-transform: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; + z-index: 1003; } +.offcanvas-overlap-top .exit-off-canvas { + -webkit-backface-visibility: hidden; + box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5); + cursor: pointer; + transition: background 300ms ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background: rgba(255, 255, 255, 0.2); + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1002; } + @media only screen and (min-width:40em) { + .offcanvas-overlap-top .exit-off-canvas:hover { + background: rgba(255, 255, 255, 0.05); } + } + +.offcanvas-overlap-bottom .top-off-canvas-menu { + -ms-transform: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; + z-index: 1003; } +.offcanvas-overlap-bottom .exit-off-canvas { + -webkit-backface-visibility: hidden; + box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5); + cursor: pointer; + transition: background 300ms ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background: rgba(255, 255, 255, 0.2); + bottom: 0; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1002; } + @media only screen and (min-width:40em) { + .offcanvas-overlap-bottom .exit-off-canvas:hover { + background: rgba(255, 255, 255, 0.05); } + } + .no-csstransforms .left-off-canvas-menu { left: -15.625rem; } .no-csstransforms .right-off-canvas-menu { right: -15.625rem; } +.no-csstransforms .top-off-canvas-menu { + top: -18.75rem; } +.no-csstransforms .bottom-off-canvas-menu { + bottom: -18.75rem; } .no-csstransforms .move-left > .inner-wrap { right: 15.625rem; } .no-csstransforms .move-right > .inner-wrap { left: 15.625rem; } +.no-csstransforms .move-top > .inner-wrap { + right: 18.75rem; } +.no-csstransforms .move-bottom > .inner-wrap { + left: 18.75rem; } .left-submenu { -webkit-backface-visibility: hidden; @@ -5621,11 +5871,11 @@ ul.off-canvas-list { position: absolute; top: 0; width: 15.625rem; + height: 18.75rem; z-index: 1002; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate(-100%, 0); - -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); left: 0; @@ -5657,7 +5907,6 @@ ul.off-canvas-list { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate(0%, 0); - -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } @@ -5673,11 +5922,11 @@ ul.off-canvas-list { position: absolute; top: 0; width: 15.625rem; + height: 18.75rem; z-index: 1002; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate(100%, 0); - -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); right: 0; @@ -5709,10 +5958,105 @@ ul.off-canvas-list { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate(0%, 0); - -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } +.top-submenu { + -webkit-backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + background: #690433; + bottom: 0; + box-sizing: content-box; + margin: 0; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + top: 0; + width: 15.625rem; + height: 18.75rem; + z-index: 1002; + -webkit-transform: translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0); + -ms-transform: translate(0, -100%); + -o-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + top: 0; + width: 100%; + -webkit-transition: -webkit-transform 500ms ease; + -moz-transition: -moz-transform 500ms ease; + -ms-transition: -ms-transform 500ms ease; + -o-transition: -o-transform 500ms ease; + transition: transform 500ms ease; } + .top-submenu * { + -webkit-backface-visibility: hidden; } + .top-submenu .back > a { + background: #690433; + border-bottom: none; + border-top: 1px solid #5e5e5e; + color: #999999; + font-weight: bold; + padding: 0.3rem 0.9375rem; + text-transform: uppercase; + margin: 0; } + .top-submenu .back > a:hover { + background: #690433; + border-bottom: none; + border-top: 1px solid #5e5e5e; } + .top-submenu.move-bottom, .top-submenu.offcanvas-overlap-bottom, .top-submenu.offcanvas-overlap { + -webkit-transform: translate3d(0, 0%, 0); + -moz-transform: translate3d(0, 0%, 0); + -ms-transform: translate(0, 0%); + -o-transform: translate3d(0, 0%, 0); + transform: translate3d(0, 0%, 0); } + +.bottom-submenu { + -webkit-backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + background: #690433; + bottom: 0; + box-sizing: content-box; + margin: 0; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + top: 0; + width: 15.625rem; + height: 18.75rem; + z-index: 1002; + -webkit-transform: translate3d(0, 100%, 0); + -moz-transform: translate3d(0, 100%, 0); + -ms-transform: translate(0, 100%); + -o-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + bottom: 0; + width: 100%; + -webkit-transition: -webkit-transform 500ms ease; + -moz-transition: -moz-transform 500ms ease; + -ms-transition: -ms-transform 500ms ease; + -o-transition: -o-transform 500ms ease; + transition: transform 500ms ease; } + .bottom-submenu * { + -webkit-backface-visibility: hidden; } + .bottom-submenu .back > a { + background: #690433; + border-bottom: none; + border-top: 1px solid #5e5e5e; + color: #999999; + font-weight: bold; + padding: 0.3rem 0.9375rem; + text-transform: uppercase; + margin: 0; } + .bottom-submenu .back > a:hover { + background: #690433; + border-bottom: none; + border-top: 1px solid #5e5e5e; } + .bottom-submenu.move-top, .bottom-submenu.offcanvas-overlap-top, .bottom-submenu.offcanvas-overlap { + -webkit-transform: translate3d(0, 0%, 0); + -moz-transform: translate3d(0, 0%, 0); + -ms-transform: translate(0, 0%); + -o-transform: translate3d(0, 0%, 0); + transform: translate3d(0, 0%, 0); } + .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { content: "\BB"; margin-left: 0.5rem; @@ -6055,104 +6399,17 @@ th.hide-for-touch { overflow: visible; clip: auto; } -/* - * Print styles. - * - * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ - * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) - */ -.print-only { +/* Print visibility */ +.print-only, .show-for-print { display: none !important; } @media print { - * { - background: transparent !important; - box-shadow: none !important; - color: #000000 !important; - /* Black prints faster: h5bp.com/s */ - text-shadow: none !important; } - - .show-for-print { - display: block; } - - .hide-for-print { - display: none; } - - table.show-for-print { - display: table !important; } - - thead.show-for-print { - display: table-header-group !important; } - - tbody.show-for-print { - display: table-row-group !important; } - - tr.show-for-print { - display: table-row !important; } - - td.show-for-print { - display: table-cell !important; } - - th.show-for-print { - display: table-cell !important; } - - a, a:visited { - text-decoration: underline; } - - a[href]:after { - content: " (" attr(href) ")"; } - - abbr[title]:after { - content: " (" attr(title) ")"; } - - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { - content: ""; } - - pre, blockquote { - border: 1px solid #999999; - page-break-inside: avoid; } - - thead { - display: table-header-group; - /* h5bp.com/t */ } - - tr, img { - page-break-inside: avoid; } - - img { - max-width: 100% !important; } - - @page { - margin: 0.5cm; } - - p, h2, h3 { - orphans: 3; - widows: 3; } - - h2, h3 { - page-break-after: avoid; } - - .hide-on-print { - display: none !important; } - - .print-only { + .print-only, .show-for-print { display: block !important; } - .hide-for-print { + .hide-on-print, .hide-for-print { display: none !important; } - .show-for-print { - display: inherit !important; } - } - -/* Print visibility */ -@media print { - .show-for-print { - display: block; } - - .hide-for-print { - display: none; } - table.show-for-print { display: table !important; } @@ -6172,11 +6429,6 @@ th.hide-for-touch { display: table-cell !important; } } -@media not print { - .show-for-print { - display: none !important; } - } - /* Created on : Mar 5, 2015, 2:57:35 PM Author : laury @@ -7363,8 +7615,8 @@ h2#slide-text { padding: 0.75rem 1.5rem 0.8125rem 1.5rem; padding-bottom: 0.8125rem; padding-top: 0.75rem; - padding-left: 0; - padding-right: 0; + padding-left: 1rem; + padding-right: 1rem; width: 100%; background-color: #690433; border-color: #540329; @@ -8189,9 +8441,10 @@ input.button { .offcavas-social-list { list-style: none; + margin-top: 0; + margin-bottom: 1.0625rem; margin-left: -1.375rem; margin-right: 0; - margin: 0 auto 1.0625rem auto; overflow: hidden; padding: 0; margin-left: auto; } -- 2.17.1