%PDF-
%PDF-
Mini Shell
Mini Shell
//*****************************************************
// Inputs, Textarea, Selects
//*****************************************************
select { -webkit-appearance:none!important; -moz-appearance:none!important; }
.form { display:block; width:100%; float:left;
input, textarea, select { resize:none; outline:0; border:0; border-bottom:3px solid #fff; padding:10px 8px; font-family:$mainFont; transition:all .3s; font-size:16px;
&:focus { outline:0; }
&.error { border-bottom:3px solid #a90e0e; }
&:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }
}
.form_sec { float:left; width:100%; margin:0 0 10px;
&.half {
.left { width:49%; float:left; }
.right { width:49%; float:right; }
}
&.third {
.left, .middle, .right { float:left; width:32%; }
.middle { margin:0 2%; }
.left_middle { float:left; width:66%; margin:0 2% 0 0; }
}
.instructions { font-style:italic; font-size:12px; color:#999; }
label {
span { color:#e60000; font-size:12px; }
}
.select_holder { position:relative;
&:after { content:'\f107'; font-family:$FA; position:absolute; top:30px; right:0; width:30px; height:30px; background:lighten($lightBlue, 35%); font-size:22px; padding-top:4px; pointer-events:none; }
select { padding:12px 38px 12px 26px!important; }
}
}
.form_instructions { display:block; float:left; color:#666; font-size:14px;
.req { color:#e60000; }
}
&#contactform {
.inputbox, .textarea { display:block; width:100%; float:left; margin:0 0 10px; background:lighten($lightBlue, 35%); border-bottom:3px solid lighten($lightBlue, 35%); font-size:14px; padding:12px 26px; transition:border .3s;
&.error { border-bottom:3px solid lighten($darkBlue, 35%); }
}
label { display:block; width:100%; float:left; }
.submit-btn { display:block; float:left; padding:12px 40px; margin:10px 0 0; border:2px solid $darkBlue; color:$darkBlue; background:transparent; font-weight:700; border-radius:30px;
&:hover { @include rgba-bg($db-r,$db-g,$db-b,.1); }
}
}
&#registrationform, &#addproject, &#editproject, &#updateuser, &#userpass {
.inputbox, .textarea, select { display:block; width:100%; float:left; margin:0 0 10px; background:lighten($lightBlue, 35%); border-bottom:3px solid lighten($lightBlue, 35%); font-size:14px; padding:12px 26px; transition:border .3s;
&.error { border-bottom:3px solid lighten($darkBlue, 35%); }
}
label { display:block; width:100%; float:left; }
.submit-btn { display:block; float:right; padding:12px 40px; margin:40px 0 0; border:2px solid $darkBlue; color:$darkBlue; background:transparent; font-weight:700; border-radius:30px;
&:hover { @include rgba-bg($db-r,$db-g,$db-b,.1); }
}
}
&#addproject, &#editproject, &#map_filter { position:relative;
label { display:block; width:100%; font-size:14px; margin:5px 0 10px 5px; position:relative;
.helper { position:absolute; top:-1px; color:#adadad; font-size:18px; width:18px!important; line-height:18px; height:18px;
&:hover {
i { cursor:pointer; }
.tooltip { bottom:calc(100% + 10px); opacity:1; }
}
.tooltip { opacity:0; position:absolute; bottom:100%; background:$darkBlue; color:#fff; padding:20px; font-size:12px; pointer-events:none; border-radius:3px; width:500px; transition:all .3s; z-index:999;
p { line-height:18px; }
}
&.right { float:none; right:5px;
.tooltip { right:-4px;
&:after { top:100%; right:10px; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; border-color:rgba(10, 65, 110, 0); border-top-color:#0a416e; border-width:5px; margin-left:-5px; }
}
}
&.left { float:none; right:5px;
.tooltip { left:-4px;
&:after { top:100%; left:10px; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; border-color:rgba(10, 65, 110, 0); border-top-color:#0a416e; border-width:5px; margin-left:-5px; }
}
}
}
}
.select_holder {
&:after { top:42px; }
}
.check_sel_holder { display:block; width:100%; float:left; margin:0 0 10px; position:relative;
.check_select { display:block; width:100%; float:left; background:lighten($lightBlue, 35%); border-bottom:3px solid lighten($lightBlue, 35%); font-size:14px; padding:12px 26px 14px;
&:hover { cursor:default; }
}
&:after { top:6px!important; }
.check_sel_toggel { display:none; position:absolute; top:100%; left:0; width:100%; background:lighten($lightBlue, 35%); padding:0 20px 20px; box-shadow:0px 1px 1px darken($lightBlue, 2%); z-index:999;
.inner { max-height:156px; overflow-y:scroll; }
.row { width:100%; float:left; margin:0 0 5px;
input { width:5%; float:left; margin:3px 2% 0 0; }
label { width:93%; float:left; margin:0; }
}
}
&.link_to_projects {
.check_sel_toggel {
.row {
input { margin:3px 10px 0 0; }
}
}
}
}
.form_sec { opacity:1; transition:all .3s; }
&.processing {
.form_sec, .oecd_dac-crs { opacity:.8; pointer-events:none; }
}
.sending { display:none; position:absolute; bottom:0; right:0; width:168px; height:44px; background:rgba(255,255,255,.5); color:$darkBlue; font-size:20px; text-align:center; padding-top:7px; }
}
&#editproject {
.sending { width:184px!important; }
}
&#updateuser, &#userpass {
label { display:block; width:100%; font-size:14px; margin:5px 0 10px 5px; position:relative; }
}
&#map_filter, &#changesai, &#changesai_project, &#changesai_applyacc, &#changesai_applyadmin {
.inputbox, .textarea, select { display:block; width:100%; float:left; margin:0 0 4px; background:#ececec; border-bottom:3px solid #ececec; font-size:14px; padding:12px 26px; transition:border .3s;
&.error { border-bottom:3px solid lighten($darkBlue, 10%); }
}
label { display:block; width:100%; float:left; font-size:12px; }
.submit-btn { display:block; float:right; padding:12px 40px; margin:40px 0 0; border:2px solid $darkBlue; color:$darkBlue; background:transparent; font-weight:700; border-radius:30px;
&:hover { @include rgba-bg($db-r,$db-g,$db-b,.1); }
}
.select_holder {
&:after { background:#ececec; }
}
.check_sel_holder {
.check_select { background:#ececec; border-bottom:3px solid #ececec; }
.check_sel_toggel { background:#ececec; padding:0 10px 20px 20px; box-shadow:0px 1px 1px darken(#ececec, 2%);
.row {
input { width:11%; float:left; margin:3px 3% 0 0; }
label { width:100%; font-size:12px; }
}
}
&.link_to_projects {
.check_sel_toggel {
.row {
input { margin:3px 10px 0 0; }
}
}
}
}
}
&#changesai, &#changesai_project, &#changesai_applyacc, &#changesai_applyadmin { position:relative;
#closeChangeForm, #closeChangeFormadmin { position:absolute; top:10px; right:10px; color:$lightBlue; font-size:30px; background:transparent; padding:0; transition:color .3s;
&:hover { color:lighten($lightBlue, 10%); }
}
label { margin:0 0 5px; }
.submit-btn { margin:10px 0 0; }
}
}
button { border:none; transition: all .3s;font-size: 14px;padding: 14px 0 14px;
&:focus {outline: 0;}
&.submitButton {width: auto; float: none; border-radius: 4px; border:none;}
&.submitSearch {background:#ccc;
&:hover {background:lighten(#ccc, 5%);}
}
&:hover {cursor: pointer;}
}
.rowCell { float: left; width: 100%; position: relative; display:flex; margin:0 0 10px;
.row { position: relative; margin:0; width: 100%; padding: 0 5px;
i {position: absolute; top: 38px; right: 15px; transform: scale(0); transition: transform .2s;
&.fa-times {color: $errorRed;}
&.fa-check {color: $validGreen;}
}
.error ~ .fa-times {transform: scale(1);}
.error ~ .fa-check {transform: scale(0);}
.valid ~ .fa-times {transform: scale(0);}
.valid ~ .fa-check {transform: scale(1);}
&.full {width: 100%; }
&.left {width: 48%; float:left;}
&.right {width: 48%; float: right; }
label {float: left; width: 100%; margin: 0 0 3px;
&.error {margin: 3px 0 0 1px; font-size: small; font-style: italic; color:$errorRed;}
}
input, textarea {width: 100%;}
}
}
//*****************************************************
// WYSIWYG SETTINGS
//*****************************************************
.wp-editor-wrap { float:left; width:100%; }
.mce-toolbar-grp { border:0!important; background:lighten($darkBlue, 10%)!important; }
.mce-toolbar {
&.mce-last { display:none!important; }
.mce-btn { padding:4px!important; border:0!important; background:transparent!important; transition:background .3s!important;
&:hover { background:lighten($darkBlue, 15%)!important; border:0!important; box-shadow:none!important; }
&.mce-active { background:darken($darkBlue, 5%)!important; }
i { position:relative; top:inherit!important; left:inherit!important; transform:scale(1); color:#fff!important; }
}
#mceu_0, #mceu_4, #mceu_5, #mceu_6, #mceu_7, #mceu_8, #mceu_9, #mceu_10, #mceu_11, #mceu_12, #mceu_13, #mceu_14, #mceu_55, #mceu_59, #mceu_60, #mceu_61, #mceu_62, #mceu_63, #mceu_64, #mceu_65, #mceu_66, #mceu_67 { display:none; }
}
.mce-tooltip { display:none!important; }
.mce-edit-area { border-left:solid 1px #bfbfbf!important; border-right:solid 1px #bfbfbf!important; }
.mce-statusbar { background:$darkBlue!important; color:#fff!important; padding:5px 0!important; }
//*****************************************************
// Search Form
//*****************************************************
#search_form {float: left; width: 100%; margin: 10px 0 0;
.row {
input{ float:left;
&.fieldSearch {width: 75%; max-width: 300px;}
}
button.submitSearch {text-align: center; width: 25%;}
}
}
Zerion Mini Shell 1.0