mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
134 lines
3.6 KiB
SCSS
134 lines
3.6 KiB
SCSS
// ----------------------------------------------------------------
|
|
// Styling for form elements
|
|
// ----------------------------------------------------------------
|
|
|
|
.form-Container{}
|
|
.grouping{padding:$spacing 0}
|
|
|
|
// Legend Styling
|
|
.fs-Legend{
|
|
border:1px solid $c-Border;
|
|
margin-bottom:$spacing*2;
|
|
padding:$spacing*2 $spacing*3;
|
|
}
|
|
legend, .legend{
|
|
font-size:$eps;
|
|
margin-left:-$spacing;
|
|
padding:0 $spacing;
|
|
}
|
|
|
|
/* Text Input Areas & Labels */
|
|
.text-Label{
|
|
font-family:$arial;
|
|
cursor:pointer;
|
|
display:block;
|
|
margin-bottom:$spacing;
|
|
}
|
|
|
|
.dis-Label{cursor:not-allowed}
|
|
|
|
.input-Area, %input-Area{
|
|
background:#fff;
|
|
border:2px solid $c-Border;
|
|
font-family:$arial;
|
|
line-height:1.25;
|
|
margin-bottom:$spacing*2;
|
|
padding:$spacing*2 $spacing;
|
|
width:80%;
|
|
&:focus{
|
|
background:$c-Lighter;
|
|
border:2px solid #50B6D5;
|
|
@include box-shadow($bs-2)
|
|
}
|
|
}
|
|
|
|
.text-Area{
|
|
@extend %input-Area;
|
|
display:block;
|
|
min-height:150px;
|
|
resize:vertical;
|
|
width:100%;
|
|
}
|
|
|
|
/* Check/Radio Inputs & Labels */
|
|
.option-Container{
|
|
@extend .text-Label;
|
|
// background:url() no-repeat left center;
|
|
// ------ instead of reusing btns for inputs, can put img sprites here instead
|
|
position:relative;
|
|
&:hover{
|
|
.btn-Radio,
|
|
.btn-Check{border-color:#333}
|
|
}
|
|
}
|
|
.option-Label{cursor:pointer; display:block; padding-left:$spacing*7; position:relative; z-index:2}
|
|
|
|
.input-Hide{@include invisible;}
|
|
|
|
.btn-Radio, .btn-Check{
|
|
@extend %btn;
|
|
background:$c-Btn-RC; border:1px solid #ccc; font:{size:14px; weight:bold}; height:19px; left:0; padding:2px; position:absolute; top:0; width:19px;
|
|
&:hover{background:$c-Btn-1}
|
|
}
|
|
.btn-Radio{@include border-radius($radius*5)}
|
|
|
|
.input-Radio.selected-Radio .btn-Radio{@extend .btn-Radio:hover; border-color:#333}
|
|
.input-Check.selected-Check .btn-Check{@extend .btn-Check:hover; border-color:#333}
|
|
|
|
.ifChecked{visibility:hidden}
|
|
.selected-Check .ifChecked{visibility:visible}
|
|
|
|
/* Drop Down Selection Inputs */
|
|
.select-Container{
|
|
@extend %input-Area;
|
|
background:url(/img/drop-Arrow.png) no-repeat 99% center #fff; display:inline-block; overflow:hidden; float:left;
|
|
}
|
|
.input-Select{background:none; border:0; font-size:$base; padding-right:$spacing*4; width:120%; -webkit-appearance:textarea}
|
|
|
|
// File Input Styling
|
|
.file-Input-Area{
|
|
position:relative;
|
|
label{cursor:default}
|
|
}
|
|
.input-File{
|
|
cursor:pointer;
|
|
left:0;
|
|
height:100%;
|
|
opacity:0;
|
|
position:absolute;
|
|
top:0;
|
|
width:100%;
|
|
z-index:9;
|
|
}
|
|
.input-File-Text{
|
|
cursor:pointer;
|
|
display:inline-block;
|
|
}
|
|
|
|
/* Inputs not supported in all browsers */
|
|
.input-Color{ // reusing a lot of input-Area here, but not @extending it because the rules of input-Area 'break' how this should look in chrome/opera
|
|
border:1px solid $c-Border; font-family:$arial; margin-bottom:$spacing*2; padding:0 $spacing; height:45px; width:50%;
|
|
&:focus{background:$c-Lighter; border:1px solid #50B6D5; @include box-shadow($bs-2)}
|
|
}
|
|
|
|
.input-Number{
|
|
@extend %input-Area;
|
|
font-size:$base;
|
|
}
|
|
|
|
::-webkit-input-placeholder { /* WebKit browsers */
|
|
color:$placeholderColor!important; //overriding bootstrap css
|
|
font-style: italic;
|
|
}
|
|
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color:$placeholderColor!important; //overriding bootstrap css
|
|
font-style: italic;
|
|
}
|
|
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color:$placeholderColor!important; //overriding bootstrap css
|
|
font-style: italic;
|
|
}
|
|
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
color:$placeholderColor!important; //overriding bootstrap css
|
|
font-style: italic;
|
|
}
|