##// END OF EJS Templates
notifications: use rhodecode-toast for notifications instead of toastr jquery plugin
ergo -
r699:49c50282 default
parent child
Show More
@@ -0,0 +1,33
1 //Primary CSS
2 //--- IMPORTS ------------------//
3 @import 'helpers';
4 @import 'mixins';
5 @import 'rcicons';
6 @import 'fonts';
7 @import 'variables';
8 @import 'legacy_code_styles';
9 @import 'type';
10 @import 'alerts';
11 @import 'buttons';
12 @import 'tags';
13 @import 'examples';
14 @import 'login';
15 @import 'comments';
16
17
18 .toast-level {
19 display: inline-block;
20 min-width: 100px;
21 font-weight: bold;
22 text-transform: uppercase;
23 &.info, &.success {
24 color: #0ac878;
25 }
26 &.error, &.danger {
27 color: #e85e4d;
28 }
29 &.warning {
30 color: #ffc854;
31 }
32 }
33
@@ -0,0 +1,79
1 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
2 <link rel="import" href="rhodecode-unsafe-html.html">
3 <dom-module id="rhodecode-toast">
4 <template>
5 <style include="shared-styles"></style>
6
7 <style>
8 paper-toast{
9 width: 100%;
10 min-width: 400px;
11 --paper-toast-background-color: #ffffff;
12 --paper-toast-color: #000000;
13 }
14 paper-toast a{
15 font-weight: bold
16 }
17
18 .toast-message-holder {
19 width: calc(100% - 150px);
20 display: inline-block;
21 }
22 .toast-close {
23 display: inline-block;
24 width: 145px;
25 text-align: right;
26 float: right;
27 }
28 .toast-notification {
29 padding: 10px 0 10px 0;
30 }
31
32 </style>
33 <paper-toast id="p-toast" duration="0" horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
34 <div class="toast-message-holder">
35 <template is="dom-repeat" items="{{toasts}}">
36 <div class="toast-notification">
37 <span class$="toast-level {{item.level}}">{{item.level}}</span>
38 <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
39 </div>
40 </template>
41 </div>
42 <div class="toast-close">
43 <paper-button on-tap="dismissNotifications" class="btn btn-info">{{_gettext('Close now')}}</paper-button>
44 </div>
45 </paper-toast>
46 </template>
47
48 <script>
49 Polymer({
50 is: 'rhodecode-toast',
51 properties: {
52 toasts: {
53 type: Array,
54 value: function(){
55 return []
56 }
57 }
58 },
59 observers: [
60 '_changedToasts(toasts.splices)'
61 ],
62 ready: function(){
63
64 },
65
66 _changedToasts: function(newValue, oldValue){
67 this.$['p-toast'].notifyResize();
68 },
69 dismissNotifications: function(){
70 this.$['p-toast'].close();
71 this.splice('toasts', 0);
72 },
73 open: function(){
74 this.$['p-toast'].open();
75 },
76 _gettext: _gettext
77 });
78 </script>
79 </dom-module>
@@ -0,0 +1,22
1 <link rel="import" href="../../../../../bower_components/polymer/polymer.html">
2
3 <dom-module id="rhodecode-unsafe-html">
4 <template>
5 <style include="shared-styles"></style>
6 <content></content>
7 </template>
8 <script>
9 Polymer({
10 is: 'rhodecode-unsafe-html',
11 properties: {
12 text: {
13 type: String,
14 observer: '_handleText'
15 }
16 },
17 _handleText: function(newVal, oldVal){
18 this.innerHTML = this.text;
19 }
20 })
21 </script>
22 </dom-module>
@@ -0,0 +1,3
1 <dom-module id="shared-styles">
2 <template>
3 <style>
@@ -0,0 +1,3
1 </style>
2 </template>
3 </dom-module>
@@ -1,60 +1,63
1 syntax: glob
1 syntax: glob
2 *.egg
2 *.egg
3 *.egg-info
3 *.egg-info
4 *.idea
4 *.idea
5 *.orig
5 *.orig
6 *.pyc
6 *.pyc
7 *.sqlite-journal
7 *.sqlite-journal
8 *.swp
8 *.swp
9 *.tox
9 *.tox
10 *.DS_Store*
10 *.DS_Store*
11
11
12 syntax: regexp
12 syntax: regexp
13
13
14 #.filename
14 #.filename
15 ^\.settings$
15 ^\.settings$
16 ^\.project$
16 ^\.project$
17 ^\.pydevproject$
17 ^\.pydevproject$
18 ^\.coverage$
18 ^\.coverage$
19 ^\.cache.*$
19 ^\.cache.*$
20 ^\.rhodecode$
20 ^\.rhodecode$
21
21
22 ^rcextensions
22 ^rcextensions
23 ^_dev
23 ^_dev
24 ^._dev
24 ^._dev
25 ^build/
25 ^build/
26 ^bower_components/
26 ^bower_components/
27 ^coverage\.xml$
27 ^coverage\.xml$
28 ^data$
28 ^data$
29 ^\.eggs/
29 ^\.eggs/
30 ^configs/data$
30 ^configs/data$
31 ^dev.ini$
31 ^dev.ini$
32 ^acceptance_tests/dev.*\.ini$
32 ^acceptance_tests/dev.*\.ini$
33 ^dist/
33 ^dist/
34 ^fabfile.py
34 ^fabfile.py
35 ^htmlcov
35 ^htmlcov
36 ^junit\.xml$
36 ^junit\.xml$
37 ^node_modules/
37 ^node_modules/
38 ^pylint.log$
38 ^pylint.log$
39 ^rcextensions/
39 ^rcextensions/
40 ^result$
40 ^result$
41 ^rhodecode/public/css/style.css$
41 ^rhodecode/public/css/style.css$
42 ^rhodecode/public/css/style-polymer.css$
42 ^rhodecode/public/js/scripts.js$
43 ^rhodecode/public/js/scripts.js$
44 ^rhodecode/public/js/rhodecode-components.html$
45 ^rhodecode/public/js/src/components/shared-styles.html$
43 ^rhodecode\.db$
46 ^rhodecode\.db$
44 ^rhodecode\.log$
47 ^rhodecode\.log$
45 ^rhodecode_dev\.log$
48 ^rhodecode_dev\.log$
46 ^test\.db$
49 ^test\.db$
47
50
48 # ac-tests
51 # ac-tests
49 ^acceptance_tests/\.cache.*$
52 ^acceptance_tests/\.cache.*$
50 ^acceptance_tests/externals
53 ^acceptance_tests/externals
51 ^acceptance_tests/ghostdriver.log$
54 ^acceptance_tests/ghostdriver.log$
52 ^acceptance_tests/local(_.+)?\.ini$
55 ^acceptance_tests/local(_.+)?\.ini$
53
56
54 # docs
57 # docs
55 ^docs/_build$
58 ^docs/_build$
56 ^docs/result$
59 ^docs/result$
57 ^docs-internal/_build$
60 ^docs-internal/_build$
58
61
59 # Cythonized things
62 # Cythonized things
60 ^rhodecode/.*\.(c|so)$
63 ^rhodecode/.*\.(c|so)$
@@ -1,167 +1,178
1 module.exports = function(grunt) {
1 module.exports = function(grunt) {
2 grunt.initConfig({
2 grunt.initConfig({
3
3
4 dirs: {
4 dirs: {
5 css: "rhodecode/public/css",
5 css: "rhodecode/public/css",
6 js: {
6 js: {
7 "src": "rhodecode/public/js/src",
7 "src": "rhodecode/public/js/src",
8 "dest": "rhodecode/public/js"
8 "dest": "rhodecode/public/js"
9 }
9 }
10 },
10 },
11 copy: {
11 copy: {
12 main: {
12 main: {
13 expand: true,
13 expand: true,
14 cwd: 'bower_components',
14 cwd: 'bower_components',
15 src: 'webcomponentsjs/**',
15 src: 'webcomponentsjs/**',
16 dest: '<%= dirs.js.dest %>/vendors',
16 dest: '<%= dirs.js.dest %>/vendors',
17 },
17 },
18 },
18 },
19 concat: {
19 concat: {
20 polymercss:{
21 src: [
22 // Base libraries
23 '<%= dirs.js.src %>/components/shared-styles-prefix.html',
24 '<%= dirs.css %>/style-polymer.css',
25 '<%= dirs.js.src %>/components/shared-styles-suffix.html'
26 ],
27 dest: '<%= dirs.js.dest %>/src/components/shared-styles.html',
28 nonull: true
29 },
20 dist: {
30 dist: {
21 src: [
31 src: [
22 // Base libraries
32 // Base libraries
23 '<%= dirs.js.src %>/jquery-1.11.1.min.js',
33 '<%= dirs.js.src %>/jquery-1.11.1.min.js',
24 '<%= dirs.js.src %>/logging.js',
34 '<%= dirs.js.src %>/logging.js',
25 '<%= dirs.js.src %>/bootstrap.js',
35 '<%= dirs.js.src %>/bootstrap.js',
26 '<%= dirs.js.src %>/mousetrap.js',
36 '<%= dirs.js.src %>/mousetrap.js',
27 '<%= dirs.js.src %>/moment.js',
37 '<%= dirs.js.src %>/moment.js',
28 '<%= dirs.js.src %>/appenlight-client-0.4.1.min.js',
38 '<%= dirs.js.src %>/appenlight-client-0.4.1.min.js',
29 '<%= dirs.js.src %>/i18n_utils.js',
39 '<%= dirs.js.src %>/i18n_utils.js',
30 '<%= dirs.js.src %>/deform.js',
40 '<%= dirs.js.src %>/deform.js',
31
41
32 // Plugins
42 // Plugins
33 '<%= dirs.js.src %>/plugins/jquery.pjax.js',
43 '<%= dirs.js.src %>/plugins/jquery.pjax.js',
34 '<%= dirs.js.src %>/plugins/jquery.dataTables.js',
44 '<%= dirs.js.src %>/plugins/jquery.dataTables.js',
35 '<%= dirs.js.src %>/plugins/flavoured_checkbox.js',
45 '<%= dirs.js.src %>/plugins/flavoured_checkbox.js',
36 '<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js',
46 '<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js',
37 '<%= dirs.js.src %>/plugins/jquery.autocomplete.js',
47 '<%= dirs.js.src %>/plugins/jquery.autocomplete.js',
38 '<%= dirs.js.src %>/plugins/jquery.debounce.js',
48 '<%= dirs.js.src %>/plugins/jquery.debounce.js',
39 '<%= dirs.js.src %>/plugins/jquery.mark.js',
49 '<%= dirs.js.src %>/plugins/jquery.mark.js',
40 '<%= dirs.js.src %>/plugins/jquery.timeago.js',
50 '<%= dirs.js.src %>/plugins/jquery.timeago.js',
41 '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
51 '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
42 '<%= dirs.js.src %>/plugins/toastr.js',
43
52
44 // Select2
53 // Select2
45 '<%= dirs.js.src %>/select2/select2.js',
54 '<%= dirs.js.src %>/select2/select2.js',
46
55
47 // Code-mirror
56 // Code-mirror
48 '<%= dirs.js.src %>/codemirror/codemirror.js',
57 '<%= dirs.js.src %>/codemirror/codemirror.js',
49 '<%= dirs.js.src %>/codemirror/codemirror_loadmode.js',
58 '<%= dirs.js.src %>/codemirror/codemirror_loadmode.js',
50 '<%= dirs.js.src %>/codemirror/codemirror_hint.js',
59 '<%= dirs.js.src %>/codemirror/codemirror_hint.js',
51 '<%= dirs.js.src %>/codemirror/codemirror_overlay.js',
60 '<%= dirs.js.src %>/codemirror/codemirror_overlay.js',
52 '<%= dirs.js.src %>/codemirror/codemirror_placeholder.js',
61 '<%= dirs.js.src %>/codemirror/codemirror_placeholder.js',
53 // TODO: mikhail: this is an exception. Since the code mirror modes
62 // TODO: mikhail: this is an exception. Since the code mirror modes
54 // are loaded "on the fly", we need to keep them in a public folder
63 // are loaded "on the fly", we need to keep them in a public folder
55 '<%= dirs.js.dest %>/mode/meta.js',
64 '<%= dirs.js.dest %>/mode/meta.js',
56 '<%= dirs.js.dest %>/mode/meta_ext.js',
65 '<%= dirs.js.dest %>/mode/meta_ext.js',
57 '<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js',
66 '<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js',
58
67
59 // Rhodecode utilities
68 // Rhodecode utilities
60 '<%= dirs.js.src %>/rhodecode/utils/array.js',
69 '<%= dirs.js.src %>/rhodecode/utils/array.js',
61 '<%= dirs.js.src %>/rhodecode/utils/string.js',
70 '<%= dirs.js.src %>/rhodecode/utils/string.js',
62 '<%= dirs.js.src %>/rhodecode/utils/pyroutes.js',
71 '<%= dirs.js.src %>/rhodecode/utils/pyroutes.js',
63 '<%= dirs.js.src %>/rhodecode/utils/ajax.js',
72 '<%= dirs.js.src %>/rhodecode/utils/ajax.js',
64 '<%= dirs.js.src %>/rhodecode/utils/autocomplete.js',
73 '<%= dirs.js.src %>/rhodecode/utils/autocomplete.js',
65 '<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js',
74 '<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js',
66 '<%= dirs.js.src %>/rhodecode/utils/ie.js',
75 '<%= dirs.js.src %>/rhodecode/utils/ie.js',
67 '<%= dirs.js.src %>/rhodecode/utils/os.js',
76 '<%= dirs.js.src %>/rhodecode/utils/os.js',
68 '<%= dirs.js.src %>/rhodecode/utils/topics.js',
77 '<%= dirs.js.src %>/rhodecode/utils/topics.js',
69
78
70 // Rhodecode widgets
79 // Rhodecode widgets
71 '<%= dirs.js.src %>/rhodecode/widgets/multiselect.js',
80 '<%= dirs.js.src %>/rhodecode/widgets/multiselect.js',
72
81
73 // Rhodecode components
82 // Rhodecode components
74 '<%= dirs.js.src %>/rhodecode/init.js',
83 '<%= dirs.js.src %>/rhodecode/init.js',
75 '<%= dirs.js.src %>/rhodecode/connection_controller.js',
84 '<%= dirs.js.src %>/rhodecode/connection_controller.js',
76 '<%= dirs.js.src %>/rhodecode/codemirror.js',
85 '<%= dirs.js.src %>/rhodecode/codemirror.js',
77 '<%= dirs.js.src %>/rhodecode/comments.js',
86 '<%= dirs.js.src %>/rhodecode/comments.js',
78 '<%= dirs.js.src %>/rhodecode/constants.js',
87 '<%= dirs.js.src %>/rhodecode/constants.js',
79 '<%= dirs.js.src %>/rhodecode/files.js',
88 '<%= dirs.js.src %>/rhodecode/files.js',
80 '<%= dirs.js.src %>/rhodecode/followers.js',
89 '<%= dirs.js.src %>/rhodecode/followers.js',
81 '<%= dirs.js.src %>/rhodecode/menus.js',
90 '<%= dirs.js.src %>/rhodecode/menus.js',
82 '<%= dirs.js.src %>/rhodecode/notifications.js',
91 '<%= dirs.js.src %>/rhodecode/notifications.js',
83 '<%= dirs.js.src %>/rhodecode/permissions.js',
92 '<%= dirs.js.src %>/rhodecode/permissions.js',
84 '<%= dirs.js.src %>/rhodecode/pjax.js',
93 '<%= dirs.js.src %>/rhodecode/pjax.js',
85 '<%= dirs.js.src %>/rhodecode/pullrequests.js',
94 '<%= dirs.js.src %>/rhodecode/pullrequests.js',
86 '<%= dirs.js.src %>/rhodecode/settings.js',
95 '<%= dirs.js.src %>/rhodecode/settings.js',
87 '<%= dirs.js.src %>/rhodecode/select2_widgets.js',
96 '<%= dirs.js.src %>/rhodecode/select2_widgets.js',
88 '<%= dirs.js.src %>/rhodecode/tooltips.js',
97 '<%= dirs.js.src %>/rhodecode/tooltips.js',
89 '<%= dirs.js.src %>/rhodecode/users.js',
98 '<%= dirs.js.src %>/rhodecode/users.js',
90 '<%= dirs.js.src %>/rhodecode/utils/notifications.js',
99 '<%= dirs.js.src %>/rhodecode/utils/notifications.js',
91 '<%= dirs.js.src %>/rhodecode/appenlight.js',
100 '<%= dirs.js.src %>/rhodecode/appenlight.js',
92
101
93 // Rhodecode main module
102 // Rhodecode main module
94 '<%= dirs.js.src %>/rhodecode.js'
103 '<%= dirs.js.src %>/rhodecode.js'
95 ],
104 ],
96 dest: '<%= dirs.js.dest %>/scripts.js',
105 dest: '<%= dirs.js.dest %>/scripts.js',
97 nonull: true
106 nonull: true
98 }
107 }
99 },
108 },
100
109
101 less: {
110 less: {
102 development: {
111 development: {
103 options: {
112 options: {
104 compress: false,
113 compress: false,
105 yuicompress: false,
114 yuicompress: false,
106 optimization: 0
115 optimization: 0
107 },
116 },
108 files: {
117 files: {
109 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
118 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
119 "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
110 }
120 }
111 },
121 },
112 production: {
122 production: {
113 options: {
123 options: {
114 compress: true,
124 compress: true,
115 yuicompress: true,
125 yuicompress: true,
116 optimization: 2
126 optimization: 2
117 },
127 },
118 files: {
128 files: {
119 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
129 "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
130 "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
120 }
131 }
121 }
132 }
122 },
133 },
123
134
124 watch: {
135 watch: {
125 less: {
136 less: {
126 files: ["<%= dirs.css %>/*.less"],
137 files: ["<%= dirs.css %>/*.less"],
127 tasks: ["less:production"]
138 tasks: ["less:development", 'concat:polymercss', "vulcanize"]
128 },
139 },
129 js: {
140 js: {
130 files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
141 files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
131 tasks: ["concat:dist"]
142 tasks: ["vulcanize", "concat:dist"]
132 }
143 }
133 },
144 },
134
145
135 jshint: {
146 jshint: {
136 rhodecode: {
147 rhodecode: {
137 src: '<%= dirs.js.src %>/rhodecode/**/*.js',
148 src: '<%= dirs.js.src %>/rhodecode/**/*.js',
138 options: {
149 options: {
139 jshintrc: '.jshintrc'
150 jshintrc: '.jshintrc'
140 }
151 }
141 }
152 }
142 },
153 },
143 vulcanize: {
154 vulcanize: {
144 default: {
155 default: {
145 options: {
156 options: {
146 abspath: '',
157 abspath: '',
147 inlineScripts: true,
158 inlineScripts: true,
148 inlineCss: true,
159 inlineCss: true,
149 stripComments: true
160 stripComments: true
150 },
161 },
151 files: {
162 files: {
152 '<%= dirs.js.dest %>/rhodecode-components.html': '<%= dirs.js.src %>/components/shared-components.html'
163 '<%= dirs.js.dest %>/rhodecode-components.html': '<%= dirs.js.src %>/components/shared-components.html'
153 }
164 }
154 }
165 }
155 }
166 }
156 });
167 });
157
168
158 grunt.loadNpmTasks('grunt-contrib-less');
169 grunt.loadNpmTasks('grunt-contrib-less');
159 grunt.loadNpmTasks('grunt-contrib-concat');
170 grunt.loadNpmTasks('grunt-contrib-concat');
160 grunt.loadNpmTasks('grunt-contrib-watch');
171 grunt.loadNpmTasks('grunt-contrib-watch');
161 grunt.loadNpmTasks('grunt-contrib-jshint');
172 grunt.loadNpmTasks('grunt-contrib-jshint');
162 grunt.loadNpmTasks('grunt-vulcanize');
173 grunt.loadNpmTasks('grunt-vulcanize');
163 grunt.loadNpmTasks('grunt-crisper');
174 grunt.loadNpmTasks('grunt-crisper');
164 grunt.loadNpmTasks('grunt-contrib-copy');
175 grunt.loadNpmTasks('grunt-contrib-copy');
165
176
166 grunt.registerTask('default', ['copy','vulcanize', 'less:production', 'concat:dist']);
177 grunt.registerTask('default', ['less:production', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
167 };
178 };
@@ -1,2105 +1,2109
1 //Primary CSS
1 //Primary CSS
2
2
3 //--- IMPORTS ------------------//
3 //--- IMPORTS ------------------//
4
4
5 @import 'helpers';
5 @import 'helpers';
6 @import 'mixins';
6 @import 'mixins';
7 @import 'rcicons';
7 @import 'rcicons';
8 @import 'fonts';
8 @import 'fonts';
9 @import 'variables';
9 @import 'variables';
10 @import 'bootstrap-variables';
10 @import 'bootstrap-variables';
11 @import 'form-bootstrap';
11 @import 'form-bootstrap';
12 @import 'codemirror';
12 @import 'codemirror';
13 @import 'legacy_code_styles';
13 @import 'legacy_code_styles';
14 @import 'progress-bar';
14 @import 'progress-bar';
15
15
16 @import 'type';
16 @import 'type';
17 @import 'alerts';
17 @import 'alerts';
18 @import 'buttons';
18 @import 'buttons';
19 @import 'tags';
19 @import 'tags';
20 @import 'code-block';
20 @import 'code-block';
21 @import 'examples';
21 @import 'examples';
22 @import 'login';
22 @import 'login';
23 @import 'main-content';
23 @import 'main-content';
24 @import 'select2';
24 @import 'select2';
25 @import 'comments';
25 @import 'comments';
26 @import 'panels-bootstrap';
26 @import 'panels-bootstrap';
27 @import 'panels';
27 @import 'panels';
28 @import 'toastr';
29 @import 'deform';
28 @import 'deform';
30
29
31
30
32 //--- BASE ------------------//
31 //--- BASE ------------------//
33 .noscript-error {
32 .noscript-error {
34 top: 0;
33 top: 0;
35 left: 0;
34 left: 0;
36 width: 100%;
35 width: 100%;
37 z-index: 101;
36 z-index: 101;
38 text-align: center;
37 text-align: center;
39 font-family: @text-semibold;
38 font-family: @text-semibold;
40 font-size: 120%;
39 font-size: 120%;
41 color: white;
40 color: white;
42 background-color: @alert2;
41 background-color: @alert2;
43 padding: 5px 0 5px 0;
42 padding: 5px 0 5px 0;
44 }
43 }
45
44
46 html {
45 html {
47 display: table;
46 display: table;
48 height: 100%;
47 height: 100%;
49 width: 100%;
48 width: 100%;
50 }
49 }
51
50
52 body {
51 body {
53 display: table-cell;
52 display: table-cell;
54 width: 100%;
53 width: 100%;
55 }
54 }
56
55
57 //--- LAYOUT ------------------//
56 //--- LAYOUT ------------------//
58
57
59 .hidden{
58 .hidden{
60 display: none !important;
59 display: none !important;
61 }
60 }
62
61
63 .box{
62 .box{
64 float: left;
63 float: left;
65 width: 100%;
64 width: 100%;
66 }
65 }
67
66
68 .browser-header {
67 .browser-header {
69 clear: both;
68 clear: both;
70 }
69 }
71 .main {
70 .main {
72 clear: both;
71 clear: both;
73 padding:0 0 @pagepadding;
72 padding:0 0 @pagepadding;
74 height: auto;
73 height: auto;
75
74
76 &:after { //clearfix
75 &:after { //clearfix
77 content:"";
76 content:"";
78 clear:both;
77 clear:both;
79 width:100%;
78 width:100%;
80 display:block;
79 display:block;
81 }
80 }
82 }
81 }
83
82
84 .action-link{
83 .action-link{
85 margin-left: @padding;
84 margin-left: @padding;
86 padding-left: @padding;
85 padding-left: @padding;
87 border-left: @border-thickness solid @border-default-color;
86 border-left: @border-thickness solid @border-default-color;
88 }
87 }
89
88
90 input + .action-link, .action-link.first{
89 input + .action-link, .action-link.first{
91 border-left: none;
90 border-left: none;
92 }
91 }
93
92
94 .action-link.last{
93 .action-link.last{
95 margin-right: @padding;
94 margin-right: @padding;
96 padding-right: @padding;
95 padding-right: @padding;
97 }
96 }
98
97
99 .action-link.active,
98 .action-link.active,
100 .action-link.active a{
99 .action-link.active a{
101 color: @grey4;
100 color: @grey4;
102 }
101 }
103
102
104 ul.simple-list{
103 ul.simple-list{
105 list-style: none;
104 list-style: none;
106 margin: 0;
105 margin: 0;
107 padding: 0;
106 padding: 0;
108 }
107 }
109
108
110 .main-content {
109 .main-content {
111 padding-bottom: @pagepadding;
110 padding-bottom: @pagepadding;
112 }
111 }
113
112
114 .wrapper {
113 .wrapper {
115 position: relative;
114 position: relative;
116 max-width: @wrapper-maxwidth;
115 max-width: @wrapper-maxwidth;
117 margin: 0 auto;
116 margin: 0 auto;
118 }
117 }
119
118
120 #content {
119 #content {
121 clear: both;
120 clear: both;
122 padding: 0 @contentpadding;
121 padding: 0 @contentpadding;
123 }
122 }
124
123
125 .advanced-settings-fields{
124 .advanced-settings-fields{
126 input{
125 input{
127 margin-left: @textmargin;
126 margin-left: @textmargin;
128 margin-right: @padding/2;
127 margin-right: @padding/2;
129 }
128 }
130 }
129 }
131
130
132 .cs_files_title {
131 .cs_files_title {
133 margin: @pagepadding 0 0;
132 margin: @pagepadding 0 0;
134 }
133 }
135
134
136 input.inline[type="file"] {
135 input.inline[type="file"] {
137 display: inline;
136 display: inline;
138 }
137 }
139
138
140 .error_page {
139 .error_page {
141 margin: 10% auto;
140 margin: 10% auto;
142
141
143 h1 {
142 h1 {
144 color: @grey2;
143 color: @grey2;
145 }
144 }
146
145
147 .error-branding {
146 .error-branding {
148 font-family: @text-semibold;
147 font-family: @text-semibold;
149 color: @grey4;
148 color: @grey4;
150 }
149 }
151
150
152 .error_message {
151 .error_message {
153 font-family: @text-regular;
152 font-family: @text-regular;
154 }
153 }
155
154
156 .sidebar {
155 .sidebar {
157 min-height: 275px;
156 min-height: 275px;
158 margin: 0;
157 margin: 0;
159 padding: 0 0 @sidebarpadding @sidebarpadding;
158 padding: 0 0 @sidebarpadding @sidebarpadding;
160 border: none;
159 border: none;
161 }
160 }
162
161
163 .main-content {
162 .main-content {
164 position: relative;
163 position: relative;
165 margin: 0 @sidebarpadding @sidebarpadding;
164 margin: 0 @sidebarpadding @sidebarpadding;
166 padding: 0 0 0 @sidebarpadding;
165 padding: 0 0 0 @sidebarpadding;
167 border-left: @border-thickness solid @grey5;
166 border-left: @border-thickness solid @grey5;
168
167
169 @media (max-width:767px) {
168 @media (max-width:767px) {
170 clear: both;
169 clear: both;
171 width: 100%;
170 width: 100%;
172 margin: 0;
171 margin: 0;
173 border: none;
172 border: none;
174 }
173 }
175 }
174 }
176
175
177 .inner-column {
176 .inner-column {
178 float: left;
177 float: left;
179 width: 29.75%;
178 width: 29.75%;
180 min-height: 150px;
179 min-height: 150px;
181 margin: @sidebarpadding 2% 0 0;
180 margin: @sidebarpadding 2% 0 0;
182 padding: 0 2% 0 0;
181 padding: 0 2% 0 0;
183 border-right: @border-thickness solid @grey5;
182 border-right: @border-thickness solid @grey5;
184
183
185 @media (max-width:767px) {
184 @media (max-width:767px) {
186 clear: both;
185 clear: both;
187 width: 100%;
186 width: 100%;
188 border: none;
187 border: none;
189 }
188 }
190
189
191 ul {
190 ul {
192 padding-left: 1.25em;
191 padding-left: 1.25em;
193 }
192 }
194
193
195 &:last-child {
194 &:last-child {
196 margin: @sidebarpadding 0 0;
195 margin: @sidebarpadding 0 0;
197 border: none;
196 border: none;
198 }
197 }
199
198
200 h4 {
199 h4 {
201 margin: 0 0 @padding;
200 margin: 0 0 @padding;
202 font-family: @text-semibold;
201 font-family: @text-semibold;
203 }
202 }
204 }
203 }
205 }
204 }
206 .error-page-logo {
205 .error-page-logo {
207 width: 130px;
206 width: 130px;
208 height: 160px;
207 height: 160px;
209 }
208 }
210
209
211 // HEADER
210 // HEADER
212 .header {
211 .header {
213
212
214 // TODO: johbo: Fix login pages, so that they work without a min-height
213 // TODO: johbo: Fix login pages, so that they work without a min-height
215 // for the header and then remove the min-height. I chose a smaller value
214 // for the header and then remove the min-height. I chose a smaller value
216 // intentionally here to avoid rendering issues in the main navigation.
215 // intentionally here to avoid rendering issues in the main navigation.
217 min-height: 49px;
216 min-height: 49px;
218
217
219 position: relative;
218 position: relative;
220 vertical-align: bottom;
219 vertical-align: bottom;
221 padding: 0 @header-padding;
220 padding: 0 @header-padding;
222 background-color: @grey2;
221 background-color: @grey2;
223 color: @grey5;
222 color: @grey5;
224
223
225 .title {
224 .title {
226 overflow: visible;
225 overflow: visible;
227 }
226 }
228
227
229 &:before,
228 &:before,
230 &:after {
229 &:after {
231 content: "";
230 content: "";
232 clear: both;
231 clear: both;
233 width: 100%;
232 width: 100%;
234 }
233 }
235
234
236 // TODO: johbo: Avoids breaking "Repositories" chooser
235 // TODO: johbo: Avoids breaking "Repositories" chooser
237 .select2-container .select2-choice .select2-arrow {
236 .select2-container .select2-choice .select2-arrow {
238 display: none;
237 display: none;
239 }
238 }
240 }
239 }
241
240
242 #header-inner {
241 #header-inner {
243 &.title {
242 &.title {
244 margin: 0;
243 margin: 0;
245 }
244 }
246 &:before,
245 &:before,
247 &:after {
246 &:after {
248 content: "";
247 content: "";
249 clear: both;
248 clear: both;
250 }
249 }
251 }
250 }
252
251
253 // Gists
252 // Gists
254 #files_data {
253 #files_data {
255 clear: both; //for firefox
254 clear: both; //for firefox
256 }
255 }
257 #gistid {
256 #gistid {
258 margin-right: @padding;
257 margin-right: @padding;
259 }
258 }
260
259
261 // Global Settings Editor
260 // Global Settings Editor
262 .textarea.editor {
261 .textarea.editor {
263 float: left;
262 float: left;
264 position: relative;
263 position: relative;
265 max-width: @texteditor-width;
264 max-width: @texteditor-width;
266
265
267 select {
266 select {
268 position: absolute;
267 position: absolute;
269 top:10px;
268 top:10px;
270 right:0;
269 right:0;
271 }