// Elementor widget title
public function get_title() {
- return __( 'Flexible Background Image', 'physioassist' );
+ return __( 'Flexible Image', 'physioassist' );
}
// Elementor interface icon
// Elementor widget title
public function get_title() {
- return __( 'Text Block', 'physioassist' );
+ return __( 'Formatted Text', 'physioassist' );
}
// Elementor interface icon
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+ width="17.847px" height="17.847px" viewBox="0 0 17.847 17.847" enable-background="new 0 0 17.847 17.847" xml:space="preserve">\r
+<g>\r
+ <g>\r
+ <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M11.044,8.923l6.363-6.363c0.586-0.585,0.586-1.535,0-2.121\r
+ c-0.586-0.585-1.535-0.585-2.121,0L8.923,6.802L2.56,0.439c-0.586-0.585-1.535-0.585-2.121,0c-0.585,0.586-0.585,1.536,0,2.121\r
+ l6.363,6.363l-6.363,6.363c-0.585,0.586-0.585,1.535,0,2.121c0.586,0.586,1.535,0.586,2.121,0l6.363-6.363l6.363,6.363\r
+ c0.586,0.586,1.535,0.586,2.121,0s0.586-1.535,0-2.121L11.044,8.923z"/>\r
+ </g>\r
+</g>\r
+</svg>\r
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 34 25.2" style="enable-background:new 0 0 34 25.2;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M19.5,3.2H1.6C0.7,3.2,0,2.5,0,1.6S0.7,0,1.6,0h17.9c0.9,0,1.6,0.7,1.6,1.6S20.4,3.2,19.5,3.2z"/>
+<path class="st0" d="M32.4,14.2H1.6c-0.9,0-1.6-0.7-1.6-1.6S0.7,11,1.6,11h30.8c0.9,0,1.6,0.7,1.6,1.6S33.3,14.2,32.4,14.2z"/>
+<path class="st0" d="M26.9,25.2H1.6c-0.9,0-1.6-0.7-1.6-1.6S0.7,22,1.6,22h25.3c0.9,0,1.6,0.7,1.6,1.6S27.7,25.2,26.9,25.2z"/>
+</svg>
export default {
init() {
// JavaScript to be fired on all pages
+
+ // Generate mobile menu
+ $('header.site').append('<div id="mobileMenu"></div><div id="menuOpener"></div>');
+ var menu = $('#mobileMenu'),
+ menuOpener = $('#menuOpener');
+
+ // Copy main menus
+ $('.nav-primary').clone().appendTo(menu);
+ $('.nav-secondary').clone().appendTo(menu);
+
+ menuOpener.on('click', function() {
+ $(this).toggleClass('open');
+ menu.css('height', $(document).height()); // Cover all content
+ menu.toggle();
+ });
+
+
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
--- /dev/null
+#menuOpener
+ display: none
+ position: absolute
+ right: 5%
+ top: 50%
+ transform: translateY(-50%)
+ width: 32px
+ height: 28px
+ background: url(../images/icons/mobile-menu.svg) center no-repeat
+ cursor: pointer
+
+ &.open
+ background-image: url(../images/icons/close.svg)
+
+ +below($breakpoint-menu)
+ display: block
+
+
+#mobileMenu
+ display: none
+ position: absolute
+ padding: 0 0 7.5%
+ top: 100%
+ width: 100%
+ z-index: 10
+ background-color: $colors.dark-blue
+
+ // Ensure menu hides automatically above breakpoint
+ +above($breakpoint-menu)
+ display: none !important
+
+ .nav-primary
+ display: block
+ text-align: center
+ padding: 20px 5%
+
+ li
+ display: block
+ padding: 0.5em 0
+
+ a
+ border: none
+
+ &:hover
+ color: $colors.light-blue
+
+
+ .menu-item
+ &:hover
+ > .sub-menu // Submenu display on mobile
+ height: auto
+ margin-top: 0.5em
+
+
+ .sub-menu
+ position: relative
+ padding: 0
+ overflow: hidden
+ height: 0
+
+ li
+ padding: 0
+
+ .menu-item
+ a
+ display: inline-block
+ padding: 0.25em 0
+ font-weight: 500
+ font-size: 0.9em
+ text-transform: none
+ opacity: 0.7
+
+ .locales
+ margin-top: 1em
+ justify-content: center
justify-content: space-between
align-items: center
text-transform: uppercase
- color: #1a73b0
+ color: #fff
font-size: 16px
font-weight: 600
- +below($breakpoint-menu)
- display: none
-
.nav
inline-list()
padding: 0
margin: 0
display: flex
+ color: #1888ca
font-size: 14px
text-transform: capitalize
// Padding applied to the .wrap element because applying it to the body requires
// us to set top:0 for header when fixed and this in turn causes it to sit
// partially under the WP admin bar when it is active.
-body.header-compact:not(.template-transparent-header) .wrap
+body:not(.template-transparent-header) .wrap
padding-top: 65px
header.site
center()
- position: relative
+ //position: relative
z-index: 10
-
- // Mini header style - used for default template and also triggered
- // on hero-content pages when .header-compact class is added upon scroll
- .header-compact &
- position: fixed
- max-width: none
- width: 100%
- background-color: #003e65
- transition: background-color 0.3s ease-out
-
- .inner
- center()
- position: relative !important
- height: 100%
- .navigation
- bottom: 50%
- transform: translateY(50%)
- .nav-primary
- color: #fff
- .locales
- color: #1888ca
-
- // Disable the header when editing with Elementor so it
- // doesn't block the home hero blcok section controls
- .elementor-editor-active &
- pointer-events: none
+ position: fixed
+ max-width: none
+ width: 100%
+ background-color: #003e65
+ transition: background-color 0.3s ease-out
.inner
+ center()
horizontal-spacing()
- position: relative
+ position: relative !important
+ height: 100%
- // When header is transparent, position absolutely
- // so it will sit on top of the content below...
- .template-transparent-header &
- position: absolute
- width: 100%
+ // Disable the header when editing with Elementor so it
+ // doesn't block the home hero block section controls
+ .elementor-editor-active &
+ pointer-events: none
// Main logo
// Logo is split into symbol + text so we can hide the symbol when reducing the header height
.logo
- margin: 25px 10px 0
+ max-width: 235px
+ margin: 0 10px 15px 4px
width: 70% // Only relevant when we reach smaller screens - leaves room for burger menu icon
- max-width: 278px
transition: all 0.3s ease-out
- // Mini version of header - when this class is applied to a parent,
- // symbol should hide and logo text should scale down smoothly
- .header-compact header.site &
- max-width: 235px
- margin: 0 10px 15px 4px
- .logo-symbol
- width: 0
- opacity: 0
-
&-inner
position: relative
display: flex
height: 100%
&-symbol
- width: 23.57% // Proportional width of symbol from original full logo
+ width: 0 // Hidden in default view
+ opacity: 0
margin-right: -1.54% // Proportional overlap
transition: all 0.3s ease-out
.navigation
position: absolute
constrain(right, $horizontal-gutter)
- bottom: -4px
+ bottom: 50%
+ transform: translateY(50%)
+
+ +below($breakpoint-menu)
+ display: none
+
+
+//----- Transparent Header overrides
+.template-transparent-header
+ // Only shown when we're above the breakpoint, otherwise it remains in the default compact mode
+ +above($breakpoint-menu)
+ header.site
+ position: absolute
+ width: 100%
+ background-color: transparent
+
+ .navigation
+ bottom: -12px // Pull nav text down so it lines up with baseline of logo text
+ transform: none
+
+ .nav-primary, .locales
+ color: #1a73b0
+
+ .logo
+ margin: 25px 10px 0
+ max-width: 278px
+
+ .logo-symbol
+ opacity: 1
+ width: 23.57% // Proportional width of symbol from original full logo
+ margin-right: -1.54% // Proportional overlap
+ transition: all 0.3s ease-out
+
+ .logo-text
+ width: 77.97% // Proportional width of text from original full logo
@import 'components/headings'
@import 'components/buttons'
@import 'components/navigation'
-// @import 'components/navigation-mobile'
+@import 'components/navigation-mobile'
@import 'components/text'
@import 'components/forms'
@import 'components/wp-classes'
+below($breakpoint-hero-block)
position: static
- padding: s('calc(%s + 4vw) 5vw 4vw', $header-height)
+ padding: s('calc(%s + 4vw) 5vw 30px', $header-height)
bottom: 0
right: 0
font-size: 44px
margin-bottom: 0.5em
+ +below(500px)
+ br
+ display: none
+
&-body
font-size: 16px
font-weight: 500
flex: 0 1 45%
constrain(margin-bottom, 5vw)
+ +below(1300px)
+ flex-basis: 47% // Reduce gap between columns a bit
+ +below(1000px)
+ flex-basis: 100%
+ +below(400px)
+ display: block
+
&-image
align-self: flex-start
width: 35%
+ .profile-grid & // Needed for extra specifity to override `.elementor img` rule
+ max-width: 237px
+
+ +below(400px)
+ width: 100%
&-text
constrain(padding-left, 3.5vw) // Gutter between image and text
+ +below(400px)
+ padding-left: 0
+ margin-top: 15px
+ margin-bottom: 20px
+
&-title
color: $colors.headings
font-size: 20px
projects / physioassist-wordpress.git / commitdiff
