diff --git a/public/css/messaging/message.css b/public/css/messaging/message.css index 5d62a5e6a..f5440b892 100644 --- a/public/css/messaging/message.css +++ b/public/css/messaging/message.css @@ -83,6 +83,7 @@ fieldset { min-width: 0; background-color: #FFF; } + fieldset legend { margin: 0 0 1.5rem; padding: 0; @@ -94,9 +95,11 @@ fieldset legend { font-weight: 600; color: #333; } + fieldset legend + * { clear: both; } + body:not(:-moz-handler-blocked) fieldset { display: table-cell; } @@ -106,17 +109,18 @@ body:not(:-moz-handler-blocked) fieldset { margin: 0 0 1.5rem; box-sizing: border-box; font-size: 0; - display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } + .toggle input { width: 0; height: 0; position: absolute; left: -9999px; } + .toggle input + label { margin: 0; padding: .75rem 2rem; @@ -133,17 +137,21 @@ body:not(:-moz-handler-blocked) fieldset { transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; cursor: pointer; } + .toggle input + label:first-of-type { border-radius: 6px 0 0 6px; border-right: none; } + .toggle input + label:last-of-type { border-radius: 0 6px 6px 0; border-left: none; } + .toggle input:hover + label { border-color: #213140; } + .toggle input:checked + label { background-color: #337ab7; color: #FFF; @@ -151,15 +159,16 @@ body:not(:-moz-handler-blocked) fieldset { border-color: #337ab7; z-index: 1; } + .toggle input:focus + label { outline: dotted 1px #CCC; outline-offset: .45rem; } + @media (max-width: 800px) { .toggle input + label { padding: .75rem .25rem; flex: 0 0 50%; - display: flex; justify-content: center; align-items: center; } @@ -171,16 +180,20 @@ body:not(:-moz-handler-blocked) fieldset { font-size: 1rem; font-weight: 400; } + .status span { font-weight: 600; color: #B6985A; } + .status span:first-of-type { display: inline; } + .status span:last-of-type { display: none; } + @media (max-width: 800px) { .status span:first-of-type { display: none; @@ -189,3 +202,9 @@ body:not(:-moz-handler-blocked) fieldset { display: inline; } } + + +.buttonsSpacer { + display: inline-block; + width: 30px; +}