mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Added missing bootstrap form messages
Align top of selection-group and label Fix styles for overly nested composite fields Step label added and new templates for forms
This commit is contained in:
Oly Su
Damian Mooyman
parent
c556b01071
commit
2805baecd3
4
admin/client/dist/styles/bundle.css
vendored
4
admin/client/dist/styles/bundle.css
vendored
File diff suppressed because one or more lines are too long
@ -148,6 +148,28 @@ input.radio {
|
||||
.form-group {
|
||||
@include make-row();
|
||||
|
||||
// Composite fields
|
||||
// TODO reduce nesting
|
||||
// scss-lint:disable SelectorDepth
|
||||
.form__field-holder .form-group {
|
||||
.form__field-holder,
|
||||
.form__field-label {
|
||||
@include make-col();
|
||||
@include make-col-span(12);
|
||||
}
|
||||
|
||||
.form__field-holder {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// TODO make label display on the right side like normal .form__field-extra-label
|
||||
.form__field-extra-label {
|
||||
@include make-col-span(12);
|
||||
@include make-col-offset(0);
|
||||
}
|
||||
}
|
||||
// scss-lint:enable SelectorDepth
|
||||
|
||||
&::after {
|
||||
margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};
|
||||
width: calc(100% - #{$grid-gutter-width}); // IE10 fix for avoiding horizontal scrollbars
|
||||
@ -208,23 +230,10 @@ input.radio {
|
||||
}
|
||||
}
|
||||
|
||||
.optionset {
|
||||
.optionset,
|
||||
.selection-group {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
// Confirm password fields
|
||||
.form__field-holder .form-group.password {
|
||||
.form__field-holder,
|
||||
.form__field-label {
|
||||
@include make-col();
|
||||
@include make-col-span(12);
|
||||
}
|
||||
|
||||
.form__field-extra-label {
|
||||
@include make-col-span(12);
|
||||
@include make-col-offset(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint-inline-limit-width) {
|
||||
|
||||
@ -36,7 +36,7 @@ $gray-darkest: darken($gray-dark, 20%);
|
||||
$white: #fff; // Never change, create new variable if needed
|
||||
$black: #000; // Never change
|
||||
|
||||
|
||||
$brand-secondary: #005a93;
|
||||
$brand-primary: #29abe2;
|
||||
$brand-success: #3fa142;
|
||||
// $brand-info: #5bc0de;
|
||||
|
||||
@ -73,12 +73,9 @@ form.nostyle {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phonenumber-field__deco {
|
||||
}
|
||||
|
||||
|
||||
// TODO remove ID style
|
||||
&#Action {
|
||||
box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// When a field's description is toggleable, it's given an icon (right title) which is used as
|
||||
|
||||
@ -798,11 +798,31 @@ body.cms {
|
||||
/** --------------------------------------------
|
||||
* Messages
|
||||
* -------------------------------------------- */
|
||||
.alert {
|
||||
&.good {
|
||||
@extend .alert-success;
|
||||
}
|
||||
|
||||
&.notice {
|
||||
@extend .alert-info;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@extend .alert-warning;
|
||||
}
|
||||
|
||||
&.error,
|
||||
&.bad,
|
||||
&.required,
|
||||
&.validation {
|
||||
@extend .alert-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.message { // White
|
||||
display: block;
|
||||
clear: both;
|
||||
margin: 0 0 $grid-y;
|
||||
margin: 0 0 $spacer-y;
|
||||
padding: $grid-y + $grid-x/4 $grid-x + $grid-x/2;
|
||||
font-weight: normal;
|
||||
border: 1px #ccc solid;
|
||||
@ -833,19 +853,10 @@ body.cms {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cms-edit-form {
|
||||
.message {
|
||||
margin: $grid-x*2; // TODO Remove double padding when adjacent to a padded tabs panel
|
||||
}
|
||||
.ui-tabs-panel {
|
||||
.message {
|
||||
margin: $grid-x*2 0; // gets padding from tab panel
|
||||
}
|
||||
}
|
||||
.cms-edit-form .ui-tabs-panel .message {
|
||||
margin: $grid-x*2 0; // gets padding from tab panel
|
||||
}
|
||||
|
||||
|
||||
.notice-item {
|
||||
border-radius: 3px;
|
||||
font-family: inherit;
|
||||
@ -944,90 +955,52 @@ body.cms {
|
||||
}
|
||||
|
||||
.cms-add-form {
|
||||
.field > label.left {
|
||||
width: auto;
|
||||
.message-restricted {
|
||||
display: none;
|
||||
}
|
||||
.step-label {
|
||||
opacity:0.9;
|
||||
|
||||
.title {
|
||||
font-weight:bold; //to match pagetype label
|
||||
}
|
||||
}
|
||||
ul.SelectionGroup {
|
||||
padding-left:28px;
|
||||
overflow: visible;
|
||||
@include legacy-pie-clearfix;
|
||||
}
|
||||
.parent-mode {
|
||||
padding: $grid-x;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.radio {
|
||||
margin-left: -$grid-gutter-width-half;
|
||||
margin-right: -$grid-gutter-width-half;
|
||||
margin-bottom: 0;
|
||||
padding: #{$spacer-y * .625} $grid-gutter-width-half #{$spacer-y * .75};
|
||||
border-radius: $border-radius;
|
||||
|
||||
#PageType {
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 9px 0 9px 15px;
|
||||
overflow: hidden;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom: 2px groove lighten($color-shadow-light, 95%);
|
||||
-webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
|
||||
border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
|
||||
&:hover,
|
||||
&.selected {
|
||||
background-color: $background-darker;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
&.disabled {
|
||||
color: $color-text-disabled;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:hover, &.selected {
|
||||
background-color: $color-highlight-opacity;
|
||||
}
|
||||
&.disabled:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $color-text-disabled;
|
||||
opacity: 0.5;
|
||||
input[type="radio"] {
|
||||
position: static;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.page-icon {
|
||||
display: inline-block;
|
||||
top: 3px;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
margin: inherit;
|
||||
}
|
||||
+ .title {
|
||||
margin-right: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
input, label, .page-icon, .title {
|
||||
float: left;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: italic;
|
||||
// Undo some generic styles from tooltips
|
||||
display: inline;
|
||||
clear: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form__field-description {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
/** --------------------------------------------
|
||||
@ -1603,11 +1576,10 @@ form.member-profile-form {
|
||||
}
|
||||
}
|
||||
|
||||
.CMSPageAddController {
|
||||
.cms-panel-padded {
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
}
|
||||
.CMSPageAddController .cms-panel-padded {
|
||||
padding: $grid-gutter-width-half;
|
||||
}
|
||||
|
||||
/** ------------------------------------------------------------------
|
||||
* Dialog
|
||||
*
|
||||
@ -2073,40 +2045,14 @@ body.cms-dialog {
|
||||
/** --------------------------------------------
|
||||
* Step labels
|
||||
* -------------------------------------------- */
|
||||
.step-label {
|
||||
.step-label > * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flyout {
|
||||
height: 26px;
|
||||
font-size: $font-size-root +1;
|
||||
font-weight: bold;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
background-color: #667980; // hardcoding colour since its tied to the sprite
|
||||
padding: 4px 3px 4px 6px;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
color: #fff;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
height: 26px;
|
||||
width: 10px;
|
||||
margin-right: 4px;
|
||||
@extend .icon-sprites-32x32;
|
||||
@include sprite($sprites-32x32-numeric-label);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 26px - 2*4px; // minus padding
|
||||
padding: 4px;
|
||||
}
|
||||
.step-label .flyout {
|
||||
color: $brand-secondary;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<ul>
|
||||
<ul class="list-unstyled selection-group">
|
||||
<% if $IsReadonly %>
|
||||
<% loop $FieldSet %>
|
||||
<% if $Selected %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user