Skip to content

Commit c4785bb

Browse files
osonerosoner
committed
[reports] Use common cly-drawer CSS
1 parent d4f5576 commit c4785bb

File tree

2 files changed

+3
-69
lines changed

2 files changed

+3
-69
lines changed

‎plugins/reports/frontend/public/stylesheets/main.css

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -13,56 +13,8 @@
1313

1414

1515

16-
.cly-reports-drawer { position:fixed; width:450px; height:100%; right:0; transform: translateX(100%); transition:transform 0.3s; top:0; background-color: #f9f9f9; border-left:1px solid #d0d0d0; z-index: 10001; }
17-
.cly-reports-drawer.open { transform: translateX(0); transition:transform 0.3s; }
18-
19-
.cly-reports-drawer .title { position: relative; padding:20px; font-size: 20px; color:#636363; background-color: #FFF; }
20-
.cly-reports-drawer .title .close { position: absolute; right:20px; top:9px; font-size: 42px; color:#9c9c9c; transition:color 1s; cursor: pointer; }
21-
.cly-reports-drawer .title .close:hover { color:#333; transition:color 1s; }
22-
.cly-reports-drawer .details { padding: 20px; top: 60px; bottom: 60px; height: -moz-calc(100% - 150px); height: -webkit-calc(100% - 150px); overflow: scroll;}
23-
.cly-reports-drawer .details .section { margin-bottom: 25px; }
24-
.cly-reports-drawer .details .section .label { font-size: 12px; margin-bottom: 8px; color:#636363; }
25-
.cly-reports-drawer .details .section > .description { font-size: 11px; margin-top: 4px; color: #9c9c9c; line-height: 17px; }
26-
.cly-reports-drawer .details .section .opts { overflow:auto; }
27-
.cly-reports-drawer .details .section .opts .opt { float:left; box-sizing: border-box; cursor:pointer; user-select: none; }
28-
.cly-reports-drawer .details .section .opts .opt.disabled { opacity: 0.5; cursor: default; }
29-
.cly-reports-drawer .details .section .opts .opt .inner { border-radius:2px; background-color: #ececec; border:1px solid #d6d6d6; margin-left: 8px; padding: 10px; text-align: center; color: #6f6f6f; font-size: 12px; }
30-
.cly-reports-drawer .details .section .opts .opt:first-child .inner { margin-left: 0; }
31-
.cly-reports-drawer .details .section .opts .opt.selected .inner { background-color: #FFF; border-color: #2eb52b; }
32-
.cly-reports-drawer .details .section .opts .opt .inner .icon { width: 35px; height: 35px; display: block; background-position: center; margin: 0 auto; margin-bottom: 5px; }
33-
.cly-reports-drawer .details .section .opts .opt .inner .icon.time-series { background-image: url("/dashboards/images/time-series.svg"); }
34-
.cly-reports-drawer .details .section .opts .opt .inner .icon.bar-chart { background-image: url("/dashboards/images/bar-chart.svg"); }
35-
.cly-reports-drawer .details .section .opts .opt .inner .icon.number { background-image: url("/dashboards/images/number.svg"); }
36-
.cly-reports-drawer .details .section .opts .opt .inner .icon.table { background-image: url("/dashboards/images/table.svg"); }
37-
.cly-reports-drawer .details .section .colors {}
38-
.cly-reports-drawer .details .section .colors .color { border-radius:2px; float:left; width:20px; height: 20px; position: relative; margin-right: 10px; cursor: pointer; }
39-
.cly-reports-drawer .details .section .colors .color.selected:after { font-family: 'Ionicons'; content: "\f3fd"; position: absolute; top: -2px; font-size: 23px; color: #fff; left: 5px; }
40-
.cly-reports-drawer .details .section .colors .color.alt1 { background-color: #6fa3ef; }
41-
.cly-reports-drawer .details .section .colors .color.alt2 { background-color: #55bdb9; }
42-
.cly-reports-drawer .details .section .colors .color.alt3 { background-color: #ef8800; }
43-
.cly-reports-drawer .details .section .colors .color.alt4 { background-color: #ae83d2; }
44-
.cly-reports-drawer .details .section .checks { border:1px solid #d0d0d0; border-radius: 2px; }
45-
.cly-reports-drawer .details .section .checks .check:first-child { border:none; }
46-
.cly-reports-drawer .details .section .checks .check { border-top:1px solid #d0d0d0; background-color: #ececec; overflow: auto; padding:8px; cursor: pointer; }
47-
.cly-reports-drawer .details .section .checks .check.selected { background-color: #FFF; }
48-
.cly-reports-drawer .details .section .checks .check .box { border:1px solid #CCC; border-radius:15px; float:left; width:12px; height: 12px; margin-top:1px; position: relative; margin-right: 8px; cursor: pointer; }
49-
.cly-reports-drawer .details .section .checks .check.selected .box { box-shadow: inset 0 0 0 2px #FFF; background-color:#2eb52b; }
50-
.cly-reports-drawer .details .section .checks .check .text { float:left; font-size: 12px; margin-top: 1px; color: #6f6f6f; cursor: pointer; }
51-
.cly-reports-drawer .details .section .checks .check .description { float:left; font-size: 10px; margin-top: 3px; margin-left: 20px; color: #9c9c9c; }
52-
.cly-reports-drawer .details .section input[type=text].input { width: 100%; box-sizing: border-box; border-radius: 2px; border: 1px solid #d6d6d6; outline: none; padding: 7px; font-size: 12px; }
53-
.cly-reports-drawer #widget-name { width: 100%; border: none; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; padding: 10px 20px; margin: 0 0 5px 0; font-size: 13px; outline: none; }
54-
.cly-reports-drawer .details .section .themes {}
55-
.cly-reports-drawer .details .section .themes .theme { border-radius:2px; float:left; width:33px; height: 33px; position: relative; margin-right: 10px; cursor: pointer; }
56-
.cly-reports-drawer .details .section .themes .theme.selected:after { font-family: 'Ionicons'; content: "\f3fd"; position: absolute; top: 1px; font-size: 29px; color: #fff; left: 11px; }
57-
.cly-reports-drawer .details .section .themes .theme.alt1 { background-color: #414B68; }
58-
.cly-reports-drawer .details .section .themes .theme.alt2 { background-color: #44285F; }
59-
.cly-reports-drawer .details .section .themes .theme.alt3 { background-color: #2F5355; }
60-
.cly-reports-drawer .details .section .themes .theme.alt4 { background-color: #424242; }
61-
.cly-reports-drawer .details .section .themes .theme.alt5 { background-color: #f0f3f7; box-shadow: inset 0 0 0 1px #d0d0d0; }
62-
.cly-reports-drawer .details .section .themes .theme.alt6 { background-color: #540B05; }
63-
.cly-reports-drawer .details .section .themes .theme.selected.alt5:after { color:#797979; }
64-
65-
16+
#reports-widget-drawer { width:450px; transform: translateX(450px); }
17+
#reports-widget-drawer.open { transform: translateX(0); }
6618

6719
#reports-widget-drawer #reports-widget-drawer-edit-title { display: none; }
6820
#reports-widget-drawer #save-widget { display: none; }
@@ -74,24 +26,6 @@
7426
#reports-widget-drawer.editing #create-widget { display: none; }
7527
#reports-widget-drawer.editing #save-widget { display: block; }
7628

77-
78-
79-
.cly-reports-drawer .buttons {
80-
81-
position: fixed;
82-
background-color: #fff;
83-
border-top: 1px solid #ECECED;
84-
width: 100%;
85-
padding: 20px 10px;
86-
margin: 0px;
87-
left: 0px;
88-
right: 0px;
89-
box-sizing: border-box;
90-
bottom: 0;
91-
}
92-
.cly-reports-drawer .buttons .icon-button { float:none; font-size: 15px; text-align: center; padding: 12px; }
93-
94-
9529
#reports-table th:nth-child(1) {
9630
width:15%;
9731
}

‎plugins/reports/frontend/public/templates/drawer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div id="reports-widget-drawer" class="cly-reports-drawer">
1+
<div id="reports-widget-drawer" class="cly-drawer">
22
<div class="title">
33
<span id="reports-widget-drawer-create-title" data-localize='reports.create_new_report_title'></span>
44
<span id="reports-widget-drawer-edit-title" data-localize='reports.edit_report_title'></span>

0 commit comments

Comments
 (0)