/** * This file should contain frontend styles that * will be applied to all module instances. */ .bb-box-input.input-small { width: 46px !important; } .fl-module .pp-dual-button-content.pp-dual-button-inner { display: inline-block; } .pp-dual-button-content .pp-dual-button { text-align: center; } .fl-module .pp-dual-button-content .pp-dual-button a.pp-button { overflow: hidden; } .fl-module .pp-dual-button-content .pp-dual-button-1 .pp-button { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .fl-module .pp-dual-button-content .pp-dual-button-1 .pp-button:before { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; -ms-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; transition-timing-function: ease-out; } .fl-module .pp-dual-button-content .pp-dual-button-2 .pp-button { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .fl-module .pp-dual-button-content .pp-dual-button-2 .pp-button:before { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; -ms-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; transition-timing-function: ease-out; } .fl-module .pp-dual-button-content .pp-divider { display: table; position: absolute; top: 50%; right: 0; -webkit-transform: translate(50%,-50%); -moz-transform: translate(50%,-50%); -o-transform: translate(50%,-50%); -ms-transform: translate(50%,-50%); transform: translate(50%,-50%); line-height: 0; text-align: center; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; text-align: center; transition: border-color ease 500ms,background ease 500ms,color ease 500ms; z-index: 12; } .fl-module .pp-dual-button-content .pp-divider-inner { display: table-cell; line-height: 1; text-align: center; vertical-align: middle; } .fl-module .pp-dual-button-content .pp-custom-icon { display: inline-block; max-width: 100%; width: 1em; } .fl-module .pp-dual-button-content .pp-font-icon.dashicons, .fl-module .pp-dual-button-content .pp-font-icon.dashicons-before:before{ font-size: inherit; height: auto; line-height: inherit; width: auto; } .pp-dual-button-content .pp-dual-button { float: left; position: relative; } .pp-button > span { height: auto; vertical-align: middle; } /* Hover effects */ .pp-dual-button-content .pp-button-effect-fade .pp-button { transition: background-color, color; } .pp-dual-button-content .pp-button-effect-sweep_right .pp-button:before { content: ""; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .pp-dual-button-content .pp-button-effect-sweep_right .pp-button:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .pp-dual-button-content .pp-button-effect-sweep_left .pp-button:before { content: ""; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .pp-dual-button-content .pp-button-effect-sweep_left .pp-button:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .pp-dual-button-content .pp-button-effect-sweep_bottom .pp-button:before { content: ""; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -o-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .pp-dual-button-content .pp-button-effect-sweep_bottom .pp-button:hover:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .pp-dual-button-content .pp-button-effect-sweep_top .pp-button:before { content: ""; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .pp-dual-button-content .pp-button-effect-sweep_top .pp-button:hover:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .pp-dual-button-content .pp-button-effect-bounce_right .pp-button:before { content: ""; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -o-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .pp-dual-button-content .pp-button-effect-bounce_right .pp-button:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .pp-dual-button-content .pp-button-effect-bounce_left .pp-button:before { content: ""; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .pp-dual-button-content .pp-button-effect-bounce_left .pp-button:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .pp-dual-button-content .pp-button-effect-bounce_bottom .pp-button:before { content: ""; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -o-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .pp-dual-button-content .pp-button-effect-bounce_bottom .pp-button:hover:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .pp-dual-button-content .pp-button-effect-bounce_top .pp-button:before { content: ""; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .pp-dual-button-content .pp-button-effect-bounce_top .pp-button:hover:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .pp-dual-button-content .pp-button-effect-radial_out .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-radial_out .pp-button:before { content: ""; border-radius: 100%; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .pp-dual-button-content .pp-button-effect-radial_out .pp-button:hover:before { -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .pp-dual-button-content .pp-button-effect-radial_in .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-radial_in .pp-button:before { content: ""; border-radius: 100%; -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } .pp-dual-button-content .pp-button-effect-radial_in .pp-button:hover:before { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .pp-dual-button-content .pp-button-effect-rectangle_out .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-rectangle_out .pp-button:before { content: ""; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .pp-dual-button-content .pp-button-effect-rectangle_out .pp-button:hover:before { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pp-dual-button-content .pp-button-effect-rectangle_in .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-rectangle_in .pp-button:before { content: ""; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pp-dual-button-content .pp-button-effect-rectangle_in .pp-button:hover:before { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .pp-dual-button-content .pp-button-effect-shutter_in_horizontal .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-shutter_in_horizontal .pp-button:before { content: ""; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -o-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; } .pp-dual-button-content .pp-button-effect-shutter_in_horizontal .pp-button:hover:before { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .pp-dual-button-content .pp-button-effect-shutter_out_horizontal .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-shutter_out_horizontal .pp-button:before { content: ""; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -o-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; } .pp-dual-button-content .pp-button-effect-shutter_out_horizontal .pp-button:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .pp-dual-button-content .pp-button-effect-shutter_in_vertical .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-shutter_in_vertical .pp-button:before { content: ""; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -o-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; } .pp-dual-button-content .pp-button-effect-shutter_in_vertical .pp-button:hover:before { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .pp-dual-button-content .pp-button-effect-shutter_out_vertical .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-shutter_out_vertical .pp-button:before { content: ""; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -o-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -o-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; } .pp-dual-button-content .pp-button-effect-shutter_out_vertical .pp-button:hover:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .pp-dual-button-content .pp-button-effect-shutter_out_diagonal .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-shutter_out_diagonal .pp-button:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); -o-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); height: 0; width: 0; z-index: -1; } .pp-dual-button-content .pp-button-effect-shutter_out_diagonal .pp-button:hover:after { height: 4000%; width: 100%; } .pp-dual-button-content .pp-button-effect-shutter_in_diagonal .pp-button { overflow: hidden; } .pp-dual-button-content .pp-button-effect-shutter_in_diagonal .pp-button:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); -o-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0); height: 4000%; width: 100%; z-index: -1; } .pp-dual-button-content .pp-button-effect-shutter_in_diagonal .pp-button:hover:after { height: 4000%; width: 0; }