Skip to content

Instantly share code, notes, and snippets.

@owen2345
Last active August 29, 2015 14:05
Show Gist options
  • Save owen2345/c6ffad6c1d74d80fae90 to your computer and use it in GitHub Desktop.
Save owen2345/c6ffad6c1d74d80fae90 to your computer and use it in GitHub Desktop.
less and sass code snippet
/* ------------------ 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; }
}
}
}
}
$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