From fe16832e013e19dffce536fa91eeafa41209e026 Mon Sep 17 00:00:00 2001 From: gschwab Date: Wed, 19 Mar 2014 13:49:16 +0100 Subject: [PATCH] css refactoring: started layout.css --- .../aardvark/frontend/css/datatables.css | 2 + .../system/aardvark/frontend/css/layout.css | 93 +------------------ .../system/aardvark/frontend/css/modal.css | 13 +-- .../js/templates/collectionInfoView.ejs | 8 +- .../aardvark/frontend/scss/_accordion.scss | 14 +++ .../aardvark/frontend/scss/_colors.scss | 4 + .../frontend/scss/_contentTables.scss | 5 - .../system/aardvark/frontend/scss/_icons.scss | 8 ++ .../aardvark/frontend/scss/_modals.scss | 14 +++ .../aardvark/frontend/scss/_resizing.scss | 2 - .../aardvark/frontend/scss/generated.css | 28 +++++- .../system/aardvark/frontend/scss/style.scss | 2 + 12 files changed, 83 insertions(+), 110 deletions(-) create mode 100644 js/apps/system/aardvark/frontend/scss/_accordion.scss diff --git a/js/apps/system/aardvark/frontend/css/datatables.css b/js/apps/system/aardvark/frontend/css/datatables.css index 2ca2b04f55..6bbfd0f0de 100644 --- a/js/apps/system/aardvark/frontend/css/datatables.css +++ b/js/apps/system/aardvark/frontend/css/datatables.css @@ -1,6 +1,8 @@ +/* #documentsTable thead { border: 0 !important; } +*/ #tableDiv table.dataTable td { padding:12px 18px !important; diff --git a/js/apps/system/aardvark/frontend/css/layout.css b/js/apps/system/aardvark/frontend/css/layout.css index a2ae6ff16e..cda8d83091 100644 --- a/js/apps/system/aardvark/frontend/css/layout.css +++ b/js/apps/system/aardvark/frontend/css/layout.css @@ -1,7 +1,3 @@ -.modal-backdrop, .modal-backdrop.fade.in { - opacity: 0.4 ; -} - .arango-logo img { margin-left: 22px; } @@ -72,82 +68,10 @@ body { background: none; } -/* ICONS */ -.icon-info-sign:hover { - cursor: pointer; -} - -.about-icon { - float: left; - margin-right: 12px; -} - -.clearicon, .reloadicon { - opacity: 0.2; - cursor: pointer; - margin-top: 3px; - top: 20px; - position: absolute; -} - -.clearicon { - right: 25px; -} - -.reloadicon { - right: 45px; -} - -#plusIcon { - margin-right: 10px; - margin-top: 11px; - margin-right: 22px; - opacity: 0.3; -} - -#plusIcon:hover, .clearicon:hover, .reloadicon:hover { - opacity: 0.8; - cursor: pointer; -} - table .sorting { background: none !important; } -/* ABOUT VIEW */ -#aboutDiv { - padding-bottom: 5px; -} - -#aboutDiv .row { - border: 8px solid #F4F3F3 !important; - margin-bottom: 25px; - background-color: white; - padding-bottom: 5px; - margin-right: 5px; - margin-bottom: 5px; - margin-left: 5px; -} - -#aboutHeader { - padding-bottom: 33px; -} - -#aboutDiv h3 { -} - -#aboutDiv .row a { - padding-left: 20px; -} - -.disabledHover { - cursor: default !important; -} - -.disabledHover:hover { - background-color: #8F8D8C !important; -} - /* TESTING DYN */ .container { @@ -176,21 +100,6 @@ button { cursor: pointer !important; } -.accordion-group { - border: 0; -} - -.accordion-inner { - border-top: 0; -} - -.accordion-heading a { - border: 1px solid #cccccc; - color: black; - width: 397px !important; - font-weight: 400; -} - li a [class^="icon_arangodb"], li a [class*=" icon_arangodb"] { font-size: 18px; position: absolute; @@ -198,7 +107,7 @@ li a [class^="icon_arangodb"], li a [class*=" icon_arangodb"] { top: 2px; } -.modal-body .icon_arangodb_info { +.icon_arangodb_info { font-size: 23px; color: #736B68; } diff --git a/js/apps/system/aardvark/frontend/css/modal.css b/js/apps/system/aardvark/frontend/css/modal.css index 386568d0ec..ec9a79568c 100644 --- a/js/apps/system/aardvark/frontend/css/modal.css +++ b/js/apps/system/aardvark/frontend/css/modal.css @@ -68,7 +68,7 @@ width: 150px; } -#figures table { +.collection-info-figures table { padding: 3px; text-align: left; min-width: 200px; @@ -82,16 +82,17 @@ */ } -#figures1, #figures2 { +.figures1, +.figures2 { margin-bottom: 20px; width: 255px; } -#figures2 { +.figures2 { margin-left: 20px !important; } -#figures3 { +.figures3 { width: 100%; margin-bottom: 0; } @@ -143,7 +144,7 @@ } #tab-content-collection-info #info, -#tab-content-collection-info #figures, +#tab-content-collection-info .collection-info-figures, #tab-content-collection-info #index { padding-top: 10px; border-top: 1px solid #888888 !important; @@ -239,7 +240,7 @@ width: 398px !important; } -#figures .icon_arangodb_info { +.collection-info-figures .icon_arangodb_info { position: relative !important; right: -4px !important; } diff --git a/js/apps/system/aardvark/frontend/js/templates/collectionInfoView.ejs b/js/apps/system/aardvark/frontend/js/templates/collectionInfoView.ejs index 6f4b2fcb09..fc6f67e215 100644 --- a/js/apps/system/aardvark/frontend/js/templates/collectionInfoView.ejs +++ b/js/apps/system/aardvark/frontend/js/templates/collectionInfoView.ejs @@ -84,8 +84,8 @@ -
- +
+
@@ -141,7 +141,7 @@
Type Count
- +
@@ -165,7 +165,7 @@
Type Count
- +
diff --git a/js/apps/system/aardvark/frontend/scss/_accordion.scss b/js/apps/system/aardvark/frontend/scss/_accordion.scss new file mode 100644 index 0000000000..7b05616f12 --- /dev/null +++ b/js/apps/system/aardvark/frontend/scss/_accordion.scss @@ -0,0 +1,14 @@ +.accordion-group { + border: 0; +} + +.accordion-inner { + border-top: 0; +} + +.accordion-heading a { + border: 1px solid $c-accordion-heading; + color: black; + font-weight: 400; + width: 397px !important; +} diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss index 3301fe5d4f..5d0c096927 100644 --- a/js/apps/system/aardvark/frontend/scss/_colors.scss +++ b/js/apps/system/aardvark/frontend/scss/_colors.scss @@ -86,3 +86,7 @@ $c-tab-inactive: #f1f0ee; $c-tab-active: #fff; $c-tab-bottom-border: #ddd; $c-tab-border: #888; + +$c-accordion-heading: #ccc; + +$c-icon-with-opacity: #333; \ No newline at end of file diff --git a/js/apps/system/aardvark/frontend/scss/_contentTables.scss b/js/apps/system/aardvark/frontend/scss/_contentTables.scss index 4508b24f32..39e4e525e7 100644 --- a/js/apps/system/aardvark/frontend/scss/_contentTables.scss +++ b/js/apps/system/aardvark/frontend/scss/_contentTables.scss @@ -1,4 +1,3 @@ -//.databaseButtons => .contentButtons .contentButtons { clear: both; margin-bottom: 10px; @@ -10,8 +9,6 @@ } } -// #databaseTable => .contentTables - .contentTables { margin-bottom: 10px; width: 100%; @@ -55,8 +52,6 @@ } } - //.databaseInactive => .contentRowInactive - &.contentRowInactive { a { @extend %clickable; diff --git a/js/apps/system/aardvark/frontend/scss/_icons.scss b/js/apps/system/aardvark/frontend/scss/_icons.scss index 708f3aea42..0324eb6151 100644 --- a/js/apps/system/aardvark/frontend/scss/_icons.scss +++ b/js/apps/system/aardvark/frontend/scss/_icons.scss @@ -16,3 +16,11 @@ font-size: 20px; } } + +.icon-info-sign { + @extend %clickable; +} + +.icon_arangodb_info { + color: $c-icon-with-opacity; +} \ No newline at end of file diff --git a/js/apps/system/aardvark/frontend/scss/_modals.scss b/js/apps/system/aardvark/frontend/scss/_modals.scss index 74d193618b..8de267a094 100644 --- a/js/apps/system/aardvark/frontend/scss/_modals.scss +++ b/js/apps/system/aardvark/frontend/scss/_modals.scss @@ -1,3 +1,13 @@ +.modal-body { + color: $c-btn-inverse; + font-size: 14px; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + opacity: .4; +} + .modalChartDetail { height: 70%; margin-left: 0; @@ -11,6 +21,10 @@ color: $c-white; } +.collectionTh { + font-size: 14px; +} + .waitModalBackdrop { opacity: .7 !important; } diff --git a/js/apps/system/aardvark/frontend/scss/_resizing.scss b/js/apps/system/aardvark/frontend/scss/_resizing.scss index cd7b57e8a0..b29fa54080 100644 --- a/js/apps/system/aardvark/frontend/scss/_resizing.scss +++ b/js/apps/system/aardvark/frontend/scss/_resizing.scss @@ -68,8 +68,6 @@ div.centralContent { width: 100%; } - -// #databaseDiv => .contentDiv .contentDiv { list-style: none; padding: 13px 0 0; diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css index ebec7a0a08..ae7b1fcb1d 100644 --- a/js/apps/system/aardvark/frontend/scss/generated.css +++ b/js/apps/system/aardvark/frontend/scss/generated.css @@ -50,7 +50,7 @@ div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonB height: 0; visibility: hidden; } -.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, div.tile a span.icon, div.bigtile a span.icon, div.tile a svg, div.bigtile a svg, div.tile div.iconSet span, div.bigtile div.iconSet span, div.bigtile, .contentDiv .icon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li { +.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, div.tile a span.icon, div.bigtile a span.icon, div.tile a svg, div.bigtile a svg, div.tile div.iconSet span, div.bigtile div.iconSet span, div.bigtile, .contentDiv .icon, .icon-info-sign, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li { cursor: pointer; } nav.navbar, footer.footer { @@ -850,6 +850,9 @@ div.centralContent { .waitModal.message { font-size: 20px; } +.icon_arangodb_info { + color: #333333; } + div.headerDropdown { background-color: white; display: none; @@ -1238,6 +1241,14 @@ div.breadcrumb a.disabledBread { height: 220px; width: 250px; } +.modal-body { + color: #736b68; + font-size: 14px; } + +.modal-backdrop, +.modal-backdrop.fade.in { + opacity: .4; } + .modalChartDetail { height: 70%; margin-left: 0; @@ -1251,6 +1262,9 @@ div.breadcrumb a.disabledBread { border: 0; color: white; } +.collectionTh { + font-size: 14px; } + .waitModalBackdrop { opacity: .7 !important; } @@ -1625,6 +1639,18 @@ div img.searchSubmitIcon { font-size: 14px; color: black; } +.accordion-group { + border: 0; } + +.accordion-inner { + border-top: 0; } + +.accordion-heading a { + border: 1px solid #cccccc; + color: black; + font-weight: 400; + width: 397px !important; } + table.dataTable thead th { font-weight: 400 !important; padding: 10px 14px; } diff --git a/js/apps/system/aardvark/frontend/scss/style.scss b/js/apps/system/aardvark/frontend/scss/style.scss index 93d53825bb..05e1f187f9 100644 --- a/js/apps/system/aardvark/frontend/scss/style.scss +++ b/js/apps/system/aardvark/frontend/scss/style.scss @@ -39,6 +39,8 @@ @import 'jsonEditor'; // Pagination @import 'pagination'; +// accordion +@import 'accordion'; // Data Tables, TODO: might all be superflous @import 'dataTables';
Type Count