##// END OF EJS Templates
Correct the padding of the new button group on the files page
Jonathan Frederic -
Show More
@@ -1,222 +1,226 b''
1
1
2 /**
2 /**
3 * Primary styles
3 * Primary styles
4 *
4 *
5 * Author: IPython Development Team
5 * Author: IPython Development Team
6 */
6 */
7
7
8 @dashboard_tb_pad: 4px;
8 @dashboard_tb_pad: 4px;
9 @dashboard_lr_pad: 7px;
9 @dashboard_lr_pad: 7px;
10 // These are the total heights of the Bootstrap small and mini buttons. These values
10 // These are the total heights of the Bootstrap small and mini buttons. These values
11 // are not less variables so we have to track them statically.
11 // are not less variables so we have to track them statically.
12 @btn_small_height: 24px;
12 @btn_small_height: 24px;
13 @btn_mini_height: 22px;
13 @btn_mini_height: 22px;
14 @dark_dashboard_color: @breadcrumb-color;
14 @dark_dashboard_color: @breadcrumb-color;
15
15
16 ul#tabs {
16 ul#tabs {
17 margin-bottom: @dashboard_tb_pad;
17 margin-bottom: @dashboard_tb_pad;
18 }
18 }
19
19
20 ul#tabs a {
20 ul#tabs a {
21 padding-top: @dashboard_tb_pad + 2px;
21 padding-top: @dashboard_tb_pad + 2px;
22 padding-bottom: @dashboard_tb_pad;
22 padding-bottom: @dashboard_tb_pad;
23 }
23 }
24
24
25 ul.breadcrumb {
25 ul.breadcrumb {
26 a:focus, a:hover {
26 a:focus, a:hover {
27 text-decoration: none;
27 text-decoration: none;
28 }
28 }
29 i.icon-home {
29 i.icon-home {
30 font-size: 16px;
30 font-size: 16px;
31 margin-right: 4px;
31 margin-right: 4px;
32 }
32 }
33
33
34 span {
34 span {
35 color: @dark_dashboard_color;
35 color: @dark_dashboard_color;
36 }
36 }
37 }
37 }
38
38
39 .list_toolbar {
39 .list_toolbar {
40 padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
40 padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
41 vertical-align: middle;
41 vertical-align: middle;
42
42
43 .tree-buttons {
43 .tree-buttons {
44 padding-top: 2px;
44 padding-top: 2px;
45 }
45 }
46 }
46 }
47
47
48 .list_toolbar [class*="span"] {
48 .list_toolbar [class*="span"] {
49 min-height: @btn_small_height;
49 min-height: @btn_small_height;
50 }
50 }
51
51
52 .list_header {
52 .list_header {
53 font-weight: bold;
53 font-weight: bold;
54 }
54 }
55
55
56 .list_container {
56 .list_container {
57 margin-top: @dashboard_tb_pad;
57 margin-top: @dashboard_tb_pad;
58 margin-bottom: 5*@dashboard_tb_pad;
58 margin-bottom: 5*@dashboard_tb_pad;
59 border: 1px solid @table-border-color;
59 border: 1px solid @table-border-color;
60 border-radius: @border-radius-base;
60 border-radius: @border-radius-base;
61 }
61 }
62
62
63 .list_container > div {
63 .list_container > div {
64 border-bottom: 1px solid @table-border-color;
64 border-bottom: 1px solid @table-border-color;
65 &:hover .list-item{
65 &:hover .list-item{
66 background-color: red;
66 background-color: red;
67 };
67 };
68 }
68 }
69
69
70 .list_container > div:last-child {
70 .list_container > div:last-child {
71 border: none;
71 border: none;
72 }
72 }
73
73
74 .list_item {
74 .list_item {
75 &:hover .list_item {
75 &:hover .list_item {
76 background-color: @table-border-color;
76 background-color: @table-border-color;
77 };
77 };
78 a {text-decoration: none;}
78 a {text-decoration: none;}
79 }
79 }
80
80
81 .action_col {
81 .action_col {
82 text-align: right;
82 text-align: right;
83 }
83 }
84
84
85 .list_header>div, .list_item>div {
85 .list_header>div, .list_item>div {
86 padding-top: @dashboard_tb_pad;
86 padding-top: @dashboard_tb_pad;
87 padding-bottom: @dashboard_tb_pad;
87 padding-bottom: @dashboard_tb_pad;
88 padding-left: @dashboard_lr_pad;
88 padding-left: @dashboard_lr_pad;
89 padding-right: @dashboard_lr_pad;
89 padding-right: @dashboard_lr_pad;
90 line-height: @btn_mini_height;
90 line-height: @btn_mini_height;
91 }
91 }
92
92
93 .item_name {
93 .item_name {
94 line-height: @btn_mini_height;
94 line-height: @btn_mini_height;
95 height: @btn_small_height;
95 height: @btn_small_height;
96 }
96 }
97
97
98 .item_icon {
98 .item_icon {
99 font-size: 14px;
99 font-size: 14px;
100 color: @dark_dashboard_color;
100 color: @dark_dashboard_color;
101 margin-right: @dashboard_lr_pad;
101 margin-right: @dashboard_lr_pad;
102 }
102 }
103
103
104 .item_buttons {
104 .item_buttons {
105 line-height: 1em;
105 line-height: 1em;
106 .btn {
106 .btn {
107 min-width: 13ex;
107 min-width: 13ex;
108 }
108 }
109 .btn-toolbar();
109 .btn-toolbar();
110 }
110 }
111
111
112 .toolbar_info {
112 .toolbar_info {
113 height: @btn_small_height;
113 height: @btn_small_height;
114 line-height: @btn_small_height;
114 line-height: @btn_small_height;
115 }
115 }
116
116
117 input.nbname_input, input.engine_num_input {
117 input.nbname_input, input.engine_num_input {
118 // These settings give these inputs a height that matches @btn_mini_height = 22
118 // These settings give these inputs a height that matches @btn_mini_height = 22
119 padding-top: 3px;
119 padding-top: 3px;
120 padding-bottom: 3px;
120 padding-bottom: 3px;
121 height: @btn_mini_height;
121 height: @btn_mini_height;
122 line-height: 14px;
122 line-height: 14px;
123 margin: 0px;
123 margin: 0px;
124 }
124 }
125
125
126 input.engine_num_input {
126 input.engine_num_input {
127 width: 60px;
127 width: 60px;
128 }
128 }
129
129
130 .highlight_text {
130 .highlight_text {
131 color: blue;
131 color: blue;
132 }
132 }
133
133
134 #project_name > .breadcrumb {
134 #project_name > .breadcrumb {
135 padding: 0px;
135 padding: 0px;
136 margin-bottom: 0px;
136 margin-bottom: 0px;
137 background-color: transparent;
137 background-color: transparent;
138 font-weight: bold;
138 font-weight: bold;
139
139
140 }
140 }
141
141
142 .tab-content .row {
142 .tab-content .row {
143 margin-left: 0px;
143 margin-left: 0px;
144 margin-right: 0px;
144 margin-right: 0px;
145 }
145 }
146
146
147 .folder_icon:before {
147 .folder_icon:before {
148 .icon(@fa-var-folder-o)
148 .icon(@fa-var-folder-o)
149 }
149 }
150
150
151 .notebook_icon:before {
151 .notebook_icon:before {
152 .icon(@fa-var-book)
152 .icon(@fa-var-book)
153 }
153 }
154
154
155 .file_icon:before {
155 .file_icon:before {
156 .icon(@fa-var-file-o)
156 .icon(@fa-var-file-o)
157 }
157 }
158
158
159 #new-buttons {
160 padding-top: 2px;
161 }
162
159 ul#new-menu {
163 ul#new-menu {
160 // align right instead of left
164 // align right instead of left
161 left: auto;
165 left: auto;
162 right: 0;
166 right: 0;
163 }
167 }
164
168
165 .kernel-menu-icon {
169 .kernel-menu-icon {
166 padding-right: 12px;
170 padding-right: 12px;
167 width: 24px;
171 width: 24px;
168 content: @fa-var-square-o;
172 content: @fa-var-square-o;
169 }
173 }
170
174
171 .kernel-menu-icon:before {
175 .kernel-menu-icon:before {
172 content: @fa-var-square-o;
176 content: @fa-var-square-o;
173 }
177 }
174
178
175 .kernel-menu-icon-current:before {
179 .kernel-menu-icon-current:before {
176 content: @fa-var-check;
180 content: @fa-var-check;
177 }
181 }
178
182
179 #tab_content {
183 #tab_content {
180 padding-top: @page-header-padding;
184 padding-top: @page-header-padding;
181 }
185 }
182
186
183 #running {
187 #running {
184 .panel-group{
188 .panel-group{
185 .panel {
189 .panel {
186 margin-top: 3px;
190 margin-top: 3px;
187 margin-bottom: 1em;
191 margin-bottom: 1em;
188
192
189 .panel-heading {
193 .panel-heading {
190 background-color: @page-backdrop-color;
194 background-color: @page-backdrop-color;
191 padding-top: @dashboard_tb_pad;
195 padding-top: @dashboard_tb_pad;
192 padding-bottom: @dashboard_tb_pad;
196 padding-bottom: @dashboard_tb_pad;
193 padding-left: @dashboard_lr_pad;
197 padding-left: @dashboard_lr_pad;
194 padding-right: @dashboard_lr_pad;
198 padding-right: @dashboard_lr_pad;
195 line-height: @btn_mini_height;
199 line-height: @btn_mini_height;
196
200
197 a:focus, a:hover {
201 a:focus, a:hover {
198 text-decoration: none;
202 text-decoration: none;
199 }
203 }
200 }
204 }
201
205
202 .panel-body {
206 .panel-body {
203 padding: 0px;
207 padding: 0px;
204
208
205 .list_container {
209 .list_container {
206 margin-top: 0px;
210 margin-top: 0px;
207 margin-bottom: 0px;
211 margin-bottom: 0px;
208 border: 0px;
212 border: 0px;
209 border-radius: 0px;
213 border-radius: 0px;
210
214
211 .list_item {
215 .list_item {
212 border-bottom: 1px solid @table-border-color;
216 border-bottom: 1px solid @table-border-color;
213
217
214 &:last-child {
218 &:last-child {
215 border-bottom: 0px;
219 border-bottom: 0px;
216 }
220 }
217 }
221 }
218 }
222 }
219 }
223 }
220 }
224 }
221 }
225 }
222 }
226 }
General Comments 0
You need to be logged in to leave comments. Login now