mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Merge pull request #4984 from dhensby/pulls/3/fix-action-alignment
FIX CMS actions alignment
This commit is contained in:
Damian Mooyman
commit
106eb6e8a5
@ -328,7 +328,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
|
||||
.cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
|
||||
.cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background-color: white; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
|
||||
.cms .ss-ui-button.ss-ui-action-minor span { padding-left: 0; padding-right: 0; }
|
||||
.cms .ss-ui-button.ss-ui-action-constructive { text-shadow: none; font-weight: bold; color: white; border-color: #1F9433; border-bottom-color: #166a24; background-color: #1F9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk0YmU0MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFmOTQzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #94be42), color-stop(100%, #1f9433)); background: -moz-linear-gradient(#94be42, #1f9433); background: -webkit-linear-gradient(#94be42, #1f9433); background: linear-gradient(#94be42, #1f9433); text-shadow: #1c872f 0 -1px -1px; }
|
||||
.cms .ss-ui-button.ss-ui-action-constructive { text-shadow: none; font-weight: bold; color: white; border-color: #1F9433; border-bottom-color: #166a24; background-color: #1F9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYmU0MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFmOTQzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93be42), color-stop(100%, #1f9433)); background: -moz-linear-gradient(#93be42, #1f9433); background: -webkit-linear-gradient(#93be42, #1f9433); background: linear-gradient(#93be42, #1f9433); text-shadow: #1c872f 0 -1px -1px; }
|
||||
.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #166a24; background-color: #1F9433; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0Y2EzYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzYTkzYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a4ca3a), color-stop(100%, #23a93a)); background: -moz-linear-gradient(#a4ca3a, #23a93a); background: -webkit-linear-gradient(#a4ca3a, #23a93a); background: linear-gradient(#a4ca3a, #23a93a); }
|
||||
.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #1d8c30; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
|
||||
.cms .ss-ui-button.ss-ui-action-destructive { color: #f00; background-color: #e6e6e6; }
|
||||
@ -347,7 +347,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
|
||||
.cms .ss-ui-button[class*="font-icon-"] .ui-button-text, .cms .ss-ui-button[class^="font-icon-"] .ui-button-text, .cms .ss-ui-button.ss-ui-button-constructive[class*="font-icon-"] .ui-button-text { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; padding: 0; }
|
||||
.cms .ss-ui-button[class*="font-icon-"] .ui-icon, .cms .ss-ui-button[class^="font-icon-"] .ui-icon, .cms .ss-ui-button.ss-ui-button-constructive[class*="font-icon-"] .ui-icon { display: none; }
|
||||
.cms .ss-ui-buttonset .ui-button { margin-left: -1px; }
|
||||
.cms .ss-ui-buttonset { margin-left: 1px; }
|
||||
.cms .ss-ui-buttonset { margin: 0 8px 0 0; }
|
||||
.cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
|
||||
|
||||
/** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
|
||||
@ -390,7 +390,7 @@ input.radio { margin-left: 0; }
|
||||
.optionset li label { display: inline; cursor: pointer; padding-left: 8px; }
|
||||
.optionset.field { padding-top: 0; }
|
||||
|
||||
/** ---------------------------------------------------- HTML Text ---------------------------------------------------- */
|
||||
/** ---------------------------------------------------- HTML Text ---------------------------------------------------- */
|
||||
.htmleditor label { display: block; float: none; padding-bottom: 10px; }
|
||||
.htmleditor .middleColumn { margin-left: 0px; clear: left; }
|
||||
.htmleditor .description { margin-left: 0px; }
|
||||
@ -401,23 +401,23 @@ input.radio { margin-left: 0; }
|
||||
.action-hidden { display: none; }
|
||||
|
||||
/***************************************************************
|
||||
* On/Off Switch.
|
||||
* On/Off Switch.
|
||||
* Supports switching between up to 5 values (used for Draft/Published)
|
||||
* Example html set-up:
|
||||
* <fieldset class="switch-states size_2">
|
||||
* <div class="switch">
|
||||
* <fieldset class="switch-states size_2">
|
||||
* <div class="switch">
|
||||
* <input id="Draft" class="first" name="view" type="radio" checked>
|
||||
* <label for="Draft">Draft</label>
|
||||
* <label for="Draft">Draft</label>
|
||||
* <input id="Published" class="last" name="view" type="radio">
|
||||
* <label for="Published">Published</label>
|
||||
* <span class="slide-button"></span>
|
||||
* </div>
|
||||
* <label for="Published">Published</label>
|
||||
* <span class="slide-button"></span>
|
||||
* </div>
|
||||
* </fieldset>
|
||||
****************************************************************/
|
||||
fieldset.switch-states { margin-right: 8px; /*
|
||||
fieldset.switch-states { margin-right: 8px; /*
|
||||
Produce css for up to 5 states.
|
||||
|
||||
Note: with a little adjustment the switch can take more than 5 items,
|
||||
Note: with a little adjustment the switch can take more than 5 items,
|
||||
but a dropdown would probably be more appropriate
|
||||
*/ }
|
||||
fieldset.switch-states .switch { border: 2px solid #d3d6da; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-animation: bugfix infinite 1s; background: #dee0e3; display: block; height: 24px; position: relative; width: 100%; z-index: 5; }
|
||||
@ -563,8 +563,8 @@ body.cms { overflow: hidden; }
|
||||
.cms a.icon-button:hover, .cms .ui-tabs .ui-tabs-nav li a.icon-button:hover, .ui-tabs .ui-tabs-nav li .cms a.icon-button:hover, .cms a.icon-button:active, .cms .ui-tabs .ui-tabs-nav li a.icon-button:active, .ui-tabs .ui-tabs-nav li .cms a.icon-button:active, .cms a.icon-button:focus, .cms .ui-tabs .ui-tabs-nav li a.icon-button:focus, .ui-tabs .ui-tabs-nav li .cms a.icon-button:focus, .cms button.ss-ui-button.icon-button:hover, .cms button.ss-ui-button.icon-button:active, .cms button.ss-ui-button.icon-button:focus { border: 0; box-shadow: none; background-image: none; text-decoration: none; }
|
||||
.cms a.icon-button:hover, .cms .ui-tabs .ui-tabs-nav li a.icon-button:hover, .ui-tabs .ui-tabs-nav li .cms a.icon-button:hover, .cms button.ss-ui-button.icon-button:hover { background-color: #d4dbe1; }
|
||||
.cms a.icon-button.active, .cms .ui-tabs .ui-tabs-nav li a.active.icon-button, .ui-tabs .ui-tabs-nav li .cms a.active.icon-button, .cms a.icon-button:active, .cms .ui-tabs .ui-tabs-nav li a.icon-button:active, .ui-tabs .ui-tabs-nav li .cms a.icon-button:active, .cms button.ss-ui-button.icon-button.active, .cms button.ss-ui-button.icon-button:active { background-color: #d4dbe1; }
|
||||
.cms a.icon-button.font-icon-search, .cms .ui-tabs .ui-tabs-nav li a.font-icon-search.icon-button, .ui-tabs .ui-tabs-nav li .cms a.font-icon-search.icon-button, .cms button.ss-ui-button.icon-button.font-icon-search { padding: 5px 6px; color: #66727d; }
|
||||
.cms a.icon-button.font-icon-search.active, .cms a.icon-button.font-icon-search:active, .cms a.icon-button.font-icon-search:focus, .cms a.icon-button.font-icon-search:hover, .cms button.ss-ui-button.icon-button.font-icon-search.active, .cms button.ss-ui-button.icon-button.font-icon-search:active, .cms button.ss-ui-button.icon-button.font-icon-search:focus, .cms button.ss-ui-button.icon-button.font-icon-search:hover { background: none; box-shadow: none; color: #383f45; }
|
||||
.cms a.icon-button.font-icon-search, .cms .ui-tabs .ui-tabs-nav li a.font-icon-search.icon-button, .ui-tabs .ui-tabs-nav li .cms a.font-icon-search.icon-button, .cms button.ss-ui-button.icon-button.font-icon-search { padding: 5px 6px; color: #66717d; }
|
||||
.cms a.icon-button.font-icon-search.active, .cms a.icon-button.font-icon-search:active, .cms a.icon-button.font-icon-search:focus, .cms a.icon-button.font-icon-search:hover, .cms button.ss-ui-button.icon-button.font-icon-search.active, .cms button.ss-ui-button.icon-button.font-icon-search:active, .cms button.ss-ui-button.icon-button.font-icon-search:focus, .cms button.ss-ui-button.icon-button.font-icon-search:hover { background: none; box-shadow: none; color: #383e45; }
|
||||
.cms a.icon-button.font-icon-search:before, .cms button.ss-ui-button.icon-button.font-icon-search:before { font-size: 18px; margin-left: 1px; margin-right: 0; }
|
||||
.cms a.icon-button .ui-button-text, .cms .ui-tabs .ui-tabs-nav li a.icon-button .ui-button-text, .ui-tabs .ui-tabs-nav li .cms a.icon-button .ui-button-text, .cms button.ss-ui-button.icon-button .ui-button-text { display: none; }
|
||||
.ModelAdmin .cms a.icon-button, .ModelAdmin .cms .ui-tabs .ui-tabs-nav li a.icon-button, .ui-tabs .ui-tabs-nav li .ModelAdmin .cms a.icon-button, .ModelAdmin .cms button.ss-ui-button.icon-button { margin-top: -11px; }
|
||||
@ -600,7 +600,7 @@ body.cms { overflow: hidden; }
|
||||
.ui-tabs .ui-tabs-nav li a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; outline: none; float: none; font-weight: normal; color: #4f5861; line-height: 32px; padding: 0 12px 0; }
|
||||
.ui-tabs .ui-tabs-nav li:last-child { margin-right: 0; }
|
||||
.ui-tabs .ui-tabs-nav .ui-state-default { border: 0; background: transparent; }
|
||||
.ui-tabs .ui-tabs-nav .ui-state-default a { line-height: 28px; padding-top: 12px; padding-bottom: 8px; color: #66727d; }
|
||||
.ui-tabs .ui-tabs-nav .ui-state-default a { line-height: 28px; padding-top: 12px; padding-bottom: 8px; color: #66717d; }
|
||||
.ui-tabs .ui-tabs-nav .ui-state-default a:hover { color: #4f5861; }
|
||||
.ui-tabs .ui-tabs-nav .ui-state-active { padding-bottom: 1px; background-color: transparent; cursor: text; }
|
||||
.ui-tabs .ui-tabs-nav .ui-state-active a { border-bottom: 3px solid #66727d; padding-left: 0; padding-right: 0; margin: 0 12px 0; color: #4f5861; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,7 +8,7 @@
|
||||
|
||||
/** ----------------------------------------------------
|
||||
* Basic form fields
|
||||
* ---------------------------------------------------- */
|
||||
* ---------------------------------------------------- */
|
||||
|
||||
form.nostyle {
|
||||
@include clear-form-field-styles();
|
||||
@ -50,29 +50,29 @@ form.nostyle {
|
||||
font-style: normal;
|
||||
color: $color-text;
|
||||
clear:none;
|
||||
}
|
||||
label {
|
||||
}
|
||||
label {
|
||||
&.left {
|
||||
float: left;
|
||||
display: block;
|
||||
width: $grid-x * 22;
|
||||
padding: $grid-y $grid-x $grid-y 0;
|
||||
line-height: $grid-y * 2;
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
cursor: pointer;
|
||||
clear: both;
|
||||
clear: both;
|
||||
color: lighten($color-text, 20%);
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin: $grid-y/2 0 0 $grid-x*23;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.middleColumn {
|
||||
margin-left: $grid-x * 23;
|
||||
}
|
||||
|
||||
|
||||
span.readonly {
|
||||
padding-top: $grid-y;
|
||||
line-height: $grid-y * 2;
|
||||
@ -93,11 +93,11 @@ form.nostyle {
|
||||
line-height: $grid-y * 2;
|
||||
margin: $grid-y/2 0 0 $grid-x*23; // left align with .middleColumn
|
||||
}
|
||||
|
||||
|
||||
&.checkbox .description, &.ss-gridfield .description {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
input.text,
|
||||
textarea,
|
||||
select,
|
||||
@ -114,7 +114,7 @@ form.nostyle {
|
||||
}
|
||||
}
|
||||
|
||||
input.text,
|
||||
input.text,
|
||||
textarea,
|
||||
.TreeDropdownField {
|
||||
background: #fff;
|
||||
@ -127,14 +127,14 @@ form.nostyle {
|
||||
@include transition(0.2s border ease-in);
|
||||
@include border-radius(4px);
|
||||
@include background-image(linear-gradient(#EAEAEA, #fff 10%));
|
||||
|
||||
|
||||
&:focus {
|
||||
border: 1px solid lighten($color-medium-separator, 10%);
|
||||
border-top-color: $color-medium-separator;
|
||||
@include box-shadow(0 1px 3px rgba(0,0,0,0.2) inset);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[disabled], input.disabled,
|
||||
textarea[disabled], textarea.disabled,
|
||||
select[disabled], select.disabled {
|
||||
@ -243,7 +243,7 @@ form.small .field, .field.small {
|
||||
width: $grid-x * 14;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.middleColumn {
|
||||
margin-left: $grid-x * 15;
|
||||
}
|
||||
@ -256,19 +256,19 @@ form.small .field, .field.small {
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
.field {
|
||||
/* TreeDropdowns */
|
||||
.TreeDropdownField {
|
||||
padding: 0;
|
||||
|
||||
|
||||
.treedropdownfield-panel {
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
border-top: none;
|
||||
|
||||
|
||||
@include border-bottom-left-radius(4px);
|
||||
@include border-bottom-right-radius(4px);
|
||||
}
|
||||
|
||||
|
||||
&.treedropdownfield-open-tree {
|
||||
@include border-bottom-left-radius(0);
|
||||
@include border-bottom-right-radius(0);
|
||||
@ -295,21 +295,21 @@ form.small .field, .field.small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* dropdowns */
|
||||
.dropdown {
|
||||
select {
|
||||
margin-top: $grid-y;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* chzn override */
|
||||
.chzn-container {
|
||||
max-width: 512px;
|
||||
vertical-align: bottom;
|
||||
|
||||
|
||||
.chzn-results {
|
||||
|
||||
|
||||
li {
|
||||
font-size: 11px;
|
||||
line-height: $grid-y * 2;
|
||||
@ -322,22 +322,22 @@ form.small .field, .field.small {
|
||||
border: 1px solid lighten($color-medium-separator, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chzn-container-single .chzn-single {
|
||||
height: 30px;
|
||||
line-height: 30px; /* not relative, as then we'd had to redo most of chzn */
|
||||
font-size: $font-base-size;
|
||||
|
||||
|
||||
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
|
||||
|
||||
|
||||
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
width: 24px;
|
||||
|
||||
|
||||
b {
|
||||
background-position: 4px 3px;
|
||||
}
|
||||
@ -356,16 +356,16 @@ form.small .field, .field.small {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Date Fields */
|
||||
input.month, input.day, input.year {
|
||||
width: ($grid-x * 7);
|
||||
input.month, input.day, input.year {
|
||||
width: ($grid-x * 7);
|
||||
}
|
||||
|
||||
input.time {
|
||||
input.time {
|
||||
width: ($grid-x * 11); // smaller time field, since input is restricted
|
||||
}
|
||||
|
||||
|
||||
/* Hides borders in settings/access. Activated from JS */
|
||||
&.remove-splitter {
|
||||
border-bottom: none;
|
||||
@ -385,14 +385,14 @@ form.small .field, .field.small {
|
||||
border: none;
|
||||
color: $color-text-blue-link;
|
||||
display: block;
|
||||
font-weight:normal;
|
||||
font-weight:normal;
|
||||
margin:0;
|
||||
outline:none;
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
text-align: left;
|
||||
text-shadow: none;
|
||||
white-space:normal;
|
||||
padding-right:10px;
|
||||
text-align: left;
|
||||
text-shadow: none;
|
||||
white-space:normal;
|
||||
&.ss-ui-action-destructive{
|
||||
color: darken($color-error,25%);
|
||||
}
|
||||
@ -400,10 +400,10 @@ form.small .field, .field.small {
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
&:hover, &:focus, &:active{
|
||||
@include box-shadow(none);
|
||||
&:hover, &:focus, &:active{
|
||||
@include box-shadow(none);
|
||||
outline:none;
|
||||
background:none;
|
||||
background:none;
|
||||
border:none;
|
||||
}
|
||||
&.loading {
|
||||
@ -411,8 +411,8 @@ form.small .field, .field.small {
|
||||
.ui-button-text {
|
||||
padding-left: 16px /* icon */ + ($grid-x/2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -439,7 +439,7 @@ form.small .field, .field.small {
|
||||
}
|
||||
|
||||
input.loading, button.loading,
|
||||
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
|
||||
input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading,
|
||||
.ui-widget-header input.ui-state-default.loading {
|
||||
.ui-icon {
|
||||
background: transparent url(../../images/network-save.gif) no-repeat 0 0;
|
||||
@ -509,14 +509,14 @@ form.small .field, .field.small {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* constructive */
|
||||
&.ss-ui-action-constructive {
|
||||
text-shadow:none;
|
||||
font-weight: bold;
|
||||
color: $color-text-light;
|
||||
border-color: $color-button-constructive-border;
|
||||
border-bottom-color: darken($color-button-constructive-border, 10%);
|
||||
border-bottom-color: darken($color-button-constructive-border, 10%);
|
||||
background-color: $color-button-constructive;
|
||||
@include background(
|
||||
linear-gradient(color-stops(
|
||||
@ -525,7 +525,7 @@ form.small .field, .field.small {
|
||||
))
|
||||
);
|
||||
@include text-shadow(darken($color-button-constructive, 3%) 0 -1px -1px);
|
||||
|
||||
|
||||
&.ui-state-hover, &:hover {
|
||||
border-color: darken($color-button-constructive-border, 10%);
|
||||
background-color: $color-button-constructive;
|
||||
@ -541,7 +541,7 @@ form.small .field, .field.small {
|
||||
@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* destructive */
|
||||
&.ss-ui-action-destructive {
|
||||
color: $color-button-destructive;
|
||||
@ -553,7 +553,7 @@ form.small .field, .field.small {
|
||||
font-size: $font-base-size - 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.ui-state-highlight {
|
||||
background-color: $color-button-highlight;
|
||||
border: 1px solid $color-button-highlight-border;
|
||||
@ -564,9 +564,9 @@ form.small .field, .field.small {
|
||||
border: 0;
|
||||
color: lighten($color-text-dark, 10%);
|
||||
text-decoration: underline;
|
||||
|
||||
|
||||
@include box-shadow(none);
|
||||
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $color-text-dark;
|
||||
@ -577,7 +577,7 @@ form.small .field, .field.small {
|
||||
color: lighten($color-text-dark, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.ss-ui-button-loading {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@ -596,7 +596,7 @@ form.small .field, .field.small {
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
color: $color-text;
|
||||
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(none);
|
||||
background: #dee3e8;
|
||||
@ -648,9 +648,9 @@ form.small .field, .field.small {
|
||||
}
|
||||
|
||||
.ss-ui-buttonset {
|
||||
margin-left: 1px;
|
||||
margin: 0 $grid-x 0 0;
|
||||
}
|
||||
|
||||
|
||||
.ss-ui-loading-icon {
|
||||
background: url(../../images/network-save.gif) no-repeat;
|
||||
display: block;
|
||||
@ -737,9 +737,9 @@ form.small .field, .field.small {
|
||||
label {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
|
||||
|
||||
&.ss-ui-button {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
@ -784,7 +784,7 @@ input.radio {
|
||||
.optionset {
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
|
||||
|
||||
li {
|
||||
float: left;
|
||||
display: block;
|
||||
@ -799,7 +799,7 @@ input.radio {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
@ -810,18 +810,18 @@ input.radio {
|
||||
&.field {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/** ----------------------------------------------------
|
||||
* HTML Text
|
||||
* HTML Text
|
||||
* ---------------------------------------------------- */
|
||||
|
||||
.htmleditor {
|
||||
|
||||
@include form-field-stacked;
|
||||
|
||||
|
||||
textarea {
|
||||
visibility: hidden; // enabled by JS
|
||||
}
|
||||
@ -829,7 +829,7 @@ input.radio {
|
||||
.mceEditor {
|
||||
input, select {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
label.left {
|
||||
padding-bottom: $grid-y/2;
|
||||
@ -843,33 +843,33 @@ input.radio {
|
||||
|
||||
|
||||
/***************************************************************
|
||||
* On/Off Switch.
|
||||
* On/Off Switch.
|
||||
* Supports switching between up to 5 values (used for Draft/Published)
|
||||
* Example html set-up:
|
||||
* <fieldset class="switch-states size_2">
|
||||
* <div class="switch">
|
||||
* <fieldset class="switch-states size_2">
|
||||
* <div class="switch">
|
||||
* <input id="Draft" class="first" name="view" type="radio" checked>
|
||||
* <label for="Draft">Draft</label>
|
||||
* <label for="Draft">Draft</label>
|
||||
* <input id="Published" class="last" name="view" type="radio">
|
||||
* <label for="Published">Published</label>
|
||||
* <span class="slide-button"></span>
|
||||
* </div>
|
||||
* <label for="Published">Published</label>
|
||||
* <span class="slide-button"></span>
|
||||
* </div>
|
||||
* </fieldset>
|
||||
****************************************************************/
|
||||
fieldset.switch-states{
|
||||
fieldset.switch-states{
|
||||
margin-right: 8px;
|
||||
|
||||
.switch{
|
||||
border: 2px solid lighten(#2d3035,65%);
|
||||
@include border-radius(3px);
|
||||
-webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit.
|
||||
background:lighten(#2d3035,69%);
|
||||
display: block;
|
||||
background:lighten(#2d3035,69%);
|
||||
display: block;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
position: relative;
|
||||
width:100%;
|
||||
z-index:5;
|
||||
|
||||
|
||||
label{
|
||||
@include hide-text-overflow;
|
||||
color:lighten($color-text-dark,40%);
|
||||
@ -878,9 +878,9 @@ fieldset.switch-states{
|
||||
float:left;
|
||||
font-weight:bold;
|
||||
height: 100%;
|
||||
line-height: 25px;
|
||||
line-height: 25px;
|
||||
position:relative;
|
||||
z-index:2;
|
||||
z-index:2;
|
||||
min-width: 80px;
|
||||
/* Make text unselectable in browsers that support that */
|
||||
-webkit-touch-callout: none;
|
||||
@ -888,11 +888,11 @@ fieldset.switch-states{
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
&:hover{
|
||||
color:lighten($color-text-dark, 30%);
|
||||
color:rgba($color-text-dark,0.7);
|
||||
}
|
||||
color:lighten($color-text-dark, 30%);
|
||||
color:rgba($color-text-dark,0.7);
|
||||
}
|
||||
span{
|
||||
@include box-sizing('border-box');
|
||||
@include hide-text-overflow;
|
||||
@ -904,59 +904,59 @@ fieldset.switch-states{
|
||||
input {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
visibility:none;
|
||||
position: absolute;
|
||||
visibility:none;
|
||||
position: absolute;
|
||||
&:checked + label {
|
||||
@include transition(all 0.3s ease-out 0s);
|
||||
@include transition(all 0.3s ease-out 0s);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.slide-button{
|
||||
@include border-radius(3px);
|
||||
@include transition(all 0.3s ease-out 0s);
|
||||
background-color: #2b9c32;
|
||||
@include transition(all 0.3s ease-out 0s);
|
||||
background-color: #2b9c32;
|
||||
display:block;
|
||||
height: 24px;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Produce css for up to 5 states.
|
||||
|
||||
Note: with a little adjustment the switch can take more than 5 items,
|
||||
Note: with a little adjustment the switch can take more than 5 items,
|
||||
but a dropdown would probably be more appropriate
|
||||
*/
|
||||
@for $i from 1 through 5 {
|
||||
&.size_#{$i} {
|
||||
label, .slide-button {
|
||||
width: 100% / $i;
|
||||
}
|
||||
label, .slide-button {
|
||||
width: 100% / $i;
|
||||
}
|
||||
@if $i == 1{
|
||||
label span{
|
||||
padding-right:0; //even up the padding for a single item
|
||||
}
|
||||
}
|
||||
input:checked:nth-of-type(2) ~ .slide-button {
|
||||
input:checked:nth-of-type(2) ~ .slide-button {
|
||||
left: 100% / $i;
|
||||
}
|
||||
input:checked:nth-of-type(3) ~ .slide-button {
|
||||
input:checked:nth-of-type(3) ~ .slide-button {
|
||||
left: (100% / $i) * 2;
|
||||
}
|
||||
input:checked:nth-of-type(4) ~ .slide-button {
|
||||
input:checked:nth-of-type(4) ~ .slide-button {
|
||||
left: (100% / $i) * 3;
|
||||
}
|
||||
input:checked:nth-of-type(5) ~ .slide-button {
|
||||
input:checked:nth-of-type(5) ~ .slide-button {
|
||||
left: (100% / $i) * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//old web-kit browser fix
|
||||
}
|
||||
}
|
||||
}
|
||||
//old web-kit browser fix
|
||||
@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
|
||||
|
||||
//Styling for filter/search dropdown
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user