Files
Umbraco-CMS/src/Umbraco.Web.UI.Client/src/less/forms.less

826 lines
17 KiB
Plaintext

//
// Forms
// --------------------------------------------------
// UMBRACO STYLES
// --------------
small.umb-detail,
label small, .guiDialogTiny {
color: @gray-5 !important;
text-decoration: none;
display: block;
font-weight: normal;
font-size: 11px
}
label.control-label, .control-label {
padding: 0 10px 0 0 !important;
font-weight: bold;
color: @black;
font-size: 14px;
}
.umb-status-label{
color: @gray-3 !important;
}
.controls-row label{padding: 0 10px 0 10px; vertical-align: middle;}
//utill styll to hide child untill hover
/*.hover-show{visibility: hidden;}
*:hover > .hover-show{visibility: visible;}
*/
//breadcrumb modifications
.breadcrumb{height: 30px; display: block; margin-top: 10px;}
.breadcrumb li{height: 30px; vertical-align: middle;}
.breadcrumb li a{vertical-align: middle; height: 30px;}
.breadcrumb input{font-size: 11px !Important;}
/* SEACH FORM */
.form-search {
position: relative;
padding: 0;
}
.form-search a{
text-decoration:none;
cursor:pointer;
}
.form-search a:hover{
color: @gray-3;
}
.form-search h4 {
color: @gray-3;
}
.form-search small {
color: @gray-8;
}
.form-search .icon, .form-search .icon-search {
position: absolute;
z-index: 1;
top: 6px;
left: 6px;
color: @gray-8;
}
.form-search .icon-search {
pointer-events: none;
}
.form-search input {
width: 90%;
font-size: @fontSizeLarge;
font-weight: 400;
border: 1px solid @gray-8;
padding: 4px 0px 4px 16px;
padding-left: 25px !Important;
line-height: 22px;
background: @white
}
.form-search .icon-search + .search-input {
padding-left: 25px !important;
}
.form-search .search-input {
font-weight: bold;
border-color: @gray-8;
&:hover,
&:focus,
&:focus:hover {
border-color: @gray-7;
}
&:-moz-placeholder {
font-weight: normal;
}
&:-ms-input-placeholder {
font-weight: normal;
}
&::-webkit-input-placeholder {
font-weight: normal;
}
}
// GENERAL STYLES
// --------------
// Make all forms have space below them
form {
margin: 0 0 @baseLineHeight;
}
form.-no-margin-bottom {
margin-bottom: 0;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
border: 0;
border-bottom: 1px solid @gray-8;
// Small
small {
font-size: @baseLineHeight * .75;
color: @gray-8;
}
}
// Set font for forms
label,
input,
button,
select,
textarea {
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
label {
display: inline-block;
margin-bottom: 5px;
}
// Form controls
// -------------------------
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: @inputHeight;
padding: 4px 6px;
margin-bottom: @baseLineHeight / 2;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray-2;
.border-radius(@inputBorderRadius);
vertical-align: middle;
box-sizing: border-box;
}
input.-full-width-input {
width: 100%;
box-sizing: border-box;
padding: 4px 6px;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
.uneditable-input {
width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
.transition(~"border linear .2s, box-shadow linear .2s");
// Focus state
&:focus {
border-color: @inputBorderFocus;
outline: 0;
.tabbing-active & {
outline: 2px solid @inputBorderTabFocus;
}
}
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: @inputHeight;
line-height: @inputHeight;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Uneditable inputs
// -------------------------
// Make uneditable inputs look inactive
.uneditable-input,
.uneditable-textarea {
color: @gray-8;
background-color: darken(@inputBackground, 1%);
border-color: @inputBorder;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
white-space: nowrap;
}
// Make uneditable textareas behave like a textarea
.uneditable-textarea {
width: auto;
height: auto;
}
// Placeholder
// -------------------------
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
.placeholder(@gray-6);
}
// CHECKBOXES & RADIOS
// -------------------
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 20px;
}
.radio.no-indent,
.checkbox.no-indent {
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: 0px;
margin-right:5px;
}
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
}
// Radios and checkboxes on same line
// TODO: v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
display: inline-block;
padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
// INPUT SIZES
// -----------
// General classes for quick sizes
.input-mini { width: 60px; }
.input-small { width: 90px; }
.input-medium { width: 150px; }
.input-large { width: 210px; }
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
input.input--no-border { border: none; }
// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
// Redeclare since the fluid row class is more specific
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
float: none;
margin-left: 0;
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] {
display: inline-block;
}
.bigInput, .input-large-type{
font-size: 20px !important;
}
// GRID SIZING FOR INPUTS
// ----------------------
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
// Float to collapse white-space for proper grid alignment
.controls-row [class*="span"],
// Redeclare the fluid grid collapse since we undo the float for inputs
.row-fluid .controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: @inputDisabledBackground;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
//SD: NOTE: Had to change these to use our 'form' prefixed colors since we cannot
// share colors with the notifications/alerts. Also had to change them so that
// we do not show any errors unless the containing element has the show-validation
// class assigned.
// FORM FIELD FEEDBACK STATES
// --------------------------
// Error
.show-validation.ng-invalid .control-group.error,
.show-validation.ng-invalid .umb-editor-header__name-wrapper {
.formFieldState(@formErrorText, @formErrorText, @formErrorBackground);
}
//val-highlight directive styling
.highlight-error {
color: @formErrorText !important;
border-color: @red-l1 !important;
}
// FORM ACTIONS
// ------------
.form-actions {
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight;
background-color: @formActionsBackground;
border-top: 1px solid @gray-8;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
}
// HELP TEXT
// ---------
.help-block,
.help-inline {
color: lighten(@textColor, 15%); // lighten the text some for contrast
}
.help-block {
display: block; // account for any element using help-block
margin-bottom: @baseLineHeight / 2;
}
.help-inline {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 2px;
}
div.help {
margin-top: 5px;
}
table.domains .help-inline {
color:@red;
}
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: @baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
// Reset the white space collapse hack
input,
select,
.uneditable-input,
.dropdown-menu,
.popover {
font-size: @baseFontSize;
}
input,
select,
.uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
vertical-align: top;
// Make input on top when focused so blue border and shadow always show
&:focus {
z-index: 2;
}
}
.add-on {
display: inline-block;
width: auto;
height: 22px;
min-width: 18px;
padding: 5px 6px 3px 6px;
font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
text-align: center;
//text-shadow: 0 1px 0 @white;
background-color: @white;
border: 1px solid @inputBorder;
color: @ui-option-type;
&:hover {
border-color:@inputBorderFocus;
color: @ui-option-type-hover;
}
}
.add-on,
.btn,
.btn-group > .dropdown-toggle {
vertical-align: top;
.border-radius(0);
}
.active {
background-color: lighten(@green, 30);
border-color: @green;
}
}
.input-prepend {
.add-on,
.btn {
margin-right: -1px;
}
}
.input-append {
.add-on,
.btn,
.btn-group {
margin-left: -1px;
}
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
.border-radius(0);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
.btn-group:first-child {
margin-left: 0;
}
}
// SEARCH FORM
// -----------
input.search-query {
padding-right: 4px \9;
padding-left: 14px;
margin: 0; // Remove the default margin on all inputs
}
/* Allow for input prepend/append in search forms */
.form-search {
.input-prepend {
.btn {
.border-radius(0 @borderRadiusSmall @borderRadiusSmall 0);
}
}
.input-append {
.btn {
.border-radius(0 @borderRadiusSmall @borderRadiusSmall 0);
}
}
}
// HORIZONTAL & VERTICAL FORMS
// ---------------------------
// Common properties
// -----------------
.form-search,
.form-inline,
.form-horizontal {
input,
textarea,
select,
.help-inline,
.uneditable-input,
.input-prepend,
.input-append {
display: inline-block;
margin-bottom: 0;
vertical-align: top;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
}
.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
margin-bottom: 0;
}
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-right: 3px;
margin-left: 0;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
//modifier for control group
.control-group.-no-margin {
margin-bottom:0;
}
// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
margin-top: @baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Horizontal-specific styles
// --------------------------
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
.control-label {
float: left;
width: @horizontalComponentOffset - 20;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
margin-left: @horizontalComponentOffset;
&:first-child {
*padding-left: @horizontalComponentOffset;
}
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-bottom: 0;
}
// And apply it only to .help-block instances that follow a form control
input,
select,
textarea,
.uneditable-input,
.input-prepend,
.input-append {
+ .help-block {
margin-top: @baseLineHeight / 2;
}
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: @horizontalComponentOffset;
}
}
// adjustments for properties tab
.form-horizontal .block-form .control-label {
display: block;
float: none;
width: 100%;
}
//make sure buttons are always on top
.umb-panel-buttons .umb-btn-toolbar .btn {
position: relative;
z-index: 1000;
}
@media (max-width: 767px) {
// Labels on own row
.form-horizontal .control-label {
float:none;
width: 100%;
}
.form-horizontal .controls {
margin-left: 0;
}
}
/* User/group selector */
.group-selector .group-selector-list { float: left; }
.group-selector .group-selector-list div { height: 24px; }
.group-selector .group-selector-buttons { float: left; margin: 24px 16px; }