From 29f7e00f032a4b7bd5a302f3e9f8831a3ad91f8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Sun, 20 Nov 2016 15:38:33 +0100 Subject: [PATCH] remove dependency on jquery ui css (#7760) This adds required styles for dialogs, overlays and calendar widget. --- gadjo/static/css/_forms.scss | 61 ---------- gadjo/static/css/_jqueryui.scss | 197 ++++++++++++++++++++++++++++++++ gadjo/static/css/gadjo.scss | 5 +- gadjo/templates/gadjo/root.html | 2 - 4 files changed, 198 insertions(+), 67 deletions(-) create mode 100644 gadjo/static/css/_jqueryui.scss diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss index 7b7eed2..11237be 100644 --- a/gadjo/static/css/_forms.scss +++ b/gadjo/static/css/_forms.scss @@ -73,11 +73,6 @@ div.buttons input { } } -.ui-dialog .ui-dialog-buttonpane button { - margin-right: 0; - margin-left: 2ex; -} - div#content button:disabled, input[type=submit]:disabled { color: #888; @@ -206,62 +201,6 @@ form ul.errorlist { } } -body .ui-front { - z-index: 1000; -} - -/* dialog styling */ - -div.ui-widget-overlay { - background: #333; -} - -div.ui-dialog { - border: 0; - box-shadow: rgb(102, 102, 102) 0px 0px 20px 2px; - padding: 0; - border-radius: 0; - max-width: 80%; - min-width: 30%; - - .ui-dialog-titlebar { - background: #eee; - border-radius: 0; - border: none; - - .ui-dialog-title { - font-size: 130%; - font-weight: normal; - } - - button { - border: transparent; - background: transparent; - box-shadow: none; - } - } - - .ui-widget-content { - .ui-state-default.ui-button { - border-radius: 0; - } - } - - .ui-dialog-buttonpane button { - margin: 0.5em 0 0.5em 1em; - } - - form p input, - form p select, - form p textarea { - width: 100%; - } - - form p input[type=radio], form p input[type=checkbox] { - width: auto; - } -} - /* fieldsets */ fieldset.gadjo-foldable legend.gadjo-foldable-widget { border-bottom: 1px solid #aaa; diff --git a/gadjo/static/css/_jqueryui.scss b/gadjo/static/css/_jqueryui.scss new file mode 100644 index 0000000..ecf1da2 --- /dev/null +++ b/gadjo/static/css/_jqueryui.scss @@ -0,0 +1,197 @@ +body .ui-front { + z-index: 1000; +} + +.ui-widget-content { + border: 1px solid #aaa; + background: white; + .ui-widget-header { + border: 1px solid #aaa; + background: #ccc; + position: relative; + text-align: center; + padding: 3px; + a { + color: #333; + } + } +} + +.ui-datepicker { + display: none; + select.ui-datepicker-month, select.ui-datepicker-year { + width: 49%; + } + .ui-datepicker-title { + margin: 0 2.5em; + } + table { + width: 100%; + border-collapse: collapse; + td { + text-align: right; + a { + background: #eee; + border: 1px solid #aaa; + display: block; + padding: 0.4ex 1ex; + &:hover { + border-color: #666; + } + } + } + } + a { + border-bottom: 0; + } + padding: .2em .2em 0; + .ui-datepicker-prev { + display: block; + position: absolute; + left: 0.5ex; + cursor: pointer; + &::after { + font-family: FontAwesome; + content: "\f060"; /* fa-arrow-left */ + } + span { + display: none; + } + } + .ui-datepicker-next { + display: block; + position: absolute; + right: 0.5ex; + cursor: pointer; + &::after { + font-family: FontAwesome; + content: "\f061"; /* fa-arrow-right */ + } + span { + display: none; + } + } +} + +/* dialog styling */ + +.ui-helper-clearfix { + min-height: 0; + &::before, &::after { + content: ""; + display: table; + border-collapse: collapse; + } + &::after { + clear: both; + } +} + +div.ui-widget-overlay { + background: #333; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.3; + z-index: 1000; +} + +.ui-widget { + font-size: 1.1em; + .ui-widget { + font-size: 1em; + } +} + +div.ui-dialog { + border: 0; + outline: 0; + background: white; + box-shadow: rgb(102, 102, 102) 0px 0px 20px 2px; + padding: 0; + border-radius: 0; + max-width: 80%; + min-width: 30%; + position: absolute; + + .ui-dialog-titlebar { + background: #eee; + border-radius: 0; + border: none; + position: relative; + padding: 0.4em 1em; + cursor: move; + text-align: left; + + .ui-dialog-title { + font-size: 130%; + font-weight: normal; + } + + .ui-dialog-titlebar-close { + position: absolute; + right: .3em; + height: 20px; + min-width: 20px; + padding: 0; + color: #333; + margin-right: 0; + outline: none; + .ui-icon-closethick::after { + content: "\f00d"; /* fa-times */ + font-family: FontAwesome; + padding-top: 5px; + display: block; + } + .ui-button-text { + display: block; + text-indent: -9999999px; + } + } + + button { + padding: 0; + border: 1px solid transparent; + background: transparent; + box-shadow: none; + cursor: pointer; + } + } + + .ui-widget-content { + position: relative; + border: 0; + padding: .5em 1em; + background: none; + overflow: auto; + .ui-state-default.ui-button { + border-radius: 0; + } + } + + .ui-dialog-buttonpane { + position: relative; + background: #eee; + border-top: 1px solid #aaaaaa; + margin-top: 0.5em; + padding: 0.3em 1em 0.5em 0.4em; + .ui-dialog-buttonset { + float: right; + } + button { + margin: 0.5em 0 0.5em 1em; + } + } + + form p input, + form p select, + form p textarea { + width: 100%; + } + + form p input[type=radio], form p input[type=checkbox] { + width: auto; + } +} diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss index 028a743..8d9ce87 100644 --- a/gadjo/static/css/gadjo.scss +++ b/gadjo/static/css/gadjo.scss @@ -756,10 +756,6 @@ div.old-ie-warning p { line-height: 150%; } -body .ui-widget { - font-family: inherit; -} - ul#sidepage-menu li a.icon-add { background-image: url(icons/add.small.png); } ul#sidepage-menu li a.icon-book { background-image: url(icons/book.small.png); } ul#sidepage-menu li a.icon-calendar { background-image: url(icons/calendar.small.png); } @@ -870,4 +866,5 @@ ul.apps li.icon-announces a:hover { background-image: url(icons/announces.large- } @import 'grid'; +@import 'jqueryui'; @import 'forms'; diff --git a/gadjo/templates/gadjo/root.html b/gadjo/templates/gadjo/root.html index 9cd6c89..421cd6a 100644 --- a/gadjo/templates/gadjo/root.html +++ b/gadjo/templates/gadjo/root.html @@ -5,8 +5,6 @@ {% block page-title %}{% endblock %} {% block gadjo-js %} -