smc
This commit is contained in:
mstfyldz
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,587 @@
|
||||
.typeahead__container {
|
||||
/**
|
||||
* Restore the font weight unset by the previous rule.
|
||||
*/
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
/**
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
}
|
||||
|
||||
.typeahead__container button,
|
||||
.typeahead__container input,
|
||||
.typeahead__container optgroup,
|
||||
.typeahead__container select,
|
||||
.typeahead__container textarea {
|
||||
font: inherit;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
.typeahead__container optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.typeahead__container button,
|
||||
.typeahead__container input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.typeahead__container button,
|
||||
.typeahead__container select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.typeahead__container button,
|
||||
.typeahead__container html [type="button"],
|
||||
.typeahead__container [type="reset"],
|
||||
.typeahead__container [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
.typeahead__container button::-moz-focus-inner,
|
||||
.typeahead__container [type="button"]::-moz-focus-inner,
|
||||
.typeahead__container [type="reset"]::-moz-focus-inner,
|
||||
.typeahead__container [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.typeahead__container button:-moz-focusring,
|
||||
.typeahead__container [type="button"]:-moz-focusring,
|
||||
.typeahead__container [type="reset"]:-moz-focusring,
|
||||
.typeahead__container [type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
.typeahead__container fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
.typeahead__container legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
.typeahead__container textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.typeahead__container [type="checkbox"],
|
||||
.typeahead__container [type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
.typeahead__container [type="number"]::-webkit-inner-spin-button,
|
||||
.typeahead__container [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.typeahead__container ::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.typeahead__container ::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
.typeahead__container {
|
||||
position: relative;
|
||||
font: 1rem Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.typeahead__container * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.typeahead__query {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.typeahead__filter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.typeahead__filter button {
|
||||
min-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.typeahead__filter button:after {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: -2px;
|
||||
content: "";
|
||||
border: 4px solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.typeahead__field {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.typeahead__button button {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.typeahead__field {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.typeahead__field input,
|
||||
.typeahead__field textarea,
|
||||
.typeahead__field [contenteditable],
|
||||
.typeahead__field .typeahead__hint {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.25;
|
||||
min-height: calc(0.5rem * 2 + 1.25rem + 2px);
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px 0 0 2px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.typeahead__field input:focus, .typeahead__field input:active,
|
||||
.typeahead__field textarea:focus,
|
||||
.typeahead__field textarea:active,
|
||||
.typeahead__field [contenteditable]:focus,
|
||||
.typeahead__field [contenteditable]:active,
|
||||
.typeahead__field .typeahead__hint:focus,
|
||||
.typeahead__field .typeahead__hint:active {
|
||||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
.typeahead__container.hint .typeahead__field input,
|
||||
.typeahead__container.hint .typeahead__field textarea,
|
||||
.typeahead__container.hint .typeahead__field [contenteditable] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.typeahead__container.hint .typeahead__query > :last-child, .typeahead__hint {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.typeahead__container button {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
line-height: 1.25;
|
||||
padding: 0.5rem 0.75rem;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.typeahead__container button:hover, .typeahead__container button:focus {
|
||||
color: #3c3c3c;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #b3b3b3;
|
||||
}
|
||||
|
||||
.typeahead__container button:active, .typeahead__container button.active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.typeahead__container button:focus, .typeahead__container button:active {
|
||||
border-color: #66afe9;
|
||||
}
|
||||
|
||||
.typeahead__container input.disabled,
|
||||
.typeahead__container input[disabled],
|
||||
.typeahead__container button.disabled,
|
||||
.typeahead__container button[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.typeahead__container .typeahead__field input,
|
||||
.typeahead__container .typeahead__field textarea,
|
||||
.typeahead__container .typeahead__field [contenteditable],
|
||||
.typeahead__container .typeahead__field .typeahead__hint,
|
||||
.typeahead__container .typeahead__field .typeahead__label-container {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.typeahead__filter, .typeahead__button {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.typeahead__filter button, .typeahead__button button {
|
||||
margin-left: -1px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.typeahead__filter:hover, .typeahead__filter:active, .typeahead__filter:focus, .typeahead__button:hover, .typeahead__button:active, .typeahead__button:focus {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.typeahead__filter:hover button:focus, .typeahead__filter:hover button:active, .typeahead__filter:active button:focus, .typeahead__filter:active button:active, .typeahead__filter:focus button:focus, .typeahead__filter:focus button:active, .typeahead__button:hover button:focus, .typeahead__button:hover button:active, .typeahead__button:active button:focus, .typeahead__button:active button:active, .typeahead__button:focus button:focus, .typeahead__button:focus button:active {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.typeahead__filter + .typeahead__button button {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.typeahead__container.filter .typeahead__filter {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.typeahead__list, .typeahead__dropdown {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.typeahead__result.detached .typeahead__list {
|
||||
position: relative;
|
||||
z-index: 1041;
|
||||
top: initial;
|
||||
left: initial;
|
||||
}
|
||||
|
||||
.typeahead__dropdown {
|
||||
right: 0;
|
||||
left: initial;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.typeahead__list > li {
|
||||
position: relative;
|
||||
border-top: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.typeahead__list > li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.typeahead__list .typeahead__item[disabled] > a,
|
||||
.typeahead__dropdown .typeahead__dropdown-item[disabled] > a {
|
||||
cursor: not-allowed;
|
||||
color: #bababa;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.typeahead__list .typeahead__item > a,
|
||||
.typeahead__dropdown .typeahead__dropdown-item > a {
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
clear: both;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.typeahead__list .typeahead__item:not([disabled]) > a:hover,
|
||||
.typeahead__list .typeahead__item:not([disabled]) > a:focus,
|
||||
.typeahead__list .typeahead__item:not([disabled]).active > a,
|
||||
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:hover,
|
||||
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:focus,
|
||||
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active > a {
|
||||
background-color: #f5f5f5;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
|
||||
.typeahead__list.empty > li {
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.typeahead__list > .typeahead__group {
|
||||
border-color: #bfdef6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.typeahead__list > .typeahead__group:first-child {
|
||||
border-top: solid 1px #bfdef6;
|
||||
}
|
||||
|
||||
.typeahead__list > .typeahead__group > a,
|
||||
.typeahead__list > .typeahead__group > a:hover,
|
||||
.typeahead__list > .typeahead__group > a:focus,
|
||||
.typeahead__list > .typeahead__group.active > a {
|
||||
cursor: default;
|
||||
color: #17639f;
|
||||
background: #ecf5fc;
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
clear: both;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.typeahead__list > li.typeahead__group + li.typeahead__item {
|
||||
border-color: #bfdef6;
|
||||
}
|
||||
|
||||
.typeahead__container.result .typeahead__list,
|
||||
.typeahead__container.filter .typeahead__dropdown,
|
||||
.typeahead__container.hint .typeahead__hint,
|
||||
.typeahead__container.backdrop + .typeahead__backdrop {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.typeahead__container .typeahead__list,
|
||||
.typeahead__container .typeahead__dropdown,
|
||||
.typeahead__container .typeahead__hint,
|
||||
.typeahead__container + .typeahead__backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.typeahead__dropdown li:last-child {
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
border-top: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.typeahead__cancel-button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
line-height: 1.25;
|
||||
padding: 0.5rem 0.75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.typeahead__label .typeahead__cancel-button {
|
||||
visibility: visible;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.typeahead__container.cancel:not(.loading) .typeahead__cancel-button, .typeahead__label .typeahead__cancel-button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.typeahead__container.cancel:not(.loading) .typeahead__cancel-button:hover, .typeahead__label .typeahead__cancel-button:hover {
|
||||
color: #d0021b;
|
||||
}
|
||||
|
||||
.typeahead__search-icon {
|
||||
padding: 0 1.25rem;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent;
|
||||
}
|
||||
|
||||
.typeahead__container.loading .typeahead__query:before, .typeahead__container.loading .typeahead__query:after {
|
||||
-webkit-transition: all 0s linear, opacity 0.2s ease;
|
||||
-o-transition: all 0s linear, opacity 0.2s ease;
|
||||
transition: all 0s linear, opacity 0.2s ease;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
content: "";
|
||||
top: 50%;
|
||||
right: 0.55em;
|
||||
margin-top: -0.675rem;
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-radius: 500rem;
|
||||
border-style: solid;
|
||||
border-width: 0.1em;
|
||||
}
|
||||
|
||||
.typeahead__container.loading .typeahead__query:before {
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.typeahead__container.loading .typeahead__query:after {
|
||||
-webkit-animation: button-spin 0.6s linear;
|
||||
animation: button-spin 0.6s linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
border-color: #fff transparent transparent;
|
||||
-webkit-box-shadow: 0 0 0 1px transparent;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
@-webkit-keyframes button-spin {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes button-spin {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.typeahead__label-container {
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
padding-top: calc(1rem * 0.375);
|
||||
padding-left: 6px;
|
||||
width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.typeahead__label {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: calc(1rem * 0.875);
|
||||
position: relative;
|
||||
background: #ecf5fc;
|
||||
border: solid 1px #c2e0ff;
|
||||
padding-left: 4px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: calc(1rem * 0.375);
|
||||
}
|
||||
|
||||
.typeahead__label > * {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.typeahead__label .typeahead__cancel-button {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
position: static;
|
||||
padding-top: calc(1rem * 0.25 - 1px);
|
||||
padding-bottom: calc(1rem * 0.25 + 1px);
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
margin-left: 4px;
|
||||
font-size: calc(1rem * 0.875);
|
||||
border-left: solid 1px #c2e0ff;
|
||||
}
|
||||
|
||||
.typeahead__label .typeahead__cancel-button:hover {
|
||||
background-color: #d5e9f9;
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,620 @@
|
||||
// FORM RESETS ----------------- https://github.com/necolas/normalize.css/ ---------------------------------------------
|
||||
|
||||
.typeahead__container {
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the font weight unset by the previous rule.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
// VARIABLES -----------------------------------------------------------------------------------------------------------
|
||||
|
||||
$typeahead-font-size: 1rem !default;
|
||||
$typeahead-line-height: 1.25 !default;
|
||||
$typeahead-font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif !default;
|
||||
$typeahead-primary-color: #66afe9 !default;
|
||||
$typeahead-cancel-color: #d0021b !default;
|
||||
$typeahead-radius: 2px !default;
|
||||
$typeahead-shadow: false !default; // true / false
|
||||
$typeahead-dropdown-spacing: 5px !default;
|
||||
$typeahead-outline-color: $typeahead-primary-color !default;
|
||||
$typeahead-loading-size: 1.35rem !default;
|
||||
|
||||
$typeahead-padding-y: 0.5rem !default;
|
||||
$typeahead-padding-x: 0.75rem !default;
|
||||
|
||||
$typeahead-color: #555 !default;
|
||||
$typeahead-border-color: #ccc !default;
|
||||
|
||||
$typeahead-group-color: darken($typeahead-primary-color, 30%) !default;
|
||||
$typeahead-group-background: lighten($typeahead-primary-color, 30%) !default;
|
||||
$typeahead-group-border-color: lighten($typeahead-primary-color, 20%) !default;
|
||||
|
||||
$typeahead-item-color: #333 !default;
|
||||
$typeahead-item-background: #fff !default;
|
||||
$typeahead-item-hover-background: #f5f5f5 !default;
|
||||
$typeahead-item-disabled-color: #bababa !default;
|
||||
$typeahead-item-disabled-background: #fafafa !default;
|
||||
|
||||
$typeahead-label-color: #3a99fc !default;
|
||||
$typeahead-label-font-size: calc(#{$typeahead-font-size} * 0.875) !default;
|
||||
$typeahead-label-border-color: #c2e0ff !default;
|
||||
$typeahead-label-background: lighten($typeahead-primary-color, 30%) !default;
|
||||
|
||||
// TYPEAHEAD -----------------------------------------------------------------------------------------------------------
|
||||
|
||||
.typeahead__ {
|
||||
&container {
|
||||
position: relative;
|
||||
font: $typeahead-font-size $typeahead-font-family;
|
||||
}
|
||||
|
||||
&container * {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&query {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&filter {
|
||||
position: relative;
|
||||
button {
|
||||
min-width: 100%;
|
||||
white-space: nowrap;
|
||||
&:after {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: -2px;
|
||||
content: "";
|
||||
border: 4px solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&field {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&button button {
|
||||
border-top-right-radius: $typeahead-radius;
|
||||
border-bottom-right-radius: $typeahead-radius;
|
||||
}
|
||||
|
||||
&field {
|
||||
// #193 If applied to input, it overrides the placeholder color on IE10/11
|
||||
color: $typeahead-color;
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable],
|
||||
.typeahead__hint {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: $typeahead-line-height;
|
||||
min-height: calc(#{$typeahead-padding-y} * 2 + 1.25rem + 2px);
|
||||
padding: $typeahead-padding-y $typeahead-padding-x;
|
||||
background: #fff;
|
||||
border: 1px solid $typeahead-border-color;
|
||||
border-radius: $typeahead-radius 0 0 $typeahead-radius;
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
@if ($typeahead-shadow) {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: $typeahead-outline-color;
|
||||
}
|
||||
|
||||
//border-color: #007eff;
|
||||
//box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&container.hint .typeahead__field {
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable] {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&container.hint .typeahead__query > :last-child,
|
||||
&hint {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&container button {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid $typeahead-border-color;
|
||||
line-height: $typeahead-line-height;
|
||||
padding: $typeahead-padding-y $typeahead-padding-x;
|
||||
user-select: none;
|
||||
color: $typeahead-color;
|
||||
@if ($typeahead-shadow) {
|
||||
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken($typeahead-color, 10%);
|
||||
background-color: $typeahead-item-hover-background;
|
||||
border-color: darken($typeahead-border-color, 10%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
@if ($typeahead-shadow) {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: $typeahead-outline-color;
|
||||
}
|
||||
}
|
||||
|
||||
&container {
|
||||
input.disabled,
|
||||
input[disabled],
|
||||
button.disabled,
|
||||
button[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
background-color: #fff;
|
||||
border-color: $typeahead-border-color;
|
||||
}
|
||||
|
||||
//&.multiselect,
|
||||
//&.loading,
|
||||
//&.cancel {
|
||||
.typeahead__field {
|
||||
input,
|
||||
textarea,
|
||||
[contenteditable],
|
||||
.typeahead__hint,
|
||||
.typeahead__label-container {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
//}
|
||||
}
|
||||
|
||||
&filter,
|
||||
&button {
|
||||
z-index: 1;
|
||||
button {
|
||||
margin-left: -1px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
z-index: 1001;
|
||||
button {
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&filter + &button {
|
||||
button {
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&container.filter .typeahead__filter {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&list,
|
||||
&dropdown {
|
||||
position: absolute;
|
||||
//top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
min-width: 160px;
|
||||
padding: $typeahead-dropdown-spacing 0;
|
||||
margin: 2px 0 0;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
border: 1px solid $typeahead-border-color;
|
||||
border-radius: $typeahead-radius;
|
||||
background-clip: padding-box;
|
||||
@if ($typeahead-shadow) {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
}
|
||||
|
||||
&result.detached .typeahead__list {
|
||||
position: relative;
|
||||
z-index: 1041;
|
||||
top: initial;
|
||||
left: initial;
|
||||
}
|
||||
|
||||
&dropdown {
|
||||
right: 0;
|
||||
left: initial;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
&list > li {
|
||||
position: relative;
|
||||
border-top: solid 1px $typeahead-border-color;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&list .typeahead__item,
|
||||
&dropdown .typeahead__dropdown-item {
|
||||
&[disabled] {
|
||||
> a {
|
||||
cursor: not-allowed;
|
||||
color: $typeahead-item-disabled-color;
|
||||
background-color: $typeahead-item-disabled-background;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
padding: $typeahead-padding-y $typeahead-padding-x;
|
||||
clear: both;
|
||||
color: $typeahead-item-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
&.active > a {
|
||||
background-color: $typeahead-item-hover-background;
|
||||
color: darken($typeahead-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&list.empty {
|
||||
> li {
|
||||
padding: $typeahead-padding-y $typeahead-padding-x;
|
||||
color: $typeahead-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
&list > .typeahead__group {
|
||||
border-color: $typeahead-group-border-color;
|
||||
font-weight: bold;
|
||||
|
||||
&:first-child {
|
||||
@if ($typeahead-dropdown-spacing > 0) {
|
||||
border-top: solid 1px $typeahead-group-border-color;
|
||||
}
|
||||
}
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
&.active > a {
|
||||
cursor: default;
|
||||
color: $typeahead-group-color;
|
||||
background: $typeahead-group-background;
|
||||
display: block;
|
||||
padding: $typeahead-padding-y $typeahead-padding-x;
|
||||
clear: both;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&list > {
|
||||
li.typeahead__group + li.typeahead__item {
|
||||
border-color: $typeahead-group-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&container {
|
||||
&.result .typeahead__list,
|
||||
&.filter .typeahead__dropdown,
|
||||
&.hint .typeahead__hint,
|
||||
&.backdrop + .typeahead__backdrop {
|
||||
display: block !important;
|
||||
}
|
||||
.typeahead__list,
|
||||
.typeahead__dropdown,
|
||||
.typeahead__hint,
|
||||
+ .typeahead__backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown li:last-child {
|
||||
margin-top: $typeahead-dropdown-spacing;
|
||||
padding-top: $typeahead-dropdown-spacing;
|
||||
border-top: solid 1px $typeahead-border-color;
|
||||
}
|
||||
|
||||
&cancel-button {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
line-height: 1.25;
|
||||
padding: $typeahead-padding-y $typeahead-padding-x;
|
||||
visibility: hidden;
|
||||
.typeahead__label & {
|
||||
visibility: visible;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&container.cancel:not(.loading),
|
||||
&label {
|
||||
.typeahead__cancel-button {
|
||||
visibility: visible;
|
||||
&:hover {
|
||||
color: $typeahead-cancel-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&search-icon {
|
||||
padding: 0 1.25rem;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
// Reference: http://www.flaticon.com/free-icon/musica-searcher_70376
|
||||
background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent;
|
||||
}
|
||||
|
||||
&container.loading .typeahead__query {
|
||||
&:before,
|
||||
&:after {
|
||||
transition: all 0s linear, opacity 0.2s ease;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
content: "";
|
||||
top: 50%;
|
||||
right: 0.55em;
|
||||
margin-top: -($typeahead-loading-size / 2);
|
||||
width: $typeahead-loading-size;
|
||||
height: $typeahead-loading-size;
|
||||
box-sizing: border-box;
|
||||
border-radius: 500rem;
|
||||
border-style: solid;
|
||||
border-width: 0.1em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
&:after {
|
||||
animation: button-spin 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
border-color: #fff transparent transparent;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
@keyframes button-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&label-container {
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
padding-top: calc(#{$typeahead-font-size} * 0.375);
|
||||
padding-left: 6px;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&label {
|
||||
display: flex;
|
||||
font-size: $typeahead-label-font-size;
|
||||
position: relative;
|
||||
background: $typeahead-label-background;
|
||||
border: solid 1px $typeahead-label-border-color;
|
||||
padding-left: 4px;
|
||||
border-radius: $typeahead-radius;
|
||||
margin-right: 4px;
|
||||
margin-bottom: calc(#{$typeahead-font-size} * 0.375);
|
||||
|
||||
> * {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.typeahead__cancel-button {
|
||||
line-height: normal;
|
||||
height: auto;
|
||||
position: static;
|
||||
padding-top: calc(#{$typeahead-font-size} * 0.25 - 1px);
|
||||
padding-bottom: calc(#{$typeahead-font-size} * 0.25 + 1px);
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
margin-left: 4px;
|
||||
font-size: $typeahead-label-font-size;
|
||||
border-left: solid 1px $typeahead-label-border-color;
|
||||
&:hover {
|
||||
background-color: darken($typeahead-label-background, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(../images/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
.owl-diot.owl-theme .owl-dots {bottom: 80px; position: absolute; width: 100%; }
|
||||
.owl-diot.owl-theme .owl-dots .owl-dot span {width: 7px; height: 7px; margin:4px;}
|
||||
.owl-diot.owl-theme .owl-dots .owl-dot.active span,
|
||||
.owl-diot.owl-theme .owl-dots .owl-dot:hover span{background: red !important;}
|
||||
+1
@@ -0,0 +1 @@
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
+29090
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,237 @@
|
||||
.video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #111;
|
||||
}
|
||||
.player-container {
|
||||
padding: 0px;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
min-height: calc(100vh);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.player-container.lightbox {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
}
|
||||
.player-container.lightbox .player {
|
||||
width: 70%;
|
||||
padding-bottom: 37%;
|
||||
margin:0 auto;
|
||||
}
|
||||
.player {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 48.25%;
|
||||
box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #000000;
|
||||
}
|
||||
.player:fullscreen {
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
.player:-webkit-full-screen {
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
.player:-moz-full-screen {
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
.player:-ms-fullscreen {
|
||||
padding-bottom: 100vh;
|
||||
}
|
||||
.player video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.controls {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(37, 37, 37, 0) 10%,
|
||||
rgba(37, 37, 37, 0.6) 80%
|
||||
);
|
||||
transition: all 0.2s ease-in 5s;
|
||||
}
|
||||
.player:hover .controls {
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 100%;
|
||||
padding-bottom: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.progress {
|
||||
height: 8px;
|
||||
width: calc(100% - 40px);
|
||||
background: rgba(60, 60, 60, 0.6);
|
||||
margin: auto;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 100%;
|
||||
transition: height 0.1s ease-in-out;
|
||||
}
|
||||
.progress:hover {
|
||||
height: 10px;
|
||||
}
|
||||
.progress-filled {
|
||||
background: #fff;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
.controls-main {
|
||||
width: calc(100% - 40px);
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.controls-left,
|
||||
.controls-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.controls-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.controls-right {
|
||||
margin-right: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.volume-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.volume-btn #volume-off, .volume-btn #volume-high {
|
||||
opacity: 0;
|
||||
}
|
||||
.volume-btn.loud #volume-high{
|
||||
opacity: 1;
|
||||
}
|
||||
.volume-btn.muted #volume-off {
|
||||
opacity: 1;
|
||||
}
|
||||
.volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
|
||||
opacity: 0;
|
||||
}
|
||||
.volume-slider {
|
||||
height: 8px;
|
||||
width: 80px;
|
||||
background: rgba(60, 60, 60, 0.6);;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.volume-filled {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
.volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
|
||||
background: #fff;
|
||||
}
|
||||
button {
|
||||
}
|
||||
.play-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
transform: rotate(-90deg) scale(0.8);
|
||||
transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
|
||||
transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
|
||||
}
|
||||
.play-btn.paused {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.play-btn:before,
|
||||
.play-btn:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: inherit;
|
||||
}
|
||||
.play-btn:before {
|
||||
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
|
||||
shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
|
||||
}
|
||||
.play-btn:after {
|
||||
-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
|
||||
shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
|
||||
}
|
||||
.play-btn.paused:before {
|
||||
-webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
|
||||
shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
|
||||
}
|
||||
.play-btn.paused:after {
|
||||
-webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
|
||||
shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.speed-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.speed-list li {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
cursor: default;
|
||||
}
|
||||
.speed-list li:hover,
|
||||
.speed-list li.active {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fullscreen {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.close-video-player {
|
||||
position: fixed;
|
||||
top:25px;
|
||||
right: 25px;
|
||||
z-index: 10;
|
||||
}
|
||||
.close-video-player i {
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 554 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 452 B |
Binary file not shown.
|
After Width: | Height: | Size: 174 B |
@@ -0,0 +1 @@
|
||||
<svg width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#454ab4" stroke-width="3" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(315.987 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
|
||||
|
After Width: | Height: | Size: 686 B |
Binary file not shown.
|
After Width: | Height: | Size: 915 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
@@ -0,0 +1,69 @@
|
||||
/*
|
||||
* Author: Gopal Joshi
|
||||
* Website: www.sgeek.org
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
$.fn.Sswitch = function(element, options ) {
|
||||
this.$element = $(this);
|
||||
|
||||
this.options = $.extend({}, $.fn.Sswitch.defaults, {
|
||||
state: this.$element.is(":checked"),
|
||||
disabled: this.$element.is(":disabled"),
|
||||
readonly: this.$element.is("[readonly]"),
|
||||
parentClass: this.$element.data("parent"),
|
||||
onSwitchChange: element.onSwitchChange
|
||||
},options);
|
||||
|
||||
this.$container = $("<div>", {
|
||||
"class": (function(_this){
|
||||
return function(){
|
||||
var classes;
|
||||
classes = [_this.options.parentClass];
|
||||
classes.push(_this.options.state ? "" + _this.options.parentClass + "-on" : "" + _this.options.parentClass + "-off");
|
||||
if (_this.options.disabled) {
|
||||
classes.push("" + _this.options.parentClass + "-disabled");
|
||||
}
|
||||
if (_this.options.readonly) {
|
||||
classes.push("" + _this.options.parentClass + "-readonly");
|
||||
}
|
||||
if (_this.$element.attr("id")) {
|
||||
classes.push("" + _this.options.parentClass + "-id-" + (_this.$element.attr("id")));
|
||||
}
|
||||
return classes.join(" ");
|
||||
};
|
||||
})(this)()
|
||||
});
|
||||
this.$label = $("<span>", {
|
||||
html: this.options.labelText,
|
||||
"class": "" + this.options.parentClass + "-label"
|
||||
});
|
||||
this.$container = this.$element.wrap(this.$container).parent();
|
||||
this.$element.before(this.$label);
|
||||
|
||||
return this.$container.on("click", (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (_this.options.readonly || _this.options.disabled) {
|
||||
return _this.target;
|
||||
}
|
||||
_this.options.state = !_this.options.state;
|
||||
_this.$element.prop("checked", _this.options.state);
|
||||
_this.$container.addClass(_this.options.state ? "" + _this.options.parentClass + "-on" : "" + _this.options.parentClass + "-off").removeClass(_this.options.state ? "" + _this.options.parentClass + "-off" : "" + _this.options.parentClass + "-on");
|
||||
_this.options.onSwitchChange.call(_this);
|
||||
return _this;
|
||||
};
|
||||
})(this));
|
||||
return this.$element;
|
||||
},
|
||||
$.fn.Sswitch.defaults = {
|
||||
text : 'Default Title',
|
||||
fontsize : 10,
|
||||
state: true,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
parentClass: "s-switch",
|
||||
onSwitchChange: function() {}
|
||||
};
|
||||
}(jQuery));
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
+7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,698 @@
|
||||
'use strict';
|
||||
var extend = require('extend-object'),
|
||||
isFunction = require('is-function'),
|
||||
bean = require('bean'),
|
||||
slider = require('./ext/ui/slider'),
|
||||
barSlider = require('./ext/ui/bar-slider'),
|
||||
common = require('./common'),
|
||||
events = require('./ext/events');
|
||||
|
||||
var instances = [],
|
||||
extensions = [];
|
||||
|
||||
|
||||
var oldHandler = window.onbeforeunload;
|
||||
window.onbeforeunload = function(ev) {
|
||||
instances.forEach(function(api) {
|
||||
if (api.conf.splash) {
|
||||
api.unload();
|
||||
} else {
|
||||
api.bind("error", function () {
|
||||
common.find('.flowplayer.is-error .fp-message').forEach(common.removeNode);
|
||||
});
|
||||
}
|
||||
});
|
||||
if (oldHandler) return oldHandler(ev);
|
||||
};
|
||||
|
||||
var isSafari = /Safari/.exec(navigator.userAgent) && !/Chrome/.exec(navigator.userAgent),
|
||||
m = /(\d+\.\d+) Safari/.exec(navigator.userAgent),
|
||||
safariVersion = m ? Number(m[1]) : 100;
|
||||
|
||||
/* flowplayer() */
|
||||
var flowplayer = module.exports = function(fn, opts, callback) {
|
||||
if (isFunction(fn)) return extensions.push(fn);
|
||||
if (typeof fn == 'number' || typeof fn === 'undefined') return instances[fn || 0];
|
||||
if (fn.nodeType) { // Is an element
|
||||
if (fn.getAttribute('data-flowplayer-instance-id') !== null) { // Already flowplayer instance
|
||||
return instances[fn.getAttribute('data-flowplayer-instance-id')];
|
||||
}
|
||||
if (!opts) return; // Can't initialize without data
|
||||
return initializePlayer(fn, opts, callback);
|
||||
}
|
||||
if (fn.jquery) return flowplayer(fn[0], opts, callback);
|
||||
if (typeof fn === 'string') {
|
||||
var el = common.find(fn)[0];
|
||||
return el && flowplayer(el, opts, callback);
|
||||
}
|
||||
};
|
||||
|
||||
extend(flowplayer, {
|
||||
|
||||
version: '@VERSION',
|
||||
|
||||
engines: [],
|
||||
|
||||
engine: function(name) {
|
||||
return flowplayer.engines.filter(function(e) { return e.engineName === name; })[0];
|
||||
},
|
||||
|
||||
extensions: [],
|
||||
|
||||
conf: {},
|
||||
|
||||
set: function(key, value) {
|
||||
if (typeof key === 'string') flowplayer.conf[key] = value;
|
||||
else extend(flowplayer.conf, key);
|
||||
},
|
||||
|
||||
registerExtension: function(js, css) {
|
||||
flowplayer.extensions.push([js, css]);
|
||||
},
|
||||
|
||||
support: {},
|
||||
|
||||
defaults: {
|
||||
|
||||
debug: false,
|
||||
|
||||
// true = forced playback
|
||||
disabled: false,
|
||||
|
||||
fullscreen: window == window.top,
|
||||
|
||||
// keyboard shortcuts
|
||||
keyboard: true,
|
||||
|
||||
// default aspect ratio
|
||||
ratio: 9 / 16,
|
||||
|
||||
adaptiveRatio: false,
|
||||
|
||||
rtmp: 0,
|
||||
|
||||
proxy: 'best',
|
||||
|
||||
hlsQualities: true,
|
||||
|
||||
seekStep: false,
|
||||
|
||||
splash: false,
|
||||
|
||||
live: false,
|
||||
livePositionOffset: 120,
|
||||
|
||||
swf: "//@CDN/@VERSION/@CDN_PATHflowplayer.swf",
|
||||
swfHls: "//@CDN/@VERSION/@CDN_PATHflowplayerhls.swf",
|
||||
|
||||
speeds: [0.25, 0.5, 1, 1.5, 2],
|
||||
|
||||
tooltip: true,
|
||||
|
||||
mouseoutTimeout: 5000,
|
||||
|
||||
mutedAutoplay: true,
|
||||
|
||||
clickToUnMute: true,
|
||||
|
||||
// initial volume level
|
||||
volume: 1,
|
||||
|
||||
// http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#error-codes
|
||||
errors: [
|
||||
|
||||
// video exceptions
|
||||
'',
|
||||
'Video loading aborted',
|
||||
'Network error',
|
||||
'Video not properly encoded',
|
||||
'Video file not found',
|
||||
|
||||
// player exceptions
|
||||
'Unsupported video',
|
||||
'Skin not found',
|
||||
'SWF file not found',
|
||||
'Subtitles not found',
|
||||
'Invalid RTMP URL',
|
||||
'Unsupported video format. Try installing Adobe Flash.'
|
||||
],
|
||||
errorUrls: ['','','','','','','','','','',
|
||||
'http://get.adobe.com/flashplayer/'
|
||||
],
|
||||
playlist: [],
|
||||
|
||||
hlsFix: isSafari && safariVersion < 8,
|
||||
|
||||
disableInline: false
|
||||
|
||||
},
|
||||
// Expose utilities for plugins
|
||||
bean: bean,
|
||||
common: common,
|
||||
slider: slider,
|
||||
barSlider: barSlider,
|
||||
extend: extend
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// keep track of players
|
||||
var playerCount = 0;
|
||||
|
||||
var URLResolver = require('./ext/resolve');
|
||||
|
||||
|
||||
|
||||
if (typeof window.jQuery !== 'undefined') {
|
||||
var $ = window.jQuery;
|
||||
// auto-install (any video tag with parent .flowplayer)
|
||||
$(function() {
|
||||
if (typeof $.fn.flowplayer == 'function') {
|
||||
$('.flowplayer:has(video:not(.fp-engine),script[type="application/json"])').flowplayer();
|
||||
}
|
||||
});
|
||||
|
||||
// jQuery plugin
|
||||
var videoTagConfig = function(videoTag) {
|
||||
if (!videoTag.length) return {};
|
||||
var clip = videoTag.data() || {}, conf = {};
|
||||
$.each(['autoplay', 'loop', 'preload', 'poster'], function(i, key) {
|
||||
var val = videoTag.attr(key);
|
||||
if (val !== undefined && ['autoplay', 'poster'].indexOf(key) !== -1) conf[key] = val ? val : true;
|
||||
else if (val !== undefined) clip[key] = val ? val : true;
|
||||
});
|
||||
videoTag[0].autoplay = videoTag[0].preload = false;
|
||||
clip.subtitles = videoTag.find('track').map(function() {
|
||||
var tr = $(this);
|
||||
return {
|
||||
src: tr.attr('src'),
|
||||
kind: tr.attr('kind'),
|
||||
label: tr.attr('label'),
|
||||
srclang: tr.attr('srclang'),
|
||||
'default': tr.prop('default')
|
||||
};
|
||||
}).get();
|
||||
|
||||
clip.sources = (new URLResolver()).sourcesFromVideoTag(videoTag, $);
|
||||
return extend(conf, {clip: clip});
|
||||
};
|
||||
$.fn.flowplayer = function(opts, callback) {
|
||||
return this.each(function() {
|
||||
if (typeof opts == 'string') opts = { swf: opts };
|
||||
if (isFunction(opts)) { callback = opts; opts = {}; }
|
||||
var root = $(this),
|
||||
scriptConf = root.find('script[type="application/json"]'),
|
||||
confObject = scriptConf.length ? JSON.parse(scriptConf.text()) : videoTagConfig(root.find('video')),
|
||||
conf = $.extend({}, opts || {}, confObject, root.data());
|
||||
var api = initializePlayer(this, conf, callback);
|
||||
events.EVENTS.forEach(function(evName) {
|
||||
api.on(evName + '.jquery', function(ev) {
|
||||
root.trigger.call(root, ev.type, ev.detail && ev.detail.args);
|
||||
});
|
||||
});
|
||||
root.data('flowplayer', api);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function initializePlayer(element, opts, callback) {
|
||||
if (opts && opts.embed) opts.embed = extend({}, flowplayer.defaults.embed, opts.embed);
|
||||
|
||||
var supportLocalStorage = false;
|
||||
try {
|
||||
if (typeof flowplayer.conf.storage === 'undefined' && typeof window.localStorage == "object") {
|
||||
window.localStorage.flowplayerTestStorage = "test";
|
||||
supportLocalStorage = true;
|
||||
}
|
||||
} catch (ignored) {}
|
||||
|
||||
|
||||
|
||||
var root = element,
|
||||
conf = extend({}, flowplayer.defaults, flowplayer.conf, opts),
|
||||
storage = {},
|
||||
originalClass = root.className,
|
||||
lastSeekPosition,
|
||||
engine,
|
||||
urlResolver = new URLResolver();
|
||||
|
||||
common.addClass(root, 'is-loading');
|
||||
common.toggleClass(root, 'no-flex', !flowplayer.support.flex);
|
||||
common.toggleClass(root, 'no-svg', !flowplayer.support.svg);
|
||||
try {
|
||||
storage = flowplayer.conf.storage || (supportLocalStorage ? window.localStorage : storage);
|
||||
} catch(e) {}
|
||||
|
||||
conf.volume = storage.muted === "true" ? 0 : conf.volume !== flowplayer.defaults.volume ? conf.volume : !isNaN(storage.volume) ? storage.volume : conf.volume;
|
||||
|
||||
conf.debug = !!storage.flowplayerDebug || conf.debug;
|
||||
|
||||
if (conf.aspectRatio && typeof conf.aspectRatio === 'string') {
|
||||
var parts = conf.aspectRatio.split(/[:\/]/);
|
||||
conf.ratio = parts[1] / parts[0];
|
||||
}
|
||||
|
||||
var isRTL = (root.currentStyle && root.currentStyle.direction === 'rtl') ||
|
||||
(window.getComputedStyle && window.getComputedStyle(root, null) !== null && window.getComputedStyle(root, null).getPropertyValue('direction') === 'rtl');
|
||||
|
||||
if (isRTL) common.addClass(root, 'is-rtl');
|
||||
|
||||
/*** API ***/
|
||||
var api = {
|
||||
|
||||
// properties
|
||||
conf: conf,
|
||||
currentSpeed: 1,
|
||||
volumeLevel: conf.muted ? 0 : typeof conf.volume === "undefined" ? storage.volume * 1 : conf.volume,
|
||||
video: {},
|
||||
|
||||
// states
|
||||
disabled: false,
|
||||
finished: false,
|
||||
loading: false,
|
||||
muted: storage.muted == "true" || conf.muted,
|
||||
paused: false,
|
||||
playing: false,
|
||||
ready: false,
|
||||
splash: false,
|
||||
rtl: isRTL,
|
||||
|
||||
// methods
|
||||
//
|
||||
hijack: function(hijack) {
|
||||
try {
|
||||
api.engine.suspendEngine();
|
||||
} catch (e) { /* */ }
|
||||
api.hijacked = hijack;
|
||||
},
|
||||
release: function() {
|
||||
try {
|
||||
api.engine.resumeEngine();
|
||||
} catch (e) { /* */ }
|
||||
api.hijacked = false;
|
||||
},
|
||||
debug: function() {
|
||||
if (!conf.debug) return;
|
||||
console.log.apply(console, ['DEBUG'].concat([].slice.call(arguments)));
|
||||
},
|
||||
load: function(video, callback) {
|
||||
|
||||
if (api.error || api.loading) return;
|
||||
api.video = {};
|
||||
|
||||
api.finished = false;
|
||||
|
||||
video = video || conf.clip;
|
||||
|
||||
// resolve URL
|
||||
video = extend({}, urlResolver.resolve(video, conf.clip.sources));
|
||||
if (api.playing || api.engine) video.autoplay = true;
|
||||
var engineImpl = selectEngine(video);
|
||||
if (!engineImpl) return setTimeout(function() { api.trigger("error", [api, { code: flowplayer.support.flashVideo ? 5 : 10 }]); }) && api;
|
||||
if (!engineImpl.engineName) throw new Error('engineName property of factory should be exposed');
|
||||
if (!api.engine || engineImpl.engineName !== api.engine.engineName) {
|
||||
api.ready = false;
|
||||
if (api.engine) {
|
||||
api.engine.unload();
|
||||
api.conf.autoplay = true;
|
||||
}
|
||||
engine = api.engine = engineImpl(api, root);
|
||||
api.one('ready', function() {
|
||||
setTimeout(function() {
|
||||
if (api.muted) api.mute(true, true);
|
||||
else engine.volume(api.volumeLevel);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
extend(video, engine.pick(video.sources.filter(function(source) { // Filter out sources explicitly configured for some other engine
|
||||
if (!source.engine) return true;
|
||||
return source.engine === engine.engineName;
|
||||
})));
|
||||
|
||||
if (video.src) {
|
||||
var e = api.trigger('load', [api, video, engine], true);
|
||||
if (!e.defaultPrevented) {
|
||||
api.ready = false;
|
||||
engine.load(video);
|
||||
|
||||
// callback
|
||||
if (isFunction(video)) callback = video;
|
||||
if (callback) api.one("ready", callback);
|
||||
} else {
|
||||
api.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
return api;
|
||||
},
|
||||
|
||||
pause: function(fn) {
|
||||
if (api.hijacked) return api.hijacked.pause(fn) | api;
|
||||
|
||||
if (api.ready && !api.seeking && !api.loading) {
|
||||
engine.pause();
|
||||
api.one("pause", fn);
|
||||
}
|
||||
return api;
|
||||
},
|
||||
|
||||
resume: function() {
|
||||
var ev = api.trigger('beforeresume', [api], true);
|
||||
if (ev.defaultPrevented) return;
|
||||
if (api.hijacked) return api.hijacked.resume() | api;
|
||||
|
||||
if (api.ready && api.paused) {
|
||||
engine.resume();
|
||||
|
||||
// Firefox (+others?) does not fire "resume" after finish
|
||||
if (api.finished) {
|
||||
api.trigger("resume", [api]);
|
||||
api.finished = false;
|
||||
}
|
||||
}
|
||||
|
||||
return api;
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
return api.ready ? api.paused ? api.resume() : api.pause() : api.load();
|
||||
},
|
||||
|
||||
/*
|
||||
seek(1.4) -> 1.4s time
|
||||
seek(true) -> 10% forward
|
||||
seek(false) -> 10% backward
|
||||
*/
|
||||
seek: function(time, callback) {
|
||||
if (typeof time == "boolean") {
|
||||
var delta = api.conf.seekStep || api.video.duration * 0.1;
|
||||
time = api.video.time + (time ? delta : -delta);
|
||||
time = Math.min(Math.max(time, 0), api.video.duration - 0.1);
|
||||
}
|
||||
if (typeof time === 'undefined') return api;
|
||||
if (api.hijacked) return api.hijacked.seek(time, callback) | api;
|
||||
if (api.ready) {
|
||||
lastSeekPosition = time;
|
||||
var ev = api.trigger('beforeseek', [api, time], true);
|
||||
if (!ev.defaultPrevented) {
|
||||
engine.seek(time);
|
||||
if (isFunction(callback)) api.one("seek", callback);
|
||||
} else {
|
||||
api.seeking = false;
|
||||
common.toggleClass(root, 'is-seeking', api.seeking); // remove loading indicator
|
||||
}
|
||||
}
|
||||
return api;
|
||||
},
|
||||
|
||||
/*
|
||||
seekTo(1) -> 10%
|
||||
seekTo(2) -> 20%
|
||||
seekTo(3) -> 30%
|
||||
...
|
||||
seekTo() -> last position
|
||||
*/
|
||||
seekTo: function(position, fn) {
|
||||
if (position === undefined) return api.seek(lastSeekPosition, fn);
|
||||
if (api.video.seekOffset !== undefined) { // Live stream
|
||||
return api.seek(api.video.seekOffset + (api.video.duration - api.video.seekOffset) * 0.1 * position, fn);
|
||||
}
|
||||
return api.seek(api.video.duration * 0.1 * position, fn);
|
||||
},
|
||||
|
||||
mute: function(flag, skipStore) {
|
||||
if (flag === undefined) flag = !api.muted;
|
||||
api.muted = flag;
|
||||
if (!skipStore) {
|
||||
storage.muted = flag;
|
||||
storage.volume = !isNaN(storage.volume) ? storage.volume : conf.volume; // make sure storage has volume
|
||||
}
|
||||
if (typeof engine.mute !== 'undefined') engine.mute(flag);
|
||||
else {
|
||||
api.volume(flag ? 0 : storage.volume, true);
|
||||
api.trigger("mute", [api, flag]);
|
||||
}
|
||||
return api;
|
||||
},
|
||||
|
||||
volume: function(level, skipStore) {
|
||||
if (api.ready) {
|
||||
level = Math.min(Math.max(level, 0), 1);
|
||||
if (!skipStore) storage.volume = level;
|
||||
engine.volume(level);
|
||||
}
|
||||
|
||||
return api;
|
||||
},
|
||||
|
||||
speed: function(val, callback) {
|
||||
|
||||
if (api.ready) {
|
||||
|
||||
// increase / decrease
|
||||
if (typeof val == "boolean") {
|
||||
val = conf.speeds[conf.speeds.indexOf(api.currentSpeed) + (val ? 1 : -1)] || api.currentSpeed;
|
||||
}
|
||||
|
||||
engine.speed(val);
|
||||
if (callback) root.one("speed", callback);
|
||||
}
|
||||
|
||||
return api;
|
||||
},
|
||||
|
||||
|
||||
stop: function() {
|
||||
if (api.ready) {
|
||||
api.pause();
|
||||
if (!api.live || api.dvr) {
|
||||
api.seek(0, function() {
|
||||
api.trigger("stop", [api]);
|
||||
});
|
||||
} else {
|
||||
api.trigger("stop", [api]);
|
||||
}
|
||||
}
|
||||
return api;
|
||||
},
|
||||
|
||||
unload: function() {
|
||||
|
||||
if (conf.splash) {
|
||||
api.trigger("unload", [api]);
|
||||
if (engine) {
|
||||
engine.unload();
|
||||
api.engine = engine = 0;
|
||||
}
|
||||
} else {
|
||||
api.stop();
|
||||
}
|
||||
return api;
|
||||
},
|
||||
|
||||
shutdown: function() {
|
||||
api.unload();
|
||||
api.trigger('shutdown', [api]);
|
||||
bean.off(root);
|
||||
delete instances[root.getAttribute('data-flowplayer-instance-id')];
|
||||
root.removeAttribute('data-flowplayer-instance-id');
|
||||
},
|
||||
|
||||
disable: function(flag) {
|
||||
if (flag === undefined) flag = !api.disabled;
|
||||
|
||||
if (flag != api.disabled) {
|
||||
api.disabled = flag;
|
||||
api.trigger("disable", flag);
|
||||
}
|
||||
return api;
|
||||
},
|
||||
|
||||
registerExtension: function(jsUrls, cssUrls) {
|
||||
jsUrls = jsUrls || [];
|
||||
cssUrls = cssUrls || [];
|
||||
if (typeof jsUrls === 'string') jsUrls = [jsUrls];
|
||||
if (typeof cssUrls === 'string') cssUrls = [cssUrls];
|
||||
jsUrls.forEach(function(url) { api.extensions.js.push(url); });
|
||||
cssUrls.forEach(function(url) { api.extensions.css.push(url); });
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
api.conf = extend(api.conf, conf);
|
||||
api.extensions = { js: [], css: [] };
|
||||
flowplayer.extensions.forEach(function(i) {
|
||||
api.registerExtension(i[0], i[1]);
|
||||
});
|
||||
/* event binding / unbinding */
|
||||
events(api);
|
||||
|
||||
var selectEngine = function(clip) {
|
||||
var engine;
|
||||
var engines = flowplayer.engines;
|
||||
if (conf.engine) {
|
||||
var eng = engines.filter(function(e) { return e.engineName === conf.engine; })[0];
|
||||
if (eng && clip.sources.some(function(source) {
|
||||
if (source.engine && source.engine !== eng.engineName) return false;
|
||||
return eng.canPlay(source.type, api.conf);
|
||||
})) return eng;
|
||||
}
|
||||
if (conf.enginePreference) engines = flowplayer.engines.filter(function(one) { return conf.enginePreference.indexOf(one.engineName) > -1; }).sort(function(a, b) {
|
||||
return conf.enginePreference.indexOf(a.engineName) - conf.enginePreference.indexOf(b.engineName);
|
||||
});
|
||||
clip.sources.some(function(source) {
|
||||
var eng = engines.filter(function(engine) {
|
||||
if (source.engine && source.engine !== engine.engineName) return false;
|
||||
return engine.canPlay(source.type, api.conf);
|
||||
}).shift();
|
||||
if (eng) engine = eng;
|
||||
return !!eng;
|
||||
});
|
||||
return engine;
|
||||
};
|
||||
|
||||
/*** Behaviour ***/
|
||||
if (!root.getAttribute('data-flowplayer-instance-id')) { // Only bind once
|
||||
root.setAttribute('data-flowplayer-instance-id', playerCount++);
|
||||
|
||||
|
||||
api.on('boot', function() {
|
||||
var support = flowplayer.support;
|
||||
|
||||
// splash
|
||||
if (conf.splash || common.hasClass(root, "is-splash") ||
|
||||
!support.firstframe) {
|
||||
api.forcedSplash = !conf.splash && !common.hasClass(root, "is-splash");
|
||||
api.splash = true;
|
||||
if (!conf.splash) conf.splash = true;
|
||||
common.addClass(root, "is-splash");
|
||||
}
|
||||
|
||||
if (conf.splash) common.find('video', root).forEach(common.removeNode);
|
||||
|
||||
if (conf.dvr || conf.live || common.hasClass(root, 'is-live')) {
|
||||
api.live = conf.live = true;
|
||||
api.dvr = conf.dvr = !!conf.dvr || common.hasClass(root, 'is-dvr');
|
||||
common.addClass(root, 'is-live');
|
||||
common.toggleClass(root, 'is-dvr', api.dvr);
|
||||
}
|
||||
|
||||
// extensions
|
||||
extensions.forEach(function(e) {
|
||||
e(api, root);
|
||||
});
|
||||
|
||||
// instances
|
||||
instances.push(api);
|
||||
|
||||
// start
|
||||
if (conf.splash) api.unload(); else api.load();
|
||||
|
||||
// disabled
|
||||
if (conf.disabled) api.disable();
|
||||
|
||||
// initial callback
|
||||
api.one("ready", callback);
|
||||
|
||||
api.one('shutdown', function() { root.className = originalClass; });
|
||||
|
||||
|
||||
}).on("load", function(e, api, video) {
|
||||
|
||||
// unload others
|
||||
if (conf.splash) {
|
||||
common.find('.flowplayer.is-ready,.flowplayer.is-loading').forEach(function(el) {
|
||||
var playerId = el.getAttribute('data-flowplayer-instance-id');
|
||||
if (playerId === root.getAttribute('data-flowplayer-instance-id')) return;
|
||||
var a = instances[Number(playerId)];
|
||||
if (a && a.conf.splash) a.unload();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// loading
|
||||
common.addClass(root, "is-loading");
|
||||
api.loading = true;
|
||||
|
||||
if (typeof video.live !== 'undefined' || typeof video.dvr !== 'undefined') {
|
||||
common.toggleClass(root, 'is-live', video.dvr || video.live);
|
||||
common.toggleClass(root, 'is-dvr', !!video.dvr);
|
||||
api.live = video.dvr || video.live;
|
||||
api.dvr = !!video.dvr;
|
||||
}
|
||||
|
||||
|
||||
}).on("ready", function(e, api, video) {
|
||||
video.time = 0;
|
||||
api.video = video;
|
||||
|
||||
common.removeClass(root, "is-loading");
|
||||
api.loading = false;
|
||||
|
||||
// saved state
|
||||
if (api.muted) api.mute(true, true);
|
||||
else api.volume(api.volumeLevel);
|
||||
|
||||
// see https://github.com/flowplayer/flowplayer/issues/479
|
||||
|
||||
var hlsFix = api.conf.hlsFix && /mpegurl/i.exec(video.type);
|
||||
common.toggleClass(root, 'hls-fix', !!hlsFix);
|
||||
|
||||
}).on("unload", function() {
|
||||
common.removeClass(root, "is-loading");
|
||||
api.loading = false;
|
||||
|
||||
|
||||
}).on("ready unload", function(e) {
|
||||
var is_ready = e.type == "ready";
|
||||
common.toggleClass(root, 'is-splash', !is_ready);
|
||||
common.toggleClass(root, 'is-ready', is_ready);
|
||||
api.ready = is_ready;
|
||||
api.splash = !is_ready;
|
||||
|
||||
|
||||
}).on("progress", function(e, api, time) {
|
||||
api.video.time = time;
|
||||
}).on('buffer', function(e, api, buffered) {
|
||||
api.video.buffer = typeof buffered === 'number' ? buffered : buffered.length ? buffered[buffered.length - 1].end : 0;
|
||||
}).on("speed", function(e, api, val) {
|
||||
api.currentSpeed = val;
|
||||
|
||||
}).on("volume", function(e, api, level) {
|
||||
api.volumeLevel = Math.round(level * 100) / 100;
|
||||
if (api.muted && level) api.mute(false);
|
||||
|
||||
|
||||
}).on("beforeseek seek", function(e) {
|
||||
api.seeking = e.type == "beforeseek";
|
||||
common.toggleClass(root, 'is-seeking', api.seeking);
|
||||
|
||||
}).on("ready pause resume unload finish stop", function(e) {
|
||||
|
||||
// PAUSED: pause / finish
|
||||
api.paused = /pause|finish|unload|stop/.test(e.type);
|
||||
api.paused = api.paused || e.type === 'ready' && !conf.autoplay && !api.playing;
|
||||
|
||||
// the opposite
|
||||
api.playing = !api.paused;
|
||||
|
||||
// CSS classes
|
||||
common.toggleClass(root, 'is-paused', api.paused);
|
||||
common.toggleClass(root, 'is-playing', api.playing);
|
||||
|
||||
// sanity check
|
||||
if (!api.load.ed) api.pause();
|
||||
|
||||
}).on("finish", function() {
|
||||
api.finished = true;
|
||||
|
||||
}).on("error", function() {
|
||||
});
|
||||
}
|
||||
|
||||
// boot
|
||||
api.trigger('boot', [api, root]);
|
||||
return api;
|
||||
}
|
||||
+21517
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,205 @@
|
||||
/*
|
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
*
|
||||
* Uses the built in easing capabilities added In jQuery 1.1
|
||||
* to offer multiple easing options
|
||||
*
|
||||
* TERMS OF USE - jQuery Easing
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
jQuery.easing['jswing'] = jQuery.easing['swing'];
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x, t, b, c, d) {
|
||||
//alert(jQuery.easing.default);
|
||||
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
|
||||
},
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
*
|
||||
* TERMS OF USE - EASING EQUATIONS
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
File diff suppressed because it is too large
Load Diff
+9
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Vendored
+10
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,56 @@
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#myTab a").click(function(e){
|
||||
e.preventDefault();
|
||||
$(this).tab('show');
|
||||
});
|
||||
});
|
||||
$("#myTab a:first").tab('show'); // show first tab
|
||||
|
||||
function ssiptv_upload() {
|
||||
var mac = $("#ss_mac").val();
|
||||
var username = $("#ss_username").val();
|
||||
var password = $("#ss_password").val();
|
||||
var pin = $("#ss_pin").val();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_playlist.php",
|
||||
data: {'mac': mac, 'username': username, 'password': password, 'pin': pin, 'type': 1},
|
||||
dataType : "json",
|
||||
success: function (response) {
|
||||
if (response == 1) {
|
||||
$("#modal_body_text").html("<?= GUIDES_MESSAGE_1; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
} else if (response == 0) {
|
||||
$("#modal_body_text").html("<?= GUIDES_MESSAGE_2; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
} else {
|
||||
$("#modal_body_text").html("<?= GUIDES_MESSAGE_3; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function royaliptv_upload() {
|
||||
var mac = $("#ry_mac").val();
|
||||
var username = $("#ry_username").val();
|
||||
var password = $("#ry_password").val();
|
||||
var url = $("#ry_url").val();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_playlist.php",
|
||||
data: {'mac': mac, 'username': username, 'password': password, 'type': 2},
|
||||
dataType : "json",
|
||||
success: function (response) {
|
||||
if (response == 1) {
|
||||
$("#modal_body_text").html("<?= GUIDES_MESSAGE_1; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
} else {
|
||||
$("#modal_body_text").html("<?= GUIDES_MESSAGE_3; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script>
|
||||
<? if ($byakman->guvenlik($_GET["id"]) != "") { ?>
|
||||
var player = jwplayer("myElement");
|
||||
player.setup({
|
||||
"file": "<?= $siteInfo->site_xtream;?>live/<?= $byakman->userInfo('username'); ?>/<?= $byakman->userInfo('password'); ?>/<?= $byakman->guvenlik($_GET['id']); ?>.m3u8",
|
||||
aspectratio: '16:9',
|
||||
autostart: true,
|
||||
width: '100%'
|
||||
});
|
||||
player.play();
|
||||
<? } ?>
|
||||
var bouquet_id = $("#live_cat").val();
|
||||
function bouquet_get(a) {
|
||||
var bouguet_cat = a;
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_livetv.php",
|
||||
data: { "type": 1, "cat": bouguet_cat},
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
$(".mobile").empty();
|
||||
$(".desktop").empty();
|
||||
$.each(response, function(index, item) {
|
||||
if (item.epg_title != null) {
|
||||
$(".mobile").append('<li onclick="yayin_ac(this);" class="list-group-item" data-id="'+ item.stream_id +'">'+ index +' - <img style="margin-right:5px" src="'+ item.stream_icon +'" width="25" />' + item.name + '<span class="epg_info">'+item.epg_title+'</span></li>');
|
||||
$(".desktop").append('<li onclick="yayin_ac(this);" class="list-group-item" data-id="'+ item.stream_id +'">'+ index +' - <img style="margin-right:5px" src="'+ item.stream_icon +'" width="25" />' + item.name + '<span class="epg_info">'+item.epg_title+'</span></li>');
|
||||
} else {
|
||||
$(".mobile").append('<li onclick="yayin_ac(this);" class="list-group-item" data-id="'+ item.stream_id +'"><div style="float:left">'+ index +' - <img style="margin-right:5px" src="'+ item.stream_icon +'" width="25" />' + item.name + '</div></li>');
|
||||
$(".desktop").append('<li onclick="yayin_ac(this);" class="list-group-item" data-id="'+ item.stream_id +'">'+ index +' - <img style="margin-right:5px" src="'+ item.stream_icon +'" width="25" />' + item.name + '</li>');
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
<? if ($byakman->guvenlik($_GET["id"]) == "") { ?>
|
||||
$('.list-group-item:first-child').click();
|
||||
<? } ?>
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
bouquet_get(bouquet_id);
|
||||
|
||||
$("#live_cat").change(function (e) {
|
||||
e.preventDefault();
|
||||
$("#live_cat2").removeClass("active");
|
||||
$("#live_cat2").val(this.value).addClass("active");
|
||||
bouquet_get(this.value);
|
||||
});
|
||||
$("#live_cat2").change(function (e) {
|
||||
e.preventDefault();
|
||||
$("#live_cat").removeClass("active");
|
||||
$("#live_cat").val(this.value).addClass("active");
|
||||
bouquet_get(this.value);
|
||||
});
|
||||
|
||||
|
||||
function yayin_ac(d){
|
||||
var id = d.getAttribute("data-id");
|
||||
$(".list-group-item").removeClass("active");
|
||||
$(d).addClass("active");
|
||||
if (id !== '') {
|
||||
if (!isNaN(id)) {
|
||||
$('.loader').addClass('active');
|
||||
$.ajax({
|
||||
url: 'app/_livetv.php',
|
||||
type: 'POST',
|
||||
data: {channel: id, type: 2},
|
||||
dataType: 'html',
|
||||
success: function (result) {
|
||||
var player = jwplayer("myElement");
|
||||
player.setup({
|
||||
"file": result,
|
||||
aspectratio: '16:9',
|
||||
autostart: true,
|
||||
width: '100%'
|
||||
});
|
||||
player.play();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_livetv.php",
|
||||
data: {"channel": id, type: 3},
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
$("#epg_list").empty();
|
||||
$("#epg_list").html('<ul class="list-group">');
|
||||
$.each(response, function(index, item) {
|
||||
if (item.description != "") {
|
||||
var description_item = "<p>"+item.description+"</p>";
|
||||
} else {
|
||||
var description_item = "";
|
||||
}
|
||||
$("#epg_list").append('<li id="epg_data" class="list-group-item">'+ item.start +' - '+ item.end +' ' + item.title + ''+ description_item +'</li>');
|
||||
});
|
||||
$("#epg_list").append("</ul>");
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.loader').removeClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
function open_live_menu() {
|
||||
document.getElementById("mySidenav").style.width = "250px";
|
||||
$("#fixed_header").css("position", "fixed");
|
||||
$("#fixed_header").css("display", "contents");
|
||||
$("#live_box2").css("display", "flex");
|
||||
}
|
||||
|
||||
function close_live_menu() {
|
||||
document.getElementById("mySidenav").style.width = "0";
|
||||
$("#fixed_header").css("display", "none");
|
||||
$("#live_box2").css("display", "none");
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script>
|
||||
$(document).on('keypress',function(e) {
|
||||
if(e.which == 13) {
|
||||
$("#login_user").click();
|
||||
}
|
||||
});
|
||||
<? if ($siteInfo->recaptcha == 1) { ?>
|
||||
grecaptcha.ready(function () {
|
||||
grecaptcha.execute('<?= $siteInfo->recaptcha_key; ?>', { action: 'contact' }).then(function (token) {
|
||||
var recaptchaResponse = document.getElementById('recaptcha_response');
|
||||
recaptchaResponse.value = token;
|
||||
});
|
||||
});
|
||||
<? } ?>
|
||||
|
||||
$("#login").click(function() {
|
||||
var username = $("#username").val();
|
||||
var sifre = $("#sifre").val();
|
||||
var mac = $("#mac").val();
|
||||
var remember = $("#remember").val();
|
||||
var captcha = $("#recaptchaResponse").val();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_login.php",
|
||||
data: {'username': username, 'password': sifre, 'mac': mac, 'captcha': captcha, 'remember': remember, 'type': "1"},
|
||||
success: function (response) {
|
||||
if (response == 1) {
|
||||
$("#modal_body_text").text("<?= LOGIN_ALERT_3; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
setTimeout(function(){ window.location.href="index.php?page=homepage"; }, 3000);
|
||||
} else if (response == 2) {
|
||||
$("#modal_body_text").text("<?= LOGIN_ALERT_4; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
} else if (response == 3) {
|
||||
$("#modal_body_text").text("<?= LOGIN_ALERT_5; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
} else if (response == 4) {
|
||||
$("#modal_body_text").text("<?= LOGIN_ALERT_6; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
} else if (response == 5) {
|
||||
$("#modal_body_text").text("<?= LOGIN_ALERT_8; ?>");
|
||||
$("#alert_modal").modal("show");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
var $myGroup = $('#myGroup');
|
||||
$myGroup.on('show.bs.collapse','.collapse', function() {
|
||||
$myGroup.find('.collapse.show').collapse('hide');
|
||||
});
|
||||
|
||||
var macAddress = document.getElementById("mac");
|
||||
function formatMAC(e) {
|
||||
var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
|
||||
str = e.target.value.replace(/[^a-f0-9]/ig, "");
|
||||
while (r.test(str)) {
|
||||
str = str.replace(r, '$1' + ':' + '$2');
|
||||
}
|
||||
e.target.value = str.slice(0, 17);
|
||||
};
|
||||
macAddress.addEventListener("keyup", formatMAC, false);
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
$(document).on('click', '.ep-list-min', function (e) {
|
||||
$("#youtube_fragman").YTPPause();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
$("#alert_modal").on('hide.bs.modal', function () {
|
||||
var player = videojs("my-video");
|
||||
player.pause();
|
||||
$("#youtube_fragman").YTPPlay();
|
||||
});
|
||||
|
||||
$(function(){
|
||||
$("#youtube_fragman").YTPlayer();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script>
|
||||
var i = 0;
|
||||
|
||||
$('#change_bouquet').click(function(e) {
|
||||
var arr = [];
|
||||
$('#bq:checked').each(function () {
|
||||
arr[i++] = $(this).val();
|
||||
});
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_bouqet.php",
|
||||
data: {'bouqet': arr},
|
||||
success: function (response) {
|
||||
if (response == 1) {
|
||||
$("#modal_info_body").text("<?= PROFILE_BOUQET_ALERT_1; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else {
|
||||
$("#modal_info_body").text("<?= PROFILE_BOUQET_ALERT_2; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
<? if ($siteInfo->password_change == 1) { ?>
|
||||
|
||||
$("#change_pass").click(function() {
|
||||
var password = $("#password_c1").val();
|
||||
var password_c = $("#password_c2").val();
|
||||
if (password != password_c) {
|
||||
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_1; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else if (password.length < 8) {
|
||||
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_2; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else if (!password.match(/([A-Z])/)) {
|
||||
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_3; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else if ((password.length - password.replace(/[A-Z]/g, '').length) < 3) {
|
||||
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_3; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else if (!password.match(/([0-9])/)) {
|
||||
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_4; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else if ((password.length - password.replace(/[0-9]/g, '').length) < 3) {
|
||||
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_4; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "app/_passchange.php",
|
||||
data: {'password': password, 'password_c': password_c},
|
||||
success: function (response) {
|
||||
|
||||
if (response == 1) {
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_5; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
$('#info_modal').on('hidden.bs.modal', function (e) {
|
||||
window.location.href="index.php?page=logout";
|
||||
});
|
||||
} else if (response == 2) {
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_6; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
} else if (response == 3) {
|
||||
$("#modal_info_body").text("<?= PROFILE_PASS_ALERT_7; ?>");
|
||||
$("#info_modal").modal("show");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
<?
|
||||
}
|
||||
?>
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script>
|
||||
$(document).on('click', '.ep-list-min', function (e) {
|
||||
var data = $(this).data('id');
|
||||
var type = $(this).data('type');
|
||||
var val = $('#series_view').data('src');
|
||||
var surl = val + data + '.'+type;
|
||||
var player = videojs("maat-player");
|
||||
player.pause();
|
||||
player.src({
|
||||
src:surl,
|
||||
type: 'video/mp4'
|
||||
});
|
||||
player.load();
|
||||
player.play();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
$("#alert_modal").on('hide.bs.modal', function () {
|
||||
var player = videojs("maat-player");
|
||||
player.pause();
|
||||
});
|
||||
|
||||
$('.slide-sliders-full').owlCarousel({
|
||||
loop:false,
|
||||
margin:15,
|
||||
nav:true,
|
||||
autoplay:false,
|
||||
dots:false,
|
||||
items:5,
|
||||
navText:['<img src="temp/images/left.png" alt="icon" />','<img src="temp/images/right.png" alt="icon" />'],
|
||||
responsive:{
|
||||
0:{
|
||||
items:2,
|
||||
},
|
||||
600:{
|
||||
items:3,
|
||||
},
|
||||
1200:{
|
||||
items:6,
|
||||
},
|
||||
1600:{
|
||||
items:6,
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
$('.top-episode a').eq(0).addClass('active');
|
||||
|
||||
|
||||
|
||||
$(document).on('click', '.top-episode a', function (e) {
|
||||
var indis = $(this).index();
|
||||
$('.top-episode a').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$('.tab_episode').hide().eq(indis).fadeIn();
|
||||
e.preventDefault();
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,240 @@
|
||||
$(document).ready(function() {
|
||||
"use strict";
|
||||
|
||||
PageScroll();
|
||||
|
||||
// Loading Box (Preloader)
|
||||
function handlePreloader() {
|
||||
if ($('.preloader').length > 0) {
|
||||
$('.preloader').delay(200).fadeOut(500);
|
||||
}
|
||||
}
|
||||
|
||||
handlePreloader();
|
||||
|
||||
|
||||
$('.symptom').owlCarousel({
|
||||
loop:false,
|
||||
margin:25,
|
||||
nav:false,
|
||||
autoplay:false,
|
||||
dots:false,
|
||||
items:3,
|
||||
responsive:{
|
||||
0:{
|
||||
items:1,
|
||||
},
|
||||
600:{
|
||||
items:2,
|
||||
},
|
||||
900:{
|
||||
items:2,
|
||||
},
|
||||
1000:{
|
||||
items:3,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
$('.banner-slider').owlCarousel({
|
||||
loop:true,
|
||||
margin:15,
|
||||
nav:false,
|
||||
autoplay:true,
|
||||
dots:true,
|
||||
items:1
|
||||
})
|
||||
$('.feedback-slider').owlCarousel({
|
||||
loop:true,
|
||||
margin:15,
|
||||
nav:false,
|
||||
autoplay:true,
|
||||
dots:true,
|
||||
items:1
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
$('.slide-slider-full').owlCarousel({
|
||||
loop:true,
|
||||
margin:15,
|
||||
nav:true,
|
||||
autoplay:false,
|
||||
dots:false,
|
||||
items:5,
|
||||
navText:['<img src="temp/images/left.png" alt="icon" />','<img src="temp/images/right.png" alt="icon" />'],
|
||||
responsive:{
|
||||
0:{
|
||||
items:2,
|
||||
},
|
||||
600:{
|
||||
items:3,
|
||||
},
|
||||
1200:{
|
||||
items:6,
|
||||
},
|
||||
1600:{
|
||||
items:6,
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$('.category-slider').owlCarousel({
|
||||
loop:true,
|
||||
margin:10,
|
||||
nav:false,
|
||||
autoplay:false,
|
||||
dots:false,
|
||||
items:6,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2,
|
||||
},
|
||||
600:{
|
||||
items:4,
|
||||
},
|
||||
1200:{
|
||||
items:5,
|
||||
},
|
||||
1600:{
|
||||
items:6,
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
$('.team-slider').owlCarousel({
|
||||
loop:true,
|
||||
margin:15,
|
||||
nav:false,
|
||||
autoplay:false,
|
||||
dots:false,
|
||||
items:7 ,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2,
|
||||
},
|
||||
600:{
|
||||
items:5,
|
||||
},
|
||||
1200:{
|
||||
items:6,
|
||||
},
|
||||
1600:{
|
||||
items:7,
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$('.team-slider-full').owlCarousel({
|
||||
loop:false,
|
||||
margin:15,
|
||||
nav:false,
|
||||
autoplay:false,
|
||||
dots:false,
|
||||
items:9 ,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2,
|
||||
},
|
||||
600:{
|
||||
items:5,
|
||||
},
|
||||
1200:{
|
||||
items:6,
|
||||
},
|
||||
1600:{
|
||||
items:9,
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$('.member-bttn2').on('click', function() {
|
||||
$('.member-1').fadeOut(0);
|
||||
$('.member-2').fadeIn();
|
||||
$('.member-ul').find('li:nth-child(2)').addClass('active');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.member-bttn3').on('click', function() {
|
||||
$('.member-2').fadeOut(0);
|
||||
$('.member-3').fadeIn();
|
||||
$('.member-ul').find('li:nth-child(3)').addClass('active');
|
||||
return false;
|
||||
});
|
||||
$('.member-bttn4').on('click', function() {
|
||||
$('.member-3').fadeOut(0);
|
||||
$('.member-4').fadeIn();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.add-wishlist').on('click', function() {
|
||||
$(this).attr('src','images/checkmark.png')
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.btn-video').on('click', function() {
|
||||
$('.backdrop').addClass('open');
|
||||
$('.player-container').fadeIn();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('.btn-lightbox-close').on('click', function() {
|
||||
$('.backdrop').removeClass('open');
|
||||
$('.player-container').fadeOut();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$('.switchcolor').on('click', function() {
|
||||
$(this).addClass('active');
|
||||
$('.backdrop').addClass('active');
|
||||
$('.switchcolor-wrap').addClass('active');
|
||||
});
|
||||
|
||||
$('.sheet-close,.backdrop').on('click', function() {
|
||||
$('.switchcolor').removeClass('active');
|
||||
$('.backdrop').removeClass('active');
|
||||
$('.switchcolor-wrap').removeClass('active');
|
||||
});
|
||||
|
||||
$('.toggle input').on('change', function () {
|
||||
if (this.checked) {
|
||||
$('body').addClass('theme-dark');
|
||||
} else {
|
||||
$('body').removeClass('theme-dark');
|
||||
}
|
||||
});
|
||||
|
||||
$('input[name="color-radio"]').on('change', function () {
|
||||
if (this.checked) {
|
||||
$('body').removeClass('color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white color-theme-brown color-theme-darkgreen color-theme-deeppink color-theme-darkorchid');
|
||||
$('body').addClass('color-theme-' + $(this).val());
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function PageScroll() {
|
||||
$(".scroll-tiger").on("click", function(e) {
|
||||
var $anchor = $(this);
|
||||
$("html, body").stop().animate({
|
||||
scrollTop: $($anchor.attr("href")).offset().top - 0
|
||||
}, 1500, 'easeInOutExpo');
|
||||
$('.overlay-section').removeClass('active');
|
||||
e.preventDefault();
|
||||
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,139 @@
|
||||
//ELEMENT SELECTORS
|
||||
var player = document.querySelector('.player');
|
||||
var video = document.querySelector('#video');
|
||||
var playBtn = document.querySelector('.play-btn');
|
||||
var volumeBtn = document.querySelector('.volume-btn');
|
||||
var volumeSlider = document.querySelector('.volume-slider');
|
||||
var volumeFill = document.querySelector('.volume-filled');
|
||||
var progressSlider = document.querySelector('.progress');
|
||||
var progressFill = document.querySelector('.progress-filled');
|
||||
var textCurrent = document.querySelector('.time-current');
|
||||
var textTotal = document.querySelector('.time-total');
|
||||
var speedBtns = document.querySelectorAll('.speed-item');
|
||||
var fullscreenBtn =document.querySelector('.fullscreen');
|
||||
|
||||
//GLOBAL VARS
|
||||
let lastVolume = 1;
|
||||
let isMouseDown = false;
|
||||
|
||||
//PLAYER FUNCTIONS
|
||||
function togglePlay() {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
} else {
|
||||
video.pause();
|
||||
}
|
||||
playBtn.classList.toggle('paused');
|
||||
}
|
||||
function togglePlayBtn() {
|
||||
playBtn.classList.toggle('playing');
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
if(video.volume) {
|
||||
lastVolume = video.volume;
|
||||
video.volume = 0;
|
||||
volumeBtn.classList.add('muted');
|
||||
volumeFill.style.width = 0;
|
||||
} else {
|
||||
video.volume = lastVolume;
|
||||
volumeBtn.classList.remove('muted');
|
||||
volumeFill.style.width = `${lastVolume*100}%`;
|
||||
}
|
||||
}
|
||||
function changeVolume(e) {
|
||||
volumeBtn.classList.remove('muted');
|
||||
let volume = e.offsetX/volumeSlider.offsetWidth;
|
||||
volume<0.1 ? volume = 0 : volume=volume;
|
||||
volumeFill.style.width = `${volume*100}%`;
|
||||
video.volume = volume;
|
||||
if (volume > 0.7) {
|
||||
volumeBtn.classList.add('loud');
|
||||
} else if (volume < 0.7 && volume > 0) {
|
||||
volumeBtn.classList.remove('loud');
|
||||
} else if (volume == 0) {
|
||||
volumeBtn.classList.add('muted');
|
||||
}
|
||||
lastVolume = volume;
|
||||
}
|
||||
function neatTime(time) {
|
||||
var hours = Math.floor((time % 86400)/3600);
|
||||
var minutes = Math.floor((time % 3600)/60);
|
||||
var seconds = Math.floor(time % 60);
|
||||
seconds = seconds>9?seconds:`0${seconds}`;
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
function updateProgress(e) {
|
||||
progressFill.style.width = `${video.currentTime/video.duration*100}%`;
|
||||
textCurrent.innerHTML = `${neatTime(video.currentTime)} / ${neatTime(video.duration)}`;
|
||||
// textTotal.innerHTML = neatTime(video.duration);
|
||||
// console.log(progressFill.style.width);
|
||||
}
|
||||
function setProgress(e) {
|
||||
const newTime = e.offsetX/progressSlider.offsetWidth;
|
||||
progressFill.style.width = `${newTime*100}%`;
|
||||
video.currentTime = newTime*video.duration;
|
||||
}
|
||||
function launchIntoFullscreen(element) {
|
||||
if(element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if(element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if(element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
} else if(element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
function exitFullscreen() {
|
||||
if(document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if(document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if(document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
var fullscreen = false;
|
||||
function toggleFullscreen() {
|
||||
fullscreen? exitFullscreen() : launchIntoFullscreen(player)
|
||||
fullscreen = !fullscreen;
|
||||
}
|
||||
function setSpeed(e) {
|
||||
console.log(parseFloat(this.dataset.speed));
|
||||
video.playbackRate = this.dataset.speed;
|
||||
speedBtns.forEach(speedBtn => speedBtn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
}
|
||||
function handleKeypress(e) {
|
||||
switch (e.key) {
|
||||
case " ":
|
||||
togglePlay();
|
||||
case "ArrowRight":
|
||||
video.currentTime += 5;
|
||||
case "ArrowLeft":
|
||||
video.currentTime -= 5;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
//EVENT LISTENERS
|
||||
playBtn.addEventListener('click', togglePlay);
|
||||
video.addEventListener('click', togglePlay);
|
||||
video.addEventListener('play', togglePlayBtn);
|
||||
video.addEventListener('pause', togglePlayBtn);
|
||||
video.addEventListener('ended', togglePlayBtn);
|
||||
video.addEventListener('timeupdate', updateProgress);
|
||||
video.addEventListener('canplay', updateProgress);
|
||||
volumeBtn.addEventListener('click', toggleMute);
|
||||
window.addEventListener('mousedown', () => isMouseDown = true)
|
||||
window.addEventListener('mouseup', () => isMouseDown = false)
|
||||
// volumeSlider.addEventListener('mouseover', changeVolume);
|
||||
volumeSlider.addEventListener('click', changeVolume);
|
||||
progressSlider.addEventListener('click', setProgress);
|
||||
fullscreenBtn.addEventListener('click', toggleFullscreen);
|
||||
speedBtns.forEach(speedBtn => {
|
||||
speedBtn.addEventListener('click', setSpeed);
|
||||
})
|
||||
window.addEventListener('keydown', handleKeypress);
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "./variable";
|
||||
@import "./color";
|
||||
@@ -0,0 +1,169 @@
|
||||
|
||||
.theme-dark {
|
||||
background-color: #1a2236;
|
||||
.app-content {
|
||||
background-color: #1a2236;
|
||||
&:before {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background-color: #293145 !important;
|
||||
}
|
||||
.app-footer {
|
||||
background-color: #293145 !important;
|
||||
border-top: 0;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.app-header .logo svg path {
|
||||
fill: #fff;
|
||||
}
|
||||
.app-header .menu-icon i {
|
||||
color: #fff;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {color: #fff !important;}
|
||||
}
|
||||
|
||||
.color-theme-red {
|
||||
---theme-color: #ff3b30;
|
||||
---theme-color-rgb: 255, 59, 48;
|
||||
---theme-color-shade: #ff1407;
|
||||
---theme-color-tint: #ff6259
|
||||
}
|
||||
|
||||
.color-theme-green {
|
||||
---theme-color: #4cd964;
|
||||
---theme-color-rgb: 76, 217, 100;
|
||||
---theme-color-shade: #2cd048;
|
||||
---theme-color-tint: #6ee081
|
||||
}
|
||||
|
||||
.color-theme-blue {
|
||||
---theme-color: #05f;
|
||||
---theme-color-rgb: 33, 150, 243;
|
||||
---theme-color-shade: #09f;
|
||||
---theme-color-tint: #1E74FD;
|
||||
}
|
||||
|
||||
.color-theme-pink {
|
||||
---theme-color: #ff2d55;
|
||||
---theme-color-rgb: 255, 45, 85;
|
||||
---theme-color-shade: #ff0434;
|
||||
---theme-color-tint: #ff5676
|
||||
}
|
||||
|
||||
.color-theme-yellow {
|
||||
---theme-color: #ffcc00;
|
||||
---theme-color-rgb: 255, 204, 0;
|
||||
---theme-color-shade: #d6ab00;
|
||||
---theme-color-tint: #ffd429
|
||||
}
|
||||
|
||||
.color-theme-orange {
|
||||
---theme-color: #ff9500;
|
||||
---theme-color-rgb: 255, 149, 0;
|
||||
---theme-color-shade: #d67d00;
|
||||
---theme-color-tint: #ffa629
|
||||
}
|
||||
|
||||
.color-theme-purple {
|
||||
---theme-color: #9c27b0;
|
||||
---theme-color-rgb: 156, 39, 176;
|
||||
---theme-color-shade: #7e208f;
|
||||
---theme-color-tint: #b92fd1
|
||||
}
|
||||
|
||||
.color-theme-deeppurple {
|
||||
---theme-color: #673ab7;
|
||||
---theme-color-rgb: 103, 58, 183;
|
||||
---theme-color-shade: #563098;
|
||||
---theme-color-tint: #7c52c8
|
||||
}
|
||||
|
||||
.color-theme-lightblue {
|
||||
---theme-color: #5ac8fa;
|
||||
---theme-color-rgb: 90, 200, 250;
|
||||
---theme-color-shade: #32bbf9;
|
||||
---theme-color-tint: #82d5fb
|
||||
}
|
||||
|
||||
.color-theme-teal {
|
||||
---theme-color: #009688;
|
||||
---theme-color-rgb: 0, 150, 136;
|
||||
---theme-color-shade: #006d63;
|
||||
---theme-color-tint: #00bfad
|
||||
}
|
||||
|
||||
.color-theme-lime {
|
||||
---theme-color: #cddc39;
|
||||
---theme-color-rgb: 205, 220, 57;
|
||||
---theme-color-shade: #bac923;
|
||||
---theme-color-tint: #d6e25c
|
||||
}
|
||||
|
||||
.color-theme-deeporange {
|
||||
---theme-color: #ff6b22;
|
||||
---theme-color-rgb: 255, 107, 34;
|
||||
---theme-color-shade: #f85200;
|
||||
---theme-color-tint: #ff864b
|
||||
}
|
||||
|
||||
.color-theme-gray {
|
||||
---theme-color: #8e8e93;
|
||||
---theme-color-rgb: 142, 142, 147;
|
||||
---theme-color-shade: #79797f;
|
||||
---theme-color-tint: #a3a3a7
|
||||
}
|
||||
|
||||
.color-theme-white {
|
||||
---theme-color: #ffffff;
|
||||
---theme-color-rgb: 255, 255, 255;
|
||||
---theme-color-shade: #ebebeb;
|
||||
---theme-color-tint: #ffffff
|
||||
}
|
||||
|
||||
.color-theme-black {
|
||||
---theme-color: #000000;
|
||||
---theme-color-rgb: 0, 0, 0;
|
||||
---theme-color-shade: #000000;
|
||||
---theme-color-tint: #141414
|
||||
}
|
||||
|
||||
.color-theme-brown {
|
||||
---theme-color: #5d463d;
|
||||
---theme-color-rgb: 255, 107, 34;
|
||||
---theme-color-shade: #5d463d;
|
||||
---theme-color-tint: #5d463d
|
||||
}
|
||||
|
||||
.color-theme-darkgreen {
|
||||
---theme-color: #228B22;
|
||||
---theme-color-rgb: 142, 142, 147;
|
||||
---theme-color-shade: #79797f;
|
||||
---theme-color-tint: #a3a3a7
|
||||
}
|
||||
|
||||
.color-theme-deeppink {
|
||||
---theme-color: #12baaf;
|
||||
---theme-color-rgb: 255, 255, 255;
|
||||
---theme-color-shade: #6ae2da;
|
||||
---theme-color-tint: #6ae2da
|
||||
}
|
||||
|
||||
.color-theme-darkorchid {
|
||||
---theme-color: #9932cc;
|
||||
---theme-color-rgb: 0, 0, 0;
|
||||
---theme-color-shade: #000000;
|
||||
---theme-color-tint: #141414
|
||||
}
|
||||
|
||||
.inter-font {font-family: 'Inter', sans-serif;}
|
||||
.mont-font {font-family: 'Montserrat', sans-serif;}
|
||||
.lato-font {font-family: 'Lato', sans-serif;}
|
||||
.dm-font {font-family: 'DM Serif Display', serif; }
|
||||
.play-font {font-family: 'Playfair Display', serif;}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- C O L O R ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
|
||||
//to ignore cli warning about deprecated mixin
|
||||
// $enable-deprecation-messages: false;
|
||||
// $ignore-warning : true;
|
||||
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$primary : #1E74FD !default;
|
||||
$secondary : #673BB7 !default;
|
||||
$success : #10d876 !default;
|
||||
$info : #2754e6 !default;
|
||||
$warning : #FE9431 !default;
|
||||
$danger : #E50202 !default;
|
||||
$light : #f7f7f7 !default;
|
||||
$dark : #343a40;
|
||||
|
||||
// Body
|
||||
$body-bg : #fff;
|
||||
$body-color: #515184;
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- FONT WEIGHT ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
$fw-100: 100 !default;
|
||||
$fw-200: 200 !default;
|
||||
$fw-300: 300 !default;
|
||||
$fw-400: 400 !default;
|
||||
$fw-500: 500 !default;
|
||||
$fw-600: 600 !default;
|
||||
$fw-700: 700 !default;
|
||||
$fw-800: 800 !default;
|
||||
$fw-900: 900 !default;
|
||||
|
||||
$fws: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$fws: map-merge(
|
||||
(
|
||||
"100": $fw-100,
|
||||
"200": $fw-200,
|
||||
"300": $fw-300,
|
||||
"400": $fw-400,
|
||||
"500": $fw-500,
|
||||
"600": $fw-600,
|
||||
"700": $fw-700,
|
||||
"800": $fw-800,
|
||||
"900": $fw-900
|
||||
),
|
||||
$fws
|
||||
);
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- F O N T S ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
|
||||
// Google Font
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
|
||||
|
||||
|
||||
|
||||
|
||||
$headings-font-weight : 400;
|
||||
|
||||
$font-size-base : 1rem;
|
||||
$font-weight-base : 400 !default;
|
||||
|
||||
|
||||
$h1-font-size : 24px;
|
||||
$h2-font-size : 20px;
|
||||
$h3-font-size : 18px;
|
||||
$h4-font-size : 16px;
|
||||
$h5-font-size : 14px;
|
||||
$h6-font-size : 12px;
|
||||
|
||||
|
||||
$display1-size : 70px;
|
||||
$display2-size : 56px;
|
||||
$display3-size : 42px;
|
||||
$display4-size : 34px;
|
||||
|
||||
$text-muted : #AEAED5;
|
||||
$colors : () !default;
|
||||
|
||||
$heading-primary-size: 1.8rem;
|
||||
$sub-heading-size : 1.6rem !default;
|
||||
$grid-gutter-width : 30px;
|
||||
$dropdown-lik-color : $body-color;
|
||||
$border-color : #E1E1F0;
|
||||
$headings-color :#111 !default;
|
||||
$grid-breakpoints : (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400);
|
||||
$container-max-widths: (sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1199px) !default;
|
||||
|
||||
$input-btn-focus-width: 0rem !default;
|
||||
$border-radius-base : 4px !default;
|
||||
|
||||
$shadow-color: rgba(160, 159, 202, 0.15);
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- HEADER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$header-bg:transparent;
|
||||
$header-padding:20px;
|
||||
$header-menu-font-size:16px;
|
||||
$header-menu-font-color:#888;
|
||||
$header-avater-radius:35px;
|
||||
$header-search-height:40px;
|
||||
$header-search-width:250px;
|
||||
$header-search-border-radius:5px;
|
||||
$header-search-border-color:#ddd;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- BANNER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$banner-height:500px;
|
||||
$banner-border-radius:7px;
|
||||
$banner-title-font-color:#fff;
|
||||
$banner-title-font-size:68px;
|
||||
$banner-subtitle-font-color:#fff;
|
||||
$banner-subtitle-font-size:14px;
|
||||
$banner-tag-font-color:#ddd;
|
||||
$banner-tag-font-size:14px;
|
||||
$banner-btn-height:40px;
|
||||
$banner-btn-width:200px;
|
||||
$banner-btn-font-size:13px;
|
||||
$banner-btn-font-color:#fff;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- SLIDER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$slider-border-radius:6px;
|
||||
$slider-headline-size:22px;
|
||||
$slider-headline-color:#222;
|
||||
$slider-post-title-size:18px;
|
||||
$slider-post-title-color:#fff;
|
||||
$slider-post-subtitle-size:12px;
|
||||
$slider-post-subtitle-color:#ddd;
|
||||
$slider-post-icon-size:20px;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- PAGE NAV ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$pagenav-padding:100px;
|
||||
$pagenav-post-title-size:46px;
|
||||
$pagenav-post-title-color:#111;
|
||||
$pagenav-post-subtitle-size:14px;
|
||||
$pagenav-post-subtitle-color:#666;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- LANGUAGE ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$language-border-radius:6px;
|
||||
$language-height:120px;
|
||||
$language-post-title-size:14px;
|
||||
$language-post-title-color:#fff;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- CREW ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$crew-width:150px;
|
||||
$crew-post-title-size:14px;
|
||||
$crew-post-title-color:#222;
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
//---------------- FOOTER ----------------------
|
||||
///////////////////////////////////////////////////
|
||||
$footer-title-font-color:#ddd;
|
||||
$footer-title-font-size:24px;
|
||||
$footer-search-input-height:50px;
|
||||
$footer-search-input-font-size:12px;
|
||||
$footer-link-title-font-size:11px;
|
||||
$footer-link-title-font-color:#ddd;
|
||||
$footer-link-font-size:12px;
|
||||
$footer-link-font-color:#999;
|
||||
@@ -0,0 +1,10 @@
|
||||
@import "./reset";
|
||||
@import "./mixins";
|
||||
@import "./fonts";
|
||||
@import "./preloader";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
//MEDIA QUERY MANAGER
|
||||
// 0 - 500: Phone
|
||||
// 500 - 900: Tablet portrait
|
||||
// 900 - 1200: Tablet landscape
|
||||
// 1200 - 1800: Normal styles
|
||||
// 1800+ : Big Desktop
|
||||
// 1em = 16px
|
||||
// The smaller device rules always should write below the bigger device rules
|
||||
// Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
|
||||
@mixin respond($breakpoint) {
|
||||
@if($breakpoint=="sm") {
|
||||
@media only screen and (max-width: 576px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="md") {
|
||||
@media only screen and (max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="lg") {
|
||||
@media only screen and (max-width: 992px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($breakpoint=="xl") {
|
||||
@media only screen and (max-width: 1200px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if($breakpoint=="xxl") {
|
||||
@media only screen and (max-width: 1400px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @if($breakpoint=="tab-port-up") {
|
||||
// @media only screen and (min-width: 991px) {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
//don't use it untill you need this too much
|
||||
@mixin custommq($min: null, $max: null) {
|
||||
@if ($min !=null and $max !=null) {
|
||||
@media only screen and (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($min==null and $max !=null) {
|
||||
@media only screen and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if ($min !=null and $max==null) {
|
||||
@media only screen and (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $gray, $value in $grays {
|
||||
.text-grey-#{$gray} {color:#{$value} !important;}
|
||||
}
|
||||
|
||||
@each $fw, $value in $fws {
|
||||
.fw-#{$fw} {font-weight:#{$value} !important;}
|
||||
}
|
||||
@each $color, $value in $theme-colors {
|
||||
.swatch-#{$color} {
|
||||
background-color: color-yiq($value);
|
||||
}
|
||||
}
|
||||
.pt150 {
|
||||
padding-top: 150px;
|
||||
}
|
||||
|
||||
@mixin webkit-box() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
@mixin box-flex() {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
@mixin box-orient() {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
%avater {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
overflow: hidden;
|
||||
@include border-radius(50%);
|
||||
margin-right: 1em;
|
||||
img {width: 100%;}
|
||||
}
|
||||
|
||||
@mixin avater($radius) {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
height: $radius;
|
||||
width: $radius;
|
||||
overflow: hidden;
|
||||
@include border-radius(50%);
|
||||
margin-right: 1em;
|
||||
img {width: 100%;}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// PRELOADER
|
||||
.preloader {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
background-color: #ffffff;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../images/preloader.svg);
|
||||
background-size: 80px;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin : 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.75;
|
||||
|
||||
&.fixed {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
|
||||
font-weight:$headings-font-weight;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
// color : $td;
|
||||
text-decoration: none;
|
||||
outline : none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
text-decoration: none;
|
||||
outline : none;
|
||||
color : $primary;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong,
|
||||
.strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
opacity : 1;
|
||||
transition : all 0.25s ease-in;
|
||||
overflow : hidden;
|
||||
position : relative;
|
||||
z-index : 1;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
margin-left : 65px;
|
||||
margin-top : 18px;
|
||||
margin-right : 6px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
.accordion {
|
||||
margin-bottom: 50px;
|
||||
.card {
|
||||
box-shadow:none;
|
||||
background: #f9f9f9;
|
||||
.card-body,
|
||||
.card-header {
|
||||
background: #f9f9f9;
|
||||
padding: 20px 30px;
|
||||
@include respond("md") {
|
||||
padding: 15px 40px 15px 15px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
font-size: 18px;
|
||||
color: #111;
|
||||
font-weight: 500;
|
||||
padding-left: 0;
|
||||
&:focus,&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.small-text {
|
||||
font-size: 16px;
|
||||
a {color: #111;}
|
||||
}
|
||||
i {
|
||||
font-size: 30px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top:32px;
|
||||
margin-right: 10px;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
left:33px;
|
||||
}
|
||||
span {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
&:after {
|
||||
font-family: 'themify';
|
||||
content: "\e61a";
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top:20px;
|
||||
transform: rotate(223deg);
|
||||
transition: all 0.5s ease;
|
||||
@include respond("md") {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
&.small-text:after {top:33px; }
|
||||
&.collapsed:after {
|
||||
transform: rotate(0deg);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
.banner-wrapper {
|
||||
.slide-wrapper {
|
||||
.owl-stage-outer {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.owl-stage-outer {
|
||||
overflow: visible;
|
||||
.owl-item {
|
||||
opacity: 0.4;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-dots {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
bottom:10px;
|
||||
width: 100%;
|
||||
.owl-dot span {margin:4px; }
|
||||
.owl-dot.active span {background-color: var(--f7-theme-color);}
|
||||
}
|
||||
.banner-wrap {
|
||||
border-radius:$banner-border-radius;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #211813;
|
||||
height: $banner-height;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
|
||||
@include respond("xl") {
|
||||
height: 400px;
|
||||
}
|
||||
@include respond("sm") {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
.left-wrap {
|
||||
flex: 0 0 45%;
|
||||
max-width: 45%;
|
||||
position: relative;
|
||||
padding: 0 0 0 50px;
|
||||
@include respond("lg") {
|
||||
padding: 0 0 0 15px;
|
||||
}
|
||||
@include respond("sm") {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
background:linear-gradient(to top, #211813, transparent);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $banner-title-font-size;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: $banner-title-font-color;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
|
||||
@include respond("xl") {
|
||||
font-size: 50px;
|
||||
}
|
||||
@include respond("lg") {
|
||||
font-size: 36px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@include respond("sm") {
|
||||
font-size: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 10px;
|
||||
font-size: $banner-subtitle-font-size;
|
||||
font-weight: 400;
|
||||
color: $banner-subtitle-font-color;
|
||||
line-height: 28px;
|
||||
@include respond("xl") {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
@include respond("lg") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
@include respond("lg") {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
font-size: $banner-tag-font-size;
|
||||
color: $banner-tag-font-color;
|
||||
margin-right: 15px;
|
||||
@include respond("xl") {
|
||||
font-size: 12px;
|
||||
}
|
||||
b {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.rnd {
|
||||
border:1px #ddd solid;
|
||||
line-height: 20px;
|
||||
padding: 0 10px;
|
||||
border-radius:5px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-lg {
|
||||
color: $banner-btn-font-color;
|
||||
background-color: var(--f7-theme-color);
|
||||
min-width: $banner-btn-width;
|
||||
line-height: $banner-btn-height;
|
||||
font-size: $banner-btn-font-size;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
@include respond("xl") {
|
||||
min-width: 150px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top:-2px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.icon-bttn {
|
||||
margin-left: 20px;
|
||||
line-height: 58px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include respond("sm") {
|
||||
line-height: 30px;
|
||||
right:20px;
|
||||
position: absolute;
|
||||
bottom:50px;
|
||||
}
|
||||
&:hover {
|
||||
.share-icons {display: block;}
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.share-icons {
|
||||
display: none;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
width: 130px;
|
||||
right:-130px;
|
||||
margin-left: 30px;
|
||||
top:0;
|
||||
height: 58px;
|
||||
padding: 5px 10px;
|
||||
i {
|
||||
color: #999;
|
||||
margin-right:15px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-wrap {
|
||||
flex: 0 0 25%;
|
||||
max-width: 55%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
@include respond("sm") {
|
||||
flex: 0 0 100%; max-width: 100%;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background:linear-gradient(to right, #211813, transparent);
|
||||
}
|
||||
video {
|
||||
height: 500px;
|
||||
@include respond("sm") {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slide-wrapper {
|
||||
padding:0 50px 30px;
|
||||
background-color: #211813;
|
||||
border-radius:0 0 7px 7px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:-50px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background:linear-gradient(to top, #211813, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.card {
|
||||
border: 0px solid $border-color;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 5px;
|
||||
box-shadow : 0px 36px 48px rgba(31, 66, 135, 0.04);
|
||||
background: $white;
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background: $white;
|
||||
padding: 20px 30px;
|
||||
// margin : 0px 35px;
|
||||
// @include respond("desktop") {
|
||||
// padding: 10px;
|
||||
// }
|
||||
// @include custommq($min: 1200px, $max: 1350px) {
|
||||
// padding: 10px 0px;
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 0px;
|
||||
// color: #ffffff;
|
||||
// font-weight: 500;
|
||||
}
|
||||
.card-body {
|
||||
padding: 20px 30px;
|
||||
background: $white;
|
||||
border-radius: 15px;
|
||||
// @include respond("desktop") {
|
||||
// padding: 10px;
|
||||
// }
|
||||
// @include custommq($min: 1200px, $max: 1350px) {
|
||||
// padding: 10px 0px!important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
.category-wrap {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
|
||||
background-position:center center;
|
||||
border-radius:$language-border-radius;
|
||||
overflow: hidden;
|
||||
span {
|
||||
font-size: $language-post-title-size;
|
||||
font-weight: 600;
|
||||
color: $language-post-title-color;
|
||||
letter-spacing: 1px;
|
||||
line-height: $language-height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import "./card";
|
||||
@import "./form";
|
||||
@import "./dark";
|
||||
@import "./header";
|
||||
@import "./footer";
|
||||
@import "./banner";
|
||||
@import "./post";
|
||||
@import "./category";
|
||||
@import "./crew";
|
||||
@import "./page-nav";
|
||||
@import "./accordion";
|
||||
@import "./member";
|
||||
@import "./form-wrap";
|
||||
@import "./settings";
|
||||
@import "./landing-page";
|
||||
@import "./owl-carousel";
|
||||
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
.crew-wrap {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: block;
|
||||
img {
|
||||
width: $crew-width !important;
|
||||
height: $crew-width;
|
||||
border-radius:$crew-width;
|
||||
}
|
||||
span {
|
||||
color: $crew-post-title-color;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
font-size: $language-post-title-size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
// DARK THEME
|
||||
:root {--f7-theme-color: #132977;}
|
||||
|
||||
.theme-dark {
|
||||
background-color: #1a2236;
|
||||
|
||||
.member-ul li.active a b,
|
||||
.price-wrap .left-price h2,
|
||||
.form-div h2,
|
||||
.slide-wrapper h2 {color: #eee;}
|
||||
.header-wrapper .search-div {border:1px #555 solid;}
|
||||
.header-wrapper .nav-menu li a {color: #ddd !important;}
|
||||
.search-wrapper,
|
||||
.accordion .card .card-body,
|
||||
.accordion .card .card-header,
|
||||
.form-div {background-color: #293145;}
|
||||
|
||||
.header-wrapper .logo {color: lightsteelblue;}
|
||||
|
||||
.price-wrap .middle-price h6,
|
||||
.form-div p,
|
||||
.form-div label p,
|
||||
.form-div .sign-up-text {color: #ddd;}
|
||||
|
||||
.form-div label p a,
|
||||
.form-div .sign-up-text a {color: #fff; margin-left: 5px; }
|
||||
.navbar-toggler {color: rgba(255, 255, 255, 1);border-color: rgba(255, 255, 255, 1); }
|
||||
|
||||
.accordion .card button.small-text a,
|
||||
.accordion .card button.small-text {color: #fff;}
|
||||
.card-header {border-bottom: 0 solid #000;}
|
||||
}
|
||||
|
||||
.theme-dark .header-wrapper .logo .light {display: none;}
|
||||
.theme-dark .header-wrapper .logo .dark {display: inline-block;}
|
||||
|
||||
.color-theme-red {
|
||||
--f7-theme-color: #ff3b30;
|
||||
--f7-theme-color-rgb: 255, 59, 48;
|
||||
--f7-theme-color-shade: #ff1407;
|
||||
--f7-theme-color-tint: #ff6259
|
||||
}
|
||||
|
||||
.color-theme-green {
|
||||
--f7-theme-color: #4cd964;
|
||||
--f7-theme-color-rgb: 76, 217, 100;
|
||||
--f7-theme-color-shade: #2cd048;
|
||||
--f7-theme-color-tint: #6ee081
|
||||
}
|
||||
|
||||
.color-theme-blue {
|
||||
--f7-theme-color: #132977;
|
||||
--f7-theme-color-rgb: 33, 150, 243;
|
||||
--f7-theme-color-shade: #1E74FD;
|
||||
--f7-theme-color-tint: #1E74FD;
|
||||
}
|
||||
|
||||
.color-theme-pink {
|
||||
--f7-theme-color: #ff2d55;
|
||||
--f7-theme-color-rgb: 255, 45, 85;
|
||||
--f7-theme-color-shade: #ff0434;
|
||||
--f7-theme-color-tint: #ff5676
|
||||
}
|
||||
|
||||
.color-theme-yellow {
|
||||
--f7-theme-color: #ffcc00;
|
||||
--f7-theme-color-rgb: 255, 204, 0;
|
||||
--f7-theme-color-shade: #d6ab00;
|
||||
--f7-theme-color-tint: #ffd429
|
||||
}
|
||||
|
||||
.color-theme-orange {
|
||||
--f7-theme-color: #ff9500;
|
||||
--f7-theme-color-rgb: 255, 149, 0;
|
||||
--f7-theme-color-shade: #d67d00;
|
||||
--f7-theme-color-tint: #ffa629
|
||||
}
|
||||
|
||||
.color-theme-purple {
|
||||
--f7-theme-color: #9c27b0;
|
||||
--f7-theme-color-rgb: 156, 39, 176;
|
||||
--f7-theme-color-shade: #7e208f;
|
||||
--f7-theme-color-tint: #b92fd1
|
||||
}
|
||||
|
||||
.color-theme-deeppurple {
|
||||
--f7-theme-color: #673ab7;
|
||||
--f7-theme-color-rgb: 103, 58, 183;
|
||||
--f7-theme-color-shade: #563098;
|
||||
--f7-theme-color-tint: #7c52c8
|
||||
}
|
||||
|
||||
.color-theme-lightblue {
|
||||
--f7-theme-color: #5ac8fa;
|
||||
--f7-theme-color-rgb: 90, 200, 250;
|
||||
--f7-theme-color-shade: #32bbf9;
|
||||
--f7-theme-color-tint: #82d5fb
|
||||
}
|
||||
|
||||
.color-theme-teal {
|
||||
--f7-theme-color: #009688;
|
||||
--f7-theme-color-rgb: 0, 150, 136;
|
||||
--f7-theme-color-shade: #006d63;
|
||||
--f7-theme-color-tint: #00bfad
|
||||
}
|
||||
|
||||
.color-theme-lime {
|
||||
--f7-theme-color: #cddc39;
|
||||
--f7-theme-color-rgb: 205, 220, 57;
|
||||
--f7-theme-color-shade: #bac923;
|
||||
--f7-theme-color-tint: #d6e25c
|
||||
}
|
||||
|
||||
.color-theme-deeporange {
|
||||
--f7-theme-color: #ff6b22;
|
||||
--f7-theme-color-rgb: 255, 107, 34;
|
||||
--f7-theme-color-shade: #f85200;
|
||||
--f7-theme-color-tint: #ff864b
|
||||
}
|
||||
|
||||
.color-theme-gray {
|
||||
--f7-theme-color: #8e8e93;
|
||||
--f7-theme-color-rgb: 142, 142, 147;
|
||||
--f7-theme-color-shade: #79797f;
|
||||
--f7-theme-color-tint: #a3a3a7
|
||||
}
|
||||
|
||||
.color-theme-white {
|
||||
--f7-theme-color: #ffffff;
|
||||
--f7-theme-color-rgb: 255, 255, 255;
|
||||
--f7-theme-color-shade: #ebebeb;
|
||||
--f7-theme-color-tint: #ffffff
|
||||
}
|
||||
|
||||
.color-theme-black {
|
||||
--f7-theme-color: #000000;
|
||||
--f7-theme-color-rgb: 0, 0, 0;
|
||||
--f7-theme-color-shade: #000000;
|
||||
--f7-theme-color-tint: #141414
|
||||
}
|
||||
|
||||
|
||||
|
||||
.color-theme-brown {
|
||||
--f7-theme-color: #D2691E;
|
||||
--f7-theme-color-rgb: 255, 107, 34;
|
||||
--f7-theme-color-shade: #f85200;
|
||||
--f7-theme-color-tint: #ff864b
|
||||
}
|
||||
|
||||
.color-theme-darkgreen {
|
||||
--f7-theme-color: #228B22;
|
||||
--f7-theme-color-rgb: 142, 142, 147;
|
||||
--f7-theme-color-shade: #79797f;
|
||||
--f7-theme-color-tint: #a3a3a7
|
||||
}
|
||||
|
||||
.color-theme-deeppink {
|
||||
--f7-theme-color: #FFC0CB;
|
||||
--f7-theme-color-rgb: 255, 255, 255;
|
||||
--f7-theme-color-shade: #ebebeb;
|
||||
--f7-theme-color-tint: #ffffff
|
||||
}
|
||||
|
||||
.color-theme-darkorchid {
|
||||
--f7-theme-color: #9932cc;
|
||||
--f7-theme-color-rgb: 0, 0, 0;
|
||||
--f7-theme-color-shade: #000000;
|
||||
--f7-theme-color-tint: #141414
|
||||
}
|
||||
|
||||
|
||||
.full-wrap {
|
||||
@media (min-width: 1599px) {
|
||||
.container-fluid {
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 1600px) {
|
||||
.container-fluid {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.owl-carousel .owl-stage-outer {
|
||||
overflow: visible;
|
||||
.owl-item {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.owl-item.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.service-wrapper .container-fluid {
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
.owl-carousel .owl-stage-outer {
|
||||
overflow: visible;
|
||||
.owl-item {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.owl-item.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
|
||||
.footer-wrapper {
|
||||
margin-top: 100px;
|
||||
padding: 100px 0 10px;
|
||||
background-color: #111;
|
||||
@include respond("md") {
|
||||
margin-top: 30px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.icon-img{
|
||||
height: 50px;
|
||||
@include respond("sm") {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
overflow: hidden;
|
||||
border-radius:2px;
|
||||
input {
|
||||
line-height: $footer-search-input-height;
|
||||
width: 70%;
|
||||
background-color: #fff;
|
||||
border:0;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
float: left;
|
||||
width: 30%;
|
||||
line-height: $footer-search-input-height;
|
||||
text-align: center;
|
||||
background-color: var(--f7-theme-color);
|
||||
border:0;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: $footer-search-input-font-size;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.copyright-text {
|
||||
@include respond("md") {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: $footer-title-font-size;
|
||||
line-height: 42px;
|
||||
font-weight: 300;
|
||||
color: $footer-title-font-color;
|
||||
margin-bottom: 0;
|
||||
@include respond("md") {
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
}
|
||||
a {
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
display: block;
|
||||
text-decoration: underline;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #999;
|
||||
width: 60%;
|
||||
font-size: 13px;
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
color: #ddd;
|
||||
font-size: $footer-link-title-font-size;
|
||||
letter-spacing: $footer-link-title-font-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
margin-top: 20px;
|
||||
li {
|
||||
a {
|
||||
color: $footer-link-font-color;
|
||||
font-size: $footer-link-font-size;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-footer {
|
||||
padding-top: 75px;
|
||||
margin-top: 75px;
|
||||
border-top: 1px #333 solid;
|
||||
@include respond("md") {
|
||||
padding-top: 50px; margin-top: 50px; padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.lower-footer {
|
||||
padding-top: 50px;
|
||||
@include respond("md") {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
.form-wrapper {
|
||||
min-height: calc(100vh - 90px);
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.form-div {
|
||||
overflow: hidden;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 61px rgba(65, 62, 101, 0.14);
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
@include respond("sm") {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
@include respond("sm") {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
padding-left: 28px;
|
||||
margin-bottom: 20px;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.56px;
|
||||
height: 65px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #eae9f2;
|
||||
background-color: #ffffff;
|
||||
@include respond("sm") {
|
||||
line-height: 55px;
|
||||
height: 55px;
|
||||
border-radius: 5px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
input:checked{
|
||||
~ .checkbox{
|
||||
background-color: var(--f7-theme-color);
|
||||
border:0;
|
||||
&::before{
|
||||
content: "\e64c";
|
||||
font-family: 'themify';
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #696871;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
margin-bottom: 0;
|
||||
a {font-weight: 500; color: #000;}
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
top: -2px;
|
||||
margin-right: 8px;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
cursor: pointer;
|
||||
border:1px #ddd solid;
|
||||
border-radius:3px;
|
||||
}
|
||||
.form-btn {
|
||||
height: 60px;
|
||||
border-radius: 7px;
|
||||
background-color: var(--f7-theme-color);
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
border:0;
|
||||
line-height: 60px;
|
||||
@include respond("sm") {
|
||||
line-height: 55px;
|
||||
height: 55px;
|
||||
border-radius: 5px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
.collapse-bg {
|
||||
background-color: var(--f7-theme-color)
|
||||
}
|
||||
.sign-up-text {
|
||||
color: #696871;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
::-webkit-input-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
|
||||
::-moz-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
|
||||
:-ms-input-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
|
||||
:-moz-placeholder { font-weight: 400; letter-spacing: 0.4px; color: #aaa !important;}
|
||||
@@ -0,0 +1,522 @@
|
||||
.form-group {
|
||||
// margin-bottom: 30px;
|
||||
position : relative;
|
||||
|
||||
label {
|
||||
font-size : 14px;
|
||||
font-weight : 500;
|
||||
color : $body-color;
|
||||
margin-bottom: 10px;
|
||||
background : transparent;
|
||||
border-color : $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 4px;
|
||||
// height : 50px;
|
||||
border : 1px solid transparent;
|
||||
padding : 0px 15px;
|
||||
font-size : 16px;
|
||||
font-weight : 400;
|
||||
color : $body-color;
|
||||
transition : all 0.3s ease-in-out;
|
||||
background : $body-bg;
|
||||
|
||||
.select {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow : none !important;
|
||||
outline : none;
|
||||
border-color: $border-color;
|
||||
color : $body-color;
|
||||
background : $body-bg;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
box-shadow : none !important;
|
||||
outline : none;
|
||||
border-color: $primary;
|
||||
color : $body-color;
|
||||
background : $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
input:-internal-autofill-selected {
|
||||
background : lighten($body-bg, 2%) !important;
|
||||
background-image: none !important;
|
||||
color : -internal-light-dark-color(black, white) !important;
|
||||
}
|
||||
|
||||
// span {
|
||||
// margin-top : 20px;
|
||||
// font-size : 18px;
|
||||
// font-weight: 400;
|
||||
// color : $text-muted;
|
||||
// display : inline-block;
|
||||
// }
|
||||
.input-group-text {
|
||||
// font-size : 20px !important;
|
||||
padding : 5px 15px;
|
||||
background : $body-bg;
|
||||
margin-bottom : 0px !important;
|
||||
color : $body-color;
|
||||
border-color : transparent;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
.input-group-text {
|
||||
border-top-right-radius : 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
border-top-left-radius : 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*Styling Selectbox*/
|
||||
|
||||
//
|
||||
.toggle {
|
||||
cursor : pointer;
|
||||
display : block;
|
||||
// margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
display : inline-block;
|
||||
background : darken($body-bg, 3%);
|
||||
border-radius : 16px;
|
||||
width : 45px;
|
||||
height : 20px;
|
||||
position : relative;
|
||||
vertical-align: middle;
|
||||
transition : background 0.25s;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:before {
|
||||
display : block;
|
||||
background : linear-gradient(to bottom, $white 0%, #eee 100%);
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
|
||||
width : 17px;
|
||||
height : 17px;
|
||||
position : absolute;
|
||||
top : 1px;
|
||||
left : 3px;
|
||||
transition : left 0.25s;
|
||||
}
|
||||
|
||||
.toggle:hover &:before {
|
||||
background : linear-gradient(to bottom, $white 0%, $white 100%);
|
||||
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.toggle-checkbox:checked+& {
|
||||
background: $primary;
|
||||
|
||||
&:before {
|
||||
left: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-checkbox {
|
||||
position : absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
margin-left: 15px;
|
||||
position : relative;
|
||||
top : 2px;
|
||||
font-size : 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Upload btn
|
||||
.file-upload-wrapper {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : calc(1.5em + 1rem + 2px);
|
||||
border : 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
color : $text-muted;
|
||||
|
||||
&:after {
|
||||
content : attr(data-text);
|
||||
// font-size : 18px;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
background : $body-bg;
|
||||
padding : 4px 15px;
|
||||
display : block;
|
||||
width : calc(100% - 40px);
|
||||
pointer-events: none;
|
||||
z-index : 20;
|
||||
height : calc(1.5em + 1rem + 2px);
|
||||
line-height : 50px - 20px;
|
||||
// color : #fff;
|
||||
border-radius : 5px 10px 10px 5px;
|
||||
font-weight : 400;
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content : 'Upload';
|
||||
position: absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
display : inline-block;
|
||||
height : calc(1.5em + 1rem + 2px);
|
||||
;
|
||||
background : $primary;
|
||||
color : $white;
|
||||
font-weight : 400;
|
||||
z-index : 25;
|
||||
font-size : 14px;
|
||||
line-height : 40px;
|
||||
padding : 0 15px;
|
||||
text-transform: capitalize;
|
||||
pointer-events: none;
|
||||
border-radius : 0 5px 5px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
background: darken($primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
opacity : 0;
|
||||
position: absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
z-index : 99;
|
||||
height : calc(1.5em + 1rem + 2px);
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
display : block;
|
||||
cursor : pointer;
|
||||
width : 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Date picker
|
||||
#ui-datepicker-div {
|
||||
display : none;
|
||||
background : darken($body-bg, 2%);
|
||||
box-shadow : 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
|
||||
margin-top : 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
padding : 0.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing : 0;
|
||||
}
|
||||
|
||||
.ui-datepicker-calendar {
|
||||
thead th {
|
||||
padding : 0.25rem 0;
|
||||
text-align : center;
|
||||
font-size : 0.75rem;
|
||||
font-weight: 400;
|
||||
color : $body-color;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width : 2.5rem;
|
||||
text-align: center;
|
||||
padding : 0;
|
||||
|
||||
a {
|
||||
display : block;
|
||||
border-radius : 0.25rem;
|
||||
line-height : 2rem;
|
||||
transition : 0.3s all;
|
||||
color : $body-color;
|
||||
font-size : 0.875rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color : white;
|
||||
}
|
||||
|
||||
&.ui-state-active {
|
||||
background-color: $primary;
|
||||
color : white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-header a {
|
||||
&.ui-corner-all {
|
||||
cursor : pointer;
|
||||
position : absolute;
|
||||
top : 0;
|
||||
width : 2rem;
|
||||
height : 2rem;
|
||||
margin : 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition : 0.3s all;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($primary, 30%);
|
||||
color : $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.ui-datepicker-prev {
|
||||
left : 0;
|
||||
background : url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
|
||||
background-repeat : no-repeat;
|
||||
background-size : 0.5rem;
|
||||
background-position: 50%;
|
||||
transform : rotate(180deg);
|
||||
}
|
||||
|
||||
&.ui-datepicker-next {
|
||||
right : 0;
|
||||
background : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
|
||||
background-repeat : no-repeat;
|
||||
background-size : 10px;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
>span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-title {
|
||||
text-align : center;
|
||||
line-height : 2rem;
|
||||
margin-bottom : 0.25rem;
|
||||
font-size : 0.875rem;
|
||||
font-weight : 500;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ui-datepicker-week-col {
|
||||
color : $body-color;
|
||||
font-weight: 400;
|
||||
font-size : 0.75rem;
|
||||
}
|
||||
|
||||
// Validation Error
|
||||
label.error {
|
||||
color : $danger;
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
margin-bottom: -22px;
|
||||
font-size : 12px;
|
||||
font-weight : 400;
|
||||
}
|
||||
|
||||
// Nice Select
|
||||
.nice-select {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
border-top-left-radius : 3px !important;
|
||||
border-bottom-left-radius: 3px !important;
|
||||
|
||||
ul {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nice-select .list {
|
||||
background: $dark;
|
||||
}
|
||||
|
||||
.nice-select .option:hover,
|
||||
.nice-select .option.focus,
|
||||
.nice-select .option.selected.focus {
|
||||
background-color: $dark;
|
||||
color : $primary;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.form-hero {
|
||||
padding: 40px 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow:0px 30px 60px rgba(160, 159, 202, 0.45);
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
background-image: url(../images/paper-plane.png);
|
||||
background-size: 100px;
|
||||
background-position: top 10px right 10px;
|
||||
background-repeat: no-repeat;
|
||||
@include respond("tab-land") {
|
||||
padding: 30px;
|
||||
|
||||
}
|
||||
@include respond("tab-port") {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
@include respond("tab-port") {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
input {
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-radius:10px;
|
||||
border:1px #ddd solid;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-radius:10px;
|
||||
border:0px #ddd solid;
|
||||
padding: 0 15px;
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
padding: 70px 100px 100px ;
|
||||
border-radius: 10px;
|
||||
box-shadow:0px 30px 60px rgba(160, 159, 202, 0.45);
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
top:-175px;
|
||||
background-image: url(../images/paper-plane.png);
|
||||
background-size: 100px;
|
||||
background-position: top 50px right 50px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include respond("tab-land") {
|
||||
padding: 30px;
|
||||
|
||||
}
|
||||
@include respond("tab-port") {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.form-group input[type=checkbox] {
|
||||
padding: 0;
|
||||
height: initial;
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-group label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-group label:before {
|
||||
content:'';
|
||||
-webkit-appearance: none;
|
||||
background-color: transparent;
|
||||
border: 2px solid #0079bf;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.form-group input:checked + label:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 9px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border: solid #0079bf;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
textarea,input {
|
||||
font-size: 14px;
|
||||
line-height: 60px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-radius:10px;
|
||||
border:1px #ddd solid;
|
||||
padding: 0 15px;
|
||||
}
|
||||
textarea {}
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-radius:10px;
|
||||
border:0px #ddd solid;
|
||||
padding: 0 15px;
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.header-wrapper {
|
||||
padding: $header-padding 0;
|
||||
background-color: $header-bg;
|
||||
@include respond("lg") {
|
||||
padding: 15px;
|
||||
}
|
||||
.logo {
|
||||
float: left;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--f7-theme-color);
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
top:-5px;
|
||||
.dark {
|
||||
display: none;
|
||||
}
|
||||
img {max-height: 25px; }
|
||||
i {
|
||||
margin-right: 0px;
|
||||
font-size: 30px;
|
||||
position: relative;
|
||||
top:5px;
|
||||
left:-0px;
|
||||
}
|
||||
}
|
||||
.bttn {
|
||||
background-color: #ffe4db;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius:5px;
|
||||
color: #f27b51;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-menu {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
margin-top: 3px;
|
||||
@include respond("lg") {
|
||||
margin-left: 0; width: 100%; display: block;
|
||||
}
|
||||
li {
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
@include respond("lg") {
|
||||
padding: 15px 0; text-align: left; width: 95%;
|
||||
}
|
||||
a {
|
||||
font-size: $header-menu-font-size;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
color: $header-menu-font-color;
|
||||
@include respond("lg") {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style2 li a {color: #111; font-size: 15px; }
|
||||
&.style2 li {float:none;}
|
||||
&.style2 {width: 100%;}
|
||||
}
|
||||
.search-div {
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
width: $header-search-width;
|
||||
height: $header-search-height;
|
||||
border-radius:$header-search-border-radius;
|
||||
border:1px $header-search-border-color solid;
|
||||
position: relative;
|
||||
@include respond("xxl") {
|
||||
width: 200px;
|
||||
}
|
||||
&:after {
|
||||
font-family: 'themify';
|
||||
content: "\e610";
|
||||
position: absolute;
|
||||
right:15px;
|
||||
top:4px;
|
||||
color: #aaa;
|
||||
|
||||
}
|
||||
input {
|
||||
border:0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
line-height: 39px;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
}
|
||||
.user-avater {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: $header-avater-radius;
|
||||
height: $header-avater-radius;
|
||||
display: inline-block;
|
||||
border-radius:$header-avater-radius;
|
||||
img {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
border-radius:25px;
|
||||
}
|
||||
&:hover .user-menu {display: block;}
|
||||
}
|
||||
.user-menu {
|
||||
display: none;
|
||||
min-width: 160px;
|
||||
border: 1px solid rgba(0,0,0, 0.12);
|
||||
right:0;
|
||||
top:100%;
|
||||
background-color: #fff;
|
||||
border-radius:5px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
padding: 5px 0;
|
||||
}
|
||||
&:before {
|
||||
top: -10px;
|
||||
background-color: #fff;
|
||||
border-color: transparent transparent rgba(0,0,0, 0.16) transparent;
|
||||
border-width: 10px;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
margin-top: -10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: 30;
|
||||
border-style: solid;
|
||||
}
|
||||
&:after {
|
||||
top: -9px;
|
||||
border-color: transparent transparent #fff transparent;
|
||||
border-width: 10px;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
margin-top: -10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: 30;
|
||||
border-style: solid;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
color: $header-menu-font-color;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,389 @@
|
||||
|
||||
|
||||
.feedback-wrap {
|
||||
padding: 100px 0;
|
||||
// background-color: #f8f9fb;
|
||||
background:linear-gradient(to bottom, #d0dfff, #f0f4fc);
|
||||
@include respond("md") {padding:70px 0 50px; }
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.quote {
|
||||
color: var(--f7-theme-color);
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
margin-left: 30px;
|
||||
@include respond("md") {
|
||||
margin-left: 15px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
.feedback-div {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top:50px;
|
||||
margin-bottom: 130px;
|
||||
@include respond("md") {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 26px;
|
||||
line-height: 48px;
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
@include respond("lg") {
|
||||
font-size: 22px; line-height: 42px;
|
||||
}
|
||||
@include respond("md") {
|
||||
font-size: 18px; line-height: 36px;
|
||||
}
|
||||
}
|
||||
.avater {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-icon{
|
||||
img {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
.owl-dots {
|
||||
position: absolute;
|
||||
right:0;
|
||||
bottom:130px;
|
||||
.owl-dot.active span {
|
||||
background-color: var(--f7-theme-color) !important;
|
||||
}
|
||||
span {
|
||||
width: 8px !important;
|
||||
height: 8px !important;
|
||||
margin:4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.service-wrapper {
|
||||
padding: 100px 0;
|
||||
@include respond("md") {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.symptom .owl-stage-outer {overflow: visible;}
|
||||
.slide-wrapper {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.mobile-banner {
|
||||
width: 1000px;
|
||||
@include respond("lg") {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.banner-wraper {
|
||||
padding: 100px 0 0;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background-color: #d0dfff;
|
||||
// background:linear-gradient(to bottom, #d0dfff, #f0f4fc);
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
@include respond("sm") {
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--f7-theme-color);
|
||||
@include respond("xxl") {
|
||||
font-size: 50px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@include respond("sm") {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
@include respond("xxl") {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
.play-bttn {
|
||||
width: 80px;
|
||||
margin-bottom: 30px;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
animation: videobtn 1.9s linear infinite;
|
||||
@include respond("sm") {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
|
||||
}
|
||||
}
|
||||
.banner-img {
|
||||
max-width: 1200px;
|
||||
margin-top: 50px;
|
||||
@include respond("xxl") {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
form {
|
||||
overflow: hidden;
|
||||
border-radius:2px;
|
||||
input {
|
||||
line-height: 65px;
|
||||
width: 70%;
|
||||
background-color: #fff;
|
||||
border:0;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
float: left;
|
||||
width: 30%;
|
||||
line-height: 65px;
|
||||
text-align: center;
|
||||
background-color: var(--f7-theme-color);
|
||||
border:0;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
box-shadow:0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.service-div {
|
||||
background: #fff;
|
||||
box-shadow: 0px 30px 60px rgba(160, 159, 202, 0.45);
|
||||
padding: 40px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
min-height: auto;
|
||||
@include respond("xxl") {
|
||||
padding: 25px;
|
||||
}
|
||||
img {
|
||||
width: 100px !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: #666;
|
||||
padding-right: 10%;
|
||||
}
|
||||
a {
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: #999;
|
||||
|
||||
}
|
||||
.map {
|
||||
width: 70px !important;
|
||||
position: relative;
|
||||
left:-10px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.icon-div {-webkit-box-sizing: content-box;box-sizing: content-box;width: 55px;height: 60px;position: relative;margin: 0px 0px 25px;font-size: 24px;-webkit-border-radius: 50% / 14%;border-radius: 50% / 14%;color: white;text-align: center;line-height: 64px;-o-text-overflow: clip;text-overflow: clip;z-index: 1;}
|
||||
.icon-div i {font-size: 24px; }
|
||||
.icon-div:before {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;content: "";top: 10%;right: -5.5%;bottom: 10%;left: -5%;border: none;-webkit-border-radius: 7% / 50%;border-radius: 7% / 50%;-o-text-overflow: clip;text-overflow: clip;text-shadow: none;z-index: -1;}
|
||||
.icon-div.one-no:before,
|
||||
.icon-div.one-no {background-color: #7142f8; }
|
||||
.icon-div.two-no:before,
|
||||
.icon-div.two-no {background-color: #fa4c9a; }
|
||||
.icon-div.three-no:before,
|
||||
.icon-div.three-no {background-color: #ecbf24; }
|
||||
.icon-div.four-no:before,
|
||||
.icon-div.four-no {background-color: #35bfe7; }
|
||||
.icon-div.five-no:before,
|
||||
.icon-div.five-no {background-color: #f38650; }
|
||||
.icon-div.six-no:before,
|
||||
.icon-div.six-no {background-color: #5cbd2c; }
|
||||
|
||||
}
|
||||
|
||||
.price-table {
|
||||
padding-bottom: 120px;
|
||||
@include respond("md") {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
span {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: #666;
|
||||
padding-right: 10%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: #222;
|
||||
padding-right: 10%;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
i {position: absolute; left:0; top:7px; }
|
||||
}
|
||||
.price-tab {
|
||||
overflow: hidden;
|
||||
padding: 40px 70px;
|
||||
box-shadow: 0 20px 61px rgba(65, 62, 101, 0.14);
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
span {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
line-height: 24px;
|
||||
border-radius:3px;
|
||||
&.active {
|
||||
background-color: #ffe4db;
|
||||
color: #f27b51;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
margin-right: 5px;
|
||||
vertical-align: super;
|
||||
}
|
||||
b {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
p {
|
||||
padding: 0;
|
||||
color: #777;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 20px;
|
||||
width: 200px;
|
||||
line-height: 60px;
|
||||
border-radius:40px;
|
||||
border:1px #ddd solid;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
left: 1px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: var(--f7-theme-color);
|
||||
border:0;
|
||||
}
|
||||
i {
|
||||
position: relative;
|
||||
top:2px;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes videobtn{
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
|
||||
0 0 0 10px rgba(255, 255, 255, 0.2),
|
||||
0 0 0 30px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2),
|
||||
0 0 0 30px rgba(255, 255, 255, 0.2),
|
||||
0 0 0 50px rgba(7255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes videobtn_red{
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(236, 57, 139, 0.1),
|
||||
0 0 0 10px rgba(236, 57, 139, 0.2),
|
||||
0 0 0 50px rgba(236, 57, 139, 0.3);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 10px rgba(236, 57, 139, 0.2),
|
||||
0 0 0 50px rgba(236, 57, 139, 0.2),
|
||||
0 0 0 100px rgba(236, 57, 139, 0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
.member-ul {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 40px;
|
||||
|
||||
li {
|
||||
width: 33.3%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
@include respond("sm") {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include respond("sm") {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
&:after,
|
||||
&:before {
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background-color: #ddd;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top:28px;
|
||||
left:-25%;
|
||||
@include respond("sm") {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
&:after {right:-25%; left:auto;}
|
||||
}
|
||||
&.active a span {color: #fff; background-color:var(--f7-theme-color); }
|
||||
&.active a b {color: #222;}
|
||||
a {
|
||||
span {
|
||||
letter-spacing: 2px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #eee;
|
||||
border-radius:50px;
|
||||
text-align: center;
|
||||
color: #111;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
b {
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
text-transform: uppercase;
|
||||
@include respond("sm") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
||||
.left-price {
|
||||
float: left;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
@include respond("sm") {
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
font-weight: 300;
|
||||
color: #111;
|
||||
margin:5px 0 0;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.middle-price {
|
||||
float: left;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 45%;
|
||||
@include respond("sm") {
|
||||
width: 100%;
|
||||
}
|
||||
&:after {
|
||||
width: 2px;
|
||||
height: 60px;
|
||||
background-color: #eee;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:30%;
|
||||
@include respond("sm") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 38px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
i {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius:20px;
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top:-2px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-price {
|
||||
float: left;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
@include respond("sm") {
|
||||
width: 100%;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 50px;
|
||||
width: 140px;
|
||||
height: 45px;
|
||||
background-color: var(--f7-theme-color);
|
||||
border-radius:5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
line-height: 45px;
|
||||
padding: 0;
|
||||
@include respond("sm") {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
width: 100%;
|
||||
line-height: 26px;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user