mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Merge pull request #6118 from open-sausages/pulls/4.0/add-to-campaign-UI
Add to campaign styles UI enhancements
This commit is contained in:
Damian Mooyman
GitHub
commit
c72d81222b
10
admin/client/dist/js/bundle.js
vendored
10
admin/client/dist/js/bundle.js
vendored
@ -416,10 +416,10 @@ var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))
|
||||
return n.handleSubmit=n.handleSubmit.bind(n),n.handleHide=n.handleHide.bind(n),n.clearResponse=n.clearResponse.bind(n),n}return a(t,e),s(t,[{key:"getForm",value:function n(){return u["default"].createElement(h["default"],{
|
||||
schemaUrl:this.props.schemaUrl,handleSubmit:this.handleSubmit,handleAction:this.props.handleAction})}},{key:"getResponse",value:function i(){if(!this.state||!this.state.response)return null
|
||||
var e=""
|
||||
return e=this.state.error?this.props.responseClassBad||"response error":this.props.responseClassGood||"response good",u["default"].createElement("div",{className:e},u["default"].createElement("div",{className:"response-wrapper"
|
||||
},u["default"].createElement("span",null,this.state.response)))}},{key:"clearResponse",value:function l(){this.setState({response:null})}},{key:"handleHide",value:function c(){this.clearResponse(),"function"==typeof this.props.handleHide&&this.props.handleHide()
|
||||
return e=this.state.error?this.props.responseClassBad||"response error":this.props.responseClassGood||"response good",u["default"].createElement("div",{className:e},u["default"].createElement("span",null,this.state.response))
|
||||
|
||||
}},{key:"handleSubmit",value:function f(e,t,n){var i=this,r=null
|
||||
}},{key:"clearResponse",value:function l(){this.setState({response:null})}},{key:"handleHide",value:function c(){this.clearResponse(),"function"==typeof this.props.handleHide&&this.props.handleHide()}},{
|
||||
key:"handleSubmit",value:function f(e,t,n){var i=this,r=null
|
||||
return"function"==typeof this.props.handleSubmit?r=this.props.handleSubmit(e,t,n):(e.preventDefault(),r=n()),r&&r.then(function(e){return i.setState({response:e.message,error:!1}),e})["catch"](function(e){
|
||||
e.then(function(e){i.setState({response:e,error:!0})})}),r}},{key:"render",value:function p(){var e=this.getForm(),t=this.getResponse()
|
||||
return u["default"].createElement(d.Modal,{show:this.props.show,onHide:this.handleHide,className:this.props.className},this.props.title!==!1&&u["default"].createElement(d.Modal.Header,{closeButton:!0},u["default"].createElement(d.Modal.Title,null,this.props.title)),u["default"].createElement(d.Modal.Body,{
|
||||
@ -1475,8 +1475,8 @@ return t.length||(t=e('<div id="add-to-campaign__dialog-wrapper" />'),e("body").
|
||||
this._clearModal()},_renderModal:function r(){var t=this,n=function l(){return t._clearModal()},i=function d(){return t._handleSubmitModal.apply(t,arguments)},r=e("form.cms-edit-form :input[name=ID]").val(),o=window.ss.store,a=o.getState().config.sections["SilverStripe\\CMS\\Controllers\\CMSPageEditController"],s=a.form.AddToCampaignForm.schemaUrl+"/"+r
|
||||
|
||||
|
||||
c["default"].render(u["default"].createElement(f.Provider,{store:o},u["default"].createElement(h["default"],{show:!0,handleSubmit:i,handleHide:n,schemaUrl:s,bodyClassName:"add-to-campaign__dialog",responseClassBad:"add-to-campaign__response add-to-campaign__response--error",
|
||||
responseClassGood:"add-to-campaign__response add-to-campaign__response--good"})),this[0])},_clearModal:function o(){c["default"].unmountComponentAtNode(this[0])},_handleSubmitModal:function a(e,t,n){return e.preventDefault(),
|
||||
c["default"].render(u["default"].createElement(f.Provider,{store:o},u["default"].createElement(h["default"],{show:!0,handleSubmit:i,handleHide:n,schemaUrl:s,bodyClassName:"modal__dialog",responseClassBad:"modal__response modal__response--error",
|
||||
responseClassGood:"modal__response modal__response--good"})),this[0])},_clearModal:function o(){c["default"].unmountComponentAtNode(this[0])},_handleSubmitModal:function a(e,t,n){return e.preventDefault(),
|
||||
t.Campaign?n():(alert(s["default"]._t("AddToCampaigns.ErrorCampaignNotSelected","There was no campaign selected to be added to")),null)}})})},,function(e,t){e.exports=FormBuilderModal},function(e,t,n){
|
||||
"use strict"
|
||||
function i(e){return e&&e.__esModule?e:{"default":e}}var r=n(1),o=i(r)
|
||||
|
||||
239
admin/client/dist/styles/bundle.css
vendored
239
admin/client/dist/styles/bundle.css
vendored
@ -6112,7 +6112,7 @@ a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-gro
|
||||
.close{
|
||||
float:right;
|
||||
font-size:1.5rem;
|
||||
font-weight:700;
|
||||
font-weight:300;
|
||||
line-height:1;
|
||||
color:#000;
|
||||
text-shadow:0 1px 0 #fff;
|
||||
@ -6177,7 +6177,7 @@ button.close{
|
||||
|
||||
.modal-content{
|
||||
position:relative;
|
||||
background-color:#fff;
|
||||
background-color:#f6f7f8;
|
||||
background-clip:padding-box;
|
||||
border:1px solid rgba(0,0,0,.2);
|
||||
border-radius:.3rem;
|
||||
@ -6204,7 +6204,7 @@ button.close{
|
||||
}
|
||||
|
||||
.modal-header{
|
||||
padding:15px;
|
||||
padding:.76925rem 1.5385rem;
|
||||
border-bottom:1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
@ -6225,11 +6225,11 @@ button.close{
|
||||
|
||||
.modal-body{
|
||||
position:relative;
|
||||
padding:15px;
|
||||
padding:1.5385rem;
|
||||
}
|
||||
|
||||
.modal-footer{
|
||||
padding:15px;
|
||||
padding:1.5385rem;
|
||||
text-align:right;
|
||||
border-top:1px solid #e5e5e5;
|
||||
}
|
||||
@ -8655,7 +8655,7 @@ form.nostyle .TreeDropdownField,form.nostyle input.text,form.nostyle select,form
|
||||
}
|
||||
|
||||
.field select:not([size]):not([multiple]){
|
||||
height:2.5rem;
|
||||
height:2.924rem;
|
||||
}
|
||||
|
||||
.field input.creditcard,.field input.phonenumber-field__area,.field input.phonenumber-field__country,.field input.phonenumber-field__extension,.field input.phonenumber-field__number{
|
||||
@ -10978,93 +10978,6 @@ body.cms-dialog{
|
||||
top:0;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog{
|
||||
overflow:hidden;
|
||||
padding:12px 16px;
|
||||
margin:0;
|
||||
border:0;
|
||||
min-height:150px;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .chosen-results>li{
|
||||
padding:.82053rem 1.2308rem;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .disabled-result{
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .disabled-result:after{
|
||||
font-style:normal;
|
||||
content:"Already contains item";
|
||||
color:#0071c4;
|
||||
margin-left:1.2308rem;
|
||||
float:right;
|
||||
}
|
||||
|
||||
@-webkit-keyframes add-to-campaign--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes add-to-campaign--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .add-to-campaign__response{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
height:100%;
|
||||
left:0;
|
||||
width:100%;
|
||||
-webkit-animation:add-to-campaign--slideup 2s 1;
|
||||
animation:add-to-campaign--slideup 2s 1;
|
||||
background:#fff;
|
||||
display:block;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .response-wrapper{
|
||||
display:table;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .response-wrapper span{
|
||||
display:table-cell;
|
||||
text-align:center;
|
||||
vertical-align:middle;
|
||||
padding-bottom:1.2308rem;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .response-wrapper span:before{
|
||||
font-size:48px;
|
||||
line-height:40px;
|
||||
display:block;
|
||||
padding-bottom:1.2308rem;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .add-to-campaign__response--good span:before{
|
||||
content:"\263A";
|
||||
color:#3fa142;
|
||||
}
|
||||
|
||||
.add-to-campaign__dialog .add-to-campaign__response--error span:before{
|
||||
content:"\2639";
|
||||
color:#d40404;
|
||||
}
|
||||
|
||||
.cms-search-form{
|
||||
margin-bottom:16px;
|
||||
}
|
||||
@ -15135,18 +15048,6 @@ fieldset+.btn-toolbar{
|
||||
background:#0071c4;
|
||||
}
|
||||
|
||||
.btn--top-right{
|
||||
float:right;
|
||||
right:0;
|
||||
margin-right:5px;
|
||||
margin-top:-2px;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.btn--top-right:before{
|
||||
color:#66727d;
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
margin-right:.9231rem;
|
||||
}
|
||||
@ -15167,6 +15068,29 @@ fieldset+.btn-toolbar{
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.close{
|
||||
font-size:1.8rem;
|
||||
opacity:.3;
|
||||
line-height:20px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
button.close{
|
||||
padding:.4615rem .7692rem;
|
||||
}
|
||||
|
||||
.btn--top-right{
|
||||
float:right;
|
||||
right:0;
|
||||
margin-right:5px;
|
||||
margin-top:-2px;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.btn--top-right:before{
|
||||
color:#66727d;
|
||||
}
|
||||
|
||||
.popover{
|
||||
box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.1);
|
||||
font-size:1rem;
|
||||
@ -15645,6 +15569,10 @@ div.grid-field__sort-field+.form__fieldgroup-item{
|
||||
font-size:.923rem;
|
||||
}
|
||||
|
||||
.form__field-description:empty,.form__field-extra-label:empty{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.form__field-extra-label{
|
||||
font-style:italic;
|
||||
}
|
||||
@ -15875,6 +15803,107 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
overflow:hidden;
|
||||
border:0;
|
||||
}
|
||||
|
||||
.modal-header{
|
||||
height:53px;
|
||||
}
|
||||
|
||||
.modal-header .close{
|
||||
top:.9231rem;
|
||||
right:.9231rem;
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
margin-right:0;
|
||||
height:32px;
|
||||
}
|
||||
|
||||
.modal-header .close span{
|
||||
overflow:hidden;
|
||||
display:block;
|
||||
margin-top:-7px;
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
min-height:200px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes modal--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal--slideup{
|
||||
0%{
|
||||
bottom:-100%;
|
||||
opacity:.5;
|
||||
}
|
||||
|
||||
to{
|
||||
bottom:0;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__response{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
height:calc(100% + 53px);
|
||||
width:100%;
|
||||
-webkit-animation:modal--slideup .6s 1;
|
||||
animation:modal--slideup .6s 1;
|
||||
background:#f6f7f8;
|
||||
display:block;
|
||||
border-radius:.3rem;
|
||||
z-index:1;
|
||||
text-align:center;
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-box-pack:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
padding:1.5385rem;
|
||||
}
|
||||
|
||||
.modal__response--error,.modal__response--good{
|
||||
font-size:1.23rem;
|
||||
font-weight:300;
|
||||
}
|
||||
|
||||
.modal__response--error span:before,.modal__response--good span:before{
|
||||
font-family:silverstripe;
|
||||
margin-bottom:1.2308rem;
|
||||
font-size:48px;
|
||||
line-height:40px;
|
||||
display:block;
|
||||
padding-bottom:1.2308rem;
|
||||
}
|
||||
|
||||
.modal__response--good span:before{
|
||||
content:"O";
|
||||
color:#3fa142;
|
||||
}
|
||||
|
||||
.modal__response--error span:before{
|
||||
content:"#";
|
||||
color:#d40404;
|
||||
}
|
||||
|
||||
.cms-content__inner{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@ -76,6 +76,10 @@
|
||||
padding-bottom: $input-padding-y;
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form__field-extra-label {
|
||||
|
||||
@ -180,19 +180,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Apply to things like panel close btn
|
||||
.btn--top-right {
|
||||
float: right;
|
||||
right: 0;
|
||||
margin-right: 5px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
|
||||
// Temp override JQueryUI color
|
||||
&::before {
|
||||
color: $body-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Grouped buttons
|
||||
.btn-group {
|
||||
@ -216,3 +203,31 @@
|
||||
.btn--no-focus:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
// Close buttons
|
||||
// Bootstrap close button customizations
|
||||
.close {
|
||||
font-size: ($font-size-base * 1.8);
|
||||
opacity: .3;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button.close {
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
}
|
||||
|
||||
// Apply to things like panel close btn
|
||||
.btn--top-right {
|
||||
float: right;
|
||||
right: 0;
|
||||
margin-right: 5px;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
|
||||
// Temp override JQueryUI color
|
||||
&::before {
|
||||
color: $body-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,10 +37,8 @@ class FormBuilderModal extends SilverStripeComponent {
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="response-wrapper">
|
||||
<span>{this.state.response}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
90
admin/client/src/components/Modal/Modal.scss
Normal file
90
admin/client/src/components/Modal/Modal.scss
Normal file
@ -0,0 +1,90 @@
|
||||
// Based on bootstrap modal
|
||||
.modal-content {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
height: $toolbar-total-height;
|
||||
|
||||
// Close icon
|
||||
.close {
|
||||
top: $spacer-sm;
|
||||
right: $spacer-sm;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
margin-right: 0;
|
||||
height: 32px;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin-top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
|
||||
// Modal slide up response
|
||||
@keyframes modal--slideup {
|
||||
from {
|
||||
bottom: -100%;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__response {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: calc(100% + #{$toolbar-total-height});
|
||||
width: 100%;
|
||||
animation: modal--slideup .6s 1;
|
||||
background: $background-main;
|
||||
display: block;
|
||||
border-radius: $border-radius-lg;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $panel-padding-y $panel-padding-x;
|
||||
}
|
||||
|
||||
// Response messages
|
||||
.modal__response--good,
|
||||
.modal__response--error {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 300;
|
||||
|
||||
span::before {
|
||||
font-family: silverstripe;
|
||||
margin-bottom: $spacer-y;
|
||||
font-size: 48px;
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
padding-bottom: $spacer-y;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__response--good span::before {
|
||||
content: "O";
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
.modal__response--error span::before {
|
||||
content: "#";
|
||||
color: $brand-danger;
|
||||
}
|
||||
@ -57,9 +57,9 @@ jQuery.entwine('ss', ($) => {
|
||||
handleSubmit={handleSubmit}
|
||||
handleHide={handleHide}
|
||||
schemaUrl={modalSchemaUrl}
|
||||
bodyClassName="add-to-campaign__dialog"
|
||||
responseClassBad="add-to-campaign__response add-to-campaign__response--error"
|
||||
responseClassGood="add-to-campaign__response add-to-campaign__response--good"
|
||||
bodyClassName="modal__dialog"
|
||||
responseClassBad="modal__response modal__response--error"
|
||||
responseClassGood="modal__response modal__response--good"
|
||||
/>
|
||||
</Provider>,
|
||||
this[0]
|
||||
|
||||
@ -164,6 +164,11 @@ $grid-gutter-width: $spacer * 2.5; // 40px
|
||||
$grid-gutter-width-half: $grid-gutter-width / 2; // TODO: Deprecate this, replacing with $panel-padding-x and $panel-padding-y
|
||||
|
||||
|
||||
// Panel padding
|
||||
$panel-padding-x: $grid-gutter-width / 2;
|
||||
$panel-padding-y: $grid-gutter-width / 2;
|
||||
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
@ -577,22 +582,22 @@ $popover-padding: $spacer-x;
|
||||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
// $modal-inner-padding: 15px;
|
||||
//
|
||||
// $modal-title-padding: 15px;
|
||||
// $modal-title-line-height: $line-height;
|
||||
//
|
||||
// $modal-content-bg: #fff;
|
||||
// $modal-content-border-color: rgba(0,0,0,.2);
|
||||
//
|
||||
// $modal-backdrop-bg: #000;
|
||||
// $modal-backdrop-opacity: .5;
|
||||
// $modal-header-border-color: #e5e5e5;
|
||||
// $modal-footer-border-color: $modal-header-border-color;
|
||||
//
|
||||
// $modal-lg: 900px;
|
||||
// $modal-md: 600px;
|
||||
// $modal-sm: 300px;
|
||||
$modal-inner-padding: $panel-padding-y $panel-padding-x;
|
||||
|
||||
$modal-title-padding: $spacer-xs $panel-padding-x;
|
||||
$modal-title-line-height: $line-height;
|
||||
|
||||
$modal-content-bg: $background-main;
|
||||
$modal-content-border-color: rgba(0, 0, 0, .2);
|
||||
|
||||
$modal-backdrop-bg: #000;
|
||||
$modal-backdrop-opacity: .5;
|
||||
$modal-header-border-color: #e5e5e5;
|
||||
$modal-footer-border-color: $modal-header-border-color;
|
||||
|
||||
$modal-lg: 900px;
|
||||
$modal-md: 600px;
|
||||
$modal-sm: 300px;
|
||||
|
||||
|
||||
// Alerts
|
||||
@ -692,9 +697,9 @@ $breadcrumb-divider: "/";
|
||||
|
||||
// Close
|
||||
|
||||
// $close-font-weight: bold;
|
||||
// $close-color: #000;
|
||||
// $close-text-shadow: 0 1px 0 #fff;
|
||||
$close-font-weight: 300;
|
||||
$close-color: #000;
|
||||
$close-text-shadow: 0 1px 0 #fff;
|
||||
|
||||
|
||||
// Code
|
||||
@ -716,10 +721,6 @@ $cms-panel-sm: 300px;
|
||||
$cms-panel-md: 448px;
|
||||
$cms-panel-lg: 638px;
|
||||
|
||||
// Panel padding
|
||||
$panel-padding-x: $grid-gutter-width / 2;
|
||||
$panel-padding-y: $grid-gutter-width / 2;
|
||||
|
||||
|
||||
// Shadows
|
||||
$shadow-level-1: rgba(0, 0, 0, .1);
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
@import "../components/Toolbar/Toolbar";
|
||||
@import "../components/Tabs/Tabs";
|
||||
@import "../components/Form/Form";
|
||||
@import "../components/Modal/Modal";
|
||||
|
||||
|
||||
// Layout and sections
|
||||
|
||||
@ -55,7 +55,7 @@ form.nostyle {
|
||||
}
|
||||
|
||||
select:not([size]):not([multiple]) {
|
||||
height: 2.5rem;
|
||||
height: 2.924rem;
|
||||
}
|
||||
|
||||
input.text,
|
||||
|
||||
@ -1943,88 +1943,6 @@ body.cms-dialog {
|
||||
}
|
||||
}
|
||||
|
||||
/** --------------------------------------------
|
||||
* Add to campaign dialog
|
||||
* -------------------------------------------- */
|
||||
|
||||
.add-to-campaign__dialog {
|
||||
overflow: hidden;
|
||||
padding: 12px 16px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
min-height: 150px;
|
||||
/* no max-height due to overflow: hidden */
|
||||
|
||||
.chosen-results > li {
|
||||
padding: $spacer-y/1.5 $spacer-x;
|
||||
}
|
||||
|
||||
.disabled-result {
|
||||
font-style: italic;
|
||||
|
||||
&::after {
|
||||
font-style: normal;
|
||||
content: "Already contains item";
|
||||
color: $color-text-blue-link;
|
||||
margin-left: $spacer-x;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes add-to-campaign--slideup {
|
||||
from {
|
||||
bottom: -100%
|
||||
}
|
||||
to {
|
||||
bottom: 0
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-campaign__response {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
animation:add-to-campaign--slideup 2s 1;
|
||||
background: $white;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.response-wrapper {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding-bottom: $spacer-y;
|
||||
|
||||
&::before {
|
||||
font-size: 48px;
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
padding-bottom: $spacer-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-campaign__response--good {
|
||||
span::before {
|
||||
content: "☺";
|
||||
color: $brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
.add-to-campaign__response--error span::before {
|
||||
/* This is a sad face emoticon. Some fonts don't carry it. @todo: replace or test in all browsers */
|
||||
content: "☹";
|
||||
color: $brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** --------------------------------------------
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user