Download as
Browse Code »

Commit 4345e9220ee2935610c97b0226d011a4736366f1

Authored by Dmitriy Zaporozhets
1 parent dc5bd10d
Exists in spb-stable and in 3 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb

Refactor UI boxes. Split issue box to different class 

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing 5 changed files with 220 additions and 186 deletions   Show diff stats
app/assets/stylesheets/gitlab_bootstrap.scss
  Diff comments   View file @4345e92
... ... @@ -61,6 +61,8 @@ $baseLineHeight: 18px !default;
61 61 @import "gitlab_bootstrap/typography.scss";
62 62 @import "gitlab_bootstrap/buttons.scss";
63 63 @import "gitlab_bootstrap/blocks.scss";
  64 +@import "gitlab_bootstrap/ui_box.scss";
  65 +@import "gitlab_bootstrap/issue_box.scss";
64 66 @import "gitlab_bootstrap/files.scss";
65 67 @import "gitlab_bootstrap/lists.scss";
66 68 @import "gitlab_bootstrap/forms.scss";
... ...
app/assets/stylesheets/gitlab_bootstrap/blocks.scss
  Diff comments   View file @4345e92
1   -/**
2   - * ===================================
3   - * Contain UI block elements:
4   - * .ui-box - for any block & widgets
5   - * ===================================
6   - */
7   -
8   -/**
9   - * UI Block
10   - *
11   - */
12   -.ui-box {
13   - background: #FFF;
14   - margin-bottom: 20px;
15   - border: 1px solid #DDD;
16   - word-wrap: break-word;
17   -
18   - &.small-box {
19   - margin-bottom: 10px;
20   -
21   - .title {
22   - font-size: 13px;
23   - line-height: 30px;
24   -
25   - a {
26   - color: #666;
27   - &:hover {
28   - text-decoration: underline;
29   - }
30   - }
31   - }
32   - }
33   -
34   - &.ui-box-show {
35   - color: #666;
36   - margin:20px 0;
37   - background: #FAFAFA;
38   -
39   - .control-group {
40   - margin-bottom: 0;
41   - }
42   - }
43   -
44   - &.ui-box-danger {
45   - background: #f7f7f7;
46   - border: none;
47   -
48   - .title {
49   - background: #D65;
50   - color: #fff;
51   - text-shadow: 0 1px 1px #900;
52   - }
53   - }
54   -
55   - img { max-width: 100%; }
56   -
57   - pre {
58   - code {
59   - background: none !important;
60   - }
61   - }
62   -
63   - .ui-box-head,
64   - .ui-box-body,
65   - .ui-box-bottom {
66   - padding: 15px;
67   -
68   - .clearfix {
69   - margin: 0;
70   - }
71   - }
72   -
73   - .ui-box-head {
74   - .box-title {
75   - font-size: 20px;
76   - font-weight: 500;
77   - line-height: 28px;
78   - margin: 0;
79   - color: #444;
80   - }
81   - h3 {
82   - margin: 0;
83   - }
84   - }
85   -
86   - .ui-box-body {
87   - border: none;
88   - background-color: #f5f5f5;
89   - border: none;
90   - border-top: 1px solid #eee;
91   - }
92   -
93   - .ui-box-bottom {
94   - border-top: 1px solid #eee;
95   - }
96   -
97   - ul {
98   - margin: 0;
99   - }
100   -
101   - .title {
102   - background-color: #EEE;
103   - border-bottom: 1px solid #DDD;
104   - color: #666;
105   - font-size: 16px;
106   - text-shadow: 0 1px 1px #fff;
107   - padding: 0 10px;
108   - font-size: 14px;
109   - line-height: 40px;
110   - font-weight: normal;
111   - margin: 0;
112   -
113   - > a {
114   - text-shadow: 0 1px 1px #fff;
115   - }
116   -
117   - form {
118   - margin-bottom: 0;
119   - margin-top: 0;
120   - }
121   -
122   - .btn {
123   - vertical-align: middle;
124   - padding: 4px 12px;
125   - @include box-shadow(0 0px 1px 1px #f2f2f2);
126   - }
127   -
128   - .nav-pills {
129   - > li {
130   - > a {
131   - padding: 13px;
132   - margin: 0;
133   - font-size: 13px;
134   - }
135   - &.active {
136   - > a {
137   - background: #D5D5D5;
138   - color: $style_color;
139   - @include border-radius(0);
140   - border-radius: 0;
141   - border-left: 1px solid #CCC;
142   - border-right: 1px solid #CCC;
143   - }
144   - }
145   - }
146   - }
147   - }
148   -
149   - &.padded {
150   - h5, .title {
151   - margin: -20px;
152   - margin-bottom: 0;
153   - padding: 5px 20px;
154   - }
155   - }
156   -
157   - .row_title {
158   - font-weight: 500;
159   - color: #444;
160   - &:hover {
161   - color: #444;
162   - text-decoration: underline;
163   - }
164   - }
165   -
166   - .form-holder {
167   - padding-top: 20px;
168   - form {
169   - margin-bottom: 0;
170   - legend {
171   - text-indent: 10px;
172   - }
173   - .form-actions {
174   - margin-bottom: 0;
175   - }
176   - }
177   - }
178   -}
179   -
180   -.tab-pane {
181   - .ui-box {
182   - margin: 3px 3px 25px 3px;
183   - }
184   -}
185   -
186 1 .light-well {
187 2 background: #f9f9f9;
188 3 padding: 15px;
... ...
app/assets/stylesheets/gitlab_bootstrap/issue_box.scss 0 → 100644
  Diff comments   View file @4345e92
... ... @@ -0,0 +1,46 @@
  1 +/**
  2 + * Issue box:
  3 + * Huge block (one per page) for storing title, descripion and other information.
  4 + * Used for Issue#show page, MergeRequest#show page etc
  5 + *
  6 + * CLasses:
  7 + * .issue-box - Regular box
  8 + */
  9 +
  10 +.issue-box {
  11 + color: #666;
  12 + margin:20px 0;
  13 + background: #FAFAFA;
  14 + border: 1px solid #DDD;
  15 +
  16 + .control-group {
  17 + margin-bottom: 0;
  18 + }
  19 +
  20 + .title {
  21 + font-size: 20px;
  22 + font-weight: 500;
  23 + line-height: 28px;
  24 + margin: 0;
  25 + color: #444;
  26 + }
  27 +
  28 + .context {
  29 + border: none;
  30 + background-color: #f5f5f5;
  31 + border: none;
  32 + border-top: 1px solid #eee;
  33 + }
  34 +
  35 + .description {
  36 + border-top: 1px solid #eee;
  37 + }
  38 +
  39 + .title, .context, .description {
  40 + padding: 15px;
  41 +
  42 + .clearfix {
  43 + margin: 0;
  44 + }
  45 + }
  46 +}
... ...
app/assets/stylesheets/gitlab_bootstrap/ui_box.scss 0 → 100644
  Diff comments   View file @4345e92
... ... @@ -0,0 +1,171 @@
  1 +/**
  2 + * UI box:
  3 + * Block element for separating information on page.
  4 + * Used for storing issues lists, grouped data.
  5 + * You can have multiple ui boxes on one page
  6 + *
  7 + * Classes:
  8 + * .ui-box - for any block & widgets
  9 + * .ui-box.ui-box-small - same but with smaller title
  10 + * .ui-box.ui-box-danger - with red title
  11 + *
  12 + * Ex. 1: List
  13 + * .ui-box
  14 + * .title
  15 + * # title here
  16 + * %ul
  17 + * # content here
  18 + *
  19 + * Ex. 2: Block data
  20 + * .ui-box
  21 + * .title
  22 + * # title here
  23 + * .body
  24 + * # content here
  25 + *
  26 + */
  27 +
  28 +.ui-box {
  29 + background: #FFF;
  30 + margin-bottom: 20px;
  31 + border: 1px solid #DDD;
  32 + word-wrap: break-word;
  33 +
  34 + img {
  35 + max-width: 100%;
  36 + }
  37 +
  38 + pre {
  39 + code {
  40 + background: none !important;
  41 + }
  42 + }
  43 +
  44 + ul {
  45 + margin: 0;
  46 + }
  47 +
  48 + .title {
  49 + background-color: #EEE;
  50 + border-bottom: 1px solid #DDD;
  51 + color: #666;
  52 + font-size: 16px;
  53 + text-shadow: 0 1px 1px #fff;
  54 + padding: 0 10px;
  55 + font-size: 14px;
  56 + line-height: 40px;
  57 + font-weight: normal;
  58 + margin: 0;
  59 +
  60 + > a {
  61 + text-shadow: 0 1px 1px #fff;
  62 + }
  63 +
  64 + form {
  65 + margin-bottom: 0;
  66 + margin-top: 0;
  67 + }
  68 +
  69 + .btn {
  70 + vertical-align: middle;
  71 + padding: 4px 12px;
  72 + @include box-shadow(0 0px 1px 1px #f2f2f2);
  73 + }
  74 +
  75 + .nav-pills {
  76 + > li {
  77 + > a {
  78 + padding: 13px;
  79 + margin: 0;
  80 + font-size: 13px;
  81 + }
  82 + &.active {
  83 + > a {
  84 + background: #D5D5D5;
  85 + color: $style_color;
  86 + @include border-radius(0);
  87 + border-radius: 0;
  88 + border-left: 1px solid #CCC;
  89 + border-right: 1px solid #CCC;
  90 + }
  91 + }
  92 + }
  93 + }
  94 + }
  95 +
  96 + .body {
  97 + padding: 10px;
  98 + }
  99 +
  100 + &.padded {
  101 + h5, .title {
  102 + margin: -20px;
  103 + margin-bottom: 0;
  104 + padding: 5px 20px;
  105 + }
  106 + }
  107 +
  108 + .row_title {
  109 + font-weight: 500;
  110 + color: #444;
  111 + &:hover {
  112 + color: #444;
  113 + text-decoration: underline;
  114 + }
  115 + }
  116 +
  117 + .form-holder {
  118 + padding-top: 20px;
  119 + form {
  120 + margin-bottom: 0;
  121 + legend {
  122 + text-indent: 10px;
  123 + }
  124 + .form-actions {
  125 + margin-bottom: 0;
  126 + }
  127 + }
  128 + }
  129 +}
  130 +
  131 +/*
  132 + * Small box
  133 + */
  134 +.ui-box.ui-box-small {
  135 + margin-bottom: 10px;
  136 +
  137 + .title {
  138 + font-size: 13px;
  139 + line-height: 30px;
  140 +
  141 + a {
  142 + color: #666;
  143 + &:hover {
  144 + text-decoration: underline;
  145 + }
  146 + }
  147 + }
  148 +}
  149 +
  150 +/*
  151 + * Danger box
  152 + */
  153 +.ui-box.ui-box-danger {
  154 + background: #f7f7f7;
  155 + border: none;
  156 +
  157 + .title {
  158 + background: #D65;
  159 + color: #fff;
  160 + text-shadow: 0 1px 1px #900;
  161 + }
  162 +}
  163 +
  164 +/*
  165 + * Block under tw-bootstrap tabs
  166 + */
  167 +.tab-pane {
  168 + .ui-box {
  169 + margin: 3px 3px 25px 3px;
  170 + }
  171 +}
... ...
app/assets/stylesheets/sections/wiki.scss
  Diff comments   View file @4345e92
1   -h3.page-title .edit-wiki-header {
  1 +.title .edit-wiki-header {
2 2 width: 780px;
3 3 margin-left: auto;
4 4 margin-right: auto;
... ...