tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-07-02 01:19:29 +02:00
Code Issues Projects Releases Wiki Activity

FIX CMS actions alignment

Browse Source
This commit is contained in:
Daniel Hensby 2016-01-26 14:38:48 +00:00
parent 790a6da24e
commit c5fc9dd650
3 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
admin/css/screen.css
View File

@ -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.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: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-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.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-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; } .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-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-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 .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; } .cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
/** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */ /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
@ -390,7 +390,7 @@ input.radio { margin-left: 0; }
.optionset li label { display: inline; cursor: pointer; padding-left: 8px; } .optionset li label { display: inline; cursor: pointer; padding-left: 8px; }
.optionset.field { padding-top: 0; } .optionset.field { padding-top: 0; }
/** ---------------------------------------------------- HTML Text ---------------------------------------------------- */ /** ---------------------------------------------------- HTML Text ---------------------------------------------------- */
.htmleditor label { display: block; float: none; padding-bottom: 10px; } .htmleditor label { display: block; float: none; padding-bottom: 10px; }
.htmleditor .middleColumn { margin-left: 0px; clear: left; } .htmleditor .middleColumn { margin-left: 0px; clear: left; }
.htmleditor .description { margin-left: 0px; } .htmleditor .description { margin-left: 0px; }
@ -401,23 +401,23 @@ input.radio { margin-left: 0; }
.action-hidden { display: none; } .action-hidden { display: none; }
/*************************************************************** /***************************************************************
* On/Off Switch. * On/Off Switch.
* Supports switching between up to 5 values (used for Draft/Published) * Supports switching between up to 5 values (used for Draft/Published)
* Example html set-up: * Example html set-up:
* <fieldset class="switch-states size_2"> * <fieldset class="switch-states size_2">
* <div class="switch"> * <div class="switch">
* <input id="Draft" class="first" name="view" type="radio" checked> * <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"> * <input id="Published" class="last" name="view" type="radio">
* <label for="Published">Published</label> * <label for="Published">Published</label>
* <span class="slide-button"></span> * <span class="slide-button"></span>
* </div> * </div>
* </fieldset> * </fieldset>
****************************************************************/ ****************************************************************/
fieldset.switch-states { margin-right: 8px; /* fieldset.switch-states { margin-right: 8px; /*
Produce css for up to 5 states. 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 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; } 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 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: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.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, .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: #383f45; } .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.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; } .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; } .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 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 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 { 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-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 { 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; } .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; }

4
admin/css/screen.css.map
View File

File diff suppressed because one or more lines are too long

202
admin/scss/_forms.scss
View File

@ -8,7 +8,7 @@
/** ---------------------------------------------------- /** ----------------------------------------------------
* Basic form fields * Basic form fields
* ---------------------------------------------------- */ * ---------------------------------------------------- */
form.nostyle { form.nostyle {
@include clear-form-field-styles(); @include clear-form-field-styles();
@ -50,29 +50,29 @@ form.nostyle {
font-style: normal; font-style: normal;
color: $color-text; color: $color-text;
clear:none; clear:none;
} }
label { label {
&.left { &.left {
float: left; float: left;
display: block; display: block;
width: $grid-x * 22; width: $grid-x * 22;
padding: $grid-y $grid-x $grid-y 0; padding: $grid-y $grid-x $grid-y 0;
line-height: $grid-y * 2; line-height: $grid-y * 2;
} }
&.right { &.right {
cursor: pointer; cursor: pointer;
clear: both; clear: both;
color: lighten($color-text, 20%); color: lighten($color-text, 20%);
display: block; display: block;
font-style: italic; font-style: italic;
margin: $grid-y/2 0 0 $grid-x*23; margin: $grid-y/2 0 0 $grid-x*23;
} }
} }
.middleColumn { .middleColumn {
margin-left: $grid-x * 23; margin-left: $grid-x * 23;
} }
span.readonly { span.readonly {
padding-top: $grid-y; padding-top: $grid-y;
line-height: $grid-y * 2; line-height: $grid-y * 2;
@ -93,11 +93,11 @@ form.nostyle {
line-height: $grid-y * 2; line-height: $grid-y * 2;
margin: $grid-y/2 0 0 $grid-x*23; // left align with .middleColumn margin: $grid-y/2 0 0 $grid-x*23; // left align with .middleColumn
} }
&.checkbox .description, &.ss-gridfield .description { &.checkbox .description, &.ss-gridfield .description {
margin-left: 0; margin-left: 0;
} }
input.text, input.text,
textarea, textarea,
select, select,
@ -114,7 +114,7 @@ form.nostyle {
} }
} }
input.text, input.text,
textarea, textarea,
.TreeDropdownField { .TreeDropdownField {
background: #fff; background: #fff;
@ -127,14 +127,14 @@ form.nostyle {
@include transition(0.2s border ease-in); @include transition(0.2s border ease-in);
@include border-radius(4px); @include border-radius(4px);
@include background-image(linear-gradient(#EAEAEA, #fff 10%)); @include background-image(linear-gradient(#EAEAEA, #fff 10%));
&:focus { &:focus {
border: 1px solid lighten($color-medium-separator, 10%); border: 1px solid lighten($color-medium-separator, 10%);
border-top-color: $color-medium-separator; border-top-color: $color-medium-separator;
@include box-shadow(0 1px 3px rgba(0,0,0,0.2) inset); @include box-shadow(0 1px 3px rgba(0,0,0,0.2) inset);
} }
} }
input[disabled], input.disabled, input[disabled], input.disabled,
textarea[disabled], textarea.disabled, textarea[disabled], textarea.disabled,
select[disabled], select.disabled { select[disabled], select.disabled {
@ -243,7 +243,7 @@ form.small .field, .field.small {
width: $grid-x * 14; width: $grid-x * 14;
} }
} }
.middleColumn { .middleColumn {
margin-left: $grid-x * 15; margin-left: $grid-x * 15;
} }
@ -256,19 +256,19 @@ form.small .field, .field.small {
} }
} }
.field { .field {
/* TreeDropdowns */ /* TreeDropdowns */
.TreeDropdownField { .TreeDropdownField {
padding: 0; padding: 0;
.treedropdownfield-panel { .treedropdownfield-panel {
border: 1px solid lighten($color-medium-separator, 20%); border: 1px solid lighten($color-medium-separator, 20%);
border-top: none; border-top: none;
@include border-bottom-left-radius(4px); @include border-bottom-left-radius(4px);
@include border-bottom-right-radius(4px); @include border-bottom-right-radius(4px);
} }
&.treedropdownfield-open-tree { &.treedropdownfield-open-tree {
@include border-bottom-left-radius(0); @include border-bottom-left-radius(0);
@include border-bottom-right-radius(0); @include border-bottom-right-radius(0);
@ -295,21 +295,21 @@ form.small .field, .field.small {
display: none; display: none;
} }
} }
/* dropdowns */ /* dropdowns */
.dropdown { .dropdown {
select { select {
margin-top: $grid-y; margin-top: $grid-y;
} }
} }
/* chzn override */ /* chzn override */
.chzn-container { .chzn-container {
max-width: 512px; max-width: 512px;
vertical-align: bottom; vertical-align: bottom;
.chzn-results { .chzn-results {
li { li {
font-size: 11px; font-size: 11px;
line-height: $grid-y * 2; line-height: $grid-y * 2;
@ -322,22 +322,22 @@ form.small .field, .field.small {
border: 1px solid lighten($color-medium-separator, 10%); border: 1px solid lighten($color-medium-separator, 10%);
} }
} }
.chzn-container-single .chzn-single { .chzn-container-single .chzn-single {
height: 30px; height: 30px;
line-height: 30px; /* not relative, as then we'd had to redo most of chzn */ line-height: 30px; /* not relative, as then we'd had to redo most of chzn */
font-size: $font-base-size; font-size: $font-base-size;
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef)); @include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
text-decoration: none; text-decoration: none;
} }
div { div {
width: 24px; width: 24px;
b { b {
background-position: 4px 3px; background-position: 4px 3px;
} }
@ -356,16 +356,16 @@ form.small .field, .field.small {
height: 18px; height: 18px;
} }
} }
/* Date Fields */ /* Date Fields */
input.month, input.day, input.year { input.month, input.day, input.year {
width: ($grid-x * 7); width: ($grid-x * 7);
} }
input.time { input.time {
width: ($grid-x * 11); // smaller time field, since input is restricted width: ($grid-x * 11); // smaller time field, since input is restricted
} }
/* Hides borders in settings/access. Activated from JS */ /* Hides borders in settings/access. Activated from JS */
&.remove-splitter { &.remove-splitter {
border-bottom: none; border-bottom: none;
@ -385,14 +385,14 @@ form.small .field, .field.small {
border: none; border: none;
color: $color-text-blue-link; color: $color-text-blue-link;
display: block; display: block;
font-weight:normal; font-weight:normal;
margin:0; margin:0;
outline:none; outline:none;
padding-left:10px; padding-left:10px;
padding-right:10px; padding-right:10px;
text-align: left; text-align: left;
text-shadow: none; text-shadow: none;
white-space:normal; white-space:normal;
&.ss-ui-action-destructive{ &.ss-ui-action-destructive{
color: darken($color-error,25%); color: darken($color-error,25%);
} }
@ -400,10 +400,10 @@ form.small .field, .field.small {
padding-left:0; padding-left:0;
padding-right:0; padding-right:0;
} }
&:hover, &:focus, &:active{ &:hover, &:focus, &:active{
@include box-shadow(none); @include box-shadow(none);
outline:none; outline:none;
background:none; background:none;
border:none; border:none;
} }
&.loading { &.loading {
@ -411,8 +411,8 @@ form.small .field, .field.small {
.ui-button-text { .ui-button-text {
padding-left: 16px /* icon */ + ($grid-x/2); padding-left: 16px /* icon */ + ($grid-x/2);
} }
} }
} }
} }
@ -439,7 +439,7 @@ form.small .field, .field.small {
} }
input.loading, button.loading, 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-widget-header input.ui-state-default.loading {
.ui-icon { .ui-icon {
background: transparent url(../../images/network-save.gif) no-repeat 0 0; background: transparent url(../../images/network-save.gif) no-repeat 0 0;
@ -509,14 +509,14 @@ form.small .field, .field.small {
padding-right: 0; padding-right: 0;
} }
} }
/* constructive */ /* constructive */
&.ss-ui-action-constructive { &.ss-ui-action-constructive {
text-shadow:none; text-shadow:none;
font-weight: bold; font-weight: bold;
color: $color-text-light; color: $color-text-light;
border-color: $color-button-constructive-border; 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; background-color: $color-button-constructive;
@include background( @include background(
linear-gradient(color-stops( linear-gradient(color-stops(
@ -525,7 +525,7 @@ form.small .field, .field.small {
)) ))
); );
@include text-shadow(darken($color-button-constructive, 3%) 0 -1px -1px); @include text-shadow(darken($color-button-constructive, 3%) 0 -1px -1px);
&.ui-state-hover, &:hover { &.ui-state-hover, &:hover {
border-color: darken($color-button-constructive-border, 10%); border-color: darken($color-button-constructive-border, 10%);
background-color: $color-button-constructive; 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)); @include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
} }
} }
/* destructive */ /* destructive */
&.ss-ui-action-destructive { &.ss-ui-action-destructive {
color: $color-button-destructive; color: $color-button-destructive;
@ -553,7 +553,7 @@ form.small .field, .field.small {
font-size: $font-base-size - 2; font-size: $font-base-size - 2;
} }
} }
&.ui-state-highlight { &.ui-state-highlight {
background-color: $color-button-highlight; background-color: $color-button-highlight;
border: 1px solid $color-button-highlight-border; border: 1px solid $color-button-highlight-border;
@ -564,9 +564,9 @@ form.small .field, .field.small {
border: 0; border: 0;
color: lighten($color-text-dark, 10%); color: lighten($color-text-dark, 10%);
text-decoration: underline; text-decoration: underline;
@include box-shadow(none); @include box-shadow(none);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $color-text-dark; color: $color-text-dark;
@ -577,7 +577,7 @@ form.small .field, .field.small {
color: lighten($color-text-dark, 20%); color: lighten($color-text-dark, 20%);
} }
} }
&.ss-ui-button-loading { &.ss-ui-button-loading {
opacity: 0.8; opacity: 0.8;
} }
@ -596,7 +596,7 @@ form.small .field, .field.small {
text-decoration: none; text-decoration: none;
font-weight: normal; font-weight: normal;
color: $color-text; color: $color-text;
&:hover { &:hover {
@include box-shadow(none); @include box-shadow(none);
background: #dee3e8; background: #dee3e8;
@ -648,9 +648,9 @@ form.small .field, .field.small {
} }
.ss-ui-buttonset { .ss-ui-buttonset {
margin-left: 1px; margin: 0 $grid-x 0 0;
} }
.ss-ui-loading-icon { .ss-ui-loading-icon {
background: url(../../images/network-save.gif) no-repeat; background: url(../../images/network-save.gif) no-repeat;
display: block; display: block;
@ -737,9 +737,9 @@ form.small .field, .field.small {
label { label {
float: none; float: none;
margin-left: 0; margin-left: 0;
&.ss-ui-button { &.ss-ui-button {
float: left; float: left;
} }
} }
.description { .description {
@ -784,7 +784,7 @@ input.radio {
.optionset { .optionset {
padding-bottom: 8px; padding-bottom: 8px;
padding-top: 8px; padding-top: 8px;
li { li {
float: left; float: left;
display: block; display: block;
@ -799,7 +799,7 @@ input.radio {
padding-right: 0; padding-right: 0;
margin-right: 0; margin-right: 0;
} }
label { label {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
@ -810,18 +810,18 @@ input.radio {
&.field { &.field {
padding-top: 0; padding-top: 0;
} }
} }
/** ---------------------------------------------------- /** ----------------------------------------------------
* HTML Text * HTML Text
* ---------------------------------------------------- */ * ---------------------------------------------------- */
.htmleditor { .htmleditor {
@include form-field-stacked; @include form-field-stacked;
textarea { textarea {
visibility: hidden; // enabled by JS visibility: hidden; // enabled by JS
} }
@ -829,7 +829,7 @@ input.radio {
.mceEditor { .mceEditor {
input, select { input, select {
width: auto; width: auto;
} }
} }
label.left { label.left {
padding-bottom: $grid-y/2; 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) * Supports switching between up to 5 values (used for Draft/Published)
* Example html set-up: * Example html set-up:
* <fieldset class="switch-states size_2"> * <fieldset class="switch-states size_2">
* <div class="switch"> * <div class="switch">
* <input id="Draft" class="first" name="view" type="radio" checked> * <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"> * <input id="Published" class="last" name="view" type="radio">
* <label for="Published">Published</label> * <label for="Published">Published</label>
* <span class="slide-button"></span> * <span class="slide-button"></span>
* </div> * </div>
* </fieldset> * </fieldset>
****************************************************************/ ****************************************************************/
fieldset.switch-states{ fieldset.switch-states{
margin-right: 8px; margin-right: 8px;
.switch{ .switch{
border: 2px solid lighten(#2d3035,65%); border: 2px solid lighten(#2d3035,65%);
@include border-radius(3px); @include border-radius(3px);
-webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit. -webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit.
background:lighten(#2d3035,69%); background:lighten(#2d3035,69%);
display: block; display: block;
height: 24px; height: 24px;
position: relative; position: relative;
width:100%; width:100%;
z-index:5; z-index:5;
label{ label{
@include hide-text-overflow; @include hide-text-overflow;
color:lighten($color-text-dark,40%); color:lighten($color-text-dark,40%);
@ -878,9 +878,9 @@ fieldset.switch-states{
float:left; float:left;
font-weight:bold; font-weight:bold;
height: 100%; height: 100%;
line-height: 25px; line-height: 25px;
position:relative; position:relative;
z-index:2; z-index:2;
min-width: 80px; min-width: 80px;
/* Make text unselectable in browsers that support that */ /* Make text unselectable in browsers that support that */
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -888,11 +888,11 @@ fieldset.switch-states{
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
&:hover{ &:hover{
color:lighten($color-text-dark, 30%); color:lighten($color-text-dark, 30%);
color:rgba($color-text-dark,0.7); color:rgba($color-text-dark,0.7);
} }
span{ span{
@include box-sizing('border-box'); @include box-sizing('border-box');
@include hide-text-overflow; @include hide-text-overflow;
@ -904,59 +904,59 @@ fieldset.switch-states{
input { input {
opacity: 0; opacity: 0;
filter: alpha(opacity = 0); filter: alpha(opacity = 0);
visibility:none; visibility:none;
position: absolute; position: absolute;
&:checked + label { &:checked + label {
@include transition(all 0.3s ease-out 0s); @include transition(all 0.3s ease-out 0s);
color: #fff; color: #fff;
} }
} }
.slide-button{ .slide-button{
@include border-radius(3px); @include border-radius(3px);
@include transition(all 0.3s ease-out 0s); @include transition(all 0.3s ease-out 0s);
background-color: #2b9c32; background-color: #2b9c32;
display:block; display:block;
height: 24px; height: 24px;
left: 0; left: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
} }
/* /*
Produce css for up to 5 states. 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 but a dropdown would probably be more appropriate
*/ */
@for $i from 1 through 5 { @for $i from 1 through 5 {
&.size_#{$i} { &.size_#{$i} {
label, .slide-button { label, .slide-button {
width: 100% / $i; width: 100% / $i;
} }
@if $i == 1{ @if $i == 1{
label span{ label span{
padding-right:0; //even up the padding for a single item 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; left: 100% / $i;
} }
input:checked:nth-of-type(3) ~ .slide-button { input:checked:nth-of-type(3) ~ .slide-button {
left: (100% / $i) * 2; left: (100% / $i) * 2;
} }
input:checked:nth-of-type(4) ~ .slide-button { input:checked:nth-of-type(4) ~ .slide-button {
left: (100% / $i) * 3; left: (100% / $i) * 3;
} }
input:checked:nth-of-type(5) ~ .slide-button { input:checked:nth-of-type(5) ~ .slide-button {
left: (100% / $i) * 4; left: (100% / $i) * 4;
} }
} }
} }
} }
//old web-kit browser fix //old web-kit browser fix
@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } } @-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
//Styling for filter/search dropdown //Styling for filter/search dropdown