PDF rausgenommen
This commit is contained in:
aschwarz
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user