Last active
August 29, 2015 14:05
-
-
Save owen2345/c6ffad6c1d74d80fae90 to your computer and use it in GitHub Desktop.
less and sass code snippet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ------------------ fonts -------------------*/ | |
@font-face { | |
font-family: 'Union-Regular'; | |
src: url('../font/unionregular.eot'); | |
src: url('../font/unionregular.eot?#iefix') format('embedded-opentype'), | |
url('../font/unionregular.woff') format('woff'), | |
url('../font/unionregular.ttf') format('truetype'), | |
url('../font/unionregular.svg#unionregular') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'MyriadPro-Regular'; | |
src: url('../font/myriadproregular.eot'); | |
src: url('../font/myriadproregular.eot?#iefix') format('embedded-opentype'), | |
url('../font/myriadproregular.woff') format('woff'), | |
url('../font/myriadproregular.ttf') format('truetype'), | |
url('../font/myriadproregular.svg#myriadproregular') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Rockwell-Light'; | |
src: url('../font/rckwll.eot'); | |
src: url('../font/rckwll.eot?#iefix') format('embedded-opentype'), | |
url('../font/rckwll.woff') format('woff'), | |
url('../font/rckwll.ttf') format('truetype'), | |
url('../font/rckwll.svg#rckwll') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Rockwell-CondensedBold'; | |
src: url('../font/roccb.eot'); | |
src: url('../font/roccb.eot?#iefix') format('embedded-opentype'), | |
url('../font/roccb.woff') format('woff'), | |
url('../font/roccb.ttf') format('truetype'), | |
url('../font/roccb.svg#roccb') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@width_wrapper : 74%; | |
body { font-family: arial; font-size: 12px; color: #666; overflow: hidden; } | |
a { color: white; text-decoration: none; } | |
.wrapper { width: @width_wrapper; margin: 0 auto; } | |
header | |
{ | |
background: url(../images/header-bg.png) repeat-x center top; | |
.pmenus | |
{ | |
height: 27px; | |
overflow: hidden; | |
.menu | |
{ | |
float: left; | |
margin-left: 44px; | |
overflow: hidden; | |
li | |
{ | |
float:left; background: url(../images/separator.png) no-repeat right top; | |
padding: 0 10px; | |
&.logo { background: url(../images/icons.png) no-repeat -163px 5px !important; width: 19px; padding: 0 !important; position: relative; a { width: 100%; height: 100%; display: block; } } | |
a { font-family: 'Union-Regular'; font-size: 14px; } | |
&, a { line-height: 26px; } | |
} | |
} | |
.menu2 | |
{ | |
float: right; | |
li | |
{ | |
float:left; | |
.social_items(); | |
&.separator { background: url(../images/separator.png) no-repeat right top; padding-right: 10px !important; margin-right: 5px; } | |
} | |
} | |
} | |
.plogo | |
{ | |
height: 84px; | |
overflow: hidden; | |
position: relative; | |
background: url("../images/header-center-bg.png") no-repeat scroll center top transparent; | |
.logo { float:left; margin-top: 10px; } | |
.info { float: right; font-family: 'Union-Regular'; font-size: 21px; margin-top: 20px; .text_shadow; } | |
} | |
} | |
footer | |
{ | |
background: url(../images/footer-bg.png) repeat; | |
height: 140px; | |
position: fixed; | |
width: 100%; | |
bottom: 0; | |
border-top: 1px solid #fff; | |
> .wrapper > ul | |
{ | |
overflow: hidden; | |
margin: 2% 0px 0; | |
> li | |
{ | |
li, &{ float: left; } | |
ul | |
{ | |
overflow: hidden; | |
li { } | |
} | |
&.g1 { width: 12%; text-align: center; img{ width: 72%; } } | |
&.g2 | |
{ | |
width: 28%; | |
ul { margin-left: 14%; } | |
li { line-height: 26px; min-width: 50%; } | |
a { font-family: 'Union-Regular'; color: #fff; font-size: 14px; } | |
} | |
&.g3 | |
{ | |
width: 40%; | |
.logo { margin-left: 10%; img{ width: 40%; } } | |
.social { margin-left: 15%; li{ .social_items(2%) } .es,.en { display: none; } } | |
} | |
&.g4 { margin-top: 10px; font-family: 'Union-Regular'; color: #fff; font-size: 13px; width: 20%; float: right !important; line-height: 16px; } | |
} | |
} | |
} | |
#content_main | |
{ | |
width: 100%; | |
position: relative; | |
#internal_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; min-width: 100%; } | |
.internal | |
{ | |
} | |
/***home***/ | |
#slider_home | |
{ | |
.content-image { position: relative; } | |
.w_info | |
{ | |
height: 40%; | |
position: absolute; | |
top: 8%; | |
top: ~"6% \0/"; | |
width: 32%; | |
} | |
.title | |
{ | |
/*font-size: 70px;*/ | |
font-family: 'Rockwell-Light'; | |
color: #fff; | |
height: 40%; | |
margin-bottom: 10%; | |
padding-bottom: ~"6% \0/"; | |
margin-bottom: ~"3% \0/"; | |
*padding-bottom: 6%; | |
*margin-bottom: 3%; | |
font-weight: bold; | |
} | |
.descr | |
{ | |
div | |
{ | |
color: #FFFFFF; | |
font-family: 'Union-Regular'; | |
font-size: 15px; | |
height: 100%; | |
line-height: 22px; | |
overflow: auto; | |
} | |
height: 28%; | |
background: none repeat scroll 0 0 #727375; | |
padding: 10px; | |
} | |
.php .title, .recruit .title, .java .title { color: #4082bd; .text_shadow(#f3f3f4); } | |
.mobile .title { color: #fff; .text_shadow(#171717); } | |
.micro | |
{ | |
.title { color: #fff; .text_shadow(#2f6f9e); } | |
.descr { background: #368cb5 !important; border: 1px solid #318bb5; } | |
} | |
.html5 | |
{ | |
.title { color: #fff; .text_shadow(#66a322); } | |
.descr { background: #5c951c !important; border: 1px solid #5e9a1c; } | |
} | |
.magento | |
{ | |
.title { color: #fff; .text_shadow(#af4c07); height: 89% !important; } | |
.w_info { left: 25%; width: 30% !important; } | |
.descr { background: #b04e08 !important; border: 1px solid #b14f09; } | |
} | |
.recruit | |
{ | |
.descr { left: 150%; position: relative; top: 70%; } | |
.title { position: relative; top: 118%; } | |
} | |
} | |
/***contact***/ | |
.w_contact_view | |
{ | |
position: relative; | |
top: 2%; | |
#contact_view | |
{ | |
overflow: hidden; | |
@with_shadow: 10px; | |
h1 { margin-left: @with_shadow; font-family: 'Rockwell-Light'; color: #4082bd; font-size: 33px; margin: 8px 0; } | |
.tabs | |
{ | |
height: 70%; | |
float: left; | |
width: 57%; | |
position: relative; | |
margin-right: 3%; | |
iframe { width: 90%; margin-left: @with_shadow; height: 250px !important; .border(4px, 6px, #fff); .shadow(#ddddde, @with_shadow); } | |
.ui-tabs-nav | |
{ | |
margin-top: 10px; | |
margin-left: @with_shadow + 2; | |
li | |
{ | |
float: left; margin-right: 6px; | |
a { .button_blue(#659aca, #4b7193); &:hover { .button_blue(#4080bc, #1f4e78); } } | |
&.ui-state-active a { .button_blue(#4080bc, #1f4e78); } | |
span { display: block; margin-top: 14px; font-family: arial; font-size: 11px; color: #7d7d7d; line-height: 14px; } | |
} | |
} | |
} | |
.form | |
{ | |
font-family: arial; | |
color: #333333; | |
.m { color: #4183bf; font-size: 17px; margin-bottom: 12px; } | |
.m2 { font-size: 10px; } | |
form | |
{ | |
margin-top: 12px; | |
label { display: block; font-weight: bold; font-size: 11px; } | |
input { .border(1px, 5px, #ccc); height: 20px; display: block; width: 100%; margin: 4px 0 6px; } | |
textarea { height: 115px; width: 100%; margin: 4px 0 6px; .border(1px, 5px, #ccc); resize: none; } | |
.controls { text-align: right; } | |
} | |
width: 40%; | |
float: right; | |
button { text-transform: uppercase; .button_blue(); &:hover { .button_blue(#659aca, #4b7193); } } | |
} | |
} | |
} | |
/*** company ***/ | |
.w_company_view | |
{ | |
position: relative; | |
height: 100%; | |
#company_view | |
{ | |
height: 100%; | |
.tabs | |
{ | |
height: 100%; | |
.contents | |
{ | |
height: 53%; | |
padding-top: 5%; | |
overflow: auto; | |
article | |
{ | |
h1 { color: #4082bd; font-family: 'Rockwell-Light'; font-size: 42px; font-weight: bold; } | |
.ptitle { | |
overflow: hidden; | |
.pimage { float: left; width: 20%; } | |
.pt { | |
float: right; width: 75%; position: relative; | |
.c { margin-left: 15%; font-family: arial; font-size: 14px; line-height: 20px; color: #909091; margin-top: 20px; } | |
} | |
} | |
} | |
} | |
.ui-tabs-nav | |
{ | |
padding-top: 15px; | |
overflow: hidden; | |
li | |
{ | |
float: left; | |
padding-left: 18px; | |
background: url(../images/icons2.png) no-repeat -10px -9px; | |
&:first-child { padding-left: 0 !important; background: none !important; } | |
a { font-size: 32px; color: #848282; font-family: 'Rockwell-Light'; border-bottom: 4px solid transparent; padding-bottom: 9px; display: block; margin-right: 20px; } | |
&.ui-tabs-active, &:hover | |
{ | |
a{ border-bottom: 4px solid #4082bd !important; color: #4183bf !important; background: url(../images/icons2.png) no-repeat center 34px; } | |
} | |
} | |
} | |
} | |
} | |
} | |
/** bxslider **/ | |
.bx-wrapper | |
{ | |
margin: 0px !important; | |
overflow: hidden; | |
img | |
{ | |
min-width: 100%; | |
/*max-height: ~"@{height_slider}px" ;*/ | |
} | |
.bx-viewport | |
{ | |
border: 0 !important; | |
left: 0px !important; | |
height: auto !important; | |
} | |
.bx-controls | |
{ | |
.bx-controls-direction{ | |
a{ | |
background:url("../images/icons.png") no-repeat scroll 0 0 transparent; | |
display:block; | |
height:53px; | |
width:37px; | |
top: 33% !important; | |
} | |
a.bx-prev{ | |
background-position:left top; | |
&:hover{ background-position: -88px top; } | |
} | |
a.bx-next{ | |
background-position:-36px top; | |
&:hover{ background-position: -122px top; } | |
} | |
} | |
} | |
} | |
} | |
.button_blue(@from: #4080bc, @to: #1f4e78) | |
{ | |
font-family: 'Union-Regular'; | |
font-size: 13px; | |
padding: 6px 17px; | |
color: #ffffff; | |
background: -moz-linear-gradient( | |
top, | |
@from 0%, | |
@to); | |
background: -webkit-gradient( | |
linear, left top, left bottom, | |
from(@from), | |
to(@to)); | |
-moz-border-radius: 1px; | |
-webkit-border-radius: 1px; | |
border-radius: 1px; | |
border: 1px solid #e5e6e6; | |
-moz-box-shadow: | |
0px 0px 0px rgba(143,62,143,0), | |
inset 0px 0px 2px rgba(229,230,230,0); | |
-webkit-box-shadow: | |
0px 0px 0px rgba(143,62,143,0), | |
inset 0px 0px 2px rgba(229,230,230,0); | |
box-shadow: | |
0px 0px 0px rgba(143,62,143,0), | |
inset 0px 0px 2px rgba(229,230,230,0); | |
text-shadow: | |
0px -1px 0px rgba(000,000,000,0.4), | |
0px 1px 0px rgba(255,255,255,0.3); | |
} | |
.social_items (@padding: 2px) | |
{ | |
padding: @padding; | |
&.tw a { background-position: -28px -57px; } | |
&.lk a { background-position: -56px -57px; } | |
&.yt a { background-position: -84px -57px; } | |
&.es a { background-position: -106px -57px; } | |
&.en a { background-position: -128px -57px; } | |
a{ text-indent: -99999px; width: 22px; height: 22px; display: block; background: url(../images/icons.png) no-repeat 0px -57px; } | |
} | |
.text_shadow(@color: #ebebea) | |
{ | |
text-shadow: -1px -1px 0px @color; | |
filter: dropshadow(color=@color, offx=-1, offy=-1); | |
} | |
.shadow(@color: rgba(50, 50, 50, 1), @width: 10px) | |
{ | |
-webkit-box-shadow: 1px 2px @width @color; | |
-moz-box-shadow: 1px 2px @width @color; | |
box-shadow: 1px 2px @width @color; | |
} | |
.border(@width: 1px, @radio: 6px, @color: #DDDEDE) | |
{ | |
border-radius: @radio; | |
-moz-border-radius: @radio; | |
-webkit-border-radius: @radio; | |
border: @width solid @color; | |
} | |
@media only screen and (min-width: 320px) and (max-width: 768px){} | |
@media only screen and (min-width: 320px) and (max-width: 480px){} | |
/***mobile**/ | |
/*mobile*/ | |
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) | |
{ | |
body { font-size: 10px; } | |
.wrapper { width: 90% !important; } | |
header | |
{ | |
.pmenus | |
{ | |
.menu { margin-left: 0px !important; li { padding: 0 5px !important; } } | |
a { font-size: 8px !important; } | |
.menu2 { display: none; } | |
} | |
.plogo { display: none !important; } | |
} | |
footer | |
{ | |
.g1 img { width: 100% !important; height: 40px; } | |
.g2 { width: 45% !important; li { line-height: 17px !important; } a { font-size: 8px !important; }} | |
.g3 { | |
width: 20% !important; padding-top: 4px; | |
.es, .en { display: block !important; } | |
.fb, .tw, .lk, .yt { display: none; } | |
.social { margin-left: -8px !important; } | |
.logo{ margin-left: -12px !important; margin-bottom: 5px; display: block; img { width: 90% !important; height: 20px; } } | |
} | |
.g4 { width: 15% !important; font-size: 6px !important; line-height: 8px !important; margin-top: 4px !important; text-align: right; } | |
} | |
#content_main | |
{ | |
.bx-controls-direction | |
{ | |
a.bx-prev { left: -5px !important; } | |
a.bx-next { right: -5px !important; } | |
} | |
#slider_home | |
{ | |
.php .title { margin-top: 5px ; } | |
.recruit .title { top: 100% !important; } | |
.w_info | |
{ | |
top: 15% !important; | |
.title | |
{ | |
margin-bottom: 0% !important; | |
} | |
.descr | |
{ | |
height: 34% !important; | |
margin-top: -5px; | |
padding: 5px !important; | |
div { font-size: 8px !important; line-height: 11px !important; } | |
} | |
} | |
} | |
#contact_view | |
{ | |
h1 { font-size: 14px !important; margin: 4px 0 !important; } | |
.tabs | |
{ | |
display: none; | |
} | |
.form | |
{ | |
float: none !important; | |
width: 70% !important; | |
margin: 0 auto; | |
form { margin-top: 7px !important; } | |
.m { font-size: 8px !important; } | |
.m2 { font-size: 6px !important; } | |
label { font-size: 7px !important; } | |
input { height: 10px !important; margin: 2px 0 3px !important; width: 96% !important; } | |
textarea{ height: 35px !important; width: 98% !important; } | |
button { font-size: 7px !important; padding: 4px 15px !important; } | |
} | |
} | |
} | |
} | |
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) | |
{ | |
body { font-size: 10px; } | |
header | |
{ | |
.pmenus | |
{ | |
.menu { margin-left: 0px !important; li { padding: 0 5px !important; } } | |
a { font-size: 9px !important; } | |
.menu2 { .fb, .tw, .lk, .yt { display: none; }} | |
} | |
.plogo { display: none !important; } | |
} | |
footer | |
{ | |
> .wrapper > ul { margin-top: 1px !important; } | |
.g1 { a { img { width: 90% !important; height: 30px; } } } | |
.g2 { width: 50% !important; ul { margin-left: 10px !important; } li { min-width: 30% !important; !important; line-height: 13px !important; } a { font-size: 8px !important; }} | |
.g3 { | |
margin-left: 15px; | |
width: 14% !important; padding-top: 4px; | |
.social { display: none !important; } | |
.logo{ margin-left: -12px !important; margin-bottom: 5px; display: block; img { width: 90% !important; height: 20px; } } | |
} | |
.g4 { width: 20% !important; font-size: 5px !important; line-height: 8px !important; margin-top: 4px !important; text-align: right; } | |
} | |
#content_main | |
{ | |
#slider_home | |
{ | |
.recruit .title { top: 109% !important; } | |
.w_info | |
{ | |
top: 6% !important; | |
.title | |
{ | |
margin-bottom: 0% !important; | |
} | |
.descr | |
{ | |
height: 35% !important; | |
margin-top: 14px; | |
padding: 3px !important; | |
div { font-size: 7px !important; line-height: 9px !important; } | |
} | |
} | |
} | |
#contact_view | |
{ | |
h1 { font-size: 14px !important; margin: 4px 0 !important; } | |
.tabs | |
{ | |
display: none; | |
} | |
.form | |
{ | |
float: none !important; | |
width: 100% !important; | |
.p { float: left; width: 30%;} | |
form | |
{ | |
margin-top: 0px !important; float: right; position: relative; width: 67%; overflow: hidden; | |
p:nth-child(1), p:nth-child(3) { clear: both; } | |
p:nth-child(2), p:nth-child(4) { float: right !important; } | |
p { float: left; width: 47% !important; position: relative; } | |
} | |
.m { font-size: 8px !important; } | |
.m2 { font-size: 6px !important; } | |
label { font-size: 7px !important; } | |
input { height: 10px !important; margin: 2px 0 3px !important; width: 90% !important; } | |
textarea{ height: 35px !important; width: 95% !important; } | |
button { font-size: 7px !important; padding: 4px 15px !important; } | |
} | |
} | |
} | |
} | |
/** ipads **/ | |
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait), only screen and (min-device-width: 768px) and (max-device-width: 1024px) | |
{ | |
.wrapper { width: 82% !important; } | |
header | |
{ | |
.pmenus | |
{ | |
a { font-size: 10px !important; } | |
} | |
} | |
footer | |
{ | |
> .wrapper > ul { margin-top: 30px !important; } | |
.g1 { a { img { width: 100% !important; height: 100px; } } } | |
.g2 { width: 35% !important; ul { margin-left: 50px !important; } li { min-width: 50% !important; !important; line-height: 34px !important; } } | |
.g3 { | |
margin-left: 15px; | |
width: 25% !important; padding-top: 4px; | |
.social { margin-top: 10px; li { padding: 2px 5px !important; } } | |
.logo { margin-bottom: 5px; display: block; img { width: 90% !important; height: 40px; } } | |
} | |
.g4 { width: 20% !important; font-size: 12px !important; line-height: 14px !important; margin-top: 4px !important; text-align: right; } | |
} | |
#content_main | |
{ | |
#slider_home | |
{ | |
.recruit .descr { left: 148% !important; } | |
.recruit .title { top: 108% !important; } | |
.w_info | |
{ | |
width: 36% !important; | |
.title | |
{ | |
} | |
.descr | |
{ | |
div { } | |
} | |
} | |
} | |
#contact_view | |
{ | |
.tabs | |
{ | |
margin-right: 1% !important; | |
iframe { height: 350px !important; } | |
.ui-tabs-nav a { font-size: 11px !important; } | |
} | |
.form | |
{ | |
.m { font-size: 15px !important; } | |
.m2 { font-size: 11px !important; } | |
label { font-size: 12px !important; } | |
input { height: 20px !important; margin: 5px 0 8px !important; } | |
textarea{ height: 120px !important; width: 98% !important; } | |
input { width: 95% !important; } | |
} | |
} | |
} | |
} | |
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) | |
{ | |
header | |
{ | |
.pmenus | |
{ | |
.menu2 li { margin-left: 10px; } | |
} | |
} | |
footer | |
{ | |
> .wrapper > ul { margin-top: 10px !important; } | |
.g1 { a { img { width: 100% !important; height: 80px; } } } | |
.g2 { width: 35% !important; ul { margin-left: 50px !important; } li { min-width: 50% !important; !important; line-height: 28px !important; } } | |
.g3 { | |
margin-left: 15px; | |
width: 25% !important; padding-top: 4px; | |
.social { margin-top: 10px; li { padding: 2px 9px !important; } } | |
.logo { margin-bottom: 5px; display: block; img { width: 90% !important; height: 40px; } } | |
} | |
.g4 { width: 20% !important; font-size: 12px !important; line-height: 14px !important; margin-top: 4px !important; text-align: right; } | |
} | |
#content_main | |
{ | |
#contact_view | |
{ | |
.tabs { margin-right: 1% !important; iframe { height: 230px !important; } } | |
.form | |
{ | |
padding-right: 10px; | |
.m { font-size: 14px !important; } | |
.m2 { font-size: 10px !important; } | |
label { font-size: 10px !important; } | |
input { height: 15px !important; margin: 2px 0 3px !important; } | |
textarea{ height: 70px !important; } | |
} | |
} | |
} | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$color_orange: #ff6700; | |
.text-center { text-align: center; } | |
.text-left { text-align: left; } | |
.text-right { text-align: right; } | |
.color_red { color: red; } | |
.nowrap { white-space: nowrap; } | |
a { color: $color_orange; } | |
.jwplayer { max-height: 100%; max-width: 100%; } | |
.row { line-height: 22px; } | |
body h3 { margin: 5px 0 10px; } | |
h3.title { color: #635D5D; font-size: 20px; border-bottom: 1px solid; padding: 0px; margin: 3px 0 12px; } | |
.fitText p { margin: 0; } | |
button { background-color: #ff6700; border: 1px solid #ff6700; border-radius: 5px; color: #ffffff; padding: 7px 10px; } | |
// mixinnssss | |
@mixin transparent($color, $alpha) { | |
$rgba: rgba($color, $alpha); | |
$ie-hex-str: ie-hex-str($rgba); | |
background-color: transparent; | |
background-color: $rgba; | |
*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str}); | |
zoom: 1; | |
} | |
@mixin opaque($alpha, $imp: ""){ | |
opacity : $alpha + $imp; | |
filter: alpha(opacity=($alpha*100)) + $imp; | |
} | |
@mixin transparent_rgba($r, $g, $b, $a) { | |
$rgba: rgba($r, $g, $b, $a); | |
$ie-hex-str: ie-hex-str($rgba); | |
background-color: transparent; | |
background-color: $rgba; | |
*filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str}); | |
zoom: 1; | |
} | |
@mixin input { | |
border: 2px solid #E3E3E3; height: auto; color: #727272; padding: 5px; &:focus { border-color: $color_orange; } | |
} | |
@mixin transition($time: 200) | |
{ | |
-webkit-transition: all $time+ms linear; | |
-moz-transition: all $time+ms linear; | |
-o-transition: all $time+ms linear; | |
-ms-transition: all $time+ms linear; | |
transition: all $time+ms linear; | |
} | |
@mixin full_reset() | |
{ | |
top: 0px; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
min-height: 100%; | |
min-width: 100%; | |
} | |
@mixin shadow($a) | |
{ | |
-webkit-box-shadow:$a; | |
-moz-box-shadow:$a; | |
-o-box-shadow:$a; | |
-ms-box-shadow:$a; | |
box-shadow:$a; | |
} | |
@mixin background_linear($a) | |
{ | |
background-image:-webkit-linear-gradient($a); | |
background-image:-moz-linear-gradient($a); | |
background-image:-ms-linear-gradient($a); | |
background-image:-o-linear-gradient($a); | |
background-image:linear-gradient($a); | |
} | |
html, body { | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
position: relative; | |
left: 0; | |
top: 0; | |
} | |
body { | |
font-size: 12px; | |
font-family: verdana; | |
background-color: #EBCC93; | |
&.resize { overflow: hidden !important; } | |
&.loading{ | |
.mega_zoom { display: none; } | |
.main_loading { display: block; } | |
} | |
.main_loading{ | |
display: none; | |
text-align: center; | |
width: 165px; | |
margin: -22px auto 0; | |
font-size: 10px; | |
font-style: italic; | |
padding: 2px 2px 8px; | |
background: #fff; | |
-moz-border-radius: 14px; | |
-webkit-border-radius: 14px; | |
border-radius: 14px; | |
-moz-box-shadow: 0px 0px 8px #000000; | |
-webkit-box-shadow: 0px 0px 8px #000000; | |
box-shadow: 0px 0px 8px #000000; | |
position: relative; | |
top: 50%; | |
img { | |
display: block; | |
margin: 0 auto; | |
width: 35px; | |
} | |
} | |
#play_turning{ | |
display: none !important; | |
position: absolute; | |
left: -9999px; | |
} | |
&.transparent{ | |
background: none; | |
#mega_flip_bg { display: none; } | |
} | |
} | |
#_atssh { display: none !important; } | |
.mega_zoom | |
{ | |
position: relative; | |
width: 100% !important; | |
height: 100% !important; | |
&.first{ | |
.mega_panel_navigation{ | |
.mega_prev, .mega_first{ color: $color_orange; } | |
} | |
.mega_more_zoom .prev { visibility: hidden; } | |
} | |
&.last{ | |
.mega_panel_navigation{ | |
.mega_next, .mega_last{ color: $color_orange; } | |
} | |
.mega_more_zoom .next { visibility: hidden; } | |
} | |
&.mega_zoom_in .mega_panel_navigation{ | |
display: none; | |
} | |
&.mega_zoom_in .mega_more_zoom{ | |
display: block; | |
} | |
.mega_more_zoom{ | |
display: none; | |
position: absolute; | |
left: 50%; | |
top: 0; | |
z-index: 12; | |
overflow: hidden; | |
margin-left: -40px; | |
a{ | |
background: #fff; | |
color: $color_orange; | |
padding: 2px 10px; | |
font-size: 20px; | |
border: 1px solid $color_orange; | |
border-top: none; | |
display: inline-block; | |
} | |
} | |
&.search{ | |
#mega_thumbs .results{ display: block !important; } | |
} | |
.mega_flip_bg | |
{ | |
position: absolute; | |
@include full_reset(); | |
z-index: -1; | |
} | |
.mega_flip | |
{ | |
-webkit-transition:margin-left 0.2s; | |
-moz-transition:margin-left 0.2s; | |
-ms-transition:margin-left 0.2s; | |
-o-transition:margin-left 0.2s; | |
transition:margin-left 0.2s; | |
/*margin: 0 auto !important;*/ | |
margin-left: 0px !important; | |
visibility: hidden; | |
overflow: visible !important; | |
z-index: 3; | |
.shadow | |
{ | |
box-shadow: 0 0 7px #000000; | |
} | |
.mega_arrow | |
{ | |
position: absolute; | |
top: 50%; | |
margin-top: (-95/2) + px; | |
background: image-url("editor/arrows.png") right top; | |
width: 36px; | |
right: -36px; | |
height: 95px; | |
cursor: pointer; | |
display: none; | |
&.right | |
{ | |
background-position: left top; | |
left: -36px; | |
} | |
} | |
&.single .page .mega_pag { left: auto; right: 2px; } | |
} | |
.page | |
{ | |
background-color:white; | |
.mega_page { | |
position: absolute; @include full_reset(); | |
.textnode { | |
white-space: nowrap; position: absolute; | |
color: rgba(0,0,0,0); | |
filter: alpha(opacity=0)\9; | |
&::selection, & *::selection { @include transparent_rgba(215, 108, 190, 0.5); } | |
&::-moz-selection, & *::-moz-selection { @include transparent_rgba(215, 108, 190, 0.5); } | |
} | |
.highlight{ @include transparent_rgba(215, 108, 190, 0.4); } | |
} | |
/*** pagintator **/ | |
.mega_pag { | |
display: none; | |
border: 2px solid $color_orange; | |
@include transparent($color_orange, 0.5); | |
color: #fff; | |
position: absolute; | |
right: 2px; | |
bottom: 0px; | |
padding: 2px; | |
} | |
&.turned_flash .mega_pag { display: block; bottom: 2px; } | |
&.even .mega_pag { left: 2px; right: auto; } | |
/*** end pagintator **/ | |
.mega_region | |
{ | |
position: absolute; | |
background: none; | |
cursor: pointer; | |
-webkit-transform: translateZ(2px); | |
border: 1px solid #1F6695; | |
&.slider { ul, li { margin: 0; padding: 0; } } | |
.mega_inner | |
{ | |
background: #D8E8F2; | |
position: relative; | |
opacity: 0.5; | |
z-index: 2; | |
@include full_reset(); | |
} | |
img.bg_region{ | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
position: absolute; | |
&.center{ | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
width: auto; | |
height: auto; | |
} | |
} | |
.wrap_owenslider{ | |
position: absolute; | |
cursor: default; | |
//z-index: 1; | |
@include full_reset(); | |
ul{ | |
position: relative; | |
@include full_reset(); | |
> li { | |
display: none; | |
line-height: 0; | |
&, object, iframe, embed, & > *{ width: 100% !important; height: 100% !important; top: 0px; position: absolute; overflow: hidden; } | |
embed { -webkit-transform-style: preserve-3d; } | |
} | |
} | |
.prev, .next { | |
position: absolute; | |
top: 50%; | |
width: 30px; | |
height: 32px; | |
background: image-url("fancybox/fancybox_sprite_2.png") repeat scroll -3px -38px; | |
margin-top: -14px; | |
& * { display: none; } | |
&.next { | |
right: 0; | |
background-position: -2px -74px; | |
} | |
} | |
} | |
.wrap_text{ | |
position: absolute; | |
cursor: default; | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
top: 0px; | |
left: 0px; | |
&, & * { white-space: nowrap !important; } | |
} | |
.mega_handle | |
{ | |
left: -1px; | |
margin-top: -3px; | |
position: absolute; | |
text-align: left; | |
top: 0; | |
width: 68px; | |
z-index: 20; | |
i { | |
color: #444444; | |
cursor: pointer; | |
font-size: 13px; | |
margin: 0; | |
padding: 2px; | |
&.move { display: none; } | |
&.save { display: none; } | |
&:hover { color: #E74C3C; } | |
} | |
} | |
.mega_icons | |
{ | |
position: absolute; | |
top: -11px; | |
left: 0px; | |
height: 10px; | |
width: 100%; | |
i { margin-left: 2px; background: none; font-size: 12px; vertical-align: top; color: #333; padding: 4px; background: #ccc; &.save { display: none; } } | |
} | |
} | |
.mega_page_bg | |
{ | |
position: absolute; | |
@include full_reset(); | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
&.hard{ | |
background:#ccc !important; | |
color:#333; | |
@include shadow(inset 0 0 5px #666); | |
font-weight:bold; | |
} | |
&.odd{ | |
background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA)); | |
@include background_linear("right, #FFF 95%, #C4C4C4 100%"); | |
@include shadow(inset 0 0 5px #666); | |
} | |
&.even{ | |
background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada)); | |
@include background_linear("left, #fff 95%, #dadada 100%"); | |
@include shadow(inset 0 0 5px #666); | |
} | |
&.loading | |
{ | |
.mega_page { display: none; } | |
} | |
.loading_img | |
{ | |
height: 10%; | |
left: 45%; | |
position: absolute; | |
top: 45%; | |
width: 10%; | |
img { width: 100%; height: 100%; } | |
.perc { | |
display: block; | |
font-size: 7px; | |
margin-top: -2px; | |
text-align: center; | |
} | |
} | |
} | |
&.no_editable | |
{ | |
.page.turned_flash .mega_region, .mega_region:hover{ | |
&.link, &.product, &.gallery, &.info{ | |
border: 4px solid $color_orange !important; | |
margin-left: -3px; | |
margin-top: -3px; | |
@include transparent_rgba(217, 147, 64, 0.3); | |
} | |
} | |
.page .mega_region | |
{ | |
border-color: transparent; | |
.mega_inner { display: none; } | |
} | |
.mega_panel_editor ul, .mega_region .mega_handle, .ui-resizable-handle, .ui-resizable-handle | |
{ | |
display: none !important; | |
} | |
} | |
.page-wrapper | |
{ | |
-webkit-perspective:2000px; | |
-moz-perspective:2000px; | |
-ms-perspective:2000px; | |
-o-perspective:2000px; | |
perspective:2000px; | |
} | |
.mega_panel_editor | |
{ | |
background: none repeat scroll 0 0 #f0f0f0; | |
border-radius: 5px; | |
position: absolute !important; | |
right: 2%; | |
width: 145px; | |
z-index: 999; | |
color: #777; | |
font-size: 12px; | |
top: 5%; | |
.mega_handle | |
{ | |
background: none repeat scroll 0 0 #E74C3C; | |
border-bottom: 1px dashed #AAAAAA; | |
cursor: move; | |
height: 15px; | |
} | |
.mega_editable | |
{ | |
padding: 10px; | |
} | |
ul, li { margin: 0; padding: 0; } | |
ul li | |
{ | |
background: none repeat scroll 0 0 #E8E8E8; | |
border-bottom: 1px solid #E3E3E3; | |
display: block; | |
padding: 9px; | |
cursor: move; | |
i { color: #E74C3C; } | |
&:hover { background-color: #d8d8d8; } | |
&.ui-draggable-dragging { border: 1px solid #1F6695; background: #D8E8F2; height: 9px; width: 125px; opcaity: 0.5; } | |
} | |
.more_options | |
{ | |
a{ | |
color: #666; | |
text-decoration: none; | |
} | |
} | |
.panel_confirm_change_bg{ | |
text-align: center; | |
padding: 10px; | |
a{ | |
display: block; | |
line-height: 18px; | |
} | |
} | |
} | |
.mega_panel_navigation | |
{ | |
@include transparent_rgba(0,0,0,0.5); | |
color: #fff; | |
height: 60px; | |
position: fixed; | |
z-index: 4; | |
bottom: 0; | |
width: 100%; | |
a { | |
color: #fff; | |
text-decoration: none; | |
i { display: block; font-size: 35px; } | |
} | |
ul, li { margin: 0; padding: 0; } | |
ul | |
{ | |
text-align: center; | |
*display: inline; | |
*position: relative; | |
*left: 35%; | |
li | |
{ | |
display: inline-block; | |
*float: left; | |
a | |
{ | |
display: block; | |
font-size: 10px; | |
margin: 4px 8px; | |
&.mega_fullscreen i, &.mega_thumbs i { font-size: 30px; } | |
&.mega_fullscreen{ display: none \9; } | |
//&:focus, &:active{ color: red; } | |
} | |
} | |
} | |
.mega_logo | |
{ | |
left: 15px; | |
top: 16px; | |
position: absolute; | |
overflow: hidden; | |
.custom{ | |
img { max-width: 120px; max-height: 30px; } | |
} | |
} | |
.mega_share | |
{ | |
top: 12px; | |
position: absolute; | |
right: 15px; | |
> a { float:right; margin-left: 15px; } | |
&.open .panel_icons { display: block; } | |
.panel_icons{ | |
display: none; | |
background: none repeat scroll 0 0 #ccc; | |
border-radius: 10px; | |
bottom: 100%; | |
margin-bottom: 8px; | |
padding: 0 6px; | |
position: absolute; | |
right: -7px; | |
text-align: center; | |
> .caret_down | |
{ | |
bottom: -7px; | |
color: #ccc; | |
left: 48%; | |
position: absolute; | |
} | |
.item_icon{ | |
border-top: 1px solid #eee; | |
display: block; | |
padding: 5px 0; | |
position: relative; | |
&:first-child{ border-top: none; } | |
} | |
} | |
.share_icons_items{ | |
a { | |
width: 32px; | |
height: 32px; | |
display: inline-block; | |
background: image-url("addthis.jpg") no-repeat 0 -1px; | |
&.fb { background-position: 0 -34px; } | |
&.tw { background-position: 0 -97px; } | |
&.lk { background-position: 0 -127px; } | |
&.print { background-position: 0 -65px; } | |
} | |
} | |
} | |
.link_cart{ | |
position: relative; | |
&.items_0 { display: none; } | |
.glob{ | |
background: $color_orange; | |
min-width: 18px; | |
padding: 1px 0; | |
position: absolute; | |
text-align: center; | |
border-radius: 3px; | |
font-size: 10px; | |
top: 4px; | |
} | |
} | |
.mini_popup{ | |
//display: inline; | |
.form{ | |
background: none repeat scroll 0 0 #fff; | |
color: #aaa; | |
font-size: 12px; | |
margin-right: 100%; | |
padding: 12px; | |
position: absolute; | |
right: 11px; | |
a { color: $color_orange; } | |
button { width: 40px; vertical-align: top; line-height: 27px; padding: 0 9px; i { font-size: 20px; vertical-align: middle; } } | |
input { @include input; width: 150px; font-size: 12px; padding: 5px; } | |
} | |
.caret_down{ | |
margin-right: 100%; | |
margin-top: 45%; | |
position: absolute; | |
right: 7px; | |
} | |
&.close{ | |
.form, .caret_down{ display: none; } | |
} | |
} | |
#transmission_panel{ | |
&.active { | |
.elements { display: none; } | |
.msg { display: block; } | |
} | |
.msg { | |
display: none; | |
white-space: nowrap; | |
.users { | |
text-align: left; | |
li { margin: 0 5px; } | |
} | |
.cancel i { color: #ff6700; font-size: 30px; display: inline; vertical-align: middle; } | |
} | |
} | |
} | |
#mega_thumbs | |
{ | |
bottom: 0; | |
display: none; | |
left: 0; | |
position: absolute; | |
text-align: center; | |
width: 100%; | |
z-index: 7; | |
.fancybox-close{ | |
right: auto; | |
top: -27px; | |
text-indent: -999px; | |
overflow: hidden; | |
left: 50%; | |
} | |
.results{ | |
@include transparent_rgba(3, 3, 3, 0.6); | |
color: #fff; | |
display: none; | |
font-size: 12px; | |
padding: 7px; | |
position: absolute; | |
right: 0; | |
top: -30px; | |
white-space: nowrap; | |
width: auto; | |
} | |
.w_thumbs | |
{ | |
overflow: auto; | |
@include transparent_rgba(3, 3, 3, 0.6); | |
display: block; | |
white-space: nowrap; | |
ul, li { margin: 0; padding: 0; } | |
ul{ min-height: 70px; } | |
li | |
{ | |
display: inline-block; | |
font-size: 11px; | |
margin: 5px 2px; | |
a { color: #fff; } | |
img { background: #fff; display: block; } | |
} | |
} | |
} | |
} | |
.toggle_panel | |
{ | |
.toggle_header{ | |
background: none repeat scroll 0 0 #CCCCCC; | |
font-size: 20px; | |
text-align: center; | |
cursor: pointer; | |
.fa-angle-double-down { display: none; } | |
&.close { .fa-angle-double-down { display: inline; } .fa-angle-double-up{ display: none; } } | |
} | |
.toggle_body{ | |
padding: 10px; | |
background: #D6D6D6; | |
} | |
} | |
/// fancybox | |
.fancybox-wrap .fancybox-skin | |
{ | |
background: none repeat scroll 0 0 #FFFFFF; | |
border: 1px solid #CCCCCC; | |
border-radius: 0; | |
.modal_info_tag{ | |
max-width: 600px; | |
line-height: 15px; | |
font-size: 12px; | |
margin: 0 auto; | |
} | |
.fancybox-outer | |
{ | |
background: none repeat scroll 0 0 #FFFFFF; | |
border: 0 none; | |
font-size: 13px; | |
color: #626262; | |
.fancybox-inner > form, .fancybox-inner > .form{ padding: 20px; } | |
.fancybox-nav span { visibility: visible; } | |
} | |
.fancybox-nav { | |
top: 50%; | |
width: 36px; | |
height: 34px; | |
margin-top: -17px; | |
span{ | |
display: block; | |
position: relative; | |
top: auto; | |
} | |
} | |
.mega_form, form, .form | |
{ | |
min-width: 500px; | |
min-height: 300px; | |
.mega_descr | |
{ | |
font-size: 10px; | |
font-style: italic; | |
padding: 10px 0; | |
} | |
.msg-error, label.error { color: red; } | |
label { display: block; margin: 7px 0 5px; } | |
textarea, input[type='text'], select { margin-bottom: 5px; width: 98.2%; @include input();} | |
select { width: 100%; } | |
textarea { height: 150px; } | |
.mega_controls { text-align: center; margin-top: 10px; } | |
.current_files | |
{ | |
&, li { margin: 0; padding: 0; } | |
li { | |
border: 1px solid #FFFFFF; | |
overflow: hidden; | |
position: relative; | |
background: #eee; | |
div { float: left; width: 20%; &:first-child { width: 70%; margin-right: 10px; } } | |
.move_sort, .delete { | |
color: #FF0000; | |
font-size: 18px; | |
position: absolute; | |
right: 1px; | |
text-decoration: none; | |
top: 44%; | |
} | |
.move_sort { | |
color: inherit; | |
cursor: move; | |
font-size: 15px; | |
right: 21px; | |
top: 46%; | |
} | |
} | |
} | |
.add_url{ margin-top: 10px; } | |
// tinymce | |
.mce-menubtn.mce-fixed-width span { width: 75px !important; } | |
.mce-btn | |
{ | |
&.mce-active, &.mce-active:hover | |
{ | |
button { background: #555; span { color: #eee; }} | |
} | |
button | |
{ | |
background: none repeat scroll 0 0 #CCCCCC; | |
border-radius: 0; | |
font-size: 11px !important; | |
height: 17px; | |
line-height: 12px; | |
padding: 0 3px; | |
span | |
{ | |
font-size: 11px; | |
} | |
} | |
} | |
} | |
//Print modal | |
.form_print{ | |
.row{ | |
text-align: center; | |
.p_print { | |
border: 2px solid; | |
display: inline-block; | |
font-size: 40px; | |
padding: 25px; | |
margin: 20px; | |
} | |
} | |
} | |
} | |
// personalize dropzone | |
.dropzone{ | |
height: 216px; | |
min-height: 150px !important; | |
overflow: auto; | |
padding: 8px !important; | |
margin-bottom: 20px; | |
.dz-preview{ | |
margin: 15px !important; | |
} | |
.dz-default.dz-message span{ | |
color: #666; | |
line-height: 110px; | |
} | |
} | |
// mobile | |
@media only screen and (min-width : 320px) and (max-width : 650px) and (orientation : landscape), (min-width : 320px) and (max-width : 480px) | |
{ | |
.tooltipster-base , #mega_panel_navigation .addthis_button_print { display: none; } | |
.mega_zoom .mega_panel_navigation | |
{ | |
height: 28px; | |
ul li { vertical-align: top; a { margin: 0px 2px; padding: 0 10px; span { display: none; } i{ font-size: 27px !important; margin-top: 2px; } } } | |
.mega_fullscreen{ display: none; } | |
.mega_logo { | |
width: 22px; | |
img { height: 23px; } | |
a{ display: block; width: 22px !important; overflow: hidden; } | |
} | |
.mega_logo, .mega_share { top: 2px; } | |
.mega_share .main_icon i { font-size: 27px !important; } | |
.mega_share .link i { font-size: 25px !important; } | |
} | |
.fancybox-type-iframe .fancybox-inner { overflow: auto !important; } | |
} | |
//@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) | |
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait), (min-width : 150px) and (max-width : 480px) | |
{ | |
.tooltipster-base, #mega_panel_navigation .addthis_button_print { display: none; } | |
.mega_zoom .mega_panel_navigation | |
{ | |
height: 45px; | |
.mega_download, .mega_fullscreen{ display: none; } | |
.mega_logo { | |
width: 28px; | |
a{ display: block; width: 28px !important; overflow: hidden; } | |
} | |
.mega_logo, .mega_share { top: 7px; } | |
> ul { margin-top: 0px; li span { display: none; } } | |
.mega_share > .link_cart { display: none; } | |
} | |
.fancybox-type-iframe .fancybox-inner { overflow: auto !important; } | |
} | |
/*** mini devices ****/ | |
@media (min-width : 320px) and (max-width : 480px){ | |
.mega_zoom .mega_panel_navigation{ | |
height: 28px !important; | |
.mega_logo { | |
width: 22px !important; | |
} | |
.mega_logo, .mega_share { top: 2px !important; } | |
} | |
} | |
/** ipads **/ | |
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){ | |
.mega_zoom .mega_panel_navigation | |
{ | |
.mega_fullscreen{ display: none; } | |
} | |
// fix for ipad shortness/cut image on zoom | |
.mega_page .mega_page_bg{ | |
-webkit-transform: translate3d(0,0,0); | |
} | |
} | |
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) | |
{ | |
.tooltipster-base, #mega_panel_navigation .addthis_button_print { display: none; } | |
} | |
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) | |
{ | |
.tooltipster-base, #mega_panel_navigation .addthis_button_print { display: none; } | |
} | |
@media print{ | |
#mega_panel_navigation{ display: none !important; } | |
#mega_flip { left: 0 !important; width: 100% !important; height: 100% !important; } | |
} | |
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ie10, ie11+ */ | |
.mega_fullscreen { | |
display: none !important; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment