PDF rausgenommen
This commit is contained in:
aschwarz
1
msd2/myoos/themes/phoenix/scss/_custom.scss
Normal file
1
msd2/myoos/themes/phoenix/scss/_custom.scss
Normal file
@ -0,0 +1 @@
|
||||
/* Add here all your styles (customizations) */
|
||||
37
msd2/myoos/themes/phoenix/scss/base/_alerts.scss
Normal file
37
msd2/myoos/themes/phoenix/scss/base/_alerts.scss
Normal file
@ -0,0 +1,37 @@
|
||||
/** Alerts
|
||||
*************************************************** **/
|
||||
|
||||
/* Alert Close Button */
|
||||
.u-alert-close--light {
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
opacity: .7;
|
||||
text-shadow: none;
|
||||
transition: color .3s;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Alert Lists */
|
||||
.u-alert-list {
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
/* Alert Lists with Font Awesome Icons */
|
||||
.alert__icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.alert__icon-list {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
827
msd2/myoos/themes/phoenix/scss/base/_arrows.scss
Normal file
827
msd2/myoos/themes/phoenix/scss/base/_arrows.scss
Normal file
@ -0,0 +1,827 @@
|
||||
/** Arrows
|
||||
*************************************************** **/
|
||||
|
||||
.u-arrow {
|
||||
&-v1 {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
vertical-align: top;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
&[class*="abs"] {
|
||||
&::before {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-custom {
|
||||
&-v1 {
|
||||
.u-arrow-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: transform .3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-text {
|
||||
transform: translateY(-50%) translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-text {
|
||||
transform: translateY(-50%) translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-text {
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v2 {
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
.u-arrow-icon {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-icon {
|
||||
transform: translateY(-50%) translateX(10px);
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-icon {
|
||||
transform: translateY(-50%) translateX(-10px);
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-icon {
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
opacity: .6;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v3 {
|
||||
.u-arrow-helper {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.u-arrow-icon {
|
||||
display: block;
|
||||
|
||||
&-before,
|
||||
&-after {
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
transition: transform 0.3s, background-color 0.3s;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&-before {
|
||||
transform: translateX(-50%) rotate(30deg);
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
&-after {
|
||||
top: 50%;
|
||||
transform: translateX(-50%) rotate(-30deg);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-helper {
|
||||
background-color: $m-color-white;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.u-arrow-icon {
|
||||
&-before,
|
||||
&-after {
|
||||
background-color: $m-color-primary;
|
||||
}
|
||||
|
||||
&-before {
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&-after {
|
||||
transform: translateX(-50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v4 {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
transition: width 0.3s, background-color 0.3s;
|
||||
|
||||
h4 {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
h4 {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
h4 {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 200px;
|
||||
|
||||
.u-arrow-icon {
|
||||
color: $m-color-primary;
|
||||
}
|
||||
|
||||
h4 {
|
||||
opacity: 1;
|
||||
transition-delay: 0.1s;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v5 {
|
||||
.u-arrow-icon {
|
||||
&::before {
|
||||
transition: transform .3s .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transition: transform .3s .3s;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
transition: transform 0.3s;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: 50% 0;
|
||||
transform: rotateX(-90deg);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-text {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-text {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-text {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
transition-delay: .6s;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
.u-arrow-icon {
|
||||
&::before {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-icon {
|
||||
&::before {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-icon {
|
||||
&::before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v6 {
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
transition: width .4s, background-color .4s, z-index .4s;
|
||||
transition-timing-function: cubic-bezier(.7, 0, .3, 1);
|
||||
|
||||
.u-arrow-text {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 400px;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
&-v7 {
|
||||
perspective: 1000px;
|
||||
|
||||
.u-arrow-icon {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
backface-visibility: hidden;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
perspective-origin: 100% 50%;
|
||||
|
||||
.u-arrow-img {
|
||||
transform-origin: 0 50%;
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
perspective-origin: 0 50%;
|
||||
|
||||
.u-arrow-img {
|
||||
transform-origin: 100% 50%;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-icon {
|
||||
color: $m-color-primary;
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v8 {
|
||||
perspective: 1000px;
|
||||
|
||||
.u-arrow-icon {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-title,
|
||||
.u-arrow-img {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transition: transform 0.3s 0.3s;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
perspective-origin: 100% 50%;
|
||||
|
||||
.u-arrow-text,
|
||||
.u-arrow-title {
|
||||
transform-origin: 0 50%;
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
perspective-origin: 0 50%;
|
||||
|
||||
.u-arrow-text,
|
||||
.u-arrow-title {
|
||||
transform-origin: 100% 50%;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-icon {
|
||||
color: $m-color-primary;
|
||||
transition-delay: 0s;
|
||||
|
||||
&::before {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text,
|
||||
.u-arrow-title {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
transition-delay: .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v9 {
|
||||
width: 60px;
|
||||
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: $m-color-white;
|
||||
transition: width .3s .2s;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
&::after {
|
||||
content: attr(data-title);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: $m-color-white;
|
||||
text-transform: uppercase;
|
||||
opacity: 0;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
margin: 20px 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
opacity: 0;
|
||||
box-shadow: 0 1px 0 #fff, 0 -1px 0 #fff;
|
||||
transition: transform .3s, opacity .3s;
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
left: calc(100% - 25px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
right: calc(100% - 25px);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
&::after {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 200px;
|
||||
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
width: 200px;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
pointer-events: auto;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transition-delay: .2s;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
&:first-child {
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transition-delay: 0.35s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v10 {
|
||||
.u-arrow-text {
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transform: scale(.7);
|
||||
transition: transform .3s, opacity .3s, background-color .1s 0s;
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transition: transform .3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-img {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-img {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-text {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
transform: scale(1);
|
||||
transition: transform .3s, opacity .3s, background-color .1s .2s;
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v11 {
|
||||
.u-arrow-icon {
|
||||
border-width: 0;
|
||||
transition: border-width .3s .15s;
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
opacity: 0;
|
||||
transition: transform .3s, opacity .3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-text {
|
||||
transform: translateY(-50%) translateX(-100%) scale(.75);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-text {
|
||||
transform: translateY(-50%) translateX(100%) scale(.75);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-icon {
|
||||
border-top-width: 40px;
|
||||
border-bottom-width: 40px;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
opacity: 1;
|
||||
transition-delay: .3s;
|
||||
transform: translateY(-50%) translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v12 {
|
||||
.u-arrow-icon {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
overflow: hidden;
|
||||
transition: transform .3s;
|
||||
backface-visibility: hidden;
|
||||
transform: scale(.6);
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
opacity: 0;
|
||||
backface-visibility: hidden;
|
||||
transition: opacity .3s, transform .3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-img {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-img {
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-text {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-img {
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-text {
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
|
||||
.u-arrow-img {
|
||||
transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v13 {
|
||||
.u-arrow-icon {
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
background: $m-color-white;
|
||||
backface-visibility: hidden;
|
||||
transition: transform .3s .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transition: transform .3s;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.u-arrow-icon {
|
||||
&::after {
|
||||
transform: translateX(0);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-text {
|
||||
transition-delay: .3s;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-v14 {
|
||||
&::before,
|
||||
&::after,
|
||||
.u-arrow-icon::before,
|
||||
.u-arrow-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 3px;
|
||||
height: 50%;
|
||||
background: $m-color-primary;
|
||||
transition: transform .3s;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::before,
|
||||
.u-arrow-icon::before {
|
||||
top: 50%;
|
||||
transform: translateX(-50%) rotate(-135deg);
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
&::after,
|
||||
.u-arrow-icon::after {
|
||||
top: 50%;
|
||||
transform: translateX(-50%) rotate(-45deg);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.u-arrow-icon {
|
||||
&::before,
|
||||
&::after {
|
||||
z-index: 2;
|
||||
height: 0;
|
||||
background: $m-color-white;
|
||||
transition: height .3s, transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
transition: transform .3s, opacity .3s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.js-prev {
|
||||
.u-arrow-title {
|
||||
left: 100%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
&::before,
|
||||
.u-arrow-icon::before {
|
||||
transform: translateX(-50%) rotate(135deg);
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
&::after,
|
||||
.u-arrow-icon::after {
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
right: 100%;
|
||||
text-align: right;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before,
|
||||
.u-arrow-icon::before {
|
||||
transform: translateX(-50%) rotate(-125deg);
|
||||
}
|
||||
|
||||
&::after,
|
||||
.u-arrow-icon::after {
|
||||
transform: translateX(-50%) rotate(-55deg);
|
||||
}
|
||||
|
||||
.u-arrow-icon {
|
||||
&::before,
|
||||
&::after {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.u-arrow-title {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
|
||||
&.js-next {
|
||||
&::before,
|
||||
.u-arrow-icon::before {
|
||||
transform: translateX(-50%) rotate(125deg);
|
||||
}
|
||||
|
||||
&::after,
|
||||
.u-arrow-icon::after {
|
||||
transform: translateX(-50%) rotate(55deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
137
msd2/myoos/themes/phoenix/scss/base/_badges.scss
Normal file
137
msd2/myoos/themes/phoenix/scss/base/_badges.scss
Normal file
@ -0,0 +1,137 @@
|
||||
/** Labels & Badges
|
||||
*************************************************** **/
|
||||
|
||||
.badge {
|
||||
line-height: 1 !important;
|
||||
&.badge-square {
|
||||
font-size: 13px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
&.float-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&.float-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge {
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
.nav-pills > li {
|
||||
> a {
|
||||
color: #111;
|
||||
}
|
||||
&.active > a {
|
||||
&:hover {
|
||||
color: #111;
|
||||
}
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
&.dark {
|
||||
.nav-pills > li {
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
&.active > a {
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
}
|
||||
a.badge, .badge {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* corner */
|
||||
|
||||
.badge.badge-corner {
|
||||
top: -8px !important;
|
||||
right: -8px !important;
|
||||
position: absolute !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* colors */
|
||||
|
||||
span.badge-default, .list-group-item.active > .badge.badge-default {
|
||||
background-color: #333 !important;
|
||||
}
|
||||
|
||||
span.badge-blue, .list-group-item.active > .badge {
|
||||
background: #3498db !important;
|
||||
}
|
||||
|
||||
span.badge-red, .list-group-item.active > .badge {
|
||||
background: #e74c3c !important;
|
||||
}
|
||||
|
||||
span.badge-green, .list-group-item.active > .badge.badge-green {
|
||||
background: #2ecc71 !important;
|
||||
}
|
||||
|
||||
span.badge-sea, .list-group-item.active > .badge.badge-sea {
|
||||
background: #1abc9c !important;
|
||||
}
|
||||
|
||||
span.badge-orange, .list-group-item.active > .badge.badge-orange {
|
||||
background: #e67e22 !important;
|
||||
}
|
||||
|
||||
span.badge-purple, .list-group-item.active > .badge.badge-purple {
|
||||
background: #9b6bcc !important;
|
||||
}
|
||||
|
||||
span.badge-aqua, .list-group-item.active > .badge.badge-aqua {
|
||||
background: #27d7e7 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
[class*="u-badge"] {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@include px-to-rem("font-size", 13px);
|
||||
color: $m-color-main;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
[class*="u-badge"]:not([class*="--top-left"], [class*="--bottom-left"], [class*="--bottom-right"]) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
&--top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&--bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
&--bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
}
|
||||
108
msd2/myoos/themes/phoenix/scss/base/_buttons.scss
Normal file
108
msd2/myoos/themes/phoenix/scss/base/_buttons.scss
Normal file
@ -0,0 +1,108 @@
|
||||
/** Mobile Button
|
||||
*************************************************** **/
|
||||
|
||||
#topNav button.btn-mobile {
|
||||
display: none;
|
||||
color: #333;
|
||||
display: none;
|
||||
padding: 6px 10px;
|
||||
float: right;
|
||||
margin-top: 13px;
|
||||
margin-right: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
i {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
#topNav button.btn-mobile {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Styles
|
||||
------------------------------------*/
|
||||
/* General Button Styles */
|
||||
.btn {
|
||||
position: relative;
|
||||
transition: .2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:active:focus,
|
||||
&.active:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Content
|
||||
------------------------------------*/
|
||||
.u-btn-content {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Buttons Only Icon (O)
|
||||
------------------------------------*/
|
||||
.u-btn-only-icon {
|
||||
position: relative;
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Sizes
|
||||
------------------------------------*/
|
||||
//
|
||||
// e.g. @include g-button-size ($padding-y, $padding-x, $font-size);
|
||||
//
|
||||
|
||||
/* Extra Small */
|
||||
.btn-xs {
|
||||
@include u-button-size (2px, 7px, 11px);
|
||||
}
|
||||
|
||||
/* Medium */
|
||||
.btn-md {
|
||||
@include u-button-size (8px, 20px, 15px);
|
||||
}
|
||||
|
||||
/* Extra Large */
|
||||
.btn-xl {
|
||||
@include u-button-size (13px, 26px, 18px);
|
||||
}
|
||||
|
||||
/* Extramly Large */
|
||||
.btn-xxl {
|
||||
@include u-button-size (15px, 30px, 21px);
|
||||
}
|
||||
|
||||
|
||||
/* Button Hovers
|
||||
------------------------------------*/
|
||||
[class*="u-btn-hover"] {
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
199
msd2/myoos/themes/phoenix/scss/base/_cart.scss
Normal file
199
msd2/myoos/themes/phoenix/scss/base/_cart.scss
Normal file
@ -0,0 +1,199 @@
|
||||
/** Cart
|
||||
*************************************************** **/
|
||||
|
||||
#header {
|
||||
li.quick-cart .quick-cart-box {
|
||||
display: none;
|
||||
right: 0;
|
||||
left: auto;
|
||||
top: 100%;
|
||||
padding: 10px 0;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
box-shadow: 5px 5px rgba(91, 91, 91, 0.2);
|
||||
width: 274px;
|
||||
margin-top: 36px;
|
||||
z-index: 22;
|
||||
}
|
||||
&.fixed {
|
||||
li.quick-cart .quick-cart-box, &.header-sm li.quick-cart .quick-cart-box {
|
||||
/*margin-top:18px;*/
|
||||
}
|
||||
&.header-md li.quick-cart .quick-cart-box {
|
||||
/*margin-top:15px;*/
|
||||
}
|
||||
}
|
||||
li.quick-cart {
|
||||
.quick-cart-wrapper {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.quick-cart-box {
|
||||
h4 {
|
||||
font-size: 17px;
|
||||
margin: 0;
|
||||
padding: 0 10px 10px 10px;
|
||||
border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px 10px;
|
||||
border-bottom: rgba(0, 0, 0, 0.04) 1px solid;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
> img {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 4px 0 0 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.btn {
|
||||
background-color: #151515;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.quick-cart-footer {
|
||||
padding: 10px 10px 0 10px;
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding-top: 3px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 4px 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
.qty-text {
|
||||
border: 1px solid #ddd;
|
||||
height: 40px;
|
||||
padding: 5px 15px;
|
||||
max-width: 100px;
|
||||
-moz-appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
appearance: textfield;
|
||||
font-size: 14px;
|
||||
}
|
||||
.quantity {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100px;
|
||||
flex: 0 0 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
.qty-minus {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
display: block;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
color: #888;
|
||||
}
|
||||
.qty-plus {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
display: block;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
color: #888;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
&.cart-submit {
|
||||
background-color: #19B5FE;
|
||||
border: medium none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
margin-left: 15px;
|
||||
text-transform: uppercase;
|
||||
width: 120px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
/* min-width */
|
||||
#header {
|
||||
li.quick-cart .quick-cart-box {
|
||||
top: 21px;
|
||||
}
|
||||
&.header-sm li.quick-cart .quick-cart-box {
|
||||
margin-top: 19px;
|
||||
}
|
||||
&.header-md li.quick-cart .quick-cart-box {
|
||||
margin-top: 26px;
|
||||
}
|
||||
li.quick-cart .quick-cart-wrapper {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
/* max-width */
|
||||
#header {
|
||||
li.quick-cart .quick-cart-box {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 769px) {
|
||||
#header {
|
||||
li.quick-cart .quick-cart-box {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
margin-top: 0;
|
||||
border: rgba(0, 0, 0, 0.08) 1px solid !important;
|
||||
}
|
||||
&.dark li.quick-cart .quick-cart-box {
|
||||
border: rgba(255, 255, 255, 0.08) 1px solid;
|
||||
}
|
||||
li.quick-cart .quick-cart-wrapper {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
/**
|
||||
Quick Cart & top Search Fix (if #topBar exists).
|
||||
.has-topBar - added by Javascript
|
||||
**/
|
||||
}
|
||||
7
msd2/myoos/themes/phoenix/scss/base/_dividers.scss
Normal file
7
msd2/myoos/themes/phoenix/scss/base/_dividers.scss
Normal file
@ -0,0 +1,7 @@
|
||||
/** Dividers
|
||||
*************************************************** **/
|
||||
|
||||
hr {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
16
msd2/myoos/themes/phoenix/scss/base/_dropdown.scss
Normal file
16
msd2/myoos/themes/phoenix/scss/base/_dropdown.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// The dropdown menu
|
||||
#down {
|
||||
ul.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
float: left;
|
||||
min-width: 11rem;
|
||||
padding: .5rem .5rem;
|
||||
text-align: left;
|
||||
background-color: #2b2d30;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
113
msd2/myoos/themes/phoenix/scss/base/_fonts.scss
Normal file
113
msd2/myoos/themes/phoenix/scss/base/_fonts.scss
Normal file
@ -0,0 +1,113 @@
|
||||
/** Fonts
|
||||
*************************************************** **/
|
||||
|
||||
/* lato-300 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Light'), local('Lato-Light'),
|
||||
url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* lato-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Regular'), local('Lato-Regular'),
|
||||
url('../fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* lato-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Bold'), local('Lato-Bold'),
|
||||
url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* lato-900 - latin */
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url('../fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
|
||||
src: local('Lato Black'), local('Lato-Black'),
|
||||
url('../fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* source-sans-pro-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
|
||||
url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* source-sans-pro-italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/source-sans-pro-v11-latin-italic.eot'); /* IE9 Compat Modes */
|
||||
src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
|
||||
url('../fonts/source-sans-pro-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/source-sans-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/source-sans-pro-v11-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* source-sans-pro-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/source-sans-pro-v11-latin-700.eot'); /* IE9 Compat Modes */
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
|
||||
url('../fonts/source-sans-pro-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/source-sans-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/source-sans-pro-v11-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* source-sans-pro-700italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/source-sans-pro-v11-latin-700italic.eot'); /* IE9 Compat Modes */
|
||||
src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
|
||||
url('../fonts/source-sans-pro-v11-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/source-sans-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/source-sans-pro-v11-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/source-sans-pro-v11-latin-700italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
335
msd2/myoos/themes/phoenix/scss/base/_headers.scss
Normal file
335
msd2/myoos/themes/phoenix/scss/base/_headers.scss
Normal file
@ -0,0 +1,335 @@
|
||||
/** Headers
|
||||
*************************************************** **/
|
||||
|
||||
#header {
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
min-height: 60px;
|
||||
z-index: 15;
|
||||
border-bottom: rgba(0, 0, 0, 0.05) 1px solid;
|
||||
hr {
|
||||
background: none;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.logo {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
max-height: 60px !important;
|
||||
line-height: 60px;
|
||||
width: auto;
|
||||
}
|
||||
.nav-toggle + .logo {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
#header > .container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** LOGO
|
||||
*************************************************** **/
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
#header .logo > img {
|
||||
max-width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
/** NAV TOGGLE
|
||||
*************************************************** **/
|
||||
|
||||
#header button.nav-toggle {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border-right: rgba(0, 0, 0, 0.07) 1px solid;
|
||||
border-left: rgba(0, 0, 0, 0.07) 1px solid;
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
-webkit-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
#header.header-light {
|
||||
color: #121212;
|
||||
background-color: #ffffff;
|
||||
a {
|
||||
color: #121212;
|
||||
}
|
||||
.dropdown-menu a:not(.active):not(.btn):hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.nav-toggle {
|
||||
background: url('../images/burger.svg') center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/** STICKY
|
||||
*************************************************** **/
|
||||
|
||||
#header {
|
||||
&.header-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
+#wrapper {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
&.header-shadow {
|
||||
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
& > .container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** BUTTONS
|
||||
*************************************************** **/
|
||||
|
||||
#header ul.header-buttons {
|
||||
float: right;
|
||||
margin: 0 0 0 30px;
|
||||
padding: 0 0 0 10px;
|
||||
> li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
> a {
|
||||
height: 60px;
|
||||
padding: 10px 6px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
> i {
|
||||
display: block;
|
||||
margin: 0 0 6px 0;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
&.header-button-arrow {
|
||||
&:before {
|
||||
content: "\f107";
|
||||
font: normal normal normal 14px/1 'FontAwesome';
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 6px;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
&.show:before {
|
||||
content: "\f106";
|
||||
}
|
||||
}
|
||||
> {
|
||||
a {
|
||||
> span.badge {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
padding: 2px 4px 3px 4px;
|
||||
background-color: #ccc !important;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
> span {
|
||||
display: block;
|
||||
padding: 7px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
margin-bottom: 1px;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
color: #fff;
|
||||
line-height: 18px;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
max-width: 300px;
|
||||
min-width: 220px;
|
||||
-webkit-border-top-left-radius: 0;
|
||||
-moz-border-top-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
-webkit-border-top-right-radius: 0;
|
||||
-moz-border-top-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
-webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
|
||||
> a {
|
||||
padding: 5px 15px 5px 28px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
&.active {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: #0275d8;
|
||||
}
|
||||
&.dropdown-item {
|
||||
&:before {
|
||||
content: "\f105";
|
||||
font: normal normal normal 14px/1 'FontAwesome';
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 6px;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
&.dropdown-custom-icon {
|
||||
padding-left: 12px;
|
||||
> i {
|
||||
margin-right: 3px;
|
||||
font-size: 14px;
|
||||
color: #d1d1d1;
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.dropdown-myaccount-logout {
|
||||
display: block;
|
||||
padding: 7px 10px;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
#header ul.header-buttons {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-left: rgba(0, 0, 0, 0.07) 1px solid;
|
||||
&.header-buttons-bordered {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** GLOBAL SEARCH
|
||||
*************************************************** **/
|
||||
|
||||
#header form.search-global {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 500px);
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
form.search-global {
|
||||
input, button {
|
||||
padding: 10px 15px !important;
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding-right: 50px !important;
|
||||
z-index: 1 !important;
|
||||
border-radius: 5px !important;
|
||||
line-height: 18px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
height: 40px !important;
|
||||
line-height: 1;
|
||||
> i {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&:not(.btn-primary) {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
&:hover button:not(.btn-primary) {
|
||||
color: #313131;
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media only screen and (max-width: 767px) {
|
||||
form.search-global {
|
||||
input {
|
||||
padding: 14px 15px !important;
|
||||
}
|
||||
button {
|
||||
padding: 14px 15px !important;
|
||||
line-height: 1;
|
||||
height: 100% !important;
|
||||
max-height: 48px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
402
msd2/myoos/themes/phoenix/scss/base/_main-nav.scss
Normal file
402
msd2/myoos/themes/phoenix/scss/base/_main-nav.scss
Normal file
@ -0,0 +1,402 @@
|
||||
/** MAIN NAVIGATION
|
||||
*************************************************** **/
|
||||
|
||||
nav.main-nav {
|
||||
z-index: 9999;
|
||||
font-weight: 300;
|
||||
> div {
|
||||
> ul > li {
|
||||
position: inherit;
|
||||
}
|
||||
dl {
|
||||
margin-bottom: 0;
|
||||
dd, dt {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> ul > li > a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 7px 30px 7px 15px;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: #111;
|
||||
border-bottom: transparent 1px solid;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.main-nav-bordered > div > ul > li > a {
|
||||
border-bottom: rgba(0, 0, 0, 0.04) 1px solid;
|
||||
}
|
||||
> div > ul > li {
|
||||
&:last-child > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&.main-nav-item {
|
||||
&:hover, &.active {
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
}
|
||||
> {
|
||||
span > {
|
||||
i, a > i {
|
||||
margin-right: 6px;
|
||||
color: #ccc;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
a > i {
|
||||
margin-right: 6px;
|
||||
color: #ccc;
|
||||
width: 20px;
|
||||
}
|
||||
span > a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #111;
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 15px 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
&:hover > span > {
|
||||
a:after {
|
||||
content: attr(data-text);
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 18px;
|
||||
}
|
||||
i, a > i {
|
||||
color: #d9534f;
|
||||
}
|
||||
}
|
||||
> {
|
||||
span > a {
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
> .badge {
|
||||
margin-right: 0;
|
||||
margin-top: 2px;
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&:before {
|
||||
content: "\f105";
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 'FontAwesome';
|
||||
font-size: inherit;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 9px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#header nav.main-nav {
|
||||
display: none;
|
||||
&.min-nav-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
nav.main-nav {
|
||||
> div > ul {
|
||||
.main-nav-submenu {
|
||||
position: absolute;
|
||||
background-color: #fbfbfb;
|
||||
left: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
float: none;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
-webkit-animation: fadeIn .3s;
|
||||
animation: fadeIn .3s;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-moz-border-top-right-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
-webkit-border-bottom-right-radius: 6px;
|
||||
-moz-border-bottom-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
div.row {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
> div[class*="col-"] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
> div > ul {
|
||||
padding: 15px;
|
||||
}
|
||||
> div > ul > li > a {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
}
|
||||
> div > ul > li > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
> {
|
||||
h3, h4, h5, h6 {
|
||||
margin: 15px 15px 0 15px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 > i, h4 > i, h5 > i, h6 > i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
ul {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
> ul li > a {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
}
|
||||
> ul li > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
a > {
|
||||
strong, b {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.main-nav-submenu {
|
||||
div.row {
|
||||
> div > ul > li:first-child > a {
|
||||
font-weight: 600;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
> div > ul > li > a > .badge {
|
||||
padding: 2px 4px 3px 4px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
> ul li > a > .badge {
|
||||
padding: 2px 4px 3px 4px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 3px;
|
||||
}
|
||||
> ul li > hr {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.btn, .alert {
|
||||
border: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.main-nav-brand-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
padding-bottom: 5px;
|
||||
> img {
|
||||
background-color: #fff;
|
||||
border: #eaeaea 1px solid;
|
||||
padding: 0 3px;
|
||||
}
|
||||
&:hover > img {
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
margin-top: 5px !important;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
> {
|
||||
.main-nav-mobile-header {
|
||||
border-bottom: rgba(0, 0, 0, 0.07) 1px solid;
|
||||
> img {
|
||||
max-width: 128px;
|
||||
height: auto !important;
|
||||
float: left;
|
||||
margin-top: 1px;
|
||||
height: 60px !important;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.nav-toggle-close {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border-right: rgba(0, 0, 0, 0.07) 1px solid;
|
||||
border-left: rgba(0, 0, 0, 0.07) 1px solid;
|
||||
float: left;
|
||||
z-index: 1;
|
||||
background: url('../images/close.svg') center no-repeat;
|
||||
-webkit-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
div > ul > li.main-nav-search {
|
||||
padding: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 767px) {
|
||||
nav.main-nav > div > ul > li:hover > .main-nav-submenu {
|
||||
display: block !important;
|
||||
}
|
||||
#header nav.main-nav > {
|
||||
div > ul > li > .main-nav-submenu {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.main-nav-mobile-scroll > ul {
|
||||
width: 278px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
nav.main-nav > {
|
||||
div > ul .main-nav-submenu {
|
||||
width: 100% !important;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
.main-nav-mobile-scroll {
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* iOS smooth scroll */
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
nav.main-nav > .main-nav-mobile-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
form.search-global {
|
||||
input {
|
||||
padding: 14px 15px !important;
|
||||
}
|
||||
button {
|
||||
padding: 14px 15px !important;
|
||||
line-height: 1;
|
||||
height: 100% !important;
|
||||
max-height: 48px !important;
|
||||
}
|
||||
}
|
||||
nav.main-nav > div > ul {
|
||||
.main-nav-submenu {
|
||||
div.row > div > ul {
|
||||
padding-left: 45px;
|
||||
}
|
||||
&.main-nav-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> {
|
||||
li > a:before, dt > a:before {
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
/* expand icon */
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 767px) {
|
||||
#header nav.main-nav.main-nav-toggle {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
background-color: #fff;
|
||||
border-top: rgba(0, 0, 0, 0.05) 1px solid;
|
||||
}
|
||||
#main-nav-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
nav.main-nav.main-nav-toggle {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding-bottom: 62px;
|
||||
}
|
||||
#header nav.main-nav form.search-global {
|
||||
max-width: 100% !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
356
msd2/myoos/themes/phoenix/scss/base/_page_header.scss
Normal file
356
msd2/myoos/themes/phoenix/scss/base/_page_header.scss
Normal file
@ -0,0 +1,356 @@
|
||||
/** Page Header
|
||||
*************************************************** **/
|
||||
|
||||
section {
|
||||
&.page-header {
|
||||
position: relative;
|
||||
padding: 50px 0 50px 0;
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0 !important;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-bottom: rgba(0, 0, 0, 0.05) 1px solid;
|
||||
-webkit-transition: all 0s;
|
||||
-moz-transition: all 0s;
|
||||
-o-transition: all 0s;
|
||||
transition: all 0s;
|
||||
&.shadow-after-1:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
bottom: -60px;
|
||||
background-image: url('../images/_smarty/misc/shadow1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&.shadow-after-2:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
bottom: -60px;
|
||||
background-image: url('../images/_smarty/misc/shadow2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&.shadow-after-3:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
bottom: -60px;
|
||||
background-image: url('../images/_smarty/misc/shadow3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
&.dark.page-header {
|
||||
color: #fff;
|
||||
background-color: #151515 !important;
|
||||
}
|
||||
&.dark-2.page-header {
|
||||
color: #fff;
|
||||
background-color: #292e32 !important;
|
||||
}
|
||||
&.light.page-header {
|
||||
color: #151515;
|
||||
background-color: transparent;
|
||||
border-top: rgba(0, 0, 0, 0.05) 1px solid;
|
||||
}
|
||||
&.page-header {
|
||||
&.page-header-xs {
|
||||
padding: 20px 0 20px 0;
|
||||
}
|
||||
&.page-header-md {
|
||||
padding: 50px 0 50px 0;
|
||||
}
|
||||
&.page-header-lg {
|
||||
padding: 80px 0 80px 0;
|
||||
}
|
||||
&.page-header-xlg {
|
||||
padding: 130px 0 130px 0;
|
||||
}
|
||||
&.page-header-2xlg {
|
||||
padding: 250px 0 250px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
section.page-header {
|
||||
background-position: center !important;
|
||||
background-attachment: inherit;
|
||||
-webkit-background-size: 100% 100% !important;
|
||||
-moz-background-size: 100% 100% !important;
|
||||
-o-background-size: 100% 100% !important;
|
||||
background-size: 100% 100% !important;
|
||||
-webkit-box-sizing: inherit !important;
|
||||
-moz-box-sizing: inherit !important;
|
||||
box-sizing: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* shadows */
|
||||
|
||||
@media only screen and (max-width: 482px) {
|
||||
section.page-header.page-header-2xlg {
|
||||
padding: 130px 0 130px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* page header tabs */
|
||||
|
||||
.page-header {
|
||||
&.page-header-xs ul.page-header-tabs {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: -21px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&.page-header-md ul.page-header-tabs {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: -51px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
&.page-header-lg ul.page-header-tabs {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: -81px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
&.page-header-2xlg ul.page-header-tabs {
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-bottom: -250px;
|
||||
margin-top: 144px;
|
||||
}
|
||||
ul.page-header-tabs > li {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
padding: 0;
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
-moz-border-top-left-radius: 3px;
|
||||
-moz-border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
> a {
|
||||
display: inline-block;
|
||||
padding: 6px 20px;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.page-header-xs ul.page-header-tabs li a > span.badge {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
&.dark ul.page-header-tabs > li {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
ul.page-header-tabs {
|
||||
> li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
&.dark > li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
> li.active > a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
&.dark ul.page-header-tabs > li.active:hover {
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
ul.page-header-tabs {
|
||||
> li.active {
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
}
|
||||
&.dark > li.active {
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
background-color: #212121;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.page-header {
|
||||
ul.page-header-tabs {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 6px;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
&.page-header-2xlg ul.page-header-tabs {
|
||||
margin-top: 143px;
|
||||
margin-bottom: -135px;
|
||||
}
|
||||
ul.page-header-tabs {
|
||||
&.dark {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
> li {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
> li {
|
||||
display: block;
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
> a {
|
||||
display: block;
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
&.page-header {
|
||||
> .container {
|
||||
min-height: 42px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -20px;
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
z-index: 10;
|
||||
> li + li:before {
|
||||
content: "•";
|
||||
}
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
&.parallax .breadcrumb {
|
||||
li.active, a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
right: 0;
|
||||
left: auto;
|
||||
&.breadcrumb-inverse {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
&.breadcrumb-center {
|
||||
left: auto;
|
||||
right: auto;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark.page-header .breadcrumb a {
|
||||
color: #ccc;
|
||||
}
|
||||
&.page-header {
|
||||
ul.page-options {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -15px;
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
z-index: 10;
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.parallax ul.page-options {
|
||||
li.active, a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
ul.page-options {
|
||||
right: 0;
|
||||
left: auto;
|
||||
&.page-options-inverse {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
&.page-options-center {
|
||||
left: auto;
|
||||
right: auto;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark.page-header ul.page-options a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
section.page-header {
|
||||
text-align: center;
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
&.text-right, &.text-left {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* options - like buttons */
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
section.page-header ul.page-options {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb>li+li:before {
|
||||
padding: 0 7px 0 5px;
|
||||
}
|
||||
|
||||
.breadcrumb > li {
|
||||
display: inline-block;
|
||||
}
|
||||
303
msd2/myoos/themes/phoenix/scss/base/_steps.scss
Normal file
303
msd2/myoos/themes/phoenix/scss/base/_steps.scss
Normal file
@ -0,0 +1,303 @@
|
||||
/** STEP
|
||||
*************************************************** **/
|
||||
.stepsWrapper{
|
||||
.innerWrapper{
|
||||
border: 5px solid #f0f0f0;
|
||||
display: block;
|
||||
padding: 30px 30px 0;
|
||||
width: 100%;
|
||||
&.stepsPage{
|
||||
@include mobile{
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
@include tablet{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.panel{
|
||||
@extend %panel-style;
|
||||
}
|
||||
.cartListInner{
|
||||
margin-bottom: 50px;
|
||||
float: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
.totalAmountArea{
|
||||
border-width: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.well{
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin-bottom: 50px;
|
||||
.pager{
|
||||
margin: 0;
|
||||
li{
|
||||
a{
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
background-color: $primary-color;
|
||||
color: $white-color;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
background-color: $primary-color;
|
||||
color: $white-color;
|
||||
}
|
||||
&.hideContent{
|
||||
display: none;
|
||||
}
|
||||
@include mobile-xs{
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@include mobile{
|
||||
width: 136px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&.previous{
|
||||
a{
|
||||
background-color: #dedede;
|
||||
color: $secondary-color;
|
||||
margin-bottom: 10px;
|
||||
&:hover{
|
||||
background-color: $primary-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderBox{
|
||||
.table-responsive{
|
||||
.table{
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
text-transform: capitalize;
|
||||
.checkboxArea{
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
%after{
|
||||
content: ' ';
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: $white-color;
|
||||
@include border-radius($radius: 50%);
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
.progress-wizard {
|
||||
padding: 0 15px 50px 15px;
|
||||
.progress-wizard-step {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
.progress-wizard-stepnum {
|
||||
color: $secondary-color;
|
||||
margin-bottom: 5px;
|
||||
@include mobile-xs{
|
||||
font-size: 10px;
|
||||
height: 55px;
|
||||
}
|
||||
@include mobile{
|
||||
font-size: 10px;
|
||||
height: 36px;
|
||||
}
|
||||
@include tablet{
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
}
|
||||
@include desktops{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.progress-wizard-info {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.progress-wizard-dot {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
background: $primary-color;
|
||||
left: 50%;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
@include border-radius($radius: 50%);
|
||||
&:after {
|
||||
@extend %after;
|
||||
}
|
||||
@include mobile{
|
||||
top: 60px;
|
||||
}
|
||||
@include tablet{
|
||||
top: 43px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
position: relative;
|
||||
@include border-radius(0);
|
||||
height: 8px;
|
||||
box-shadow: none;
|
||||
margin: 20px 0;
|
||||
background-color: $light-color;
|
||||
.progress-bar {
|
||||
width:0px;
|
||||
box-shadow: none;
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
&.complete{
|
||||
.progress{
|
||||
.progress-bar{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
.progress{
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.progress-bar{
|
||||
width:50%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.progress{
|
||||
width: 100%;
|
||||
.progress-bar{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fullBar{
|
||||
.progress{
|
||||
.progress-bar{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
.progress{
|
||||
.progress-bar{
|
||||
width:50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.disabled{
|
||||
.progress-wizard-dot {
|
||||
background-color: $light-color;
|
||||
&:after {
|
||||
@extend %after;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*=== 14.2 STEP # 02 ===*/
|
||||
.setp5{
|
||||
padding-bottom: 90px;
|
||||
.thanksContent{
|
||||
@include add-border(5px, $light-color, all);
|
||||
padding: 50px 30px;
|
||||
h2{
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
font-weight: 700;
|
||||
margin-bottom: 50px+5px;
|
||||
@include mobile{
|
||||
font-size: 20px+6px;
|
||||
}
|
||||
@include tablet{
|
||||
font-size: 30px;
|
||||
}
|
||||
small{
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
@extend %sectionTitleSmall;
|
||||
color: $secondary-color;
|
||||
}
|
||||
.thanksInner{
|
||||
padding: 30px;
|
||||
min-height: 214px;
|
||||
@include add-border(3px, $light-color, all);
|
||||
.tableBlcok{
|
||||
display: table;
|
||||
height: 154px;
|
||||
address{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align:left;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 30px;
|
||||
span{
|
||||
font-weight: 400;
|
||||
}
|
||||
a{
|
||||
color: #252525;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.well{
|
||||
background-color: $primary-color;
|
||||
border: none;
|
||||
float: right;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
height: 154px;
|
||||
padding: 50px 0 0 0;
|
||||
@include mobile-xs{
|
||||
width: 100%;
|
||||
}
|
||||
@include mobile{
|
||||
width: 100%;
|
||||
}
|
||||
@include tablet{
|
||||
width: 250px;
|
||||
}
|
||||
h2{
|
||||
color: $white-color;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0;
|
||||
small{
|
||||
color: $white-color;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
margin: 0 0 13px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
166
msd2/myoos/themes/phoenix/scss/base/_submenu.scss
Normal file
166
msd2/myoos/themes/phoenix/scss/base/_submenu.scss
Normal file
@ -0,0 +1,166 @@
|
||||
/** submenu
|
||||
*************************************************** **/
|
||||
#topNav {
|
||||
ul.dropdown-menu {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
box-shadow: none;
|
||||
border: #eee 1px solid;
|
||||
border-top: #eee 1px solid;
|
||||
list-style: none;
|
||||
background: #fff;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 6px 12px;
|
||||
min-width: 200px;
|
||||
padding: 0;
|
||||
border-color: #1ABC9C #fff #fff;
|
||||
-webkit-transition: top .4s ease;
|
||||
-o-transition: top .4s ease;
|
||||
transition: top .4s ease;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
ul.dropdown-menu {
|
||||
margin-top: -1px !important;
|
||||
/* -1px required for border-top menu */
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
/*border-bottom: rgba(0,0,0,0.06) 1px solid;*/
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 7px 15px;
|
||||
font-weight: 400;
|
||||
line-height: 23px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
> li a i {
|
||||
margin-right: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
a.dropdown-toggle {
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
li {
|
||||
&.active {
|
||||
> a, &:hover > a, &:focus > a {
|
||||
color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
&:hover > a, &:focus > a {
|
||||
color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&.divider {
|
||||
margin: -1px 0 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav li:hover > ul.dropdown-menu {
|
||||
padding: 0;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
li .badge {
|
||||
margin-top: 4px;
|
||||
}
|
||||
> li:hover > ul.dropdown-menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* sub-submenu */
|
||||
|
||||
/** ************************************************************* **/
|
||||
|
||||
|
||||
/** Responsive Top Nav
|
||||
********************* **/
|
||||
@media only screen and (max-width: 992px) {
|
||||
.navbar-collapse {
|
||||
height: 100%;
|
||||
}
|
||||
form.mobile-search {
|
||||
display: block;
|
||||
}
|
||||
#topNav {
|
||||
div.nav-main-collapse {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
button.btn-mobile {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#header {
|
||||
&.dark #topNav button.btn-mobile, &.transparent #topNav button.btn-mobile, &.theme-color #topNav button.btn-mobile {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
#topNav {
|
||||
nav.nav-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
div.nav-main-collapse {
|
||||
width: 100%;
|
||||
margin: -1px 0 0 0;
|
||||
&.in {
|
||||
width: 100%;
|
||||
margin: -1px 0 0 0;
|
||||
}
|
||||
float: none;
|
||||
overflow-x: hidden;
|
||||
max-height: 350px;
|
||||
}
|
||||
}
|
||||
/* ======================== MOBILE MENU V2 ===================== */
|
||||
html.noscroll {
|
||||
overflow: hidden !important;
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 10 !important;
|
||||
}
|
||||
}
|
||||
|
||||
450
msd2/myoos/themes/phoenix/scss/base/_user-profile.scss
Normal file
450
msd2/myoos/themes/phoenix/scss/base/_user-profile.scss
Normal file
@ -0,0 +1,450 @@
|
||||
/** User Profile
|
||||
*************************************************** **/
|
||||
|
||||
%resetBtn{
|
||||
box-shadow: none;
|
||||
background-color: $m-color-light;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
%card-style{
|
||||
border-radius: 0;
|
||||
@include add-border(3px, $m-color-light, all);
|
||||
box-shadow: none;
|
||||
margin-bottom: 30px;
|
||||
.card-heading{
|
||||
background-color: $m-color-light;
|
||||
border-color: $m-color-light;
|
||||
border-radius: 0;
|
||||
.card-title{
|
||||
font-size: 15px;
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
color: #252525;
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
address{
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 0;
|
||||
strong{
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
span{
|
||||
font-size: 15px;
|
||||
}
|
||||
a{
|
||||
font-size: 15px;
|
||||
color: $m-color-secondary;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
p{
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.userProfile{
|
||||
.btn-group{
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
a{
|
||||
float: none;
|
||||
height: 45px;
|
||||
padding: 0 20px;
|
||||
line-height: 45px;
|
||||
color: $m-color-secondary;
|
||||
|
||||
font-weight: 700;
|
||||
@extend %resetBtn;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
@include mobile-xs{
|
||||
font-size: 10px;
|
||||
padding: 0 10px;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
@include mobile{
|
||||
font-size: 10px;
|
||||
padding: 0 10px;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
@include tablet{
|
||||
font-size: 11px;
|
||||
padding: 0 20px;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
@include desktops{
|
||||
font-size: 14px;
|
||||
}
|
||||
i{
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:hover, &.active{
|
||||
background-color: $m-color-primary;
|
||||
color: $m-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.innerWrapper{
|
||||
width: 100%;
|
||||
display: block;
|
||||
@include add-border(5px, $m-color-light, all);
|
||||
padding: 30px 30px 0 30px;
|
||||
@include mobile{
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
@include tablet{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.alert{
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
h3{
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 15px;
|
||||
span{
|
||||
color: $m-color-primary;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
color: #888888;
|
||||
line-height: 22px;
|
||||
margin-bottom: 40px+5px;
|
||||
}
|
||||
.list-inline{
|
||||
display: block;
|
||||
margin-bottom: 50px;
|
||||
li{
|
||||
@include mobile-xs{
|
||||
padding: 0;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@include mobile{
|
||||
padding: 0;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@include tablet{
|
||||
padding: 0 10px 0 0;
|
||||
display: inline-block;
|
||||
margin: 0
|
||||
}
|
||||
@include desktops{
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
.btn-lg{
|
||||
color: $text-slider-title;
|
||||
font-weight: 700;
|
||||
@extend %resetBtn;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
@include mobile-xs{
|
||||
width: 100%;
|
||||
padding: 47px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
@include mobile{
|
||||
width: 100%;
|
||||
padding: 47px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
@include tablet{
|
||||
width: 120px;
|
||||
padding: 31px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
@include desktops{
|
||||
width: 156px;
|
||||
padding: 47px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
@include large-desktops{
|
||||
width: 196px;
|
||||
padding: 67px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
i{
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $m-color-primary;
|
||||
color: $m-color-white;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card{
|
||||
@extend %card-style;
|
||||
}
|
||||
&.singleOrder{
|
||||
.orderBox{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.btn-group{
|
||||
margin-bottom: 30px;
|
||||
float: left;
|
||||
.btn-default{
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-color: $m-color-primary;
|
||||
padding: 0 20px;
|
||||
color: $m-color-white;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
@include mobile-xs{
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
@include mobile{
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderBox{
|
||||
display: block;
|
||||
margin-bottom: 50px;
|
||||
h4{
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
font-size: 20px;
|
||||
}
|
||||
.table-responsive{
|
||||
margin-bottom: 0;
|
||||
@include mobile{
|
||||
overflow-x: auto;
|
||||
}
|
||||
@include tablet{
|
||||
overflow-x: visible;
|
||||
}
|
||||
.table{
|
||||
margin-bottom: 0;
|
||||
thead{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-primary, right-left);
|
||||
th{
|
||||
@extend %tableHead;
|
||||
@include mobile-xs{
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
@include mobile{
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
@include tablet{
|
||||
padding: 10px 10px 10px 20px;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-light, right-left);
|
||||
td{
|
||||
@extend %tableData;
|
||||
padding-left: 20px;
|
||||
font-weight: 400;
|
||||
.btn-default{
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
@include add-border(1px, $border-gray, all);
|
||||
padding: 15px 20px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: $m-color-secondary;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
text-transform: uppercase;
|
||||
&:hover{
|
||||
background-color: $m-color-primary;
|
||||
color: $m-color-white;
|
||||
border-color: $m-color-primary;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&:first-child{
|
||||
color: $m-color-primary;
|
||||
.fa{
|
||||
color: $m-color-secondary !important;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.myAddress{
|
||||
margin-bottom: 10px;
|
||||
.table-responsive{
|
||||
.table{
|
||||
tbody{
|
||||
tr{
|
||||
border: none;
|
||||
td{
|
||||
&:first-child{
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
.btn-default{
|
||||
padding: 10px 14px;
|
||||
border: none;
|
||||
}
|
||||
.close{
|
||||
@extend %closeBtn;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
td{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wishList{
|
||||
.table-responsive{
|
||||
.table{
|
||||
thead{
|
||||
tr{
|
||||
th{
|
||||
&:first-child{
|
||||
@include mobile-xs{
|
||||
display: none;
|
||||
}
|
||||
@include mobile{
|
||||
display: none;
|
||||
}
|
||||
@include tablet{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
&:nth-child(4){
|
||||
color: $m-color-primary;
|
||||
}
|
||||
.btn-default{
|
||||
@include add-border(1px, $border-gray, all);
|
||||
padding: 15px 20px;
|
||||
}
|
||||
&:first-child{
|
||||
@include mobile-xs{
|
||||
display: none;
|
||||
}
|
||||
@include mobile{
|
||||
display: none;
|
||||
}
|
||||
@include tablet{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%commonBtn{
|
||||
height: 45px;
|
||||
font-weight: 700;
|
||||
color: $m-color-white;
|
||||
font-size: 15px;
|
||||
border-radius: 0;
|
||||
background-color: $m-color-primary;
|
||||
border: none;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
.profile{
|
||||
.orderBox{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
%tableHead{
|
||||
background-color: $m-color-primary;
|
||||
padding: 0;
|
||||
height: 55px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
color: $m-color-white;
|
||||
padding-left: 20px;
|
||||
@include add-border(1px, rgba(255,255,255,0.2), right);
|
||||
border-bottom: none;
|
||||
}
|
||||
%tableData{
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
@include add-border(3px, $m-color-light, bottom);
|
||||
border-top: none;
|
||||
}
|
||||
%closeBtn{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
margin-right: 30px;
|
||||
color: $m-color-primary;
|
||||
opacity: 1;
|
||||
line-height: 74px;
|
||||
font-weight: normal;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
@include tablet{
|
||||
margin-right: 5px;
|
||||
}
|
||||
@include desktops{
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
79
msd2/myoos/themes/phoenix/scss/core/_bar-rating.scss
Normal file
79
msd2/myoos/themes/phoenix/scss/core/_bar-rating.scss
Normal file
@ -0,0 +1,79 @@
|
||||
/** Star Rating
|
||||
*************************************************** **/
|
||||
|
||||
.br-theme-fontawesome-stars {
|
||||
.br-widget {
|
||||
height: 28px;
|
||||
white-space: nowrap;
|
||||
a {
|
||||
font: normal normal normal 20px/1 FontAwesome;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-decoration: none;
|
||||
margin-right: 2px;
|
||||
&:after {
|
||||
content: '\f005';
|
||||
color: #d2d2d2;
|
||||
}
|
||||
&.br-active:after, &.br-selected:after {
|
||||
color: #edb867;
|
||||
}
|
||||
}
|
||||
.br-current-rating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.br-readonly a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.br-theme-fontawesome-stars .br-widget a {
|
||||
&:after {
|
||||
content: '\f006';
|
||||
color: black;
|
||||
}
|
||||
&.br-active:after, &.br-selected:after {
|
||||
content: '\f005';
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
<div class="rating rating-0"><!-- rating-1 ... rating-5 --></div>
|
||||
*************************************************** **/
|
||||
|
||||
.rating {
|
||||
position: relative;
|
||||
min-height: 17px;
|
||||
width: auto;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
.rating-0:after {
|
||||
content: "\f006\20\f006\20\f006\20\f006\20\f006";
|
||||
}
|
||||
|
||||
.rating-1:after {
|
||||
content: "\f005\20\f006\20\f006\20\f006\20\f006";
|
||||
}
|
||||
|
||||
.rating-2:after {
|
||||
content: "\f005\20\f005\20\f006\20\f006\20\f006";
|
||||
}
|
||||
|
||||
.rating-3:after {
|
||||
content: "\f005\20\f005\20\f005\20\f006\20\f006";
|
||||
}
|
||||
|
||||
.rating-4:after {
|
||||
content: "\f005\20\f005\20\f005\20\f005\20\f006";
|
||||
}
|
||||
|
||||
.rating-5:after {
|
||||
content: "\f005\20\f005\20\f005\20\f005\20\f005";
|
||||
}
|
||||
61
msd2/myoos/themes/phoenix/scss/core/_style.scss
Normal file
61
msd2/myoos/themes/phoenix/scss/core/_style.scss
Normal file
@ -0,0 +1,61 @@
|
||||
/** Default Styles
|
||||
*************************************************** **/
|
||||
|
||||
|
||||
body {
|
||||
color: $m-color-main;
|
||||
background-color: $m-bg-color-main;
|
||||
font-family: $m-font-primary;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-size: $m-font-primary-size;
|
||||
line-height: 1.6;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
&.has-image-bg section, &.has-video-bg section {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
body #wrapper {
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: $m-color-primary;
|
||||
outline: none;
|
||||
}
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: $m-color-primary-dark-v2;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $m-color-main;
|
||||
}
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: $m-color-main;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*------------------------------------
|
||||
Headings
|
||||
------------------------------------*/
|
||||
.h1, .h2, .h3, .h4, .h5, .h6,
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
185
msd2/myoos/themes/phoenix/scss/core/_sub-nav.scss
Normal file
185
msd2/myoos/themes/phoenix/scss/core/_sub-nav.scss
Normal file
@ -0,0 +1,185 @@
|
||||
/** Side Nav
|
||||
*************************************************** **/
|
||||
|
||||
.side-nav {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
div.side-nav {
|
||||
li.list-group-item {
|
||||
padding: 0 15px;
|
||||
li.list-group-item {
|
||||
padding: 0;
|
||||
> ul {
|
||||
padding-left: 15px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
a.dropdown-toggle:before {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
border: 0 !important;
|
||||
> li {
|
||||
border: 0 !important;
|
||||
position: relative;
|
||||
background-color: transparent !important;
|
||||
&:before {
|
||||
content: "\f105";
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.list-group-noicon:before {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
&.list-group-noicon > li {
|
||||
&:before, > ul > li:before {
|
||||
content: '';
|
||||
display: none;
|
||||
}
|
||||
padding-left: 0;
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> li {
|
||||
> a {
|
||||
display: block;
|
||||
padding: 4px 0 4px 0;
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover > a, &.active > a {
|
||||
color: #111 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* deep nav fix */
|
||||
|
||||
button.page-side-nav-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.side-nav ul > li > ul > li > a {
|
||||
padding: 4px 0 4px 15px;
|
||||
}
|
||||
|
||||
ul.side-nav > li > a > i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* side nav sub categs */
|
||||
|
||||
div.side-nav {
|
||||
ul > li {
|
||||
> a.dropdown-toggle:before {
|
||||
content: "\f196";
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
font-size: 17px;
|
||||
right: 20px;
|
||||
top: 6px;
|
||||
color: #999;
|
||||
}
|
||||
&.active {
|
||||
> a.dropdown-toggle:before {
|
||||
content: "\f147";
|
||||
}
|
||||
> ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
display: none;
|
||||
}
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
> li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
a {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
.side-nav-head {
|
||||
position: relative;
|
||||
}
|
||||
ul.list-group-bordered > li > a {
|
||||
display: block;
|
||||
/*border-bottom:rgba(0,0,0,0.05) 1px solid;*/
|
||||
padding: 6px;
|
||||
> span {
|
||||
&.float-left, &.float-right {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.side-nav-head button {
|
||||
display: none;
|
||||
font-size: 21px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
@media only screen and (min-width: 990px) {
|
||||
div.side-nav > ul {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
div.side-nav {
|
||||
ul {
|
||||
display: none;
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 30px;
|
||||
> li {
|
||||
border-bottom: rgba(0, 0, 0, 0.03) 1px solid !important;
|
||||
}
|
||||
}
|
||||
.side-nav-head {
|
||||
height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 30px;
|
||||
> h4 {
|
||||
line-height: 44px;
|
||||
padding-left: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
div.side-nav ul {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
127
msd2/myoos/themes/phoenix/scss/core/_table.scss
Normal file
127
msd2/myoos/themes/phoenix/scss/core/_table.scss
Normal file
@ -0,0 +1,127 @@
|
||||
/** Table
|
||||
*************************************************** **/
|
||||
|
||||
.reviews{
|
||||
display: block;
|
||||
margin-bottom: 50px;
|
||||
h4{
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
font-size: 20px;
|
||||
}
|
||||
.table-responsive{
|
||||
margin-bottom: 0;
|
||||
@include mobile{
|
||||
overflow-x: auto;
|
||||
}
|
||||
@include tablet{
|
||||
overflow-x: visible;
|
||||
}
|
||||
.table{
|
||||
margin-bottom: 0;
|
||||
thead{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-primary, right-left);
|
||||
th{
|
||||
@extend %tableHead;
|
||||
@include mobile-xs{
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
@include mobile{
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
@include tablet{
|
||||
padding: 10px 10px 10px 20px;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-light, right-left);
|
||||
td{
|
||||
@extend %tableData;
|
||||
padding-left: 20px;
|
||||
font-weight: 400;
|
||||
.btn-default{
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
@include add-border(1px, $border-gray, all);
|
||||
padding: 15px 20px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: $m-color-secondary;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
text-transform: uppercase;
|
||||
&:hover{
|
||||
background-color: $m-color-primary;
|
||||
color: $m-color-white;
|
||||
border-color: $m-color-primary;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&:first-child{
|
||||
color: $m-color-primary;
|
||||
.fa{
|
||||
color: $m-color-secondary !important;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
%tableHead{
|
||||
background-color: $m-color-primary;
|
||||
padding: 0;
|
||||
height: 55px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
color: $m-color-white;
|
||||
padding-left: 20px;
|
||||
@include add-border(1px, rgba(255,255,255,0.2), right);
|
||||
border-bottom: none;
|
||||
}
|
||||
%tableData{
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
@include add-border(3px, $m-color-light, bottom);
|
||||
border-top: none;
|
||||
}
|
||||
%closeBtn{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
margin-right: 30px;
|
||||
color: $m-color-primary;
|
||||
opacity: 1;
|
||||
line-height: 74px;
|
||||
font-weight: normal;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
@include tablet{
|
||||
margin-right: 5px;
|
||||
}
|
||||
@include desktops{
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
124
msd2/myoos/themes/phoenix/scss/core/_typo-font-sizes.scss
Normal file
124
msd2/myoos/themes/phoenix/scss/core/_typo-font-sizes.scss
Normal file
@ -0,0 +1,124 @@
|
||||
/** Typography Font Size
|
||||
*************************************************** **/
|
||||
|
||||
.fs-5 {
|
||||
@include px-to-rem(font-size, 5px !important);
|
||||
}
|
||||
.fs-8 {
|
||||
@include px-to-rem(font-size, 8px !important);
|
||||
}
|
||||
.fs-9 {
|
||||
@include px-to-rem(font-size, 9px !important);
|
||||
}
|
||||
.fs-10 {
|
||||
@include px-to-rem(font-size, 10px !important);
|
||||
}
|
||||
.fs-11 {
|
||||
@include px-to-rem(font-size, 11px !important);
|
||||
}
|
||||
.fs-12 {
|
||||
@include px-to-rem(font-size, 12px !important);
|
||||
}
|
||||
.fs-13 {
|
||||
@include px-to-rem(font-size, 13px !important);
|
||||
}
|
||||
.fs-14 {
|
||||
@include px-to-rem(font-size, 14px !important);
|
||||
}
|
||||
.fs-15 {
|
||||
@include px-to-rem(font-size, 15px !important);
|
||||
}
|
||||
.fs-16 {
|
||||
@include px-to-rem(font-size, 16px !important);
|
||||
}
|
||||
.fs-17 {
|
||||
@include px-to-rem(font-size, 17px !important);
|
||||
}
|
||||
.fs-18 {
|
||||
@include px-to-rem(font-size, 18px !important);
|
||||
}
|
||||
.fs-20 {
|
||||
@include px-to-rem(font-size, 20px !important);
|
||||
}
|
||||
.fs-22 {
|
||||
@include px-to-rem(font-size, 22px !important);
|
||||
}
|
||||
.fs-23 {
|
||||
@include px-to-rem(font-size, 23px !important);
|
||||
}
|
||||
.fs-24 {
|
||||
@include px-to-rem(font-size, 24px !important);
|
||||
}
|
||||
.fs-25 {
|
||||
@include px-to-rem(font-size, 25px !important);
|
||||
}
|
||||
.fs-26 {
|
||||
@include px-to-rem(font-size, 26px !important);
|
||||
}
|
||||
.fs-27 {
|
||||
@include px-to-rem(font-size, 27px !important);
|
||||
}
|
||||
.fs-28 {
|
||||
@include px-to-rem(font-size, 28px !important);
|
||||
}
|
||||
.fs-30 {
|
||||
@include px-to-rem(font-size, 30px !important);
|
||||
}
|
||||
.fs-32 {
|
||||
@include px-to-rem(font-size, 32px !important);
|
||||
}
|
||||
.fs-33 {
|
||||
@include px-to-rem(font-size, 33px !important);
|
||||
}
|
||||
.fs-35 {
|
||||
@include px-to-rem(font-size, 35px !important);
|
||||
}
|
||||
.fs-36 {
|
||||
@include px-to-rem(font-size, 36px !important);
|
||||
}
|
||||
.fs-38 {
|
||||
@include px-to-rem(font-size, 38px !important);
|
||||
}
|
||||
.fs-40 {
|
||||
@include px-to-rem(font-size, 40px !important);
|
||||
}
|
||||
.fs-42 {
|
||||
@include px-to-rem(font-size, 42px !important);
|
||||
}
|
||||
.fs-45 {
|
||||
@include px-to-rem(font-size, 45px !important);
|
||||
}
|
||||
.fs-46 {
|
||||
@include px-to-rem(font-size, 46px !important);
|
||||
}
|
||||
.fs-48 {
|
||||
@include px-to-rem(font-size, 48px !important);
|
||||
}
|
||||
.fs-50 {
|
||||
@include px-to-rem(font-size, 50px !important);
|
||||
}
|
||||
.fs-55 {
|
||||
@include px-to-rem(font-size, 55px !important);
|
||||
}
|
||||
.fs-56 {
|
||||
@include px-to-rem(font-size, 56px !important);
|
||||
}
|
||||
.fs-60 {
|
||||
@include px-to-rem(font-size, 60px !important);
|
||||
}
|
||||
.fs-65 {
|
||||
@include px-to-rem(font-size, 65px !important);
|
||||
}
|
||||
.fs-70 {
|
||||
line-height: 70px;
|
||||
@include px-to-rem(font-size, 70px !important);
|
||||
}
|
||||
.fs-75 {
|
||||
@include px-to-rem(font-size, 75px !important);
|
||||
}
|
||||
.fs-76 {
|
||||
@include px-to-rem(font-size, 76px !important);
|
||||
}
|
||||
.fs-80 {
|
||||
@include px-to-rem(font-size, 80px !important);
|
||||
}
|
||||
1
msd2/myoos/themes/phoenix/scss/custom/_custom.scss
Normal file
1
msd2/myoos/themes/phoenix/scss/custom/_custom.scss
Normal file
@ -0,0 +1 @@
|
||||
/* Add here all your styles (customizations) */
|
||||
653
msd2/myoos/themes/phoenix/scss/globals/_bg-colors.scss
Normal file
653
msd2/myoos/themes/phoenix/scss/globals/_bg-colors.scss
Normal file
@ -0,0 +1,653 @@
|
||||
/*------------------------------------
|
||||
Background Colors
|
||||
------------------------------------*/
|
||||
/* Basic Colors
|
||||
------------------------------------*/
|
||||
/* Main Colors */
|
||||
.g-bg-main {
|
||||
background-color: $g-bg-color-main !important;
|
||||
}
|
||||
|
||||
/* Main Secondary */
|
||||
.g-bg-secondary {
|
||||
background-color: $g-bg-color-secondary !important;
|
||||
}
|
||||
|
||||
/* Primary Colors */
|
||||
.g-bg-primary {
|
||||
background-color: $g-color-primary !important;
|
||||
|
||||
// Hover
|
||||
&--hover:hover {
|
||||
background-color: $g-color-primary !important;
|
||||
}
|
||||
|
||||
.u-block-hover:hover &--hover {
|
||||
background-color: $g-color-primary;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
background-color: $g-color-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Active
|
||||
&--active {
|
||||
&.active,
|
||||
.active & {
|
||||
background-color: $g-color-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--parent-active {
|
||||
.g-parent.active & {
|
||||
background-color: $g-color-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
//Pseudo-elements background color
|
||||
&--before::before,
|
||||
&--after::after {
|
||||
background-color: $g-color-primary !important;
|
||||
}
|
||||
|
||||
// Primary dark
|
||||
&-dark {
|
||||
&-v1 {
|
||||
background-color: $g-color-primary-dark-v1 !important;
|
||||
}
|
||||
&-v2 {
|
||||
background-color: $g-color-primary-dark-v2 !important;
|
||||
}
|
||||
&-v3 {
|
||||
background-color: $g-color-primary-dark-v3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary opacity
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-primary, .1) !important;
|
||||
}
|
||||
&-0_2 {
|
||||
background-color: rgba($g-color-primary, .2) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($g-color-primary, .2) !important;
|
||||
}
|
||||
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .2) !important;
|
||||
}
|
||||
|
||||
&--active {
|
||||
.active & {
|
||||
background-color: rgba($g-color-primary, .2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--before::before,
|
||||
&--after::after {
|
||||
background-color: rgba($g-color-primary, .2) !important;
|
||||
}
|
||||
}
|
||||
&-0_3 {
|
||||
background-color: rgba($g-color-primary, .3) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($g-color-primary, .3) !important;
|
||||
}
|
||||
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .3) !important;
|
||||
}
|
||||
|
||||
&--active {
|
||||
.active & {
|
||||
background-color: rgba($g-color-primary, .3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--before::before,
|
||||
&--after::after {
|
||||
background-color: rgba($g-color-primary, .3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-0_4 {
|
||||
background-color: rgba($g-color-primary, .4) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($g-color-primary, .4) !important;
|
||||
}
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .4) !important;
|
||||
}
|
||||
&--after::after {
|
||||
background-color: rgba($g-color-primary, .4) !important;
|
||||
}
|
||||
}
|
||||
&-0_6 {
|
||||
background-color: rgba($g-color-primary, .6) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($g-color-primary, .6) !important;
|
||||
}
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .6) !important;
|
||||
}
|
||||
&--after::after {
|
||||
background-color: rgba($g-color-primary, .6) !important;
|
||||
}
|
||||
}
|
||||
&-0_8 {
|
||||
background-color: rgba($g-color-primary, .8) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($g-color-primary, .8) !important;
|
||||
}
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .8) !important;
|
||||
}
|
||||
|
||||
&--before,
|
||||
&--after {
|
||||
&::after {
|
||||
background-color: rgba($g-color-primary, .8) !important;
|
||||
}
|
||||
|
||||
&--hover:hover {
|
||||
&::after {
|
||||
background-color: rgba($g-color-primary, .8) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-0_9 {
|
||||
background-color: rgba($g-color-primary, .9) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($g-color-primary, .9) !important;
|
||||
}
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .9) !important;
|
||||
}
|
||||
|
||||
&--before,
|
||||
&--after {
|
||||
&::after {
|
||||
background-color: rgba($g-color-primary, .9) !important;
|
||||
}
|
||||
|
||||
&--hover:hover {
|
||||
&::after {
|
||||
background-color: rgba($g-color-primary, .9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Black Colors */
|
||||
.m-bg-black {
|
||||
background-color: $m-color-black !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $m-color-black !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: $m-color-black !important;
|
||||
}
|
||||
|
||||
// Black opacity
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($m-color-black, .1) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .1) !important;
|
||||
}
|
||||
}
|
||||
&-0_2 {
|
||||
background-color: rgba($m-color-black, .2) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .2) !important;
|
||||
}
|
||||
}
|
||||
&-0_3 {
|
||||
background-color: rgba($m-color-black, .3) !important;
|
||||
|
||||
&--hover {
|
||||
&:hover {
|
||||
background-color: rgba($m-color-black, .3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--after::after,
|
||||
&--before::before {
|
||||
background-color: rgba($m-color-black, .3) !important;
|
||||
}
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($m-color-black, .3) !important;
|
||||
}
|
||||
}
|
||||
&-0_4 {
|
||||
background-color: rgba($m-color-black, .4) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .4) !important;
|
||||
}
|
||||
}
|
||||
&-0_5 {
|
||||
background-color: rgba($m-color-black, .5) !important;
|
||||
|
||||
&--hover {
|
||||
&:hover {
|
||||
background-color: rgba($m-color-black, .5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .5) !important;
|
||||
}
|
||||
}
|
||||
&-0_6 {
|
||||
background-color: rgba($m-color-black, .6) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-black, .7) !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .6) !important;
|
||||
}
|
||||
}
|
||||
&-0_7 {
|
||||
background-color: rgba($m-color-black, .7) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-black, .7) !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .7) !important;
|
||||
}
|
||||
}
|
||||
&-0_8 {
|
||||
background-color: rgba($m-color-black, .8) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .8) !important;
|
||||
}
|
||||
|
||||
&--hover {
|
||||
&:hover {
|
||||
background-color: rgba($m-color-black, .8) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-0_9 {
|
||||
background-color: rgba($m-color-black, .9) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-black, .9) !important;
|
||||
}
|
||||
|
||||
&--hover {
|
||||
&:hover {
|
||||
background-color: rgba($m-color-black, .9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* White Colors */
|
||||
.m-bg-white {
|
||||
background-color: $m-color-white !important;
|
||||
|
||||
//Pseudo-elements background color
|
||||
&--before::before,
|
||||
&--after::after {
|
||||
background-color: $m-color-white !important;
|
||||
}
|
||||
|
||||
&--hover:hover,
|
||||
&--active.active {
|
||||
background-color: $m-color-white !important;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
background-color: $m-color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
//Pseudo-elements background color
|
||||
&--before::before,
|
||||
&--after::after {
|
||||
background-color: $m-color-white !important;
|
||||
}
|
||||
|
||||
// White opacity
|
||||
&-opacity {
|
||||
&-0--after {
|
||||
&--parent-hover::after {
|
||||
.g-parent:hover & {
|
||||
background-color: rgba($m-color-white, 0) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-0_05 {
|
||||
background-color: rgba($m-color-white, .05) !important;
|
||||
}
|
||||
&-0_1 {
|
||||
background-color: rgba($m-color-white, .1) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-white, .1) !important;
|
||||
}
|
||||
}
|
||||
&-0_2 {
|
||||
background-color: rgba($m-color-white, .2) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-white, .2) !important;
|
||||
}
|
||||
}
|
||||
&-0_3 {
|
||||
background-color: rgba($m-color-white, .3) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-white, .3) !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-white, .3) !important;
|
||||
}
|
||||
}
|
||||
&-0_4 {
|
||||
background-color: rgba($m-color-white, .4) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-white, .4) !important;
|
||||
}
|
||||
}
|
||||
&-0_5 {
|
||||
background-color: rgba($m-color-white, .5) !important;
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-white, .5) !important;
|
||||
}
|
||||
}
|
||||
&-0_7 {
|
||||
background-color: rgba($m-color-white, .7) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-white, .7) !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-white, .7) !important;
|
||||
}
|
||||
}
|
||||
&-0_8 {
|
||||
background-color: rgba($m-color-white, .8) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-white, .8) !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-white, .8) !important;
|
||||
}
|
||||
|
||||
&--hover--after:hover::after {
|
||||
background-color: rgba($g-color-primary, .8) !important;
|
||||
}
|
||||
}
|
||||
&-0_9 {
|
||||
background-color: rgba($m-color-white, .9) !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: rgba($m-color-white, .9) !important;
|
||||
}
|
||||
|
||||
&--after::after {
|
||||
background-color: rgba($m-color-white, .9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Gray Colors */
|
||||
.g-bg-gray {
|
||||
// Dark Gray
|
||||
&-dark {
|
||||
&-v1 {
|
||||
background-color: $g-color-gray-dark-v1 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-dark-v1 !important;
|
||||
}
|
||||
}
|
||||
&-v2 {
|
||||
background-color: $g-color-gray-dark-v2 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-dark-v2 !important;
|
||||
}
|
||||
}
|
||||
&-v3 {
|
||||
background-color: $g-color-gray-dark-v3 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-dark-v3 !important;
|
||||
}
|
||||
}
|
||||
&-v4 {
|
||||
background-color: $g-color-gray-dark-v4 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-dark-v4 !important;
|
||||
}
|
||||
}
|
||||
&-v5 {
|
||||
background-color: $g-color-gray-dark-v5 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-dark-v5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light Gray
|
||||
&-light {
|
||||
&-v1 {
|
||||
background-color: $g-color-gray-light-v1 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-light-v1 !important;
|
||||
}
|
||||
}
|
||||
&-v2 {
|
||||
background-color: $g-color-gray-light-v2 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-light-v2 !important;
|
||||
}
|
||||
}
|
||||
&-v3 {
|
||||
background-color: $g-color-gray-light-v3 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-light-v3 !important;
|
||||
}
|
||||
}
|
||||
&-v4 {
|
||||
background-color: $g-color-gray-light-v4 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-light-v4 !important;
|
||||
}
|
||||
}
|
||||
&-v5 {
|
||||
background-color: $g-color-gray-light-v5 !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-gray-light-v5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Transparent */
|
||||
.g-bg-transparent {
|
||||
background-color: transparent !important;
|
||||
|
||||
&--hover:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&--hover--after:hover::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Complementary Colors
|
||||
------------------------------------*/
|
||||
/* Beige Colors */
|
||||
.g-bg-beige {
|
||||
background-color: $g-color-beige !important;
|
||||
}
|
||||
|
||||
/* Color Green */
|
||||
.g-bg-green {
|
||||
background-color: $g-color-green !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-green, .1) !important; // R
|
||||
}
|
||||
}
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-green !important; // J
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Blue */
|
||||
.g-bg-blue {
|
||||
background-color: $g-color-blue !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-blue, .1) !important; // R
|
||||
}
|
||||
&-0_7 {
|
||||
background-color: rgba($g-color-blue, .7) !important; // J
|
||||
}
|
||||
&-0_9 {
|
||||
background-color: rgba($g-color-blue, .9) !important; // Z
|
||||
}
|
||||
}
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-blue !important; // J
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Light Blue */
|
||||
.g-bg-lightblue {
|
||||
background-color: $g-color-lightblue !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-lightblue, .1) !important; // R
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-bg-lightblue-v1 {
|
||||
background-color: $g-color-lightblue-v1 !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-lightblue-v1, .1) !important; // R
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Dark Blue */
|
||||
.g-bg-darkblue {
|
||||
background-color: $g-color-darkblue !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-darkblue, .1) !important; // R
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Indigo */
|
||||
.g-bg-indigo {
|
||||
background-color: $g-color-indigo !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-indigo, .1) !important; // R
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Red */
|
||||
.g-bg-red {
|
||||
background-color: $g-color-red !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-red, .1) !important; // R
|
||||
}
|
||||
&-0_2 {
|
||||
background-color: rgba($g-color-red, .2) !important; // O
|
||||
}
|
||||
&-0_5 {
|
||||
background-color: rgba($g-color-red, .5) !important; // J
|
||||
}
|
||||
&-0_8 {
|
||||
background-color: rgba($g-color-red, .8) !important; // P
|
||||
}
|
||||
}
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-red !important; // J
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Light Red */
|
||||
.g-bg-lightred {
|
||||
background-color: $g-color-lightred !important;
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
background-color: rgba($g-color-lightred, .1) !important; // R
|
||||
}
|
||||
}
|
||||
|
||||
&--hover:hover {
|
||||
background-color: $g-color-lightred !important; // Z
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
551
msd2/myoos/themes/phoenix/scss/globals/_colors.scss
Normal file
551
msd2/myoos/themes/phoenix/scss/globals/_colors.scss
Normal file
@ -0,0 +1,551 @@
|
||||
/*------------------------------------
|
||||
Colors
|
||||
------------------------------------*/
|
||||
/* Basic Colors
|
||||
------------------------------------*/
|
||||
/* Inherit Colors */
|
||||
.g-color-inherit {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Main Colors */
|
||||
.g-color-main {
|
||||
color: $m-color-main !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $m-color-main !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Primary Colors */
|
||||
.g-color-primary {
|
||||
color: $g-color-primary !important;
|
||||
|
||||
.u-block-hover:hover &--hover,
|
||||
&--hover:hover {
|
||||
color: $g-color-primary !important;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
color: $g-color-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-opacity {
|
||||
&-0_3 {
|
||||
color: rgba($g-color-primary, .3) !important;
|
||||
}
|
||||
|
||||
&-0_4 {
|
||||
color: rgba($g-color-primary, .4) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//Pseudo-elements color // Z
|
||||
&--before::before,
|
||||
&--after::after {
|
||||
color: $g-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* Black Colors */
|
||||
.m-color-black {
|
||||
color: $m-color-black !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $m-color-black !important;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
color: $m-color-black !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
color: rgba($m-color-black, .1) !important;
|
||||
}
|
||||
&-0_3 {
|
||||
color: rgba($m-color-black, .3) !important;
|
||||
}
|
||||
&-0_5 {
|
||||
color: rgba($m-color-black, .5) !important;
|
||||
}
|
||||
&-0_6 {
|
||||
color: rgba($m-color-black, .6) !important;
|
||||
}
|
||||
&-0_7 {
|
||||
color: rgba($m-color-black, .7) !important;
|
||||
}
|
||||
&-0_8 {
|
||||
color: rgba($m-color-black, .8) !important;
|
||||
|
||||
&--child {
|
||||
* {
|
||||
color: rgba($m-color-black, .8) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-0_9 {
|
||||
color: rgba($m-color-black, .9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* White Colors */
|
||||
.m-color-white {
|
||||
color: $m-color-white !important;
|
||||
|
||||
.u-block-hover:hover &--hover,
|
||||
&--hover:hover {
|
||||
color: $m-color-white !important;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
color: $m-color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
.active & {
|
||||
color: $m-color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--child {
|
||||
* {
|
||||
color: $m-color-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-opacity {
|
||||
&-0_1 {
|
||||
color: rgba($m-color-white, .1) !important;
|
||||
}
|
||||
&-0_2 {
|
||||
color: rgba($m-color-white, .2) !important;
|
||||
}
|
||||
&-0_3 {
|
||||
color: rgba($m-color-white, .3) !important;
|
||||
}
|
||||
&-0_5,
|
||||
&-0_5--hover:hover {
|
||||
color: rgba($m-color-white, .5) !important;
|
||||
}
|
||||
&-0_6 {
|
||||
color: rgba($m-color-white, .6) !important;
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
color: rgba($m-color-white, .6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-0_7,
|
||||
&-0_7--hover:hover {
|
||||
color: rgba($m-color-white, .7) !important;
|
||||
}
|
||||
&-0_75 {
|
||||
color: rgba($m-color-white, .75) !important;
|
||||
}
|
||||
&-0_8 {
|
||||
color: rgba($m-color-white, .8) !important;
|
||||
|
||||
&--child {
|
||||
* {
|
||||
color: rgba($m-color-white, .8) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-0_9,
|
||||
&-0_9--hover:hover {
|
||||
color: rgba($m-color-white, .9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Gray Colors */
|
||||
.g-color-gray {
|
||||
// Gray Light
|
||||
&-light {
|
||||
&-v1 {
|
||||
color: $g-color-gray-light-v1 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-light-v1 !important;
|
||||
}
|
||||
}
|
||||
&-v2 {
|
||||
color: $g-color-gray-light-v2 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-light-v2 !important;
|
||||
}
|
||||
}
|
||||
&-v3 {
|
||||
color: $g-color-gray-light-v3 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-light-v3 !important;
|
||||
}
|
||||
}
|
||||
&-v4 {
|
||||
color: $g-color-gray-light-v4 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-light-v4 !important;
|
||||
}
|
||||
|
||||
&-opacity {
|
||||
&-0_6 {
|
||||
color: rgba($g-color-gray-light-v4, .6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-v5 {
|
||||
color: $g-color-gray-light-v5 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-light-v5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gray Dark
|
||||
&-dark {
|
||||
&-v1 {
|
||||
color: $g-color-gray-dark-v1 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-dark-v1 !important;
|
||||
}
|
||||
}
|
||||
&-v2 {
|
||||
color: $g-color-gray-dark-v2 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-dark-v2 !important;
|
||||
}
|
||||
|
||||
&-opacity {
|
||||
&-0_75 {
|
||||
color: rgba($g-color-gray-dark-v2, .75) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-v3 {
|
||||
color: $g-color-gray-dark-v3 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-dark-v3 !important;
|
||||
}
|
||||
}
|
||||
&-v4 {
|
||||
color: $g-color-gray-dark-v4 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-dark-v4 !important;
|
||||
}
|
||||
}
|
||||
&-v5 {
|
||||
color: $g-color-gray-dark-v5 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-gray-dark-v5 !important;
|
||||
}
|
||||
|
||||
&--parent-hover {
|
||||
.g-parent:hover & {
|
||||
color: $g-color-gray-dark-v5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Complementary Colors
|
||||
------------------------------------*/
|
||||
/* Color Green */
|
||||
.g-color-green {
|
||||
color: $g-color-green !important;
|
||||
}
|
||||
|
||||
/* Color Blue */
|
||||
.g-color-blue {
|
||||
color: $g-color-blue !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-blue !important;
|
||||
}
|
||||
|
||||
&-dark-v1 {
|
||||
color: $g-color-blue-dark-v1 !important; // Z
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Light Blue */
|
||||
.g-color-lightblue {
|
||||
color: $g-color-lightblue !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-lightblue !important;
|
||||
}
|
||||
}
|
||||
|
||||
.g-color-lightblue-v1 {
|
||||
color: $g-color-lightblue-v1 !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-lightblue-v1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Dark Blue */
|
||||
.g-color-darkblue {
|
||||
color: $g-color-darkblue !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-darkblue !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Indigo */
|
||||
.g-color-indigo {
|
||||
color: $g-color-indigo !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-indigo !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Red */
|
||||
.g-color-red {
|
||||
color: $g-color-red !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-red !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Light Red */
|
||||
.g-color-lightred {
|
||||
color: $g-color-lightred !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-lightred !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Dark Red */
|
||||
.g-color-darkred {
|
||||
color: $g-color-darkred !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-darkred !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Purple */
|
||||
.g-color-purple {
|
||||
color: $g-color-purple;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-purple !important;
|
||||
}
|
||||
|
||||
&-dark-v1 {
|
||||
color: $g-color-purple-dark-v1 !important; // Z
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Dark Purple */
|
||||
.g-color-darkpurple {
|
||||
color: $g-color-darkpurple !important;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-darkpurple !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color Pink */
|
||||
.g-color-pink {
|
||||
color: $g-color-pink;
|
||||
|
||||
&--hover:hover {
|
||||
color: $g-color-pink !important;
|
||||
}
|
||||
|
||||
&-dark-v1 {
|
||||
color: $g-color-pink-dark-v1 !important; // Z
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::selection {
|
||||
background: $m-color-primary;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: $m-color-primary; /* Firefox */
|
||||
}
|
||||
::-webkit-selection {
|
||||
background: $m-color-primary; /* Safari */
|
||||
}
|
||||
|
||||
|
||||
a,
|
||||
a:focus:not(.btn),
|
||||
section.dark a,
|
||||
#slidetop a:hover,
|
||||
h1 > span,
|
||||
h2 > span,
|
||||
h3 > span,
|
||||
h4 > span,
|
||||
h5 > span,
|
||||
h6 > span,
|
||||
.pagination>li>a,
|
||||
.pagination>li>a:hover,
|
||||
.pagination>li>span,
|
||||
.page-link >a,
|
||||
.page-link >a:hover,
|
||||
.page-link >span,
|
||||
ul.list-links>li>a:hover,
|
||||
#sidepanel ul li a[data-toggle="collapse"],
|
||||
#sidepanel ul li a[data-toggle="collapse"]:hover,
|
||||
#sidepanel ul li a:hover,
|
||||
.menu-list ul li a:hover,
|
||||
.menu-list ul li.active a,
|
||||
#menu_overlay_close:hover,
|
||||
#topMain.nav-pills>li.active>a>span.topMain-icon,
|
||||
#page-menu.page-menu-light ul>li:hover>a>i,
|
||||
#page-menu.page-menu-dark ul>li:hover>a>i,
|
||||
#page-menu.page-menu-transparent ul>li:hover>a>i,
|
||||
#page-menu.page-menu-light ul>li.active>a>i,
|
||||
#page-menu.page-menu-dark ul>li.active>a>i,
|
||||
#page-menu.page-menu-transparent ul>li.active>a>i,
|
||||
.tp-caption.block_white,
|
||||
section span.theme-color,
|
||||
section em.theme-color,
|
||||
section i.theme-color,
|
||||
section b.theme-color,
|
||||
section div.theme-color,
|
||||
section p.theme-color,
|
||||
.owl-carousel.featured a.figure>span>i,
|
||||
.owl-carousel.featured a:hover,
|
||||
figure.zoom>a.lightbox:hover,
|
||||
.tab-post a:hover,
|
||||
.tag:hover>span.txt,
|
||||
section.dark .tag:hover>span.txt,
|
||||
ul.widget-twitter li>small>a:hover,
|
||||
.item-box .item-hover .inner .ico-rounded:hover>span,
|
||||
ul.side-nav>li:hover>a,
|
||||
ul.side-nav>li a:hover,
|
||||
ul.side-nav>li.active>a,
|
||||
a.href-reset:hover,
|
||||
a.href-reset.active,
|
||||
.href-reset a.active,
|
||||
.href-reset a:hover,
|
||||
.href-reset a.active,
|
||||
.price-clean-popular h4,
|
||||
.box-icon.box-icon-color i,
|
||||
.switch-primary.switch-round > input:checked + .switch-label:after,
|
||||
section.dark .nav-tabs.nav-clean>li>a.active {
|
||||
color: $m-color-primary;
|
||||
}
|
||||
|
||||
#sidepanel.sidepanel-theme-color,
|
||||
div.alert.alert-theme-color,
|
||||
div.alert.alert-primary,
|
||||
span.badge-default,
|
||||
span.badge-default,
|
||||
.list-group-item.active>.badge.badge-default,
|
||||
.nav-tabs.nav-alternate>li>a.active,
|
||||
.datepicker table tr td.active.active,
|
||||
.callout-theme-color,
|
||||
.progress-bar-primary,
|
||||
.toast-primary,
|
||||
.owl-theme .owl-controls .owl-page span,
|
||||
.open>.dropdown-toggle.btn-primary,
|
||||
.show>.btn-primary.dropdown-toggle,
|
||||
.btn-primary,
|
||||
.btn-primary:hover,
|
||||
.btn-primary:active,
|
||||
.btn-primary:focus,
|
||||
.pagination>.active>a,
|
||||
.pagination>.active>a:hover,
|
||||
#header li.quick-cart .quick-cart-box a.btn,
|
||||
#topMain.nav-pills>li.active>a>span.theme-color ,
|
||||
.ei-slider-thumbs li.ei-slider-element,
|
||||
.flex-control-paging li a.flex-active,
|
||||
.tp-caption.block_theme_color,
|
||||
.tp-bullets.simplebullets.round .bullet.selected,
|
||||
i.ico-color,
|
||||
.caption-primary,
|
||||
.shop-list-options .btn.active,
|
||||
.box-static.box-color,
|
||||
.switch.switch-primary > input:checked + .switch-label,
|
||||
.fancy-file-upload.fancy-file-primary>span.button,
|
||||
.primary-slider .ui-slider .ui-slider-handle:before,
|
||||
.primary-slider .ui-slider .ui-slider-range,
|
||||
.ribbon-inner,
|
||||
.info-bar.info-bar-color,
|
||||
.inews-item .inews-thumbnail .inews-sticky,
|
||||
#progressBar #bar,
|
||||
#page-menu,
|
||||
#page-menu ul {
|
||||
background-color:$m-color-primary;
|
||||
}
|
||||
|
||||
.inews-content-inner h3>a,
|
||||
div.side-nav ul>li:hover>a,
|
||||
div.side-nav ul>li.active>a,
|
||||
.pagination.pagination-simple>li.active>a,
|
||||
div.side-nav ul.list-group-bordered>li>a:hover,
|
||||
section .theme-color {
|
||||
color:$m-color-primary !important;
|
||||
}
|
||||
|
||||
.primary-slider .ui-slider .ui-slider-handle,
|
||||
.switch.switch-primary > input:checked + .switch-label,
|
||||
.timeline_center li h3:before,
|
||||
.timeline_center:after,
|
||||
a.thumbnail.active,
|
||||
a.thumbnail:hover,
|
||||
.hvr-reveal:before,
|
||||
.btn-primary,
|
||||
.btn-primary:hover,
|
||||
.btn-primary:active,
|
||||
.btn-primary:focus {
|
||||
border-color:$m-color-primary;
|
||||
}
|
||||
|
||||
.open>.dropdown-toggle.btn-primary,
|
||||
.show>.btn-primary.dropdown-toggle,
|
||||
.btn-primary,
|
||||
.btn-primary:active,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:hover
|
||||
.pagination>.active>a,
|
||||
.pagination>.active>a:hover {
|
||||
border-color: $m-color-primary;
|
||||
}
|
||||
|
||||
|
||||
section.featured-grid div.row>div .ribbon:before,
|
||||
.modal-content {
|
||||
border-top-color:$m-color-primary;
|
||||
}
|
||||
|
||||
|
||||
.page-item.active .page-link {
|
||||
background-color:$m-color-primary;
|
||||
border-color: $m-color-primary;
|
||||
}
|
||||
|
||||
.page-link >a:focus {
|
||||
z-index: 2;
|
||||
outline: $m-color-primary-light-v2;
|
||||
box-shadow: $m-color-primary-light-v1;
|
||||
}
|
||||
80
msd2/myoos/themes/phoenix/scss/globals/_margin.scss
Normal file
80
msd2/myoos/themes/phoenix/scss/globals/_margin.scss
Normal file
@ -0,0 +1,80 @@
|
||||
/** Margins
|
||||
*************************************************** **/
|
||||
|
||||
/* Margin Top */
|
||||
$i: 1;
|
||||
@while $i < 11 {
|
||||
.mt-#{$i} {
|
||||
@include px-to-rem(margin-top, $i*1px !important);
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 10;
|
||||
@while $i < 80 {
|
||||
.mt-#{$i} {
|
||||
@include px-to-rem(margin-top, $i*1px !important);
|
||||
}
|
||||
$i: $i + 10;
|
||||
}
|
||||
|
||||
.mt-60 {
|
||||
margin-top: 60px !important;
|
||||
}
|
||||
|
||||
/* Margin Bottom */
|
||||
$i: 1;
|
||||
@while $i < 21 {
|
||||
.mb-#{$i} {
|
||||
@include px-to-rem(margin-bottom, $i*1px !important);
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 10;
|
||||
@while $i < 171 {
|
||||
.mb-#{$i} {
|
||||
@include px-to-rem(margin-bottom, $i*1px !important);
|
||||
}
|
||||
$i: $i + 5;
|
||||
}
|
||||
|
||||
/* Margin Left */
|
||||
$i: 1;
|
||||
@while $i < 11 {
|
||||
.m-ml-#{$i} {
|
||||
@include px-to-rem(margin-left, $i*1px !important);
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 5;
|
||||
@while $i < 51 {
|
||||
.m-ml-#{$i} {
|
||||
@include px-to-rem(margin-left, $i*1px !important);
|
||||
}
|
||||
$i: $i + 5;
|
||||
}
|
||||
|
||||
/* Margin Right */
|
||||
$i: 1;
|
||||
@while $i < 11 {
|
||||
.mr-#{$i} {
|
||||
@include px-to-rem(margin-right, $i*1px !important);
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 5;
|
||||
@while $i < 51 {
|
||||
.mr-#{$i} {
|
||||
@include px-to-rem(margin-right, $i*1px !important);
|
||||
}
|
||||
$i: $i + 5;
|
||||
}
|
||||
|
||||
/* Margin X */
|
||||
$i: 1;
|
||||
@while $i < 11 {
|
||||
.mx-#{$i} {
|
||||
@include px-to-rem(margin-left, $i*1px !important);
|
||||
@include px-to-rem(margin-right, $i*1px !important);
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
680
msd2/myoos/themes/phoenix/scss/globals/_paddings.scss
Normal file
680
msd2/myoos/themes/phoenix/scss/globals/_paddings.scss
Normal file
@ -0,0 +1,680 @@
|
||||
//
|
||||
// Paddings
|
||||
//
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 3px !important;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.pb-5 {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.pb-7 {
|
||||
padding-bottom: 7px !important;
|
||||
}
|
||||
|
||||
.pb-8 {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.pb-9 {
|
||||
padding-bottom: 9px !important;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.pb-12 {
|
||||
padding-bottom: 12px !important;
|
||||
}
|
||||
|
||||
.pb-15 {
|
||||
padding-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.pb-18 {
|
||||
padding-bottom: 18px !important;
|
||||
}
|
||||
|
||||
.pb-20 {
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.pb-25 {
|
||||
padding-bottom: 25px !important;
|
||||
}
|
||||
|
||||
.pb-30 {
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.pb-35 {
|
||||
padding-bottom: 35px !important;
|
||||
}
|
||||
|
||||
.pb-40 {
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.pb-45 {
|
||||
padding-bottom: 45px !important;
|
||||
}
|
||||
|
||||
.pb-50 {
|
||||
padding-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.pb-60 {
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
|
||||
.pb-70 {
|
||||
padding-bottom: 70px !important;
|
||||
}
|
||||
|
||||
.pb-80 {
|
||||
padding-bottom: 80px !important;
|
||||
}
|
||||
|
||||
.pb-90 {
|
||||
padding-bottom: 90px !important;
|
||||
}
|
||||
|
||||
.pb-100 {
|
||||
padding-bottom: 100px !important;
|
||||
}
|
||||
|
||||
.pb-110 {
|
||||
padding-bottom: 110px !important;
|
||||
}
|
||||
|
||||
.pb-120 {
|
||||
padding-bottom: 120px !important;
|
||||
}
|
||||
|
||||
.pb-130 {
|
||||
padding-bottom: 130px !important;
|
||||
}
|
||||
|
||||
.pb-140 {
|
||||
padding-bottom: 140px !important;
|
||||
}
|
||||
|
||||
.pb-150 {
|
||||
padding-bottom: 150px !important;
|
||||
}
|
||||
|
||||
.pb-180 {
|
||||
padding-bottom: 180px !important;
|
||||
}
|
||||
|
||||
.pb-200 {
|
||||
padding-bottom: 200px !important;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 2px !important;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: 3px !important;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
|
||||
.pt-6 {
|
||||
padding-top: 6px !important;
|
||||
}
|
||||
|
||||
.pt-7 {
|
||||
padding-top: 7px !important;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 8px !important;
|
||||
}
|
||||
|
||||
.pt-9 {
|
||||
padding-top: 9px !important;
|
||||
}
|
||||
|
||||
.pt-10 {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.pt-12 {
|
||||
padding-top: 12px !important;
|
||||
}
|
||||
|
||||
.pt-15 {
|
||||
padding-top: 15px !important;
|
||||
}
|
||||
|
||||
.pt-18 {
|
||||
padding-top: 18px !important;
|
||||
}
|
||||
|
||||
.pt-20 {
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
.pt-25 {
|
||||
padding-top: 25px !important;
|
||||
}
|
||||
|
||||
.pt-30 {
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
|
||||
.pt-35 {
|
||||
padding-top: 35px !important;
|
||||
}
|
||||
|
||||
.pt-40 {
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
.pt-45 {
|
||||
padding-top: 45px !important;
|
||||
}
|
||||
|
||||
.pt-50 {
|
||||
padding-top: 50px !important;
|
||||
}
|
||||
|
||||
.pt-60 {
|
||||
padding-top: 60px !important;
|
||||
}
|
||||
|
||||
.pt-70 {
|
||||
padding-top: 70px !important;
|
||||
}
|
||||
|
||||
.pt-80 {
|
||||
padding-top: 80px !important;
|
||||
}
|
||||
|
||||
.pt-90 {
|
||||
padding-top: 90px !important;
|
||||
}
|
||||
|
||||
.pt-100 {
|
||||
padding-top: 100px !important;
|
||||
}
|
||||
|
||||
.pt-110 {
|
||||
padding-top: 110px !important;
|
||||
}
|
||||
|
||||
.pt-120 {
|
||||
padding-top: 120px !important;
|
||||
}
|
||||
|
||||
.pt-130 {
|
||||
padding-top: 130px !important;
|
||||
}
|
||||
|
||||
.pt-140 {
|
||||
padding-top: 140px !important;
|
||||
}
|
||||
|
||||
.pt-150 {
|
||||
padding-top: 150px !important;
|
||||
}
|
||||
|
||||
.pt-200 {
|
||||
padding-top: 200px !important;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: 1px !important;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 2px !important;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 4px !important;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
.pl-6 {
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
|
||||
.pl-7 {
|
||||
padding-left: 7px !important;
|
||||
}
|
||||
|
||||
.pl-8 {
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
|
||||
.pl-9 {
|
||||
padding-left: 9px !important;
|
||||
}
|
||||
|
||||
.pl-10 {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
.pl-12 {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
|
||||
.pl-15 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
|
||||
.pl-18 {
|
||||
padding-left: 18px !important;
|
||||
}
|
||||
|
||||
.pl-20 {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
.pl-25 {
|
||||
padding-left: 25px !important;
|
||||
}
|
||||
|
||||
.pl-30 {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
.pl-35 {
|
||||
padding-left: 35px !important;
|
||||
}
|
||||
|
||||
.pl-40 {
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
|
||||
.pl-45 {
|
||||
padding-left: 45px !important;
|
||||
}
|
||||
|
||||
.pl-50 {
|
||||
padding-left: 50px !important;
|
||||
}
|
||||
|
||||
.pl-60 {
|
||||
padding-left: 60px !important;
|
||||
}
|
||||
|
||||
.pl-70 {
|
||||
padding-left: 70px !important;
|
||||
}
|
||||
|
||||
.pl-80 {
|
||||
padding-left: 80px !important;
|
||||
}
|
||||
|
||||
.pl-90 {
|
||||
padding-left: 90px !important;
|
||||
}
|
||||
|
||||
.pl-100 {
|
||||
padding-left: 100px !important;
|
||||
}
|
||||
|
||||
.pl-110 {
|
||||
padding-left: 110px !important;
|
||||
}
|
||||
|
||||
.pl-120 {
|
||||
padding-left: 120px !important;
|
||||
}
|
||||
|
||||
.pl-130 {
|
||||
padding-left: 130px !important;
|
||||
}
|
||||
|
||||
.pl-140 {
|
||||
padding-left: 140px !important;
|
||||
}
|
||||
|
||||
.pl-150 {
|
||||
padding-left: 150px !important;
|
||||
}
|
||||
|
||||
.pl-200 {
|
||||
padding-left: 200px !important;
|
||||
}
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: 1px !important;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
|
||||
.pr-3 {
|
||||
padding-right: 3px !important;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-right: 4px !important;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
||||
.pr-6 {
|
||||
padding-right: 6px !important;
|
||||
}
|
||||
|
||||
.pr-7 {
|
||||
padding-right: 7px !important;
|
||||
}
|
||||
|
||||
.pr-8 {
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
|
||||
.pr-9 {
|
||||
padding-right: 9px !important;
|
||||
}
|
||||
|
||||
.pr-10 {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.pr-12 {
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
.pr-15 {
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
|
||||
.pr-18 {
|
||||
padding-right: 18px !important;
|
||||
}
|
||||
|
||||
.pr-20 {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.pr-25 {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.pr-30 {
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
.pr-35 {
|
||||
padding-right: 35px !important;
|
||||
}
|
||||
|
||||
.pr-40 {
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
|
||||
.pr-45 {
|
||||
padding-right: 45px !important;
|
||||
}
|
||||
|
||||
.pr-50 {
|
||||
padding-right: 50px !important;
|
||||
}
|
||||
|
||||
.pr-60 {
|
||||
padding-right: 60px !important;
|
||||
}
|
||||
|
||||
.pr-70 {
|
||||
padding-right: 70px !important;
|
||||
}
|
||||
|
||||
.pr-80 {
|
||||
padding-right: 80px !important;
|
||||
}
|
||||
|
||||
.pr-90 {
|
||||
padding-right: 90px !important;
|
||||
}
|
||||
|
||||
.pr-100 {
|
||||
padding-right: 100px !important;
|
||||
}
|
||||
|
||||
.pr-110 {
|
||||
padding-right: 110px !important;
|
||||
}
|
||||
|
||||
.pr-120 {
|
||||
padding-right: 120px !important;
|
||||
}
|
||||
|
||||
.pr-130 {
|
||||
padding-right: 130px !important;
|
||||
}
|
||||
|
||||
.pr-140 {
|
||||
padding-right: 140px !important;
|
||||
}
|
||||
|
||||
.pr-150 {
|
||||
padding-right: 150px !important;
|
||||
}
|
||||
|
||||
.pr-200 {
|
||||
padding-right: 200px !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 2px !important;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 3px !important;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.p-6 {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
.p-7 {
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.p-8 {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.p-9 {
|
||||
padding: 9px !important;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.p-12 {
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.p-15 {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.p-18 {
|
||||
padding: 18px !important;
|
||||
}
|
||||
|
||||
.p-20 {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.p-25 {
|
||||
padding: 25px !important;
|
||||
}
|
||||
|
||||
.p-30 {
|
||||
padding: 30px !important;
|
||||
}
|
||||
|
||||
.p-35 {
|
||||
padding: 35px !important;
|
||||
}
|
||||
|
||||
.p-40 {
|
||||
padding: 40px !important;
|
||||
}
|
||||
|
||||
.p-45 {
|
||||
padding: 45px !important;
|
||||
}
|
||||
|
||||
.p-50 {
|
||||
padding: 50px !important;
|
||||
}
|
||||
|
||||
.p-60 {
|
||||
padding: 60px !important;
|
||||
}
|
||||
|
||||
.p-70 {
|
||||
padding: 70px !important;
|
||||
}
|
||||
|
||||
.p-80 {
|
||||
padding: 80px !important;
|
||||
}
|
||||
|
||||
.p-90 {
|
||||
padding: 90px !important;
|
||||
}
|
||||
|
||||
.p-100 {
|
||||
padding: 100px !important;
|
||||
}
|
||||
|
||||
.p-110 {
|
||||
padding: 110px !important;
|
||||
}
|
||||
|
||||
.p-120 {
|
||||
padding: 120px !important;
|
||||
}
|
||||
|
||||
.p-130 {
|
||||
padding: 130px !important;
|
||||
}
|
||||
|
||||
.p-140 {
|
||||
padding: 140px !important;
|
||||
}
|
||||
|
||||
.p-150 {
|
||||
padding: 150px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* P */
|
||||
.m-py-10 {
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
/* P */
|
||||
.m-py-15 {
|
||||
padding-top: 15px !important;
|
||||
padding-bottom: 15px !important;
|
||||
}
|
||||
/* P */
|
||||
.m-py-20 {
|
||||
padding-top: 20px !important;
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
/* P */
|
||||
.m-py-25 {
|
||||
padding-top: 25px !important;
|
||||
padding-bottom: 25px !important;
|
||||
}
|
||||
/* P */
|
||||
.m-py-60 {
|
||||
padding-top: 60px !important;
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
.m-py-80 {
|
||||
padding-top: 80px !important;
|
||||
padding-bottom: 80px !important;
|
||||
}
|
||||
.m-py-100 {
|
||||
padding-top: 100px !important;
|
||||
padding-bottom: 100px !important;
|
||||
}
|
||||
|
||||
15
msd2/myoos/themes/phoenix/scss/layout/_403.scss
Normal file
15
msd2/myoos/themes/phoenix/scss/layout/_403.scss
Normal file
@ -0,0 +1,15 @@
|
||||
/** Error 403
|
||||
**************************************************************** **/
|
||||
|
||||
.error-403 {
|
||||
content: '403';
|
||||
@include px-to-rem( font-size, 200px);
|
||||
@include px-to-rem( line-height, 200px);
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
56
msd2/myoos/themes/phoenix/scss/layout/_404.scss
Normal file
56
msd2/myoos/themes/phoenix/scss/layout/_404.scss
Normal file
@ -0,0 +1,56 @@
|
||||
/** Error 404
|
||||
**************************************************************** **/
|
||||
|
||||
.error-404 {
|
||||
content: '404';
|
||||
@include px-to-rem( font-size, 200px);
|
||||
@include px-to-rem( line-height, 200px);
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Inline Search */
|
||||
.inline-search {
|
||||
@include px-to-rem(margin-top, 60px);
|
||||
display: block;
|
||||
position: relative;
|
||||
flex: none;
|
||||
form {
|
||||
input.serch-input {
|
||||
background: #fff;
|
||||
border: #e3e3e3 1px solid;
|
||||
color: #aaa;
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
height: 39px;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
padding: 5px 50px 5px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border-left: #e3e3e3 1px solid;
|
||||
font-size: 17px;
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
vertical-align: bottom;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 482px) {
|
||||
.inline-search {
|
||||
@include px-to-rem(margin-top, 20px);
|
||||
}
|
||||
}
|
||||
141
msd2/myoos/themes/phoenix/scss/layout/_home.scss
Normal file
141
msd2/myoos/themes/phoenix/scss/layout/_home.scss
Normal file
@ -0,0 +1,141 @@
|
||||
.masking-hover{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($m-color-primary, .9);
|
||||
opacity: 0;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
}
|
||||
.content-center{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform(translate(-50%, -50%));
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
&.active {
|
||||
color: #f00!important;
|
||||
&:hover{
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
.imageBox{
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
.productImage{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
}
|
||||
.productMasking{
|
||||
@extend .masking-hover;
|
||||
ul{
|
||||
width: 168px;
|
||||
height: 56px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
@extend .content-center;
|
||||
li{
|
||||
position: relative;
|
||||
width: 33.333%;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 24px;
|
||||
border-right: 1px solid rgba(0,0,0,0.1);
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
right: 0;
|
||||
}
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
a{
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
color: $m-color-secondary;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mobile{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.productImage img{
|
||||
@include transform(scale(1.2));
|
||||
}
|
||||
.productMasking{
|
||||
opacity: 1;
|
||||
ul{
|
||||
-webkit-animation: move-bottom 0.3s linear;
|
||||
animation: move-bottom 0.3s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productCaption{
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
@include tablet {
|
||||
text-align: left;
|
||||
}
|
||||
h4{
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 10px;
|
||||
a{
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
color: #a5a5a5;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
a{
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
.offer-price{
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: $m-color-primary;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.regular-price{
|
||||
font-size: 18px;
|
||||
color: #c5c5c5;
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
188
msd2/myoos/themes/phoenix/scss/layout/_layout.scss
Normal file
188
msd2/myoos/themes/phoenix/scss/layout/_layout.scss
Normal file
@ -0,0 +1,188 @@
|
||||
|
||||
#slider .badge,
|
||||
#slider .page-header {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
ul.nav>li>a {
|
||||
display: block;
|
||||
}
|
||||
ul.list-group>li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.nav.nav-pills>li {
|
||||
display: inline-block;
|
||||
}
|
||||
ul.list-group li>a,
|
||||
ul.list-group ul:not(.collapse) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
ul.list-group ul {
|
||||
width: 100%;
|
||||
}
|
||||
ul.list-group li>a:after {
|
||||
border: 0;
|
||||
}
|
||||
ul.dropdown-menu a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
ul.row.list-inline>li,
|
||||
ul.list-unstyled.list-inline>li {
|
||||
margin-right: 0;
|
||||
}
|
||||
.list-inline>li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.badge {
|
||||
padding:.3em .6em .4em;
|
||||
}
|
||||
pre {
|
||||
font-size:13px;
|
||||
}
|
||||
ul.list-unstyled .dropdown-toggle::after {
|
||||
border:0;
|
||||
}
|
||||
.card-default>.card-heading {
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.card-heading {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.card-heading>h1,
|
||||
.card-heading>h2,
|
||||
.card-heading>h3,
|
||||
.card-heading>h4,
|
||||
.card-heading>h5,
|
||||
.card-heading>h6 {
|
||||
margin:0;
|
||||
}
|
||||
h1.card-title,
|
||||
h2.card-title,
|
||||
h3.card-title,
|
||||
h4.card-title,
|
||||
h5.card-title,
|
||||
h6.card-title {
|
||||
font-size:16px;
|
||||
}
|
||||
.card-title a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.media-body,
|
||||
.media-left,
|
||||
.media-right {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
.media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.dropdown-menu>li>a {
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: $m-color-primary;
|
||||
outline: 0;
|
||||
}
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 9px 0;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
padding: 0;
|
||||
}
|
||||
ul.pagination {
|
||||
display: inline-block;
|
||||
margin: 20px 0;
|
||||
}
|
||||
ul.pagination>li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 80px 0;
|
||||
border-bottom:rgba(0,0,0,0.1) 1px solid;
|
||||
background-color: #fff;
|
||||
}
|
||||
section:after,
|
||||
section:before {
|
||||
content:" ";
|
||||
display:table;
|
||||
}
|
||||
section:after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
section header.section-header {
|
||||
margin-bottom:80px;
|
||||
}
|
||||
section.section-xxs {
|
||||
padding:15px 0;
|
||||
}
|
||||
section.section-xs {
|
||||
padding:30px 0;
|
||||
}
|
||||
section.section-sm {
|
||||
padding:60px 0;
|
||||
}
|
||||
section.padding-md {
|
||||
padding:80px 0;
|
||||
}
|
||||
section.section-lg {
|
||||
padding:120px 0;
|
||||
}
|
||||
section.section-xlg {
|
||||
padding:140px 0;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hidden-md-up {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page-header {
|
||||
padding-bottom: 9px;
|
||||
margin: 40px 0 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
/** sign-out
|
||||
**************************************************************** **/
|
||||
.sign-out {
|
||||
@include px-to-rem( font-size, 200px);
|
||||
@include px-to-rem( line-height, 200px);
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/** sidebar
|
||||
**************************************************************** **/
|
||||
.thumbnail.float-left {
|
||||
margin-right: 20px;
|
||||
}
|
||||
70
msd2/myoos/themes/phoenix/scss/layout/_product_info.scss
Normal file
70
msd2/myoos/themes/phoenix/scss/layout/_product_info.scss
Normal file
@ -0,0 +1,70 @@
|
||||
/** Product Detail
|
||||
********************** **/
|
||||
|
||||
.product_details_thumb {
|
||||
margin-bottom: 100px;
|
||||
.carousel-indicators {
|
||||
bottom: -86px;
|
||||
-webkit-box-pack: left;
|
||||
-ms-flex-pack: left;
|
||||
justify-content: left;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
display: -moz-flex;
|
||||
display: -ms-flex;
|
||||
display: -o-flex;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
li {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
height: 80px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.carousel-inner {
|
||||
border: 1px solid #ddd;
|
||||
margin: 0 3px;
|
||||
width: calc(100% - 6px);
|
||||
}
|
||||
.carousel-indicators li.active {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.product_badge {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.product_details_desc {
|
||||
border: 1px solid #f6f6f6;
|
||||
border-radius: 3px;
|
||||
padding: 15px;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.product_details_ratings {
|
||||
i {
|
||||
color: #ff9800;
|
||||
font-size: 14px;
|
||||
}
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.product_details_desc .price {
|
||||
font-size: 18px;
|
||||
}
|
||||
.short_overview > {
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
44
msd2/myoos/themes/phoenix/scss/layout/_product_new.scss
Normal file
44
msd2/myoos/themes/phoenix/scss/layout/_product_new.scss
Normal file
@ -0,0 +1,44 @@
|
||||
/* 1 Column */
|
||||
|
||||
.shop-item-list > {
|
||||
.col-lg-12 {
|
||||
> .shop-item {
|
||||
position: relative;
|
||||
min-height: 230px;
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
> .thumbnail {
|
||||
float: left;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.col-md-12 > .shop-item > .thumbnail {
|
||||
float: left;
|
||||
width: 200px;
|
||||
}
|
||||
.col-lg-12 > .shop-item > .shop-item-summary, .col-md-12 > .shop-item > .shop-item-summary {
|
||||
text-align: left !important;
|
||||
position: absolute;
|
||||
left: 230px;
|
||||
}
|
||||
.col-lg-12 > .shop-item > .shop-item-buttons, .col-md-12 > .shop-item > .shop-item-buttons {
|
||||
text-align: left;
|
||||
}
|
||||
.col-lg-12 > .shop-item > .shop-item-summary > .shop-item-price > span, .col-md-12 > .shop-item > .shop-item-summary > .shop-item-price > span {
|
||||
padding-left: 0;
|
||||
}
|
||||
.col-lg-12 > .shop-item p {
|
||||
margin: 15px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* list item buttons */
|
||||
|
||||
div.shop-item-buttons {
|
||||
margin-top: 14px;
|
||||
}
|
||||
128
msd2/myoos/themes/phoenix/scss/layout/_shop_item.scss
Normal file
128
msd2/myoos/themes/phoenix/scss/layout/_shop_item.scss
Normal file
@ -0,0 +1,128 @@
|
||||
/** SHOP ITEM LIST
|
||||
**************************************************************** **/
|
||||
|
||||
|
||||
div.shop-item {
|
||||
margin-bottom: 60px;
|
||||
.shop-item-buttons a.btn-default {
|
||||
border: 0;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
&:hover {
|
||||
border: 0;
|
||||
background-color: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
}
|
||||
> .thumbnail {
|
||||
background-color: transparent !important;
|
||||
border-color: #ddd !important;
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
&.shop-item {
|
||||
> .thumbnail {
|
||||
> a.shop-item-image {
|
||||
> img {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
-webkit-transition: all .500s;
|
||||
-moz-transition: all .500s;
|
||||
-o-transition: all .500s;
|
||||
transition: all .500s;
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
&:hover > a.shop-item-image > img:last-child {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity = 100);
|
||||
}
|
||||
> {
|
||||
a.shop-item-image > img:first-child {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity = 100);
|
||||
}
|
||||
.shop-option-over {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 2px;
|
||||
z-index: 20;
|
||||
width: 50px;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
> a {
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
margin: 0 0 3px 0;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
-moz-border-radius-bottomright: 15px;
|
||||
-moz-border-radius-topleft: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover > .thumbnail > .shop-option-over {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity = 100);
|
||||
}
|
||||
> .thumbnail > .shop-item-info {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
z-index: 20;
|
||||
width: 70px;
|
||||
> .badge {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.shop-item-summary {
|
||||
padding: 15px 8px;
|
||||
border-radius: 3px;
|
||||
h2 {
|
||||
@include px-to-rem(font-size, 15px);
|
||||
color: #666;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
}
|
||||
&.shop-item-rating {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
&.shop-item-price {
|
||||
font-size: 20px;
|
||||
margin-top: 6px;
|
||||
font-weight: bold;
|
||||
> span {
|
||||
color: #999;
|
||||
font-size: 15px;
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
283
msd2/myoos/themes/phoenix/scss/layout/_shopping_cart.scss
Normal file
283
msd2/myoos/themes/phoenix/scss/layout/_shopping_cart.scss
Normal file
@ -0,0 +1,283 @@
|
||||
/** shopping_cart
|
||||
********************** **/
|
||||
|
||||
%cartInput{
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: 40px;
|
||||
background-color: $m-color-white;
|
||||
@include add-border(2px, $border-gray, all);
|
||||
}
|
||||
%buttonFont{
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cartListInner .row.totalAmountArea{
|
||||
margin:0;
|
||||
}
|
||||
%tableDiv{
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 20px 30px;
|
||||
width: 100%;
|
||||
@include add-border(5px, $m-color-light, right-left);
|
||||
@include add-border(3px, $m-color-light, bottom);
|
||||
}
|
||||
%tableHead{
|
||||
background-color: $m-color-primary;
|
||||
padding: 0;
|
||||
height: 55px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: $m-color-white;
|
||||
padding-left: 20px;
|
||||
@include add-border(1px, rgba(255,255,255,0.2), right);
|
||||
border-bottom: none;
|
||||
}
|
||||
%tableData{
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
@include add-border(3px, $m-color-light, bottom);
|
||||
border-top: none;
|
||||
}
|
||||
%closeBtn{
|
||||
position: relative;
|
||||
left: 0;
|
||||
float: left;
|
||||
font-size: 22px;
|
||||
margin-right: 30px;
|
||||
color: $m-color-primary;
|
||||
opacity: 1;
|
||||
line-height: 74px;
|
||||
font-weight: normal;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
@include tablet{
|
||||
margin-right: 5px;
|
||||
}
|
||||
@include desktops{
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* out of stock */
|
||||
span.out-of-stock {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.cartListInner{
|
||||
.table-responsive{
|
||||
margin-bottom: 0;
|
||||
@include mobile{
|
||||
overflow-x: auto;
|
||||
}
|
||||
@include tablet{
|
||||
overflow-x: visible;
|
||||
}
|
||||
.table{
|
||||
margin-bottom: 0;
|
||||
thead{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-primary, right-left);
|
||||
th{
|
||||
@extend %tableHead;
|
||||
letter-spacing: 1px;
|
||||
border-top: none;
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
&:first-child{
|
||||
@include mobile-xs{
|
||||
display: none;
|
||||
}
|
||||
@include mobile{
|
||||
display: none;
|
||||
}
|
||||
@include tablet{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-light, right-left);
|
||||
td{
|
||||
@extend %tableData;
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
font-weight: 400;
|
||||
@include mobile{
|
||||
padding: 10px;
|
||||
}
|
||||
@include tablet{
|
||||
padding: 10px;
|
||||
}
|
||||
@include tablet{
|
||||
padding-left: 20px;
|
||||
}
|
||||
.close{
|
||||
@extend %closeBtn;
|
||||
position: relative;
|
||||
left: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.cartImage{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
&:nth-child(3){
|
||||
color: #888888;
|
||||
}
|
||||
input{
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin: 0 -3px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
@include tablet {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
@include mobile-xs{
|
||||
display: none;
|
||||
}
|
||||
@include mobile{
|
||||
display: none;
|
||||
}
|
||||
@include tablet{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
&.count-input a {
|
||||
color: #a5a5a5;
|
||||
font-size: 10px;
|
||||
padding: 4px 6px 0px;
|
||||
display: inline-block;
|
||||
border: 1px solid #e4e4e4;
|
||||
line-height: 34px;
|
||||
height: 40px;
|
||||
@include tablet {
|
||||
padding: 4px 10px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateArea{
|
||||
@extend %tableDiv;
|
||||
.input-group{
|
||||
float: left;
|
||||
@include mobile-xs{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@include mobile{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@include tablet{
|
||||
width: 435px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control{
|
||||
@extend %cartInput;
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
border-color: $m-border-light;
|
||||
font-size: 13px;
|
||||
@include mobile-xs{
|
||||
width: 50%;
|
||||
}
|
||||
@include mobile{
|
||||
width: 60%;
|
||||
}
|
||||
@include tablet{
|
||||
width: 285px;
|
||||
}
|
||||
}
|
||||
.input-group-addon{
|
||||
@extend %cartInput;
|
||||
@extend %buttonFont;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
@include mobile-xs{
|
||||
width: 45%;
|
||||
font-size: 10px;
|
||||
}
|
||||
@include mobile{
|
||||
width: 35%;
|
||||
}
|
||||
@include tablet{
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
display: inline-block;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
color: $m-color-white;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
&.btn-primary {
|
||||
&:hover {
|
||||
opacity: 1.28;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.infoStockArea{
|
||||
@extend %tableDiv;
|
||||
}
|
||||
.totalAmountArea{
|
||||
@extend %tableDiv;
|
||||
.list-unstyled{
|
||||
li{
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
margin: 10px 0;
|
||||
font-size: 15px;
|
||||
span{
|
||||
width: 108px;
|
||||
display: inline-block;
|
||||
color: #888888;
|
||||
}
|
||||
.grandTotal{
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkBtnArea{
|
||||
@extend %tableDiv;
|
||||
border-bottom-width: 5px;
|
||||
.btn-danger{
|
||||
float: right;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
i{
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:hover{
|
||||
opacity: 1.28;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
325
msd2/myoos/themes/phoenix/scss/layout/_steps.scss
Normal file
325
msd2/myoos/themes/phoenix/scss/layout/_steps.scss
Normal file
@ -0,0 +1,325 @@
|
||||
/** Steps
|
||||
**************************************************************** **/
|
||||
|
||||
.innerWrapper{
|
||||
width: 100%;
|
||||
&.stepsPage{
|
||||
@include mobile{
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
@include tablet{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.cartListInner{
|
||||
margin-bottom: 50px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.col-md-3 {
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.well{
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin-bottom: 50px;
|
||||
background: $m-color-light;
|
||||
padding: 20px 30px;
|
||||
.pager{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
li{
|
||||
a{
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
i {
|
||||
font-size: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
&.hideContent{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.previous{
|
||||
a{
|
||||
background-color: #dedede;
|
||||
color: $m-color-secondary;
|
||||
&:hover{
|
||||
background-color: $m-color-primary;
|
||||
color: $m-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderBox{
|
||||
.table-responsive{
|
||||
.table{
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
text-transform: capitalize;
|
||||
.checkboxArea{
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step2.checkboxArea {
|
||||
margin-bottom: 25px;
|
||||
label {
|
||||
font-size: 13px;
|
||||
color: $text-slider-title;
|
||||
}
|
||||
}
|
||||
.checkboxArea.card-check {
|
||||
width: 100%;
|
||||
.form-control {
|
||||
background: $m-color-white;
|
||||
border: 1px solid $m-color-light;
|
||||
height: 44px;
|
||||
}
|
||||
span.step-drop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sbHolder {
|
||||
border: 1px solid $m-color-light;
|
||||
background: $m-color-white;
|
||||
max-width: 48%;
|
||||
height: 44px!important;
|
||||
.sbSelector {
|
||||
line-height: 44px!important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.input-group-addon {
|
||||
margin-left: -1px;
|
||||
z-index: 5;
|
||||
background: $m-color-white;
|
||||
}
|
||||
ul.sbOptions {
|
||||
margin-top: 0px;
|
||||
z-index: 55;
|
||||
}
|
||||
ul {
|
||||
margin: 10px 0 0 30px;
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shipping-info {
|
||||
padding: 10px 0 20px;
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
address, p {
|
||||
color: $text-slider-title;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.summery-box {
|
||||
border: 3px solid $m-color-light;
|
||||
padding: 40px 25px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
padding-bottom: 5px;
|
||||
color: $text-slider-title;
|
||||
}
|
||||
li {
|
||||
font-size: 15px;
|
||||
padding-bottom: 20px;
|
||||
color: $text-slider-title;
|
||||
&:last-child {
|
||||
border-top: 3px solid $m-color-light;
|
||||
color: $m-color-secondary;
|
||||
padding: 20px 0 0;
|
||||
.val {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-confirm {
|
||||
padding: 60px 0 90px;
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: $text-slider-title;
|
||||
}
|
||||
p {
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
color: $text-slider-title;
|
||||
margin: 42px 0 50px;
|
||||
}
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
%after{
|
||||
content: ' ';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $m-color-white;
|
||||
@include border-radius($radius: 50%);
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
}
|
||||
.progress-wizard {
|
||||
padding: 0 15px 50px 15px;
|
||||
.progress-wizard-step {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
.progress-wizard-stepnum {
|
||||
color: $text-slider-title;
|
||||
padding-bottom: 5px;
|
||||
@include mobile-xs{
|
||||
font-size: 12px;
|
||||
height: 55px;
|
||||
}
|
||||
@include mobile{
|
||||
font-size: 10px;
|
||||
height: 36px;
|
||||
}
|
||||
@include tablet{
|
||||
font-size: 12px;
|
||||
height: auto;
|
||||
}
|
||||
@include desktops{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.progress-wizard-info {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.progress-wizard-dot {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
background: $m-color-primary;
|
||||
left: 50%;
|
||||
margin-top: -17px;
|
||||
margin-left: -15px;
|
||||
@include border-radius($radius: 50%);
|
||||
&:after {
|
||||
@extend %after;
|
||||
}
|
||||
@include mobile{
|
||||
top: 60px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
@include tablet{
|
||||
top: 43px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
position: relative;
|
||||
@include border-radius(0);
|
||||
height: 4px;
|
||||
box-shadow: none;
|
||||
background-color: $m-color-light;
|
||||
@include mobile {
|
||||
margin: 18px 0 0px;
|
||||
}
|
||||
.progress-bar {
|
||||
width:0px;
|
||||
box-shadow: none;
|
||||
background: $m-color-primary;
|
||||
}
|
||||
}
|
||||
&.complete{
|
||||
.progress{
|
||||
.progress-bar{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
.progress{
|
||||
left: 0;
|
||||
width: 100%;
|
||||
.progress-bar{
|
||||
width:50%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.progress{
|
||||
width: 100%;
|
||||
.progress-bar{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fullBar{
|
||||
.progress{
|
||||
.progress-bar{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
.progress{
|
||||
.progress-bar{
|
||||
width:50%;
|
||||
}
|
||||
}
|
||||
.progress-wizard-stepnum {
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
&.disabled{
|
||||
.progress-wizard-dot {
|
||||
background-color: $m-color-light;
|
||||
&:after {
|
||||
@extend %after;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
45
msd2/myoos/themes/phoenix/scss/layout/_success.scss
Normal file
45
msd2/myoos/themes/phoenix/scss/layout/_success.scss
Normal file
@ -0,0 +1,45 @@
|
||||
|
||||
/** successs
|
||||
**************************************************************** **/
|
||||
|
||||
.success {
|
||||
margin-bottom: 26px;
|
||||
overflow-y: auto;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.02745) 0px 2px 1px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.02745) 0px 2px 1px;
|
||||
-o-box-shadow: rgba(0, 0, 0, 0.02745) 0px 2px 1px;
|
||||
box-shadow: rgba(0, 0, 0, 0.02745) 0px 2px 1px;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: .25rem;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.success-block {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.success-img-top {
|
||||
border-top-right-radius: calc(.25rem - 1px);
|
||||
border-top-left-radius: calc(.25rem - 1px);
|
||||
}
|
||||
215
msd2/myoos/themes/phoenix/scss/layout/_wishlist.scss
Normal file
215
msd2/myoos/themes/phoenix/scss/layout/_wishlist.scss
Normal file
@ -0,0 +1,215 @@
|
||||
/** wishlist
|
||||
********************** **/
|
||||
|
||||
|
||||
|
||||
.wishlist{
|
||||
.table-responsive{
|
||||
margin-bottom: 0;
|
||||
@include mobile{
|
||||
overflow-x: auto;
|
||||
}
|
||||
@include tablet{
|
||||
overflow-x: visible;
|
||||
}
|
||||
.table{
|
||||
margin-bottom: 0;
|
||||
thead{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-primary, right-left);
|
||||
th{
|
||||
@extend %tableHead;
|
||||
letter-spacing: 1px;
|
||||
border-top: none;
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
&:first-child{
|
||||
@include mobile-xs{
|
||||
display: none;
|
||||
}
|
||||
@include mobile{
|
||||
display: none;
|
||||
}
|
||||
@include tablet{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
@include add-border(3px, $m-color-light, right-left);
|
||||
td{
|
||||
@extend %tableData;
|
||||
font-size: 16px;
|
||||
text-transform: capitalize;
|
||||
font-weight: 400;
|
||||
@include mobile{
|
||||
padding: 10px;
|
||||
}
|
||||
@include tablet{
|
||||
padding: 10px;
|
||||
}
|
||||
@include tablet{
|
||||
padding-left: 20px;
|
||||
}
|
||||
.close{
|
||||
@extend %closeBtn;
|
||||
position: relative;
|
||||
left: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.cartImage{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
&:nth-child(3){
|
||||
color: #888888;
|
||||
}
|
||||
input{
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin: 0 -3px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
@include tablet {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
@include mobile-xs{
|
||||
display: none;
|
||||
}
|
||||
@include mobile{
|
||||
display: none;
|
||||
}
|
||||
@include tablet{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
&.count-input a {
|
||||
color: #a5a5a5;
|
||||
font-size: 10px;
|
||||
padding: 4px 6px 0px;
|
||||
display: inline-block;
|
||||
border: 1px solid #e4e4e4;
|
||||
line-height: 34px;
|
||||
height: 40px;
|
||||
@include tablet {
|
||||
padding: 4px 10px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateArea{
|
||||
@extend %tableDiv;
|
||||
.input-group{
|
||||
float: left;
|
||||
@include mobile-xs{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@include mobile{
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@include tablet{
|
||||
width: 435px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-control{
|
||||
@extend %cartInput;
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
border-color: $m-border-light;
|
||||
font-size: 13px;
|
||||
@include mobile-xs{
|
||||
width: 50%;
|
||||
}
|
||||
@include mobile{
|
||||
width: 60%;
|
||||
}
|
||||
@include tablet{
|
||||
width: 285px;
|
||||
}
|
||||
}
|
||||
.input-group-addon{
|
||||
@extend %cartInput;
|
||||
@extend %buttonFont;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
@include mobile-xs{
|
||||
width: 45%;
|
||||
font-size: 10px;
|
||||
}
|
||||
@include mobile{
|
||||
width: 35%;
|
||||
}
|
||||
@include tablet{
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
display: inline-block;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
color: $m-color-secondary;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
&.btn-primary-outlined {
|
||||
&:hover {
|
||||
color: $m-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.infoStockArea{
|
||||
@extend %tableDiv;
|
||||
}
|
||||
.totalAmountArea{
|
||||
@extend %tableDiv;
|
||||
.list-unstyled{
|
||||
li{
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
margin: 10px 0;
|
||||
font-size: 15px;
|
||||
span{
|
||||
width: 108px;
|
||||
display: inline-block;
|
||||
color: #888888;
|
||||
}
|
||||
.grandTotal{
|
||||
color: $m-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkBtnArea{
|
||||
@extend %tableDiv;
|
||||
border-bottom-width: 5px;
|
||||
.btn-primary{
|
||||
float: right;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
i{
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
116
msd2/myoos/themes/phoenix/scss/mixins/_myoos.scss
Normal file
116
msd2/myoos/themes/phoenix/scss/mixins/_myoos.scss
Normal file
@ -0,0 +1,116 @@
|
||||
//
|
||||
// Convert px to rem
|
||||
//
|
||||
|
||||
// Function for converting a px based font-size to rem.
|
||||
@function parseInt($n) {
|
||||
@if ($n == !important) {
|
||||
@return !important
|
||||
} @else {
|
||||
$rem-size: $n / 14px;
|
||||
@return #{$rem-size}rem;
|
||||
}
|
||||
}
|
||||
|
||||
// e.g. @include px-to-rem(padding, 8px 20px);
|
||||
@mixin px-to-rem($property, $values) {
|
||||
$rem: ();
|
||||
@each $value in $values {
|
||||
@if index((0, 0px), $value) or $value == auto {
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
@else {
|
||||
$rem: append($rem, parseInt($value));
|
||||
}
|
||||
}
|
||||
#{$property}: $rem;
|
||||
}
|
||||
@mixin transition($args...) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
@mixin border-radius($radius: 4px) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
// e.g. @include add-border(3px, $m-color-light, all);
|
||||
@mixin add-border($size, $color, $position){
|
||||
@if $position == 'all'{
|
||||
border:$size solid $color;
|
||||
} @else if $position == 'top'{
|
||||
border-top:$size solid $color;
|
||||
} @else if $position == 'bottom'{
|
||||
border-bottom:$size solid $color;
|
||||
} @else if $position == 'right'{
|
||||
border-right:$size solid $color;
|
||||
} @else if $position == 'left'{
|
||||
border-left:$size solid $color;
|
||||
} @else if $position == 'top-bottom'{
|
||||
border-top:$size solid $color;
|
||||
border-bottom:$size solid $color;
|
||||
} @else if $position == 'right-left'{
|
||||
border-left:$size solid $color;
|
||||
border-right:$size solid $color;
|
||||
} @else if $position == 'top-left'{
|
||||
border-left:$size solid $color;
|
||||
border-right:$size solid $color;
|
||||
} @else if $position == 'top-right'{
|
||||
border-left:$size solid $color;
|
||||
border-right:$size solid $color;
|
||||
} @else if $position == 'bottom-left'{
|
||||
border-left:$size solid $color;
|
||||
border-right:$size solid $color;
|
||||
} @else if $position == 'bottom-right'{
|
||||
border-left:$size solid $color;
|
||||
border-right:$size solid $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition($args...) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// MEDIA QUERY
|
||||
//
|
||||
@mixin mobile-xs{
|
||||
@media(max-width:479px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin mobile{
|
||||
@media(min-width:480px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin tablet{
|
||||
@media(min-width:768px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktops{
|
||||
@media(min-width:992px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin large-desktops{
|
||||
@media(min-width:1200px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
119
msd2/myoos/themes/phoenix/scss/myoos.scss
Normal file
119
msd2/myoos/themes/phoenix/scss/myoos.scss
Normal file
@ -0,0 +1,119 @@
|
||||
/*!
|
||||
* MyOOS v2.0.122
|
||||
*
|
||||
* Author: r23
|
||||
* Website: https://oos-shop.de
|
||||
*
|
||||
* Copyright (c) 2003 - 2019 by the MyOOS Development Team.
|
||||
* Released under the GNU General Public License
|
||||
*/
|
||||
|
||||
@import "base/fonts";
|
||||
|
||||
|
||||
//
|
||||
// Settings
|
||||
//
|
||||
|
||||
@import "settings/variables";
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Tools
|
||||
//
|
||||
|
||||
@import "tools/resets";
|
||||
@import "tools/mixins";
|
||||
// Block Components
|
||||
@import "tools/button-sizes";
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Core
|
||||
//
|
||||
|
||||
@import "core/style";
|
||||
@import "core/typo-font-sizes";
|
||||
@import "core/bar-rating";
|
||||
@import "core/sub-nav";
|
||||
@import "core/table";
|
||||
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
// Bases
|
||||
@import "base/alerts";
|
||||
@import "base/arrows";
|
||||
|
||||
// Badges
|
||||
@import "base/badges";
|
||||
|
||||
// Dividers
|
||||
@import "base/dividers";
|
||||
|
||||
// Headers
|
||||
@import "base/headers";
|
||||
@import "base/main-nav";
|
||||
@import "base/submenu";
|
||||
|
||||
//Footer
|
||||
@import "base/dropdown";
|
||||
|
||||
// Cart
|
||||
@import "base/cart";
|
||||
|
||||
// page header
|
||||
@import "base/page_header";
|
||||
|
||||
// Buttons
|
||||
@import "base/buttons";
|
||||
|
||||
|
||||
// User Profile
|
||||
@import "base/user-profile";
|
||||
|
||||
|
||||
//
|
||||
// Globals
|
||||
//
|
||||
|
||||
@import "globals/colors";
|
||||
@import "globals/bg-colors";
|
||||
|
||||
// Spaces (Margins & Paddings)
|
||||
@import "globals/paddings";
|
||||
@import "globals/margin";
|
||||
|
||||
|
||||
//
|
||||
// Layout / Pages
|
||||
//
|
||||
//
|
||||
@import "layout/403";
|
||||
@import "layout/404";
|
||||
@import "layout/home";
|
||||
@import "layout/layout";
|
||||
@import "layout/product_info";
|
||||
@import "layout/product_new";
|
||||
@import "layout/shop_item";
|
||||
@import "layout/shopping_cart";
|
||||
@import "layout/steps";
|
||||
@import "layout/success";
|
||||
@import "layout/wishlist";
|
||||
|
||||
//
|
||||
// Plugins
|
||||
//
|
||||
//
|
||||
@import "plugins/owl_carousel";
|
||||
@import "plugins/image-zoom";
|
||||
@import "plugins/magnific-popup";
|
||||
|
||||
//
|
||||
// Custom
|
||||
//
|
||||
//
|
||||
@import "custom/custom";
|
||||
209
msd2/myoos/themes/phoenix/scss/plugins/_image-zoom.scss
Normal file
209
msd2/myoos/themes/phoenix/scss/plugins/_image-zoom.scss
Normal file
@ -0,0 +1,209 @@
|
||||
/** Image Zoom [plugin]
|
||||
plugins/image-zoom
|
||||
**************************************************************** **/
|
||||
|
||||
figure.zoom {
|
||||
img::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
> a.lightbox {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
font-size: 17px;
|
||||
background-color: #666;
|
||||
padding: 6px 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
-webkit-border-bottom-right-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
-moz-border-radius-bottom-right: 15px;
|
||||
-moz-border-radius-top-left: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
&:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
&.bottom-right {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
&.bottom-left {
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
&.top-right {
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
&.top-left {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* lightbox button position */
|
||||
|
||||
.owl-carousel.zoom-more {
|
||||
.owl-controls {
|
||||
.owl-buttons div {
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
}
|
||||
&.clickable {
|
||||
top: auto !important;
|
||||
bottom: 0 !important;
|
||||
margin-top: 0;
|
||||
margin-bottom: -10px;
|
||||
right: -10px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-align: center;
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
> img {
|
||||
text-align: center;
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity = 80);
|
||||
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
|
||||
/* Firefox 10+ */
|
||||
filter: gray;
|
||||
/* IE6-9 */
|
||||
-webkit-filter: grayscale(99%);
|
||||
/* Chrome 19+ & Safari 6+ */
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* Fix for transition flickering */
|
||||
}
|
||||
&.active > img {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity = 1);
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** IMAGE ZOOM HOVER */
|
||||
|
||||
.image-hover-zoom {
|
||||
overflow: hidden;
|
||||
> img {
|
||||
-webkit-transition: ease all .3s;
|
||||
-moz-transition: ease all .3s;
|
||||
transition: ease all .3s;
|
||||
}
|
||||
&:hover > img {
|
||||
-webkit-transform: translate3d(0, 3%, 0) scale(1.3);
|
||||
-moz-transform: translate3d(0, 3%, 0) scale(1.3);
|
||||
-ms-transform: translate3d(0, 3%, 0) scale(1.3);
|
||||
-o-transform: translate3d(0, 3%, 0) scale(1.3);
|
||||
transform: translate3d(0, 3%, 0) scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
/** IMAGE PLUS HOVER **/
|
||||
|
||||
.image-hover-plus {
|
||||
position: relative;
|
||||
display: block;
|
||||
> i.icon-hover-plus {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-moz-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
-o-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&:hover > i.icon-hover-plus {
|
||||
opacity: 1;
|
||||
width: 20%;
|
||||
}
|
||||
> i.icon-hover-plus {
|
||||
&::after, &::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-top: #fff 1px solid;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
-moz-transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate3d(-50%, -50%, 0);
|
||||
-o-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
&::after {
|
||||
-webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
|
||||
-moz-transform: translate3d(-50%, -50%, 0) rotate(90deg);
|
||||
-ms-transform: translate3d(-50%, -50%, 0) rotate(90deg);
|
||||
-o-transform: translate3d(-50%, -50%, 0) rotate(90deg);
|
||||
transform: translate3d(-50%, -50%, 0) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* IMAGE HOVER OVERLAY */
|
||||
|
||||
.image-hover-overlay {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
&::before {
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
background-color: rgba(33, 33, 36, 0.5);
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
}
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.42857143;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
.caption {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
453
msd2/myoos/themes/phoenix/scss/plugins/_magnific-popup.scss
Normal file
453
msd2/myoos/themes/phoenix/scss/plugins/_magnific-popup.scss
Normal file
@ -0,0 +1,453 @@
|
||||
/** Magnific Popup
|
||||
*************************************************** **/
|
||||
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity = 80);
|
||||
}
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045;
|
||||
}
|
||||
|
||||
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.mfp-zoom-out-cur {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out;
|
||||
.mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mfp-preloader {
|
||||
color: #CCC;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044;
|
||||
a {
|
||||
color: #CCC;
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-s-ready .mfp-preloader, .mfp-s-error .mfp-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
&.mfp-close, &.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
filter: alpha(opacity = 65);
|
||||
padding: 0 0 18px 10px;
|
||||
color: #FFF;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace;
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity = 100);
|
||||
}
|
||||
&:active {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #CCC;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
filter: alpha(opacity = 65);
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
&:active {
|
||||
margin-top: -54px;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity = 100);
|
||||
}
|
||||
&:before, &:after, .mfp-b, .mfp-a {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent;
|
||||
}
|
||||
&:after, .mfp-a {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px;
|
||||
}
|
||||
&:before, .mfp-b {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0;
|
||||
&:after, .mfp-a {
|
||||
border-right: 17px solid #FFF;
|
||||
margin-left: 31px;
|
||||
}
|
||||
&:before, .mfp-b {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3F3F3F;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0;
|
||||
&:after, .mfp-a {
|
||||
border-left: 17px solid #FFF;
|
||||
margin-left: 39px;
|
||||
}
|
||||
&:before, .mfp-b {
|
||||
border-left: 27px solid #3F3F3F;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
.mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
.mfp-close {
|
||||
top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%;
|
||||
iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main image in popup */
|
||||
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* The shadow behind the image */
|
||||
|
||||
.mfp-figure {
|
||||
line-height: 0;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444;
|
||||
}
|
||||
small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #F3F3F3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile {
|
||||
.mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
img.mfp-img {
|
||||
padding: 0;
|
||||
}
|
||||
.mfp-figure {
|
||||
&:after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
small {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
&:empty {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
}
|
||||
.mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75);
|
||||
}
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0;
|
||||
}
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%;
|
||||
}
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-ie7 {
|
||||
.mfp-img {
|
||||
padding: 0;
|
||||
}
|
||||
.mfp-bottom-bar {
|
||||
width: 600px;
|
||||
left: 50%;
|
||||
margin-left: -300px;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.mfp-container {
|
||||
padding: 0;
|
||||
}
|
||||
.mfp-content {
|
||||
padding-top: 44px;
|
||||
}
|
||||
.mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
956
msd2/myoos/themes/phoenix/scss/plugins/_owl_carousel.scss
Normal file
956
msd2/myoos/themes/phoenix/scss/plugins/_owl_carousel.scss
Normal file
@ -0,0 +1,956 @@
|
||||
/** Owl Carousel v1.3.3
|
||||
*************************************************** **/
|
||||
/* clearfix */
|
||||
|
||||
.owl-carousel {
|
||||
.owl-wrapper {
|
||||
&:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
display: none;
|
||||
position: relative;
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-ms-touch-action: pan-y;
|
||||
.owl-wrapper-outer {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
&.autoHeight {
|
||||
-webkit-transition: height 500ms ease-in-out;
|
||||
-moz-transition: height 500ms ease-in-out;
|
||||
-ms-transition: height 500ms ease-in-out;
|
||||
-o-transition: height 500ms ease-in-out;
|
||||
transition: height 500ms ease-in-out;
|
||||
}
|
||||
}
|
||||
.owl-item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* display none until init */
|
||||
|
||||
.owl-controls {
|
||||
.owl-page, .owl-buttons div {
|
||||
cursor: pointer;
|
||||
}
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.owl-carousel.featured .owl-controls .owl-prev {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#progressBar {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
#bar {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* mouse grab icon */
|
||||
|
||||
.grabbing {
|
||||
cursor: url(../images/_smarty/grabbing.png) 8 8, move;
|
||||
}
|
||||
|
||||
/* fix */
|
||||
|
||||
.owl-carousel {
|
||||
.owl-wrapper, .owl-item {
|
||||
-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 CSS3 Transitions
|
||||
* v1.3.2
|
||||
*/
|
||||
|
||||
.owl-origin {
|
||||
-webkit-perspective: 1200px;
|
||||
-webkit-perspective-origin-x: 50%;
|
||||
-webkit-perspective-origin-y: 50%;
|
||||
-moz-perspective: 1200px;
|
||||
-moz-perspective-origin-x: 50%;
|
||||
-moz-perspective-origin-y: 50%;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
/* fade */
|
||||
|
||||
.owl-fade-out {
|
||||
z-index: 10;
|
||||
-webkit-animation: fadeOut .7s both ease;
|
||||
-moz-animation: fadeOut .7s both ease;
|
||||
animation: fadeOut .7s both ease;
|
||||
}
|
||||
|
||||
.owl-fade-in {
|
||||
-webkit-animation: fadeIn .7s both ease;
|
||||
-moz-animation: fadeIn .7s both ease;
|
||||
animation: fadeIn .7s both ease;
|
||||
}
|
||||
|
||||
/* backSlide */
|
||||
|
||||
.owl-backSlide-out {
|
||||
-webkit-animation: backSlideOut 1s both ease;
|
||||
-moz-animation: backSlideOut 1s both ease;
|
||||
animation: backSlideOut 1s both ease;
|
||||
}
|
||||
|
||||
.owl-backSlide-in {
|
||||
-webkit-animation: backSlideIn 1s both ease;
|
||||
-moz-animation: backSlideIn 1s both ease;
|
||||
animation: backSlideIn 1s both ease;
|
||||
}
|
||||
|
||||
/* goDown */
|
||||
|
||||
.owl-goDown-out {
|
||||
-webkit-animation: scaleToFade .7s ease both;
|
||||
-moz-animation: scaleToFade .7s ease both;
|
||||
animation: scaleToFade .7s ease both;
|
||||
}
|
||||
|
||||
.owl-goDown-in {
|
||||
-webkit-animation: goDown .6s ease both;
|
||||
-moz-animation: goDown .6s ease both;
|
||||
animation: goDown .6s ease both;
|
||||
}
|
||||
|
||||
/* scaleUp */
|
||||
|
||||
.owl-fadeUp-in {
|
||||
-webkit-animation: scaleUpFrom .5s ease both;
|
||||
-moz-animation: scaleUpFrom .5s ease both;
|
||||
animation: scaleUpFrom .5s ease both;
|
||||
}
|
||||
|
||||
.owl-fadeUp-out {
|
||||
-webkit-animation: scaleUpTo .5s ease both;
|
||||
-moz-animation: scaleUpTo .5s ease both;
|
||||
animation: scaleUpTo .5s ease both;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@-webkit-keyframes empty {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes empty {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes empty {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes backSlideOut {
|
||||
25% {
|
||||
opacity: .5;
|
||||
-webkit-transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
-webkit-transform: translateZ(-500px) translateX(-200%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .5;
|
||||
-webkit-transform: translateZ(-500px) translateX(-200%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes backSlideOut {
|
||||
25% {
|
||||
opacity: .5;
|
||||
-moz-transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
-moz-transform: translateZ(-500px) translateX(-200%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .5;
|
||||
-moz-transform: translateZ(-500px) translateX(-200%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes backSlideOut {
|
||||
25% {
|
||||
opacity: .5;
|
||||
transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
transform: translateZ(-500px) translateX(-200%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .5;
|
||||
transform: translateZ(-500px) translateX(-200%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes backSlideIn {
|
||||
0%, 25% {
|
||||
opacity: .5;
|
||||
-webkit-transform: translateZ(-500px) translateX(200%);
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
-webkit-transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes backSlideIn {
|
||||
0%, 25% {
|
||||
opacity: .5;
|
||||
-moz-transform: translateZ(-500px) translateX(200%);
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
-moz-transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateZ(0) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes backSlideIn {
|
||||
0%, 25% {
|
||||
opacity: .5;
|
||||
transform: translateZ(-500px) translateX(200%);
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
transform: translateZ(-500px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateZ(0) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes scaleToFade {
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes scaleToFade {
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes scaleToFade {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes goDown {
|
||||
from {
|
||||
-webkit-transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes goDown {
|
||||
from {
|
||||
-moz-transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes goDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes scaleUpFrom {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes scaleUpFrom {
|
||||
from {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes scaleUpFrom {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes scaleUpTo {
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes scaleUpTo {
|
||||
to {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes scaleUpTo {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
CUSTOM REWRITE
|
||||
**/
|
||||
|
||||
.owl-carousel {
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
&.owl-padding-0 .owl-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
&.owl-padding-1 .owl-item {
|
||||
padding: 0 1px;
|
||||
}
|
||||
&.owl-padding-2 .owl-item {
|
||||
padding: 0 2px;
|
||||
}
|
||||
&.owl-padding-3 .owl-item {
|
||||
padding: 0 3px;
|
||||
}
|
||||
&.owl-padding-6 .owl-item {
|
||||
padding: 0 6px;
|
||||
}
|
||||
&.owl-padding-10 .owl-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
&.owl-padding-15 .owl-item {
|
||||
padding: 0 15px;
|
||||
}
|
||||
&.owl-padding-20 .owl-item {
|
||||
padding: 0 20px;
|
||||
}
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
&.buttons-autohide {
|
||||
.owl-buttons {
|
||||
filter: Alpha(Opacity = 0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.4s;
|
||||
-moz-transition: opacity 0.4s;
|
||||
-o-transition: opacity 0.4s;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
&:hover .owl-buttons {
|
||||
filter: Alpha(Opacity = 100);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Cause width problems - better to leave left/right margins
|
||||
.owl-carousel .owl-item:first-child {
|
||||
padding-left:0;
|
||||
}
|
||||
.owl-carousel .owl-item:last-child {
|
||||
padding-right:0;
|
||||
}
|
||||
*/
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons div {
|
||||
color: #121212;
|
||||
background: #fff;
|
||||
border: #fff 1px solid;
|
||||
opacity: 1;
|
||||
filter: Alpha(Opacity = 100);
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
section.dark .owl-theme .owl-controls .owl-buttons div {
|
||||
color: #fff;
|
||||
background: #212121;
|
||||
border: #212121 1px solid;
|
||||
}
|
||||
|
||||
.controlls-over {
|
||||
.owl-controls {
|
||||
.owl-prev {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -28px;
|
||||
right: auto;
|
||||
left: -13px;
|
||||
zoom: 1;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0;
|
||||
}
|
||||
.owl-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -28px;
|
||||
left: auto;
|
||||
right: -13px;
|
||||
zoom: 1;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.owl-pagination {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.owl-theme.controlls-over .owl-controls .owl-page {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:first-child {
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-bottom-left-radius: 10px;
|
||||
-moz-border-radius-top-left: 10px;
|
||||
-moz-border-radius-bottom-left: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
&:last-child {
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-webkit-border-bottom-right-radius: 10px;
|
||||
-moz-border-radius-top-right: 10px;
|
||||
-moz-border-radius-bottom-right: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
span {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-pagination .owl-controls .owl-page {
|
||||
margin-bottom: -40px !important;
|
||||
}
|
||||
|
||||
/* top text caption */
|
||||
|
||||
.owl-carousel {
|
||||
.owl-item div {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.owl-caption {
|
||||
padding: 10px;
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: block;
|
||||
color: #fff;
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
color: #fff;
|
||||
font-size: 21px;
|
||||
line-height: 21px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
color: #fff;
|
||||
font-size: 21px;
|
||||
line-height: 21px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.controls-hover-only .owl-controls {
|
||||
filter: alpha(opacity = 0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.4s;
|
||||
-moz-transition: opacity 0.4s;
|
||||
-o-transition: opacity 0.4s;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.slider:hover .owl-carousel.controls-hover-only .owl-controls {
|
||||
filter: alpha(opacity = 100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.owl-carousel {
|
||||
&.controls-hover-only:hover .owl-controls {
|
||||
filter: alpha(opacity = 100);
|
||||
opacity: 1;
|
||||
}
|
||||
&.featured {
|
||||
.owl-featured-item {
|
||||
width: 99%;
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
&:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
a.figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
> img {
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-featured-detail {
|
||||
position: relative;
|
||||
padding-top: 6px;
|
||||
&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid #fff;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
top: -10px;
|
||||
z-index: 10;
|
||||
webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
.owl-featured-item:hover > .owl-featured-detail:after {
|
||||
border-bottom: 10px solid #eaeaea;
|
||||
}
|
||||
.owl-featured-detail > {
|
||||
a.featured-title {
|
||||
color: #333;
|
||||
margin-top: 6px;
|
||||
display: block;
|
||||
}
|
||||
span.price {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
margin-top: 6px;
|
||||
.owl-controls.clickable {
|
||||
top: 0 !important;
|
||||
margin-top: -45px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Featured Item */
|
||||
|
||||
h2.owl-featured {
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
border-bottom: rgba(0, 0, 0, 0.2) 1px dashed;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.owl-carousel.featured {
|
||||
a.figure {
|
||||
> span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
filter: alpha(opacity = 0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s;
|
||||
-moz-transition: opacity 0.3s;
|
||||
-o-transition: opacity 0.3s;
|
||||
transition: opacity 0.3s;
|
||||
> i {
|
||||
color: #333;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background: #fff;
|
||||
font-size: 21px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px !important;
|
||||
text-align: center;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
-o-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
-webkit-border-bottom-right-radius: 20px;
|
||||
-webkit-border-top-left-radius: 20px;
|
||||
-moz-border-radius-bottom-right: 20px;
|
||||
-moz-border-radius-top-left: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
&:hover > span {
|
||||
filter: alpha(opacity = 100);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
overflow: inherit !important;
|
||||
.owl-prev, .owl-next {
|
||||
display: inline-block !important;
|
||||
color: #999 !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.owl-prev:hover, .owl-next:hover {
|
||||
color: #121212 !important;
|
||||
}
|
||||
}
|
||||
|
||||
section.dark {
|
||||
.owl-carousel.featured {
|
||||
.owl-featured-detail {
|
||||
> a.featured-title {
|
||||
color: #fff;
|
||||
}
|
||||
&:after {
|
||||
border-bottom-color: #212121;
|
||||
}
|
||||
}
|
||||
.owl-featured-item:hover {
|
||||
background-color: #111;
|
||||
> .owl-featured-detail:after {
|
||||
border-bottom-color: #111;
|
||||
}
|
||||
}
|
||||
.owl-prev, .owl-next {
|
||||
color: #999 !important;
|
||||
}
|
||||
.owl-prev:hover, .owl-next:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
h2.owl-featured {
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
/*
|
||||
.owl-carousel.featured .owl-controls {
|
||||
display:none !important
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* buttons bottom */
|
||||
|
||||
.owl-carousel {
|
||||
&.buttons-bottom {
|
||||
.owl-controls {
|
||||
top: auto !important;
|
||||
}
|
||||
.owl-next, .owl-prev {
|
||||
margin-top: -20px !important;
|
||||
}
|
||||
}
|
||||
.owl-carousel-caption {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
height: 96px;
|
||||
overflow: hidden;
|
||||
&.top {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
bottom: 29px;
|
||||
}
|
||||
h2, h3, h4 {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* special carousel title */
|
||||
|
||||
.owl-theme .owl-controls .owl-buttons div {
|
||||
/* padding:6px 13px; */
|
||||
}
|
||||
|
||||
.owl-controls {
|
||||
.owl-page, .owl-buttons div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.controlls-over .owl-controls {
|
||||
.owl-prev {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.owl-next {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styling Pagination*/
|
||||
|
||||
.owl-theme .owl-controls {
|
||||
.owl-page {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
/*IE7 life-saver */
|
||||
span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
margin: 5px 7px;
|
||||
filter: Alpha(Opacity = 50);
|
||||
/*IE7 fix*/
|
||||
opacity: 0.5;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background: #869791;
|
||||
}
|
||||
&.active span {
|
||||
filter: Alpha(Opacity = 100);
|
||||
/*IE7 fix*/
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.clickable .owl-page:hover span {
|
||||
filter: Alpha(Opacity = 100);
|
||||
/*IE7 fix*/
|
||||
opacity: 1;
|
||||
}
|
||||
.owl-page span.owl-numbers {
|
||||
height: auto;
|
||||
width: auto;
|
||||
color: #FFF;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* If PaginationNumbers is true */
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.owl-pagination {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
309
msd2/myoos/themes/phoenix/scss/settings/_variables.scss
Normal file
309
msd2/myoos/themes/phoenix/scss/settings/_variables.scss
Normal file
@ -0,0 +1,309 @@
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// Font Families
|
||||
$m-font-primary: "Open Sans", Helvetica, Arial, sans-serif !default;
|
||||
|
||||
// Font Sizes
|
||||
$m-font-primary-size: 16px !default;
|
||||
|
||||
$text-slider-title:#797979;
|
||||
|
||||
//
|
||||
// Breakpoints
|
||||
//
|
||||
|
||||
$m-2xs: 446px !default; // Double extra small devices (<=445px)
|
||||
// Extra small devices (portrait phones, <=575px)
|
||||
$m-sm: 576px !default; // Small devices (landscape phones, >=576 & <=767)
|
||||
$m-md: 768px !default; // Medium devices (tablets, >=768 & <=991)
|
||||
$m-lg: 992px !default; // Large devices (desktops, >=992 & <=1199)
|
||||
$m-xl: 1200px !default; // Extra large devices (large desktops, >=1200)
|
||||
// If you want to use "max-width" than var-1. For exmaple: @media (max-width: #{$m-lg}-1) {...}
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
// Primary Color
|
||||
$m-color-primary: #47BAC1 !default;
|
||||
$m-color-primary-dark-v1: darken($m-color-primary, 2%) !default;
|
||||
$m-color-primary-dark-v2: darken($m-color-primary, 5%) !default;
|
||||
$m-color-primary-dark-v3: darken($m-color-primary, 10%) !default;
|
||||
$m-color-primary-light-v1: rgba($m-color-primary, .2) !default;
|
||||
$m-color-primary-light-v2: rgba($m-color-primary, .8) !default;
|
||||
|
||||
// Main Colors
|
||||
$m-color-main: #555 !default;
|
||||
$m-bg-color-main: #fff !default;
|
||||
|
||||
// Main Secondary
|
||||
$m-bg-color-secondary: #fafafa !default;
|
||||
|
||||
// Color Black
|
||||
$m-color-black: #000;
|
||||
|
||||
// Color White
|
||||
$m-color-white: #fff;
|
||||
|
||||
// Color Gray
|
||||
$m-color-gray-light-v1: #bbb !default;
|
||||
$m-color-gray-light-v2: #ccc !default;
|
||||
$m-color-gray-light-v3: #ddd !default;
|
||||
$m-color-gray-light-v4: #eee !default;
|
||||
$m-color-gray-light-v5: #f7f7f7 !default;
|
||||
|
||||
$m-color-gray-dark-v1: #111 !default;
|
||||
$m-color-gray-dark-v2: #333 !default;
|
||||
$m-color-gray-dark-v3: #555 !default;
|
||||
$m-color-gray-dark-v4: #777 !default;
|
||||
$m-color-gray-dark-v5: #999 !default;
|
||||
|
||||
$border-gray: #d0d0d0;
|
||||
|
||||
|
||||
// Color light
|
||||
$m-color-light: #f0f0f0;
|
||||
|
||||
$m-color-secondary: #252525;
|
||||
$m-color-primary: #47bac1;
|
||||
$m-color-primary-light: #4dc8cf;
|
||||
$m-border-light: #e4e4e4;
|
||||
|
||||
$primary-color-light:#4dc8cf;
|
||||
//
|
||||
// Status Colors
|
||||
|
||||
// Color Green
|
||||
$m-color-success: #5cb85c !default;
|
||||
$m-color-success-dark-v1: darken($m-color-success, 2%) !default;
|
||||
$m-color-success-dark-v2: darken($m-color-success, 5%) !default;
|
||||
|
||||
// Color Green
|
||||
$m-color-info: #5bc0de !default;
|
||||
$m-color-info-dark-v1: darken($m-color-info, 2%) !default;
|
||||
$m-color-info-dark-v2: darken($m-color-info, 5%) !default;
|
||||
|
||||
// Color Green
|
||||
$m-color-warning: #f0ad4e !default;
|
||||
$m-color-warning-dark-v1: darken($m-color-warning, 2%) !default;
|
||||
$m-color-warning-dark-v2: darken($m-color-warning, 5%) !default;
|
||||
|
||||
// Color Green
|
||||
$m-color-danger: #d9534f !default;
|
||||
$m-color-danger-dark-v1: darken($m-color-danger, 2%) !default;
|
||||
$m-color-danger-dark-v2: darken($m-color-danger, 5%) !default;
|
||||
|
||||
//colors
|
||||
$white: #fff;
|
||||
$black_5: rgba(0,0,0,0.05);
|
||||
$black_10: rgba(0,0,0,.1);
|
||||
$color_storm_dust_approx: #666;
|
||||
$color_mine_shaft_approx: #333;
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
|
||||
// Primary Color
|
||||
$g-color-primary: #72c02c !default;
|
||||
$g-color-primary-dark-v1: darken($g-color-primary, 2%) !default;
|
||||
$g-color-primary-dark-v2: darken($g-color-primary, 5%) !default;
|
||||
$g-color-primary-dark-v3: darken($g-color-primary, 10%) !default;
|
||||
$g-color-primary-light-v1: rgba($g-color-primary, .2) !default;
|
||||
$g-color-primary-light-v2: rgba($g-color-primary, .8) !default; // R
|
||||
|
||||
// Main Colors
|
||||
$m-color-main: #555 !default;
|
||||
// $m-color-main: #6f7885 !default;
|
||||
$g-bg-color-main: #fff !default;
|
||||
|
||||
// Main Secondary
|
||||
$g-bg-color-secondary: #fafafa !default;
|
||||
|
||||
// Color Black
|
||||
$m-color-black: #000;
|
||||
|
||||
// Color White
|
||||
$m-color-white: #fff;
|
||||
|
||||
// Color Gray
|
||||
$g-color-gray-light-v1: #bbb !default; // $g-color-gray-light-v3
|
||||
$g-color-gray-light-v2: #ccc !default; // $g-color-gray-light-v4
|
||||
$g-color-gray-light-v3: #ddd !default; // $g-color-gray-light-v6
|
||||
$g-color-gray-light-v4: #eee !default; // $g-color-gray-light-v7
|
||||
$g-color-gray-light-v5: #f7f7f7 !default; // $g-color-gray-light-v9
|
||||
|
||||
$g-color-gray-dark-v1: #111 !default; // $g-color-gray-dark-v4:
|
||||
$g-color-gray-dark-v2: #333 !default; // $g-color-gray-dark-v2:
|
||||
$g-color-gray-dark-v3: #555 !default; // $g-color-gray-dark-v1:
|
||||
$g-color-gray-dark-v4: #777 !default; // $g-color-gray:
|
||||
$g-color-gray-dark-v5: #999 !default; // $g-color-gray-light-v1:
|
||||
|
||||
|
||||
//
|
||||
// Status Colors
|
||||
|
||||
// Color Green
|
||||
$g-color-success: #5cb85c !default;
|
||||
$g-color-success-dark-v1: darken($g-color-success, 2%) !default;
|
||||
$g-color-success-dark-v2: darken($g-color-success, 5%) !default;
|
||||
|
||||
// Color Green
|
||||
$g-color-info: #5bc0de !default;
|
||||
$g-color-info-dark-v1: darken($g-color-info, 2%) !default;
|
||||
$g-color-info-dark-v2: darken($g-color-info, 5%) !default;
|
||||
|
||||
// Color Green
|
||||
$g-color-warning: #f0ad4e !default;
|
||||
$g-color-warning-dark-v1: darken($g-color-warning, 2%) !default;
|
||||
$g-color-warning-dark-v2: darken($g-color-warning, 5%) !default;
|
||||
|
||||
// Color Green
|
||||
$g-color-danger: #d9534f !default;
|
||||
$g-color-danger-dark-v1: darken($g-color-danger, 2%) !default;
|
||||
$g-color-danger-dark-v2: darken($g-color-danger, 5%) !default;
|
||||
|
||||
|
||||
//
|
||||
// Complementary Colors
|
||||
|
||||
// Color Green
|
||||
$g-color-green: #72c02c !default;
|
||||
|
||||
// Color Blue
|
||||
$g-color-blue: #3398dc !default;
|
||||
$g-color-blue-dark-v1: darken($g-color-blue, 22%) !default;
|
||||
|
||||
// Color Light Blue
|
||||
$g-color-lightblue: #edf2f8 !default;
|
||||
$g-color-lightblue-v1: #d6e2ee !default;
|
||||
|
||||
// Color Dark Blue
|
||||
$g-color-darkblue: #009 !default;
|
||||
|
||||
// Color Indigo
|
||||
$g-color-indigo: #4263a3 !default;
|
||||
|
||||
// Color Red
|
||||
$g-color-red: #f00 !default;
|
||||
|
||||
// Color Light Red
|
||||
$g-color-lightred: #e64b3b !default;
|
||||
|
||||
// Color Dark Red
|
||||
$g-color-darkred: #a10f2b !default;
|
||||
|
||||
// Color Purple
|
||||
$g-color-purple: #9a69cb !default;
|
||||
|
||||
// Color Dark Purple
|
||||
$g-color-darkpurple: #6639b6 !default;
|
||||
$g-color-purple-dark-v1: darken($g-color-purple, 27%) !default;
|
||||
|
||||
// Color Pink
|
||||
$g-color-pink: #e81c62 !default;
|
||||
$g-color-pink-dark-v1: darken($g-color-pink, 27%) !default;
|
||||
|
||||
// Color Orange
|
||||
$g-color-orange: #e57d20 !default;
|
||||
|
||||
// Color Deep Orange
|
||||
$g-color-deeporange: #fe541e !default;
|
||||
|
||||
// Color Yellow
|
||||
$g-color-yellow: #ebc71d !default;
|
||||
|
||||
// Color Aqua
|
||||
$g-color-aqua: #29d6e6 !default;
|
||||
$g-color-aqua-dark-v1: darken($g-color-aqua, 22%) !default;
|
||||
|
||||
// Color Cyan
|
||||
$g-color-cyan: #00bed6 !default;
|
||||
|
||||
// Color Teal
|
||||
$g-color-teal: #18ba9b !default;
|
||||
|
||||
// Color Brown
|
||||
$g-color-brown: #9c8061 !default;
|
||||
|
||||
// Color Blue Gray
|
||||
$g-color-bluegray: #585f69 !default;
|
||||
|
||||
// Color Beige
|
||||
$g-color-beige: #e5e1de !default;
|
||||
|
||||
|
||||
//
|
||||
// Social Colors
|
||||
|
||||
// Facebook Color
|
||||
$g-color-facebook: #3b5998 !default;
|
||||
$g-color-facebook-dark-v1: darken($g-color-facebook, 5%) !default;
|
||||
$g-color-facebook-dark-v2: darken($g-color-facebook, 10%) !default;
|
||||
$g-color-facebook-light-v1: lighten($g-color-facebook, 5%) !default;
|
||||
|
||||
// Twitter Color
|
||||
$g-color-twitter: #00acee !default;
|
||||
$g-color-twitter-dark-v1: darken($g-color-twitter, 5%) !default;
|
||||
$g-color-twitter-dark-v2: darken($g-color-twitter, 10%) !default;
|
||||
$g-color-twitter-light-v1: lighten($g-color-twitter, 5%) !default;
|
||||
|
||||
// Skype Color
|
||||
$g-color-skype: #00aff0 !default;
|
||||
$g-color-skype-dark-v1: darken($g-color-skype, 5%) !default;
|
||||
$g-color-skype-dark-v2: darken($g-color-skype, 10%) !default;
|
||||
$g-color-skype-light-v1: lighten($g-color-skype, 5%) !default;
|
||||
|
||||
// Pinterest Color
|
||||
$g-color-pinterest: #c8232c !default;
|
||||
$g-color-pinterest-dark-v1: darken($g-color-pinterest, 5%) !default;
|
||||
$g-color-pinterest-dark-v2: darken($g-color-pinterest, 10%) !default;
|
||||
$g-color-pinterest-light-v1: lighten($g-color-pinterest, 5%) !default;
|
||||
|
||||
// Vine Color
|
||||
$g-color-vine: #00bf8f !default;
|
||||
$g-color-vine-dark-v1: darken($g-color-vine, 5%) !default;
|
||||
$g-color-vine-dark-v2: darken($g-color-vine, 10%) !default;
|
||||
$g-color-vine-light-v1: lighten($g-color-vine, 5%) !default;
|
||||
|
||||
// Youtube Color
|
||||
$g-color-youtube: #c4302b !default;
|
||||
$g-color-youtube-dark-v1: darken($g-color-youtube, 5%) !default;
|
||||
$g-color-youtube-dark-v2: darken($g-color-youtube, 10%) !default;
|
||||
$g-color-youtube-light-v1: lighten($g-color-youtube, 5%) !default;
|
||||
|
||||
// Google Plus Color
|
||||
$g-color-google-plus: #dd4b39 !default;
|
||||
$g-color-google-plus-dark-v1: darken($g-color-google-plus, 5%) !default;
|
||||
$g-color-google-plus-dark-v2: darken($g-color-google-plus, 10%) !default;
|
||||
$g-color-google-plus-light-v1: lighten($g-color-google-plus, 5%) !default;
|
||||
|
||||
// Dribbble Color
|
||||
$g-color-dribbble: #ea4c89 !default;
|
||||
$g-color-dribbble-dark-v1: darken($g-color-dribbble, 5%) !default;
|
||||
$g-color-dribbble-dark-v2: darken($g-color-dribbble, 10%) !default;
|
||||
$g-color-dribbble-light-v1: lighten($g-color-dribbble, 5%) !default;
|
||||
|
||||
// VK Color
|
||||
$g-color-vk: #2b587a !default;
|
||||
$g-color-vk-dark-v1: darken($g-color-vk, 5%) !default;
|
||||
$g-color-vk-dark-v2: darken($g-color-vk, 10%) !default;
|
||||
$g-color-vk-light-v1: lighten($g-color-vk, 5%) !default;
|
||||
|
||||
// Linkedin Color
|
||||
$g-color-linkedin: #0e76a8 !default;
|
||||
$g-color-linkedin-dark-v1: darken($g-color-linkedin, 5%) !default;
|
||||
$g-color-linkedin-dark-v2: darken($g-color-linkedin, 10%) !default;
|
||||
$g-color-linkedin-light-v1: lighten($g-color-linkedin, 5%) !default;
|
||||
|
||||
// Instagram Color
|
||||
$g-color-instagram: #3f729b !default;
|
||||
$g-color-instagram-dark-v1: darken($g-color-instagram, 5%) !default;
|
||||
$g-color-instagram-dark-v2: darken($g-color-instagram, 10%) !default;
|
||||
$g-color-instagram-light-v1: lighten($g-color-instagram, 5%) !default;
|
||||
10
msd2/myoos/themes/phoenix/scss/tools/_button-sizes.scss
Normal file
10
msd2/myoos/themes/phoenix/scss/tools/_button-sizes.scss
Normal file
@ -0,0 +1,10 @@
|
||||
//
|
||||
// Button sizes
|
||||
//
|
||||
|
||||
// e.g. @include u-button-size ($padding-y, $padding-x, $font-size);
|
||||
@mixin u-button-size ($padding-y, $padding-x, $font-size){
|
||||
line-height: 1.4;
|
||||
@include px-to-rem(padding, $padding-y $padding-x);
|
||||
@include px-to-rem(font-size, $font-size);
|
||||
}
|
||||
3
msd2/myoos/themes/phoenix/scss/tools/_mixins.scss
Normal file
3
msd2/myoos/themes/phoenix/scss/tools/_mixins.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// Core Components
|
||||
|
||||
@import "mixins/myoos";
|
||||
89
msd2/myoos/themes/phoenix/scss/tools/_resets.scss
Normal file
89
msd2/myoos/themes/phoenix/scss/tools/_resets.scss
Normal file
@ -0,0 +1,89 @@
|
||||
/** Resets
|
||||
*************************************************** **/
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
input, button, *:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 2px solid #E5E7E9;
|
||||
height: 46px;
|
||||
padding: 12px;
|
||||
outline: none;
|
||||
line-height: 1 !important;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
iframe, fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
audio, canvas, img, video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
-webkit-margin-before: 0.1em;
|
||||
-webkit-margin-after: 0.1em;
|
||||
-webkit-margin-start: 0px;
|
||||
-webkit-margin-end: 0px;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
&:focus, &:hover, &:active {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user