%PDF-
%PDF-
Mini Shell
Mini Shell
//----------------------------------------------------
// SLIDERS
//----------------------------------------------------
.top_banner { width:100%; height:700px; float:left; margin:0 0 20px; position:relative;
&.static { overflow:hidden; font-size:0;
&.small, &.single_news { height:350px; }
}
&.imageslider {
.banner_content { padding:0; margin:0; height:700px;
.banner_table { position:relative; padding:0; height:700px;
.banner_cell { position:relative; z-index:10; }
}
} .bx-controls { position:absolute; bottom:60px; left:0; z-index:100; width:100%;
.bx-pager { padding:0;
.bx-pager-item {
a { background:#fff;
&.active { background:$lightBlue; }
}
}
}
}
}
.banner_content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;
.banner_table { display:table; width:100%; height:100%;
.banner_cell { display:table-cell; width:100%; height:100%; vertical-align:middle;
.banner_info { width:100%; float:left;
.banner_text { display:block; width:50%; margin:0 auto 30px; font-size:50px; font-weight:700; text-align:center; color:#fff;
&.wider { width:100%; }
}
.btn { font-size:24px; }
}
}
}
}
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:lighten($darkBlue, 20%); opacity:.2; z-index:5; }
}
//----------------------------------------------------
// GLOBAL SECTIONS
//----------------------------------------------------
.page-content { width:100%; float:left; margin:30px 0;
.wrapper { max-width:900px; color:#444; }
h2 { font-size:28px; }
h3 { font-size:22px; }
blockquote { display:block; width:95%; margin:0 0 30px 5%; background:lighten($darkBlue, 50%); padding:30px 40px 30px 15%; position:relative; color:#fff;
&:before { content:'”'; display:block; position:absolute; top:30px; left:30px; font-size:120px; color:#fff; line-height:90px; }
}
ul { display:block; float:left; width:100%; list-style-type:none; margin:10px 0 30px 0;
li { list-style-type:none; position:relative; padding:10px 0 10px 50px;
&:before { position:absolute; top:14px; left:20px; content:''; counter-increment:li-counter; background:$darkBlue; width:10px; height:10px; border-radius:50%; }
&:nth-child(even) { background:lighten($lightBlue, 50%); }
}
}
ol { display:block; float:left; width:100%; list-style-type:none; counter-reset:li-counter; position:relative; overflow:hidden; margin:10px 0 30px 0;
li { list-style-type:none; position:relative; padding:10px 0 10px 50px;
&:before { position:absolute; top:6px; left:10px; content:counter(li-counter); counter-increment:li-counter; background:$darkBlue; color:#fff; width:26px; height:26px; border-radius:50%; text-align:center; font-size:12px; line-height:2.1em; }
&:nth-child(even) { background:lighten($lightBlue, 50%); }
}
}
}
.content_section { width:100%; float:left; margin:30px 0 60px; }
.new_success_stories_Large { width:100%; float:left; padding:50px 0; position:relative; background-size:cover; background-position:center center;
.wrapper { height:100%; display:flex; align-items:flex-end;
.textContainer { transition:all .5s ease-in;
h2, p { color:#fff; }
p { font-size:14px; }
&.Offscreen {
opacity:0;
transform: translate3d(0px, 100px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
}
}
.new_success_stories_Leftimage { width:100%; float:left; overflow:hidden;
.wrapper { height:100%;
.container { height:100%; width:100%; display:flex; align-items:stretch;
.imageContainer { width:50%; position:relative; transition:all .5s ease-in;
.imageHolder { width:180%; height:100%; background-size:cover; background-position:center center; position:absolute; top:0; right:5px; }
&.Offscreen {
opacity:0;
transform: translate3d(0px, -450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
.textContainer { height:calc(100% - 79px); width:50%; margin:79px 0 0; transition:all .5s ease-in; display:flex; align-items:center;
.holder { width:100%; text-align:right; padding:0 0 0 100px;
h2 { color:$darkBlue; }
p { font-size:14px; }
}
&.Offscreen {
opacity:0;
transform: translate3d(0px, 450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
}
}
}
.new_success_stories_Rightimage { width:100%; float:left; overflow:hidden;
.wrapper { height:100%;
.container { width:100%; height:100%; display:flex; align-items:stretch;
.imageContainer { width:50%; position:relative; transition:all .5s ease-in;
.imageHolder { width:180%; height:100%; background-size:cover; background-position:center center; position:absolute; top:0; left:5px; }
&.Offscreen {
opacity:0;
transform: translate3d(0px, -450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
.textContainer { height:calc(100% - 79px); width:50%; margin:79px 0 0; transition:all .5s ease-in; display:flex; align-items:center;
.holder { width:100%; text-align:left; padding:0 100px 0 0;
h2 { color:$darkBlue; }
p { font-size:14px; }
}
&.Offscreen {
opacity:0;
transform: translate3d(0px, 450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
}
}
}
.new_success_stories_Images { width:100%; float:left; overflow:hidden; margin:10px 0;
.wrapper {
.container { width:100%; float:left; position:relative;
.imageContainer { width:50%; position:relative; transition: all .5s ease-in;
&.Flleft { float:left; padding:0 5px;
&.Offscreen {
opacity:0;
transform: translate3d(0px, 450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
&.Flright { float:right; padding:0 5px;
&.Offscreen {
opacity:0;
transform: translate3d(0px, 450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
.imgcontLeft { width:180%; height:100vh; background-size:cover; background-position:center center; margin-left:-80%; }
.imgcontRight { width:180%; height:100vh; background-size:cover; background-position:center center; }
}
}
}
}
.new_success_stories_Textboxes { width:100%; float:left; overflow:hidden;
.wrapper { height:calc(100% - 79px); margin-top:79px; display:flex; align-items:center;
.container { width:100%;
.headerContainer { padding:0 10px; }
.mainContainer { transition: all .5s ease-in;
.textContainer { display:flex; align-items:stretch;
.textboxLeft, .textboxRight { width:50%; float:left; padding:0 10px;
p { font-size:14px; }
}
}
&.Offscreen {
opacity:0;
transform: translate3d(0px, 450px, 0px);
}
&.Onscreen {
opacity: 1;
}
}
}
}
}
.country_dropdown { width:100%; float:left; padding:90px 0 110px; background:$darkBlue; text-align:center; color:#fff;
.wrapper {
.text { width:50%; float:left;
h2 { margin:0; }
}
.selectContainer { width:50%; float:left; display:flex; justify-content:center;
.select_holder { position:relative; width:54%;
select {
display:block;
width:100%;
float:left;
margin:0 0 10px;
background:#cbeef6;
border:none;
font-size:14px;
transition:border .3s;
padding:12px 38px 12px 26px;
}
&:after { content:'\f107'; color:#222; font-family:$FA; position:absolute; top:8px; right:8px; width:30px; height:30px; background:lighten($lightBlue, 35%); font-size:22px; padding-top:4px; pointer-events:none; }
}
}
}
}
.boxes {
.text { width:80%; margin:0 auto 30px; color:$darkBlue; text-align:center;
p { font-size:20px; line-height:34px; }
}
.box { float:left; margin:20px 0 60px;
i { display:block; width:80px; height:80px; margin:0 auto 20px; border-radius:50%; background:$lightBlue; color:#fff; padding-top:18px; font-size:38px; text-align:center; }
img { display:block; width:150px; height:150px; margin:0 auto 20px; border-radius:50%; text-align:center; }
h3 { text-align:center; color:$lightBlue; position:relative; margin:0 0 36px; padding:0 0 10px;
&:after { content:''; display:block; width:20%; height:3px; background:$lightBlue; position:absolute; left:40%; top:36px; }
}
.excerpt { width:80%; margin:10px auto; text-align:center;}
}
&.boxlayout_3 {
.box { width:32%;
&.middle { margin:20px 2% 60px; }
}
}
&.boxlayout_4 {
.box { width:25%; padding:0 2%; }
}
&.boxlayout_5 {
.box { width:20%; padding:0 2%; }
}
}
.latest_news, .latest_projects {
a {
&:hover { cursor:pointer; }
}
.news_post { float:left;
.news_thumb { width:100%; float:left; margin:0 0 10px; }
.meta { float:left; width:100%; font-size:12px; color:#666; }
h3 { display:block; float:left; width:100%; font-size:20px; color:$darkBlue; }
.excerpt { display:block; float:left; width:100%; color:#222;
.more { font-size:14px; color:#666; font-weight:700; }
}
}
&.newscount_3, &.newscount_6, &.projectcount_3, &.projectcount_6 {
.news_post { width:32%; margin:0 0 20px;
&.middle { margin:0 2% 20px; }
}
}
&.newscount_4, &.newscount_8, &.projectcount_4, &.projectcount_8 {
.news_post { width:23%; margin:0 0 20px;
&.middle_left { margin:0 1.25% 20px 2.75%; }
&.middle_right { margin:0 2.75% 20px 1.25%; }
}
}
}
.newsletter { padding:90px 0 110px; background:$darkBlue; color:#fff;
.text { width:50%; float:left;
h3 { font-family:$mainFont; font-weight:400; font-size:18px; margin:0; }
}
.signup { width:45%; float:right; margin-top:15px;
input { display:block; float:left; width:60%; padding:10px 18px; }
button { float:right; }
}
}
.partners {
.partner_holder { display:block; width:100%;
.partner { display:block;
.partner_logo { width:200px; max-height:156px; overflow:hidden; }
}
.bx-wrapper { max-width:100%!important; width:100%!important; }
.bx-controls-direction {
a { text-indent:0!important; font-size:30px; line-height:30px; z-index:500;
&.bx-next { text-align:right; }
}
}
}
}
.text_simple {
.text_wrapper { margin:0 auto; max-width:900px; color:#444; }
}
.accordion {
.ac_section { width:100%; padding:20px 50px; border:1px solid #666; color:$darkBlue; font-weight:700; font-size:18px; position:relative;
&.no-top { margin-top:-1px; }
.icon { position:absolute; top:12px; right:50px; width:40px; height:40px; border-radius:50%; background:transparent; text-align:center; padding-top:8px; transition:all .3s;}
&:hover { cursor:pointer;
.icon { background:$darkBlue; color:#fff; }
}
}
.ac_content { display:none; width:100%; max-width:900px; margin:20px auto 60px; color:#444; }
}
.story_section { width:100%; float:left;
.story_sec_heading { width:100%; float:left; background:$darkBlue; color:#fff; font-weight:700; padding:12px 25px; text-align:left; font-size:16px; position:relative;
.icon { display:block; position:absolute; top:11px; right:25px; font-family:$FA; font-size:18px; }
&.open {
.fa-plus { display:none; }
.fa-minus { display:block; }
}
&.closed {
.fa-plus { display:block; }
.fa-minus { display:none; }
}
}
.story_holder { width:100%; float:left;
a { color:#fff; font-size:18px; }
.story { float:left; text-align:center; font-weight:700; background:#222; overflow:hidden;position:relative;
&.group-of-1 { width:100%; height:300px; }
&.group-of-2 { width:50%; height:300px; }
&.group-of-3 { width:33%; height:350px;
&.middle { width:34%; }
}
.story_table { display:table; width:100%; height:100%; position:absolute; top:0; left:0; z-index:100; @include rgba-bg($db-r,$db-g,$db-b,.2); transition:all .3s;
.story_cell { display:table-cell; width:100%; height:100%; vertical-align:middle; }
}
.story_bg { width:100%; height:100%; filter:blur(0); transition:all .3s; }
&:hover {
.story_table { @include rgba-bg($db-r,$db-g,$db-b,.4); }
.story_bg { background-size:120% auto; filter:blur(3px); }
}
}
}
}
.downloads_sec {
.download_table { width:100%; float:left;
a { display:block; float:left; width:100%; background:lighten($lightBlue, 50%);
&:nth-child(even) { background:lighten($lightBlue, 47%); }
}
.row { width:100%; float:left; padding:10px 40px;
.icon { float:left;
i { margin-right:10px; font-size:17px;
&.fa-file-pdf-o { color:#cc0202; }
&.fa-file-word-o { color:#0d79d6; }
&.fa-file-excel-o { color:#72b337; }
&.fa-file-powerpoint-o { color:#e87c0d; }
}
}
.name { float:left; color:#222; }
.filesize { display:block; float:right; margin-left:10px; font-size:14px; font-style:italic; margin-top:2px; }
}
}
}
.text_colorbox {
.colorbox { margin:0 auto; max-width:900px; color:#fff; background:lighten($darkBlue, 20%); padding:30px; }
}
.map-and-chart {
.map_link { width:48%; float:left; height:440px; margin:50px 0 0; background:url('../../assets/images/worldmap.svg') no-repeat center center lighten($lightBlue, 40%); background-size:123% auto; position:relative;
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; @include rgba-bg($db-r, $db-g, $db-b, .4); text-align:center; color:#fff; font-weight:700; font-size:36px; padding:70px 10% 0; transition:background .3s;
i { font-size:135px; color:lighten($lightBlue, 30%); }
}
&:hover {
.overlay { @include rgba-bg($db-r, $db-g, $db-b, .3); }
}
}
.chart_section { float:right; width:48%;
.numProjs { width:100%; float:left; margin:0 0 24px; font-size:26px; text-align:center; color:$darkBlue; font-weight:700;
span { color:$lightBlue; }
}
.chart_holder { width:80%; margin-right:10%; float:right; }
}
}
//----------------------------------------------------
// SEARCH PAGE
//----------------------------------------------------
.search_top { margin:30px 0 0;
#searchform { display:block; float:left; width:100%;
input { display:block; width:85%; border:0; padding:12px 20px; float:left; background:lighten($lightBlue, 10%); color:#fff; margin-right:20px; border-bottom:3px solid lighten($lightBlue, 10%); transition:border .3s;
&.error { border-bottom:3px solid darken($lightBlue, 10%); }
&:focus { outline:none!important; }
}
button { display:block; float:right; width:12%; background:darken($lightBlue, 10%); color:#fff; border:0; padding:13px 40px; font-size:14px; transition:background .3s;
&:hover { cursor:pointer; background:darken($lightBlue, 13%); }
}
}
}
.search_result { margin:30px 0 0;
.wrapper { max-width:900px; }
h2 { color:$darkBlue; margin:0 0 50px; }
.result_section { width:100%; float:left; margin:0 0 50px;
h3 { font-size:18px; text-transform:uppercase; color:$grayBlue; }
}
.result_post { width:100%; float:left; padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid #ddd;
h3 { font-size:18px; text-transform:uppercase; color:$grayBlue;
span { color:#666; }
}
.search-content { font-size:14px; line-height:22px;
p { display:block; float:left; width:75%; }
.readMore { float:right; max-width:22%; }
}
}
.pagination { margin:60px 0 0; }
}
//----------------------------------------------------
// MAP FILTER
//----------------------------------------------------
#map { width:100%; height:840px; opacity:1; transition:opacity .3s;
&.opaque { opacity:0!important; }
.gm-style-iw {
h3 { font-weight:400; font-size:18px; color:$darkBlue; }
p { line-height:18px; margin:0 0 10px; }
button { display:block; float:left; background:transparent; color:$darkBlue; padding:0; transition:all .3s;
&:hover { color:$lightBlue; }
&.show_sai { margin-left:13px; position:relative;
&:before { content:'|'; color:#999; position:absolute; top:-1px; left:-8px; }
}
}
}
}
#map_content { position:absolute; top:0; right:0; width:40%; background:#f4f4f4; padding:40px 15px 50px 50px; height:840px; border-left:1px solid #c9c9c9; z-index:500; transition:all .5s;
&.hidden { right:-39%; }
#hide_mc { transform:rotate(-90deg); position:absolute; top:48px; left:-70px; background:#f4f4f4; color:#999; padding:12px 24px; border:1px solid #c9c9c9; border-bottom:1px solid #f4f4f4; transition:all .3s;
i { color:$lightBlue; }
&:hover { background:darken(#f4f4f4, 5%); border-bottom:1px solid darken(#f4f4f4, 5%); }
}
.inner { width:100%; float:left; height:750px; overflow-y:scroll; padding:0 20px 0 0; }
}
.filter_button { display:block; float:left; margin-right:20px;
button { display:block; float:left; color:$lightBlue; font-size:48px; background:transparent; border:0; margin:0; padding:0; }
}
#mapStart { width:100%; float:left;
h2 { display:block; float:left; color:$darkBlue; margin:10px 0 20px; }
article { width:100%; float:left; margin:0 0 20px;
.newProject { display:block; float:left; width:49%; margin:0 0 10px; color:#fff; background:#0b426f; font-weight:700; padding:24px 0; border-radius:3px; text-align:center; font-size:14px; opacity:1; transition:opacity .3s;
&:hover { opacity:.8;}
}
}
#quickFilter { width:100%; float:left;
h3 { display:block; width:100%; float:left; color:#adadad; font-size:20px; font-weight:400; }
button { display:block; float:left; width:49%; margin:0 0 10px; color:#fff; font-weight:700; padding:24px 0; border-radius:3px; opacity:1; transition:opacity .3s;
&:nth-child(odd){ float:right; }
&:hover { opacity:.8;}
&#proposed { background:#0b426f; }
&#planned { background:#7f9bb1; }
&#ongoing { background:#6b8ba6; }
&#completed { background:#456e90; }
&#filterAll { background:#0b426f; }
}
}
#customFilter { width:100%; float:left; margin:30px 0 0;
h3 { display:block; width:100%; float:left; color:#adadad; font-size:20px; font-weight:400; }
button { display:block; float:left; width:100%; margin:0 0 10px; color:#fff; font-weight:700; padding:24px 0; border-radius:3px; opacity:1; transition:opacity .3s;
&:hover { opacity:.8;}
&#custom { background:#41a69c; }
}
}
}
#filter { display:none; width:100%; float:left;
h2 { display:block; color:$darkBlue; margin:10px 0 0; }
#rf { float:left; color:$lightBlue; margin:0 0 20px; opacity:1; transition:opacity .3s;
&:hover { cursor:pointer; opacity:.8; }
}
#result { width:100%; float:left; margin:50px 0 0; padding-bottom:50px;
h2 { width:100%; margin:10px 0; }
#no-active-filter, #no_results { width:100%; float:left; color:#888; text-align:center; font-size:16px; font-style:italic; width:80%; margin:0 10%; }
#no_results { display:none; }
#resultCounter { display:block; float:left; width:100%; font-size:14px; color:#999; font-weight:700; font-style:italic; margin:-10px 0 10px; }
.row_heading { width:100%; float:left; color:$darkBlue; font-weight:700; margin:0 0 5px;
.ben { width:25%; float:left; padding-left:10px; }
.name { width:50%; float:left; padding-left:10px; }
.status { width:25%; float:left; padding-left:10px; }
}
#filterResult { width:100%; float:left; position:relative; }
.row { width:100%; float:left; background:#fff;
&:nth-child(odd) { background:#daf0ee; }
.project_head { width:100%; float:left; padding:12px 0; font-size:14px; font-weight:700; opacity:1; transition:.3s;
&:hover { opacity:.8; cursor:pointer; }
.ben { width:25%; min-height:2px; float:left; padding-left:10px; }
.name { width:50%; min-height:2px; float:left; padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status { width:10%; min-height:2px; float:left; margin-left:10px; position:relative; text-align:center;
.toolTipbox { opacity:0; pointer-events:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:$darkBlue; color:#fff; border-radius:3px; padding:6px 10px; white-space:nowrap; border:1px solid #41a69c; transition: all .3s;
&:after, &:before { top:100%; left:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; }
&:after { border-color:rgba(10, 65, 110, 0); border-top-color:#0a416e; border-width:5px; margin-left:-5px; }
&:before { border-color:rgba(65, 166, 156, 0); border-top-color:#41a69c; border-width:6px; margin-left:-6px; }
}
&:hover {
.toolTipbox { opacity:1; bottom:calc(100% + 10px); }
}
}
.icon { float:right; width:30px; height:30px; background:$darkBlue; color:#fff; text-align:center; padding-top:3px; font-size:16px; border-radius:50%; margin:-5px 20px -5px 0; }
}
.project_bottom { display:none; width:100%; float:left; padding:0 10px 20px;
.row { float:left; width:100%; background:transparent; margin:0 0 5px;
&:nth-child(odd) { float:right; }
.half { width:48%; float:left; font-size:12px; }
.twothird { width:66%; float:left; font-size:12px; }
.onethird { width:30%; float:right; font-size:14px;
a { display:block; float:right; background:$darkBlue; color:#fff; padding:10px 20px; border-radius:3px; margin-right:10px; transition:background .3s;
&:hover { background:lighten($darkBlue, 10%); }
}
}
.label { display:block; width:100%; float:left; font-size:14px; font-weight:700; color:$darkBlue; }
}
}
}
#generateExcelExport { position:absolute; top:-38px; right:0;
#excelExport { display:block; float:right; margin-top:0; border:2px solid #34b300; color:#278002; padding:12px 30px; border-radius:30px; background:transparent; transition:all .3s;
&:hover { background:#e9ffe2; }
&.disabled { color:#999; border-color:#999; background:#f1f1f1;
&:hover { cursor:normal!important; }
}
}
}
}
}
#sai_holder { display:none; width:100%; float:left; position:relative;
h2 { display:block; float:left; color:#444; margin:10px 0 20px;
span { color:$darkBlue; }
}
#saichanges { position:absolute; top:0; right:0; background:$darkBlue; border-radius:40px; color:#fff; padding:12px 20px; transition:background .3s;
&:hover { background:lighten($darkBlue, 10%); }
}
#saiInfo { width:100%; float:left;
.sai_infor_holder { width:100%; float:left; font-size:14px; margin:0 0 20px; }
h2, h3 { display:block; float:left; width:100%; }
h2 { color:lighten($darkBlue, 10%); font-size:24px;
&.mb-0 { margin-bottom:0; }
}
h3 { color:$lightBlue; font-size:20px; }
.wdi_otherInitiatives, .wdi_performance { width:100%; float:left; margin:30px 0 0; }
.wdi_otherInitiatives {
a { display:block; width:100%; float:left; padding:5px 10px; border-bottom:1px solid #eaeaea;
&:last-child { border-bottom:0; }
i { display:block; float:left; color:$lightBlue; width:4%; margin:3px 0 0; }
.title { display:block; float:left; width:80%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.filesize { display:block; float:right; color:#adadad; font-size:12px; font-style:italic; margin:3px 0 0; }
}
}
.wdi_performance {
.empty { display:block; width:100%; float:left; color:#999; font-style:italic; margin:20px 0 0; }
h2 { margin:0 0 -20px; }
h3 { margin:20px 0 0; }
.performanceHolder { width:100%; float:left;
a { display:block; width:100%; float:left; padding:5px 10px; border-bottom:1px solid #eaeaea;
&:last-child { border-bottom:0; }
.date { display:block; float:left; width:16%; color:$lightBlue; font-weight:700; font-size:14px; margin:1px 0 0; }
.title { display:block; float:left; width:84%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
}
.no-link { display:block; width:100%; float:left; padding:5px 10px; border-bottom:1px solid #eaeaea;
.date { display:block; float:left; width:16%; font-weight:700; font-size:14px; margin:1px 0 0; }
}
}
}
.projectsinSai { width:100%; float:left; margin-top:10px;
.row_heading { width:100%; float:left; color:$darkBlue; font-weight:700; margin:0 0 5px; font-size:14px;
.ben { width:15%; float:left; padding-left:10px; }
.name { width:50%; float:left; padding-left:10px; }
.status { width:20%; float:left; padding-left:10px; }
}
.row { width:100%; float:left; background:#fff;
&:nth-child(odd) { background:#daf0ee; }
.project_head { width:100%; float:left; padding:12px 0; font-size:14px; font-weight:700; opacity:1; transition:.3s;
&:hover { opacity:.8; cursor:pointer; }
.ben { width:15%; min-height:2px; float:left; padding-left:10px; }
.name { width:50%; min-height:2px; float:left; padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status { width:20%; min-height:2px; float:left; padding-left:10px; }
.icon { float:right; width:30px; height:30px; background:$darkBlue; color:#fff; text-align:center; padding-top:3px; font-size:16px; border-radius:50%; margin:-5px 20px -5px 0; }
}
.project_bottom { display:none; width:100%; float:left; padding:0 10px 20px;
.row { float:left; width:100%; background:transparent; margin:0 0 5px;
&:nth-child(odd) { float:right; }
.half { width:48%; float:left; font-size:12px; }
.twothird { width:66%; float:left; font-size:12px; }
.onethird { width:30%; float:right; font-size:14px;
a { display:block; float:right; background:$darkBlue; color:#fff; padding:10px 20px; border-radius:3px; margin-right:10px; transition:background .3s;
&:hover { background:lighten($darkBlue, 10%); }
}
}
.label { display:block; width:100%; float:left; font-size:14px; font-weight:700; color:$darkBlue; }
}
}
}
}
}
}
#working, #saiworking { width:100%; float:left; display:none;
.spinner { margin:24px auto 0; width:70px; text-align:center;
div { width:18px; height:18px; background-color:$lightBlue; border-radius: 100%; display: inline-block; animation: sk-bouncedelay 1.4s infinite ease-in-out both;
&.bounce1 { animation-delay: -0.32s; }
&.bounce2 { animation-delay: -0.16s; }
}
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
transform: scale(0);
} 40% {
transform: scale(1.0);
}
}
#changeSAIHolder { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.3); z-index:800;
#changesaiContainer { display:block; float:none; width:600px; margin:200px auto 0;
#changesai { display:block; float:left; width:100%; background:#fff; padding:40px 40px 50px; }
}
}
//----------------------------------------------------
// BACKEND
//----------------------------------------------------
.my_projects { position:relative;
.create_project_btn { display:block; float:right; position:absolute; top:-30px; right:0; z-index:20; }
}
.project_list { width:100%; float:left;
&.drafts { margin-top:50px; }
.pl_title { width:100%; float:left; background:$darkBlue; padding:10px 0;
h2 { display:block; width:100%; float:left; margin:0; text-align:center; color:#fff; text-transform:uppercase; font-size:18px; }
}
.pl_headings { width:100%; float:left; background:$lightBlue; padding:8px 20px; font-weight:700; font-family:$secondFont; color:#fff;
.id, .name, .created, .edited, .status { float:left; }
.id { width:10%; }
.name { width:40%; }
.created { width:12%; }
.edited { width:12%; }
.status { width:15%; }
.controlls { width:10%; float:right; text-align:right; }
}
.row { width:100%; float:left; padding:0 20px; background:#eaeaea; font-size:14px;
&:nth-child(even) { background:#fff; }
.id, .name, .created, .edited, .status { float:left; padding:6px 10px 6px 0; }
.id { width:10%; font-weight:700; color:$darkBlue; }
.name { width:40%; }
.created, .edited { width:12%; color:#666; }
.status { width:15%;
.draft { color:$lightBlue; }
.pending { color:#ca0303; font-style:italic; }
.published { color:#4bad01; }
}
.controlls { display:inline-block; width:10%; float:right; text-align:right;
.controll_holder { display:inline-block; position:relative; width:22px; height:22px; border:1px solid; border-radius:50%; margin:3px 0 0 5px; text-align:center; font-size:12px; text-indent:1px; padding-top:1px;
&.edit { border-color:$lightBlue; color:$lightBlue; }
.tooltip { opacity:0; pointer-events:none; position:absolute; bottom:100%; left:-46px; background:$darkBlue; color:#fff; border-radius:3px; padding:6px 10px; white-space:nowrap; border:1px solid #41a69c; transition: all .3s;
&:after, &:before { top:100%; left:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; }
&:after { border-color:rgba(10, 65, 110, 0); border-top-color:#0a416e; border-width:5px; margin-left:-5px; }
&:before { border-color:rgba(65, 166, 156, 0); border-top-color:#41a69c; border-width:6px; margin-left:-6px; }
}
&:hover {
.tooltip { opacity:1; bottom:calc(100% + 10px); }
}
}
}
}
.no-projects { width:100%; float:left; margin-top:20px; text-align:center; font-style:italic; color:#999; }
}
//----------------------------------------------------
// THIRD LEVEL MENU
//----------------------------------------------------
#third_level_menu { display:block; float:left; width:100%; margin:60px 0 30px;
ul { display:block; width:100%; margin:0; padding:0;
li { padding:0; display:none; margin:0; padding:0;
a { display:none; }
&.current-menu-ancestor { display:block;
.sub-menu { margin:0; padding:0;
li { display:none; margin:0; padding:0;
&.current-menu-item, &.current-menu-ancestor { display:block;
.sub-menu { display:inline-block; width:100%; font-size:0; text-align:center; list-style:none; margin:0; padding:0;
li { list-style:none; margin:0; padding:0; display:inline-block;
a { display:block; float:left; font-size:16px; padding:8px 20px; font-weight:700; border:1px solid #dedede; margin-left:-1px; background:transparent; transition:all .3s;
&:hover { background:lighten($darkBlue, 20%); color:#fff; }
}
&.current-menu-item {
a { background:$darkBlue; color:#fff; }
}
}
}
}
}
}
}
}
}
}
//----------------------------------------------------
// CONTACT PAGE
//----------------------------------------------------
.contact_page { width:100%; float:left; margin:30px 0 50px;
.contact_left, .contact_right { width:50%; float:left; padding-top:30px;
h2 { color:$darkBlue; }
p { color:$darkBlue; margin:0 0 50px; }
}
.contact_left { padding-right:5%; }
.contact_right { padding-left:5%; border-left:2px solid #ddd; }
}
.coworkers { width:100%; float:left; margin:16px 0 50px;
.coworker { width:100%; float:left; margin:0 0 30px;
.coworker_avatar { width:100px; float:left; height:100px; border-radius:50%; background:#e8e8e8; text-align:center; overflow: hidden;
i { color:#fff; font-size:32px; margin-top:30px; }
}
.coworker_info { width:calc(100% - 150px); float:right; margin:8px 0 0;
.name { color:$darkBlue; font-weight:700; margin:0 0 10px; }
a { display:block; float:left; width:100%; }
}
}
}
Zerion Mini Shell 1.0