100 lines
3.6 KiB
SCSS
100 lines
3.6 KiB
SCSS
/*
|
|
Mixin for the forms.
|
|
Parameters:
|
|
- $frm-name : The class name of the form.
|
|
- $frm-border : The border of the form elements.
|
|
- $frm-border-radius : The border-radius of the form elements.
|
|
- $frm-margin : The margin of the form elements.
|
|
- $frm-padding : The padding of the form elements.
|
|
- $frm-focus-color : The color used to mark the focused form element.
|
|
- $frm-invalid-color : The color used to mark an invalid form element.
|
|
- $frm-disabled-cursor : The cursor style when hovering over disabled form elements.
|
|
- $frm-disabled-opacity : The opacity of the form elements when disabled.
|
|
- $frm-readonly-bg-color : The background color of the form elements when they are readonly.
|
|
- $frm-readonly-border-color : The border color of the form elements when they are readonly.
|
|
- $frm-select-height : The height for non-multiline select elements in the form.
|
|
- $frm-label-margin : The margin for the form's label elements.
|
|
- $frm-ctrl-group-name : The class name of the control groups in the form.
|
|
- $frm-ctl-group-margin : The margin for control groups inside the form.
|
|
- $frm-inline-name : The class name for forms with inline style.
|
|
- $frm-aligned-name : The class name for forms with aligned style.
|
|
- $frm-aligned-label-width : The width of labels in forms with aligned style.
|
|
Notes:
|
|
- [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling.
|
|
Please use the button styles and mixins provided to properly style them to your liking.
|
|
*/
|
|
@mixin make-frm( $frm-name, $frm-border, $frm-border-radius,
|
|
$frm-margin, $frm-padding, $frm-focus-color,
|
|
$frm-invalid-color, $frm-disabled-cursor, $frm-disabled-opacity,
|
|
$frm-readonly-bg-color, $frm-readonly-border-color,
|
|
$frm-select-height, $frm-label-margin, $frm-ctrl-group-name,
|
|
$frm-ctrl-group-margin, $frm-inline-name,
|
|
$frm-aligned-name, $frm-aligned-label-width){
|
|
.#{$frm-name}{
|
|
input[type="color"], input[type^="date"], input[type$="time"], input[type="email"],
|
|
input[type="month"], input[type="week"], input[type="text"], input[type="password"],
|
|
input[type="url"], input[type="number"], input[type="search"], input[type="tel"],
|
|
select, textarea{
|
|
box-sizing: border-box;
|
|
border: $frm-border;
|
|
border-radius: $frm-border-radius;
|
|
box-shadow: none;
|
|
}
|
|
input:not([type]){
|
|
box-sizing: border-box;
|
|
border: $frm-border;
|
|
border-radius: $frm-border-radius;
|
|
box-shadow: none;
|
|
}
|
|
input, select, textarea{
|
|
display: block;
|
|
margin: $frm-margin;
|
|
padding: $frm-padding;
|
|
&:focus{
|
|
border-color: $frm-focus-color;
|
|
}
|
|
&[disabled]{
|
|
cursor: $frm-disabled-cursor;
|
|
opacity: $frm-disabled-opacity;
|
|
}
|
|
&:invalid, &:focus:invalid, &:focus:invalid:focus{
|
|
border-color: $frm-invalid-color;
|
|
}
|
|
&[readonly]{
|
|
background-color: $frm-readonly-bg-color;
|
|
border-color: $frm-readonly-border-color;
|
|
}
|
|
}
|
|
input[type="checkbox"], input[type="radio"]{
|
|
display: inline-block;
|
|
}
|
|
select{
|
|
height: $frm-select-height;
|
|
&[multiple]{
|
|
height: auto;
|
|
}
|
|
}
|
|
label{
|
|
margin: $frm-label-margin;
|
|
}
|
|
&.#{$frm-inline-name}, &.#{$frm-aligned-name}{
|
|
input, select, textarea, label{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
&.#{$frm-inline-name}{
|
|
.ctrl-group{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
&.#{$frm-aligned-name} .#{$frm-ctrl-group-name} label{
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
width: $frm-aligned-label-width;
|
|
margin-top: 0;
|
|
}
|
|
.#{$frm-ctrl-group-name}{
|
|
margin: $frm-ctrl-group-margin;
|
|
}
|
|
}
|
|
} |