mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-30 21:29:23 +02:00
Merge pull request #4984 from dhensby/pulls/3/fix-action-alignment
FIX CMS actions alignment
This commit is contained in:
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.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; }
|
||||||
|
File diff suppressed because one or more lines are too long
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user