From ebe41cdadf772da04533e8a4a42067880dbee0e6 Mon Sep 17 00:00:00 2001 From: uniun Date: Fri, 25 Jan 2013 17:41:02 +0200 Subject: [PATCH] CSS fixes for Batchactions. On some browsers Batchactions block looked OK, but on others (e.t. Opera on Linux) every element in Batchactions block had different height. The height of these elements was related to font size which is a little bit different on every OS'es and browsers. See https://github.com/silverstripe/sapphire/pull/1132 --- admin/css/screen.css | 9 ++++++--- admin/scss/_style.scss | 33 +++++++++++++++++++++++++-------- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 490fd26e4..599c847a5 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -514,16 +514,19 @@ body.cms { overflow: hidden; } /** CMS Batch actions */ .cms-content-batchactions { float: left; position: relative; display: block; } -.cms-content-batchactions .view-mode-batchactions-wrapper { float: left; padding: 4px 6px; border: 1px solid #aaa; margin-bottom: 8px; background-color: #D9D9D9; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9); background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9); background-image: -o-linear-gradient(top, #ffffff, #d9d9d9); background-image: linear-gradient(top, #ffffff, #d9d9d9); border-top-left-radius: 4px; border-bottom-left-radius: 4px; } -.cms-content-batchactions .view-mode-batchactions-wrapper label { display: none; } +.cms-content-batchactions .view-mode-batchactions-wrapper { height: 18px; float: left; padding: 4px 6px; border: 1px solid #aaa; margin-bottom: 8px; background-color: #D9D9D9; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9); background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9); background-image: -o-linear-gradient(top, #ffffff, #d9d9d9); background-image: linear-gradient(top, #ffffff, #d9d9d9); border-top-left-radius: 4px; border-bottom-left-radius: 4px; } +.cms-content-batchactions .view-mode-batchactions-wrapper input { vertical-align: middle; } +.cms-content-batchactions .view-mode-batchactions-wrapper label { vertical-align: middle; display: none; } .cms-content-batchactions .view-mode-batchactions-wrapper fieldset, .cms-content-batchactions .view-mode-batchactions-wrapper .Actions { display: inline-block; } .cms-content-batchactions.inactive .view-mode-batchactions-wrapper { border-radius: 4px; } .cms-content-batchactions.inactive .view-mode-batchactions-wrapper label { display: inline; } .cms-content-batchactions form > * { display: block; float: left; } .cms-content-batchactions form.cms-batch-actions { float: left; } .cms-content-batchactions.inactive form { display: none; } +.cms-content-batchactions .chzn-container-single { display: block; } .cms-content-batchactions .chzn-container-single .chzn-single { margin-left: -1px; border-radius: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9); background-image: -moz-linear-gradient(top, #ffffff, #d9d9d9); background-image: -o-linear-gradient(top, #ffffff, #d9d9d9); background-image: linear-gradient(top, #ffffff, #d9d9d9); } -.cms-content-batchactions .cms-batch-actions .Actions .ss-ui-button { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } +.cms-content-batchactions .chzn-container-single .chzn-single span { padding-top: 0; } +.cms-content-batchactions .cms-batch-actions .Actions .ss-ui-button { padding-top: 4px; padding-bottom: 4px; height: 28px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .cms-content-batchactions .cms-batch-actions .Actions .ss-ui-button.ui-state-disabled { opacity: 1; color: #ccc; } #Form_BatchActionsForm select { width: 200px; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 6396e4a14..bf6caf0db 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -823,6 +823,7 @@ body.cms { display: block; .view-mode-batchactions-wrapper { + height: 18px; float: left; padding: 4px 6px; border: 1px solid #aaa; @@ -830,9 +831,14 @@ body.cms { background-color: #D9D9D9; @include background-image(linear-gradient(top, #fff, #D9D9D9)); border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + + input { + vertical-align: middle; + } label { + vertical-align: middle; display: none; } @@ -842,18 +848,18 @@ body.cms { } &.inactive .view-mode-batchactions-wrapper { - border-radius: 4px; + border-radius: 4px; label { display: inline; } } - + form > * { display: block; float: left; } - + form.cms-batch-actions { float: left; } @@ -862,13 +868,24 @@ body.cms { display: none; } - .chzn-container-single .chzn-single { - margin-left: -1px; - border-radius: 0; - @include background-image(linear-gradient(top, #fff, #D9D9D9)); + .chzn-container-single { + display: block; + + .chzn-single { + margin-left: -1px; + border-radius: 0; + @include background-image(linear-gradient(top, #fff, #D9D9D9)); + + span { + padding-top: 0; + } + } } .cms-batch-actions .Actions .ss-ui-button { + padding-top: 4px; + padding-bottom: 4px; + height: 28px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0;