diff --git a/css/paragraphs.widget.css b/css/paragraphs.widget.css index 8418e32..c0bebe0 100644 --- a/css/paragraphs.widget.css +++ b/css/paragraphs.widget.css @@ -106,12 +106,33 @@ margin-left: auto; padding-right: 1em; padding-left: 1em; + position: relative; +} + +.paragraphs-edit-button-container .ajax-progress { + position: absolute; + transform: translate(-82px); + background-color: rgba(255,255,255,1); + width: 114px; + top: 6px; + line-height: 1; } @media screen and (max-width: 600px) { .js .paragraphs-edit-button-container { - width: 50px; - height: 40px; + min-height: 2em; + } + + .js .paragraphs-edit-button-container input[type="submit"] { + padding-bottom: 2px; + width: auto; + } + + .js .paragraphs-edit-button-container .ajax-progress { + transform: translate(22px); + background-color: rgba(255,255,255,0.75); + top: 26px; + padding: 4px; } } diff --git a/css/paragraphs.widget.scss b/css/paragraphs.widget.scss index 6c7ca38..6fdde4d 100644 --- a/css/paragraphs.widget.scss +++ b/css/paragraphs.widget.scss @@ -114,15 +114,35 @@ margin-left: auto; padding-right: 1em; padding-left: 1em; + position: relative; + + .ajax-progress { + position: absolute; + transform: translate(-82px); + background-color: rgba(255,255,255,1); + width: 114px; + top: 6px; + line-height: 1; + } // Override 600px breakpoint core submit button tweaks. @media screen and (max-width: 600px) { .js & { - width: 50px; - height: 40px; + min-height: 2em; + + input[type="submit"] { + padding-bottom: 2px; + width: auto; + } + + .ajax-progress { + transform: translate(22px); + background-color: rgba(255,255,255,0.75); + top: 26px; + padding: 4px; + } } } - } .paragraphs-tabs-wrapper {