h2.legend, .form-horizontal fieldset .legend { font-weight: bold; font-size: 16px; line-height: 36px; .white-shadow; padding-left: 10px; } .form-horizontal { fieldset { display: table; width: 100%; margin-top: 35px; position: relative; .grey-box-shadow; .border-radius(@border-radius); // margin-bottom: 35px; &.first, .popup &:first-of-type { margin-top: 0; } &.first:not(:first-of-type) { margin-top: 5px; } .legend { border: 0; margin: -30px 0 0 0; position: absolute; top: 0; width: 98%; white-space: nowrap; overflow: hidden; margin-right: (@right-column-width + (@padding * 2)); .description { font-weight: normal; font-size: 12px; display: inline-block; margin-left: 20px; .color-grey; } } /* BS collapse override */ &.collapse { overflow: visible; height: auto; } /* Position attr change for collapsed */ &.collapsed { background-color: @bgcolor-light; .legend { position: static; font-size: 13px; font-weight: normal; } } &.full-width { box-shadow: none; .control-group { .border-radius(0); width: 100%; display: block; > div { display: block; } .control-label { display: none; width: 0; } .controls { display: block; margin: 0; padding: 0; border: 0; width: 100%; .border-radius(@border-radius); .html-widget { display: inline-block; margin: 10px; } } } } &.wide .control-label { min-width: 200px; } /* COLLAPSE LOGIC */ &.collapsed * { display: none; } &.collapsed .legend, &.collapsed .legend *, &.collapsed { display: block !important; } &.collapsed .collapse-toggle { background: transparent; display: inline !important; } } .submit-row-bottom { margin: 20px 0 0 200px; } .control-group { display: table-header-group; margin: 0; > div { display: table-row; width: 100%; } .control-label { background: white; display: table-cell; min-width: 150px; float: none; padding: 10px 20px 5px 10px; border-bottom: 1px solid @border-color-light; width: auto; label { padding: 0; margin: 0; } } .controls { display: table-cell; vertical-align: top; float: none; background-color: @bgcolor-light; border-left: 1px solid #ecedee; padding: 5px 15px; width: 100%; line-height: 26px; p { margin-bottom: 0; } .readonly { display: inline-block; vertical-align: middle; margin-right: 5px; } } &:first-child, &:first-of-type { .control-label { padding-top: 15px; .border-radius(@border-radius, null, null, null); } .controls { padding-top: 10px; .border-radius(null, @border-radius, null, null); } } &:last-child, &:last-of-type { .control-label { padding-bottom: 10px; border: 0; .border-radius(null, null, null, @border-radius); } .controls { padding-bottom: 10px; .border-radius(null, null, @border-radius, null); } } /* Some BS form global overrides */ .help-block, .help-inline { font-size: 11px; color: #999; line-height: normal; } .help-inline ul, .radiolist { margin: 0; li { list-style: none; padding: 0 10px 0 0; } } .help-icon { margin: 1px 0 0 5px; } /* Inline forms fields */ .field-box .controls { label { float: left; display: inline-block; margin: 5px 10px 0 0; &.required { margin-right: 15px; } } .multi-field-box { margin-top: 5px; float: left; margin-right: 15px; .multi-field-controls { float: left; } .help-block { display: block; margin: 3px 0 0 5px; } } .error { .control-label, .help-block, .help-inline, .help-inline ul li, &.multi-field-box label { color: @red; } input, select, textarea { border-color: @red; color: @red; } } &:not(:first-child) { .control-label { width: auto; margin-left: 10px; } .controls { float: left; margin-left: 10px; } } } &.first-error .control-label { color: @red; } &.multi-field-row { .controls { padding-top: 0px; } &:first-child, &:first-of-type { .controls { padding-top: 5px; } } } } } .popup { .form-horizontal { } .one-column { padding-top: 10px; } } .control-group, .inline-group { // Django < 1.8 .add-another { text-decoration: none; display: inline-block; padding: 0 0 0 8px; } // Django 1.8+ .related-widget-wrapper-link.change-related { &, &:hover { opacity: .2; } &:link { opacity: .6; &:hover { opacity: 1; } } } .add-related, .related-lookup, .change-related { .bs-icon; display: inline-block; padding: 4px; border: 1px solid transparent; padding-left: 6px; vertical-align: middle; img { display: none; } } .add-related { background-position: 1px -92px; } .related-lookup { background-position: -42px 4px; } .change-related { background-position: 7px -68px; } .vForeignKeyRawIdAdminField { width: 90px; } } .alert { > ul { margin-top: 10px; ul { margin-top: 5px; margin-bottom: 5px; } } } /* Stacked & Tabular */ .empty-form, tr.empty-form { display: none; } h3 { font-weight: bold; font-size: 16px; line-height: 36px; .white-shadow; padding-left: 10px; margin: 0; } /* STACKED */ .form-horizontal { .inline-group { & > h2 { margin-top: 11px; } fieldset:first-of-type { margin: 0px; } .inline-related { z-index: 2; position: relative; border-bottom: 1px solid #eee; } .add-row { z-index: 1; position: relative; padding: 6px 0 4px 15px; margin: -1px -1px 0 -1px; .white-inset; .vertical-gradient(#efefef, #e2e2e2); .border-radius(0, 0, @border-radius, @border-radius); border: 1px solid #ddd; a { .white-shadow; } } } .inline-related { fieldset { .border-radius(0, 0, null, null); margin: 40px 0 0 0; // Remove rounded corners for first fieldset // First inline fieldset will always have grey header row &:first-of-type { .control-group { &:first-child, &:first-of-type { .border-radius(0); .control-label { .border-radius(0, null, null, null); } .controls { .border-radius(null, 0, null, null); } } } } &.first { margin-top: 0; } } h3 { font-size: 12px; overflow: auto; .grey-box-shadow; line-height: 34px; .vertical-gradient(#f3f3f3, #e5e5e5); .border-radius(@border-radius, @border-radius, 0, 0); b { display: inline-block; min-width: 180px; margin-right: 10px; } span { display: inline-block; // margin-left: 20px; &.delete, &:last-child { float: right; margin-right: 10px; font-weight: normal; } &.delete { input { margin: 0; } label { padding: 7px 0 0 5px; vertical-align: middle; margin: 0; } } } } &:not(:first-of-type) { h3 { margin-top: 5px; } } &.tabular { margin-top: 15px; fieldset { .box-shadow(none); & > h2 { margin-top: -4px; } } table { margin-bottom: 0; } table td .errorlist { margin-bottom: 5px; font-size: 11px; } table td.control-group { display: table-cell; } } } } .form-horizontal .control-group .controls .selector { overflow: auto; .selector-available, .selector-chooser, .selector-chosen { float: left; h2 { margin-left: 5px; font-size: 12px; } > a { margin-left: 5px; } } &.stacked { // Filter vertical .selector-available, .selector-chosen { width: 100%; min-width: 150px; max-width: 100%; select, input { width: 100%; display: block; } } } .selector-available, .selector-chosen { width: 45%; min-width: 150px; max-width: 300px; select, input { width: 100%; display: block; } } .selector-chooser { list-style: none; margin: 70px 10px 0 10px; li { a { .bs-icon; display: block; padding: 4px; border: 1px solid transparent; background-position: -236px -92px; &:hover { background-color: white; .border-radius(@border-radius); border: 1px solid #ddd; } } &:first-child { a { background-position: -260px -92px; } } } } &.stacked { // Filter vertical .selector-chooser { list-style: none; margin: 5px 0 0 0; width: 100%; li { display: inline-block; a { background-position: -284px -92px; } &:first-child { a { background-position: -308px -92px; } } } } } .selector-available, .selector-chosen { a:not(.active) { .color-grey; text-decoration: none; } } .selector-available select { .border-radius(0, 0, null, null); } .selector-filter { margin-right: 14px; position: relative; margin-bottom: -1px; input { .border-radius(null, null, 0, 0); } label { position: absolute; right: 0; top: 4px; margin-right: -10px; opacity: .2; } } } .controls { /* Special styles for django auth app */ #id_groups_from { min-height: 80px } #id_user_permissions_from { min-height: 184px } /* File upload styles */ .file-upload { .clearable-file-input { display: inline-block; margin: 0 0 0 30px; input { margin: 5px 7px 0 0; vertical-align: middle; float: left; } label { font-size: 11px; margin-top: 2px; vertical-align: middle; display: inline-block; color: @grey; &:hover { color: @red; } } } } } /* SELECT2 OVERRIDE */ .select2-container-multi .select2-choices { .border-radius(4px); } /* Set close on right size */ .select2-container-multi .select2-choices .select2-search-choice { padding: 3px 20px 3px 5px !important; line-height: normal; } .select2-container-multi .select2-search-choice-close { top: 3px; left: auto !important; } .select2-search-choice .s2-size { float: right; } .select2-search-choice .s2-size em { font-style: normal; color: grey; font-size: 9px; text-shadow: 0 1px 0 #fff; } .datetimeshortcuts { font-size: 11px; margin-left: 5px; vertical-align: middle; color: transparent; a:first-child { margin-right: 4px; } a:last-child { margin-left: -6px; margin-right: 10px; } } // Original date widgets for Django 1.9+ .datetime > div:not(.input-append) .datetimeshortcuts, .controls > .datetimeshortcuts, .controls > .datetime > .datetimeshortcuts { .date-icon, .clock-icon { .bs-icon; background-color: @bgcolor-light; display: inline-block; vertical-align: middle; } .date-icon { background-position: -192px -120px; } .clock-icon { .bs-icon; background-position: -48px -24px; } } /* Fix original date/time fields */ .vDateField, .vTimeField { width: auto; vertical-align: top; } /* DATETIME IMPROVEMENTS */ @date-input-width: 80px; @time-input-width: 60px; @date-icon-offset: 20px; @date-input-offset: 14px; .suit-date { position: relative; .datetimeshortcuts { margin-left: 32px; color: #f6f7f8; a:last-child { padding: 0 5px; position: absolute; left: (@date-input-width + @date-icon-offset); z-index: 2; img { visibility: hidden; } } // Original date widgets for Django 1.9+ .date-icon, .clock-icon { display: inline-block; width: 26px; height: 26px; margin: 1px 0 0 -5px; } } input { vertical-align: middle; &.vDateField { width: @date-input-width; } &.vTimeField { width: @time-input-width; } } .add-on { position: absolute; left: (@date-input-width + @date-input-offset); } &.suit-time { .add-on { left: (@time-input-width + @date-input-offset); } .datetimeshortcuts { a:last-child { position: absolute; left: (@time-input-width + @date-icon-offset); } } } } .autosize { max-height: 150px; } .legend, h2 { .description { font-weight: normal; font-size: 12px; display: inline-block; margin-left: 20px; line-height: normal; .color-grey; } } /* Legend/H2 for suit_form_includes */ .form-horizontal .suit-tab { visibility: hidden; &.show { visibility: inherit; } &.collapsed.hide { display: none !important; } } .suit-tab, .form-horizontal .suit-include { > h2 { margin-top: -10px; margin-bottom: -6px; line-height: 36px; padding: 0; } } .linked-select-link { font-size: 11px; margin-right: 5px; } /* StackedInline sortables */ .stacked-inline-sortable { float: right; :first-child { padding-right: 1px; } &:nth-last-child(2) { margin-right: 10px; } } .inline-group > div:first-of-type .stacked-inline-sortable .sortable-up, .inline-group > div:nth-last-child(3) .stacked-inline-sortable .sortable-down { opacity: .15 !important; cursor: default; }