YaWK  24.1
Yet another WebKit
bootstrap3.php
Go to the documentation of this file.
1 <?php
2 namespace YAWK\FRAMEWORK\BOOTSTRAP3
3 {
4  /**
5  * @details <b>Bootstrap 3 CSS methods</b>
6  * <p>Extends \YAWK\bootstrap - this class serves all bootstrap 3 component methods
7  * and set this->cssCode variable that will be used by \YAWK\FRAMEWORK\cssFramework() </p>
8  *
9  * @author Daniel Retzl <[email protected]>
10  * @copyright 2009-2015 Daniel Retzl yawk.io
11  * @license https://opensource.org/licenses/MIT
12  * @version 1.0.0
13  * @brief Helper function to output custom (overriden) bootstrap 3 css (settings.css)
14  */
15  class bootstrap3 extends \YAWK\FRAMEWORK\cssFramework
16  {
17  /** @param string all the css as string */
18  public $cssCode = '';
19 
20  /**
21  * @brief Initialize and call bootstrap 3 methods
22  * @return string|null the generated css code as (big) string
23  * @details Init calls setBootstrapComponents and return all css code as string on success or null on error
24  */
25  public function init()
26  {
27  // set css tags for Bootstrap 3
28  $this->bs3_WellCss();
29  $this->bs3_ListGroupCss();
30  $this->bs3_ButtonsCss();
31  $this->bs3_FormsCss();
32  $this->bs3_NavbarCss();
33  $this->bs3_JumbotronCss();
34 
35  // check if css code is set, not empty and correct type
36  if (isset($this->cssCode) && (is_string($this->cssCode) && (!empty($this->cssCode))))
37  { // all good, return all generated code
38  return $this->cssCode;
39  }
40  else
41  { // css code is not set properly
42  return null;
43  }
44  }
45 
46  /**
47  * @details Bootstrap 3: WELL Component CSS Code
48  * @brief add Bootstrap 3 well component to this css code string
49  */
50  public function bs3_WellCss()
51  {
52  // well css code
53  $this->cssCode = "
54  /* WELL */
55  .well {
56  min-height: " . $this->tplSettings['well-min-height'] . ";
57  padding: " . $this->tplSettings['well-padding'] . ";
58  margin-bottom: " . $this->tplSettings['well-margin-bottom'] . ";
59  margin-top: " . $this->tplSettings['well-margin-top'] . ";
60  background-color: #" . $this->tplSettings['well-bg-color'] . ";
61  border: " . $this->tplSettings['well-border'] . " #" . $this->tplSettings['well-border-color'] . ";
62  border-radius: " . $this->tplSettings['well-border-radius'] . ";
63  -webkit-box-shadow: " . $this->tplSettings['well-shadow'] . " #" . $this->tplSettings['well-shadow-color'] . ";
64  box-shadow: " . $this->tplSettings['well-shadow'] . " #" . $this->tplSettings['well-shadow-color'] . ";
65  }
66  ";
67  }
68 
69  /**
70  * @details Bootstrap 3: LIST GROUP Component CSS Code
71  * @brief add Bootstrap 3 list group component to this css code string
72  */
73  public function bs3_ListGroupCss()
74  {
75  // list group css code
76  $this->cssCode .= "
77  /* LIST GROUP */
78 
79  .list-group-item {
80  color: #".$this->tplSettings['fontcolor-listgroup'].";
81  background-color: #".$this->tplSettings['background-listgroup'].";
82  }
83 
84  .list-group {
85  padding-left: ".$this->tplSettings['listgroup-paddingLeft'].";
86  margin-bottom: ".$this->tplSettings['listgroup-marginBottom'].";
87  }
88 
89  .list-group-item {
90  position: ".$this->tplSettings['listgroup-itemPosition'].";
91  display: ".$this->tplSettings['listgroup-itemDisplay'].";
92  padding: ".$this->tplSettings['listgroup-itemPadding'].";
93  margin-bottom: -1px;
94  background-color: #".$this->tplSettings['listgroup-itemBackgroundColor'].";
95  border: ".$this->tplSettings['listgroup-itemBorder'].";
96  color: #".$this->tplSettings['listgroup-fontColor'].";
97  font-size: ".$this->tplSettings['listgroup-fontSize'].";
98  ".$this->tplSettings['listgroup-bg-gradient-longValue'].";
99  }
100 
101  .list-group-item:first-child {
102  border-top-left-radius: ".$this->tplSettings['listgroup-firstChild-topLeft-radius'].";
103  border-top-right-radius: ".$this->tplSettings['listgroup-firstChild-topRight-radius'].";
104  }
105 
106  .list-group-item:last-child {
107  margin-bottom: 0;
108  border-bottom-right-radius: ".$this->tplSettings['listgroup-lastChild-bottomRight-radius'].";
109  border-bottom-left-radius: ".$this->tplSettings['listgroup-lastChild-bottomLeft-radius'].";
110  }
111  ";
112  }
113 
114  /**
115  * @details Bootstrap 3: BUTTONS Component CSS Code
116  * @brief add Bootstrap 3 buttons component to this css code string
117  */
118  public function bs3_ButtonsCss()
119  {
120  // all css code for buttons
121  $this->cssCode .= "
122  /* BUTTONS */
123  .btn {
124  color: #".$this->tplSettings['btn-default-color'].";
125  display: inline-block;
126  padding: 6px 12px;
127  margin-bottom: 0;
128  font-size: ".$this->tplSettings['btn-fontsize'].";
129  font-weight: ".$this->tplSettings['btn-font-weight'].";
130  line-height: 1.42857143;
131  text-align: center;
132  white-space: nowrap;
133  vertical-align: middle;
134  -ms-touch-action: manipulation;
135  touch-action: manipulation;
136  cursor: pointer;
137  -webkit-user-select: none;
138  -moz-user-select: none;
139  -ms-user-select: none;
140  user-select: none;
141  background-image: none;
142  border: ".$this->tplSettings['btn-border']." ".$this->tplSettings['btn-border-style']." transparent;
143  border-radius: ".$this->tplSettings['btn-border-radius'].";
144  }
145 
146  .btn-default {
147  color: #".$this->tplSettings['btn-default-color'].";
148  background-color: #".$this->tplSettings['btn-default-background-color'].";
149  border-color: #".$this->tplSettings['btn-default-border-color'].";
150  }
151  .btn-default:focus,
152  .btn-default.focus {
153  color: #".$this->tplSettings['btn-default-color'].";
154  background-color: #".$this->tplSettings['btn-default-focus-background-color'].";
155  border-color: #".$this->tplSettings['btn-default-focus-background-color'].";
156  }
157  .btn-default:hover {
158  color: #".$this->tplSettings['btn-default-hover-color'].";
159  background-color: #".$this->tplSettings['btn-default-hover-background-color'].";
160  border-color: #".$this->tplSettings['btn-default-hover-border-color'].";
161  }
162  .btn-default:active,
163  .btn-default.active,
164  .open > .dropdown-toggle.btn-default {
165  color: #".$this->tplSettings['btn-default-color'].";
166  background-color: #".$this->tplSettings['btn-default-focus-background-color'].";
167  border-color: #".$this->tplSettings['btn-default-hover-border-color'].";
168  }
169  .btn-default:active:hover,
170  .btn-default.active:hover,
171  .open > .dropdown-toggle.btn-default:hover,
172  .btn-default:active:focus,
173  .btn-default.active:focus,
174  .open > .dropdown-toggle.btn-default:focus,
175  .btn-default:active.focus,
176  .btn-default.active.focus,
177  .open > .dropdown-toggle.btn-default.focus {
178  color: #".$this->tplSettings['btn-default-color'].";
179  background-color: #".$this->tplSettings['btn-default-focus-background-color'].";
180  border-color: #".$this->tplSettings['btn-default-hover-border-color'].";
181  }
182  .btn-default:active,
183  .btn-default.active,
184  .open > .dropdown-toggle.btn-default {
185  background-image: none;
186  }
187  .btn-default.disabled:hover,
188  .btn-default[disabled]:hover,
189  fieldset[disabled] .btn-default:hover,
190  .btn-default.disabled:focus,
191  .btn-default[disabled]:focus,
192  fieldset[disabled] .btn-default:focus,
193  .btn-default.disabled.focus,
194  .btn-default[disabled].focus,
195  fieldset[disabled] .btn-default.focus {
196  background-color: #".$this->tplSettings['btn-default-background-color'].";
197  border-color: #".$this->tplSettings['btn-default-border-color'].";
198  }
199  .btn-default .badge {
200  color: #".$this->tplSettings['btn-default-background-color'].";
201  background-color: #".$this->tplSettings['btn-default-color'].";
202  }
203 
204  .btn-primary {
205  color: #".$this->tplSettings['btn-primary-color'].";
206  background-color: #".$this->tplSettings['btn-primary-background-color'].";
207  border-color: #".$this->tplSettings['btn-primary-border-color'].";
208  }
209  .btn-primary:focus,
210  .btn-primary.focus {
211  color: #".$this->tplSettings['btn-primary-color'].";
212  background-color: #".$this->tplSettings['btn-primary-focus-background-color'].";
213  border-color: #".$this->tplSettings['btn-primary-focus-border-color'].";
214  }
215  .btn-primary:hover {
216  color: #".$this->tplSettings['btn-primary-color'].";
217  background-color: #".$this->tplSettings['btn-primary-hover-background-color'].";
218  border-color: #".$this->tplSettings['btn-primary-hover-border-color'].";
219  }
220  .btn-primary:active,
221  .btn-primary.active,
222  .open > .dropdown-toggle.btn-primary {
223  color: #".$this->tplSettings['btn-primary-color'].";
224  background-color: #".$this->tplSettings['btn-primary-focus-background-color'].";
225  border-color: #".$this->tplSettings['btn-primary-hover-border-color'].";
226  }
227  .btn-primary:active:hover,
228  .btn-primary.active:hover,
229  .open > .dropdown-toggle.btn-primary:hover,
230  .btn-primary:active:focus,
231  .btn-primary.active:focus,
232  .open > .dropdown-toggle.btn-primary:focus,
233  .btn-primary:active.focus,
234  .btn-primary.active.focus,
235  .open > .dropdown-toggle.btn-primary.focus {
236  color: #".$this->tplSettings['btn-primary-color'].";
237  background-color: #".$this->tplSettings['btn-primary-focus-background-color'].";
238  border-color: #".$this->tplSettings['btn-primary-hover-border-color'].";
239  }
240  .btn-primary:active,
241  .btn-primary.active,
242  .open > .dropdown-toggle.btn-primary {
243  background-image: none;
244  }
245  .btn-primary.disabled:hover,
246  .btn-primary[disabled]:hover,
247  fieldset[disabled] .btn-primary:hover,
248  .btn-primary.disabled:focus,
249  .btn-primary[disabled]:focus,
250  fieldset[disabled] .btn-primary:focus,
251  .btn-primary.disabled.focus,
252  .btn-primary[disabled].focus,
253  fieldset[disabled] .btn-primary.focus {
254  background-color: #".$this->tplSettings['btn-primary-background-color'].";
255  border-color: #".$this->tplSettings['btn-primary-border-color'].";
256  }
257  .btn-primary .badge {
258  color: #".$this->tplSettings['btn-primary-background-color'].";
259  background-color: #".$this->tplSettings['btn-primary-color'].";
260  }
261 
262  .btn-success {
263  color: #".$this->tplSettings['btn-success-color'].";
264  background-color: #".$this->tplSettings['btn-success-background-color'].";
265  border-color: #".$this->tplSettings['btn-success-background-color'].";
266  }
267  .btn-success:focus,
268  .btn-success.focus {
269  color: #".$this->tplSettings['btn-success-color'].";
270  background-color: #".$this->tplSettings['btn-success-focus-background-color'].";
271  border-color: #".$this->tplSettings['btn-success-focus-border-color'].";
272  }
273  .btn-success:hover {
274  color: #".$this->tplSettings['btn-success-hover-color'].";
275  background-color: #".$this->tplSettings['btn-success-hover-background-color'].";
276  border-color: #".$this->tplSettings['btn-success-hover-border-color'].";
277  }
278  .btn-success:active,
279  .btn-success.active,
280  .open > .dropdown-toggle.btn-success {
281  color: #".$this->tplSettings['btn-success-color'].";
282  background-color: #".$this->tplSettings['btn-success-focus-background-color'].";
283  border-color: #".$this->tplSettings['btn-success-hover-border-color'].";
284  }
285  .btn-success:active:hover,
286  .btn-success.active:hover,
287  .open > .dropdown-toggle.btn-success:hover,
288  .btn-success:active:focus,
289  .btn-success.active:focus,
290  .open > .dropdown-toggle.btn-success:focus,
291  .btn-success:active.focus,
292  .btn-success.active.focus,
293  .open > .dropdown-toggle.btn-success.focus {
294  color: #".$this->tplSettings['btn-success-color'].";
295  background-color: #".$this->tplSettings['btn-success-hover-border-color'].";
296  border-color: #".$this->tplSettings['btn-success-focus-border-color'].";
297  }
298  .btn-success:active,
299  .btn-success.active,
300  .open > .dropdown-toggle.btn-success {
301  background-image: none;
302  }
303  .btn-success.disabled:hover,
304  .btn-success[disabled]:hover,
305  fieldset[disabled] .btn-success:hover,
306  .btn-success.disabled:focus,
307  .btn-success[disabled]:focus,
308  fieldset[disabled] .btn-success:focus,
309  .btn-success.disabled.focus,
310  .btn-success[disabled].focus,
311  fieldset[disabled] .btn-success.focus {
312  background-color: #5cb85c;
313  border-color: #4cae4c;
314  }
315  .btn-success .badge {
316  color: #".$this->tplSettings['btn-success-background-color'].";
317  background-color: #".$this->tplSettings['btn-success-color'].";
318  }
319 
320  .btn-info {
321  color: #".$this->tplSettings['btn-info-color'].";
322  background-color: #".$this->tplSettings['btn-info-background-color'].";
323  border-color: #".$this->tplSettings['btn-info-border-color'].";
324  }
325  .btn-info:focus,
326  .btn-info.focus {
327  color: #".$this->tplSettings['btn-info-color'].";
328  background-color: #".$this->tplSettings['btn-info-focus-background-color'].";
329  border-color: #".$this->tplSettings['btn-info-focus-border-color'].";
330  }
331  .btn-info:hover {
332  color: #".$this->tplSettings['btn-info-hover-color'].";
333  background-color: #".$this->tplSettings['btn-info-hover-background-color'].";
334  border-color: #".$this->tplSettings['btn-info-hover-border-color'].";
335  }
336  .btn-info:active,
337  .btn-info.active,
338  .open > .dropdown-toggle.btn-info {
339  color: #".$this->tplSettings['btn-info-color'].";
340  background-color: #".$this->tplSettings['btn-info-focus-background-color'].";
341  border-color: #".$this->tplSettings['btn-info-hover-border-color'].";
342  }
343  .btn-info:active:hover,
344  .btn-info.active:hover,
345  .open > .dropdown-toggle.btn-info:hover,
346  .btn-info:active:focus,
347  .btn-info.active:focus,
348  .open > .dropdown-toggle.btn-info:focus,
349  .btn-info:active.focus,
350  .btn-info.active.focus,
351  .open > .dropdown-toggle.btn-info.focus {
352  color: #".$this->tplSettings['btn-info-color'].";
353  background-color: #".$this->tplSettings['btn-info-hover-border-color'].";
354  border-color: #".$this->tplSettings['btn-info-focus-border-color'].";
355  }
356  .btn-info:active,
357  .btn-info.active,
358  .open > .dropdown-toggle.btn-info {
359  background-image: none;
360  }
361  .btn-info.disabled:hover,
362  .btn-info[disabled]:hover,
363  fieldset[disabled] .btn-info:hover,
364  .btn-info.disabled:focus,
365  .btn-info[disabled]:focus,
366  fieldset[disabled] .btn-info:focus,
367  .btn-info.disabled.focus,
368  .btn-info[disabled].focus,
369  fieldset[disabled] .btn-info.focus {
370  background-color: #5bc0de;
371  border-color: #46b8da;
372  }
373  .btn-info .badge {
374  color: #".$this->tplSettings['btn-info-background-color'].";
375  background-color: #".$this->tplSettings['btn-info-color'].";
376  }
377 
378  .btn-warning {
379  color: #".$this->tplSettings['btn-warning-color'].";
380  background-color: #".$this->tplSettings['btn-warning-background-color'].";
381  border-color: #".$this->tplSettings['btn-warning-border-color'].";
382  }
383  .btn-warning:focus,
384  .btn-warning.focus {
385  color: #".$this->tplSettings['btn-warning-color'].";
386  background-color: #".$this->tplSettings['btn-warning-focus-background-color'].";
387  border-color: #".$this->tplSettings['btn-warning-focus-border-color'].";
388  }
389  .btn-warning:hover {
390  color: #".$this->tplSettings['btn-warning-hover-color'].";
391  background-color: #".$this->tplSettings['btn-warning-hover-background-color'].";
392  border-color: #".$this->tplSettings['btn-warning-hover-border-color'].";
393  }
394  .btn-warning:active,
395  .btn-warning.active,
396  .open > .dropdown-toggle.btn-warning {
397  color: #".$this->tplSettings['btn-warning-color'].";
398  background-color: #".$this->tplSettings['btn-warning-focus-background-color'].";
399  border-color: #".$this->tplSettings['btn-warning-hover-border-color'].";
400  }
401  .btn-warning:active:hover,
402  .btn-warning.active:hover,
403  .open > .dropdown-toggle.btn-warning:hover,
404  .btn-warning:active:focus,
405  .btn-warning.active:focus,
406  .open > .dropdown-toggle.btn-warning:focus,
407  .btn-warning:active.focus,
408  .btn-warning.active.focus,
409  .open > .dropdown-toggle.btn-warning.focus {
410  color: #".$this->tplSettings['btn-warning-color'].";
411  background-color: #".$this->tplSettings['btn-warning-hover-border-color'].";
412  border-color: #".$this->tplSettings['btn-warning-focus-border-color'].";
413  }
414  .btn-warning:active,
415  .btn-warning.active,
416  .open > .dropdown-toggle.btn-warning {
417  background-image: none;
418  }
419  .btn-warning.disabled:hover,
420  .btn-warning[disabled]:hover,
421  fieldset[disabled] .btn-warning:hover,
422  .btn-warning.disabled:focus,
423  .btn-warning[disabled]:focus,
424  fieldset[disabled] .btn-warning:focus,
425  .btn-warning.disabled.focus,
426  .btn-warning[disabled].focus,
427  fieldset[disabled] .btn-warning.focus {
428  background-color: #f0ad4e;
429  border-color: #eea236;
430  }
431  .btn-warning .badge {
432  color: #".$this->tplSettings['btn-warning-background-color'].";
433  background-color: #".$this->tplSettings['btn-warning-color'].";
434  }
435 
436  .btn-danger {
437  color: #".$this->tplSettings['btn-danger-color'].";
438  background-color: #".$this->tplSettings['btn-danger-background-color'].";
439  border-color: #".$this->tplSettings['btn-danger-border-color'].";
440  }
441  .btn-danger:focus,
442  .btn-danger.focus {
443  color: #".$this->tplSettings['btn-danger-color'].";
444  background-color: #".$this->tplSettings['btn-danger-focus-background-color'].";
445  border-color: #".$this->tplSettings['btn-danger-focus-border-color'].";
446  }
447  .btn-danger:hover {
448  color: #".$this->tplSettings['btn-danger-hover-color'].";
449  background-color: #".$this->tplSettings['btn-danger-hover-background-color'].";
450  border-color: #".$this->tplSettings['btn-danger-hover-border-color'].";
451  }
452  .btn-danger:active,
453  .btn-danger.active,
454  .open > .dropdown-toggle.btn-danger {
455  color: #".$this->tplSettings['btn-danger-color'].";
456  background-color: #".$this->tplSettings['btn-danger-focus-background-color'].";
457  border-color: #".$this->tplSettings['btn-danger-hover-border-color'].";
458  }
459  .btn-danger:active:hover,
460  .btn-danger.active:hover,
461  .open > .dropdown-toggle.btn-danger:hover,
462  .btn-danger:active:focus,
463  .btn-danger.active:focus,
464  .open > .dropdown-toggle.btn-danger:focus,
465  .btn-danger:active.focus,
466  .btn-danger.active.focus,
467  .open > .dropdown-toggle.btn-danger.focus {
468  color: #".$this->tplSettings['btn-danger-color'].";
469  background-color: #".$this->tplSettings['btn-danger-hover-border-color'].";
470  border-color: #".$this->tplSettings['btn-danger-focus-border-color'].";
471  }
472  .btn-danger:active,
473  .btn-danger.active,
474  .open > .dropdown-toggle.btn-danger {
475  background-image: none;
476  }
477  .btn-danger.disabled:hover,
478  .btn-danger[disabled]:hover,
479  fieldset[disabled] .btn-danger:hover,
480  .btn-danger.disabled:focus,
481  .btn-danger[disabled]:focus,
482  fieldset[disabled] .btn-danger:focus,
483  .btn-danger.disabled.focus,
484  .btn-danger[disabled].focus,
485  fieldset[disabled] .btn-danger.focus {
486  background-color: #d9534f;
487  border-color: #d43f3a;
488  }
489  .btn-danger .badge {
490  color: #".$this->tplSettings['btn-danger-background-color'].";
491  background-color: #".$this->tplSettings['btn-danger-color'].";
492  }";
493  }
494 
495  /**
496  * @details Bootstrap 4: FORMS Component CSS Code
497  * @brief add Bootstrap 3 forms component to this css code string
498  */
499  public function bs3_FormsCss()
500  {
501  $this->cssCode .= "
502  /* FORMS */
503  .form-control {
504  display: ".$this->tplSettings['form-display'].";
505  width: ".$this->tplSettings['form-width'].";
506  height: ".$this->tplSettings['form-height'].";
507  padding: ".$this->tplSettings['form-padding'].";
508  font-size: ".$this->tplSettings['form-textSize'].";
509  line-height: ".$this->tplSettings['form-lineHeight'].";
510  color: #".$this->tplSettings['form-textColor'].";
511  background-color: #".$this->tplSettings['form-bgcolor'].";
512  background-image: none;
513  border: ".$this->tplSettings['form-border'].";
514  border-radius: ".$this->tplSettings['form-border-radius'].";
515  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
516  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
517  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
518  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
519  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
520  }
521  .form-control:focus {
522  border-color: #".$this->tplSettings['form-activeBorderColor'].";
523  outline: 0;
524  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
525  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
526  }
527  .form-control::-moz-placeholder {
528  color: #".$this->tplSettings['form-placeholderColor'].";
529  opacity: 1;
530  }
531  .form-control:-ms-input-placeholder {
532  color: #999;
533  }
534  .form-control::-webkit-input-placeholder {
535  color: #999;
536  }
537  ";
538  }
539 
540  /**
541  * @details Bootstrap 3: NAVBAR Component CSS Code
542  * @brief add Bootstrap 3 navbar component to this css code string
543  */
544  public function bs3_NavbarCss()
545  {
546  $this->cssCode .= "
547  /* NAVBAR */
548  .navbar-fixed-top {
549  margin-top: ".$this->tplSettings['navbar-marginTop'].";
550  margin-bottom: ".$this->tplSettings['navbar-marginBottom'].";
551  }
552  .navbar-default {
553  text-shadow: 1px 0px #".$this->tplSettings['fontshadow-menucolor'].";
554  filter: dropshadow(color=#".$this->tplSettings['fontshadow-menucolor'].", offx=1, offy=1);
555  background-color: #".$this->tplSettings['default-menubgcolor'].";
556  border-color: #".$this->tplSettings['border-menubgcolor'].";
557  margin-bottom: ".$this->tplSettings['navbar-marginBottom'].";
558  }
559  .navbar-default .navbar-brand {
560  color: #".$this->tplSettings['brand-menucolor'].";
561  }
562  .navbar-default .navbar-brand:hover,
563  .navbar-default .navbar-brand:focus {
564  color: #".$this->tplSettings['brandhover-menucolor'].";
565  background-color: transparent;
566  }
567  .navbar-default .navbar-text {
568  color: #".$this->tplSettings['font-menucolor'].";
569  }
570  .navbar-default .navbar-nav > li > a {
571  color: #".$this->tplSettings['font-menucolor'].";
572  }
573  .navbar-default .navbar-nav > li > a:hover,
574  .navbar-default .navbar-nav > li > a:focus {
575  color: #".$this->tplSettings['fonthover-menucolor'].";
576  background-color: transparent;
577  }
578  .navbar-default .navbar-nav > .active > a,
579  .navbar-default .navbar-nav > .active > a:hover,
580  .navbar-default .navbar-nav > .active > a:focus {
581  color: #".$this->tplSettings['fontactive-menucolor'].";
582  background-color: #".$this->tplSettings['active-menubgcolor'].";
583  }
584  .navbar-default .navbar-nav > .disabled > a,
585  .navbar-default .navbar-nav > .disabled > a:hover,
586  .navbar-default .navbar-nav > .disabled > a:focus {
587  color: #".$this->tplSettings['fontdisabled-menucolor'].";
588  background-color: transparent;
589  }
590  .navbar-default .navbar-toggle {
591  border-color: #".$this->tplSettings['toggle-menubgcolor'].";
592  }
593  .navbar-default .navbar-toggle:hover,
594  .navbar-default .navbar-toggle:focus {
595  border-color:#".$this->tplSettings['toggle-menubgcolor'].";
596  }
597  .navbar-default .navbar-toggle .icon-bar {
598  background-color:#".$this->tplSettings['iconbar-menubgcolor'].";
599  }
600  .navbar-default .navbar-collapse,
601  .navbar-default .navbar-form {
602  border-color: #".$this->tplSettings['border-menubgcolor'].";
603  }
604  .navbar-default .navbar-nav > .open > a,
605  .navbar-default .navbar-nav > .open > a:hover,
606  .navbar-default .navbar-nav > .open > a:focus {
607  background-color: #".$this->tplSettings['active-menubgcolor'].";
608  color: #".$this->tplSettings['fontactive-menucolor'].";
609  }
610  @media (max-width: 767px) {
611  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
612  color: #".$this->tplSettings['font-menucolor'].";
613  }
614  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
615  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
616  color: #".$this->tplSettings['fonthover-menucolor'].";
617  background-color: transparent;
618  }
619  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
620  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
621  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
622  color: #".$this->tplSettings['fontactive-menucolor'].";
623  background-color: #".$this->tplSettings['active-menubgcolor'].";
624  }
625  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
626  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
627  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
628  color: #".$this->tplSettings['fontdisabled-menucolor'].";
629  background-color: transparent;
630  }
631  }
632  .navbar-default .navbar-link {
633  color: #".$this->tplSettings['font-menucolor'].";
634  }
635  .navbar-default .navbar-link:hover {
636  color: #".$this->tplSettings['fonthover-menucolor'].";
637  }
638  .navbar-default .btn-link {
639  color: #".$this->tplSettings['font-menucolor'].";
640  }
641  .navbar-default .btn-link:hover,
642  .navbar-default .btn-link:focus {
643  color: #".$this->tplSettings['fonthover-menucolor'].";
644  }
645  .navbar-default .btn-link[disabled]:hover,
646  fieldset[disabled] .navbar-default .btn-link:hover,
647  .navbar-default .btn-link[disabled]:focus,
648  fieldset[disabled] .navbar-default .btn-link:focus {
649  color: #".$this->tplSettings['fontdisabled-menucolor'].";
650  }
651 
652  .dropdown-menu {
653  position: absolute;
654  top: 100%;
655  left: 0;
656  z-index: 1000;
657  display: none;
658  float: left;
659  min-width: 160px;
660  padding: 5px 0;
661  margin: 2px 0 0;
662  list-style: none;
663  font-size: 14px;
664  text-align: left;
665  background-color: #".$this->tplSettings['background-menudropdowncolor'].";
666  border: 1px solid #".$this->tplSettings['border-menudropdowncolor'].";
667  border-radius: 4px;
668  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
669  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
670  -webkit-background-clip: padding-box;
671  background-clip: padding-box;
672  }
673  .dropdown-menu.pull-right {
674  right: 0;
675  left: auto;
676  }
677  .dropdown-menu > li > a {
678  display: block;
679  padding: 3px 20px;
680  clear: both;
681  font-weight: normal;
682  line-height: 1.42857143;
683  color: #".$this->tplSettings['border-menudropdowncolor'].";
684  white-space: nowrap;
685  }
686  .dropdown-menu > li > a:hover,
687  .dropdown-menu > li > a:focus {
688  text-decoration: none;
689  color: #".$this->tplSettings['fonthover-menudropdowncolor'].";
690  background-color: #".$this->tplSettings['hoverbg-menudropdowncolor'].";
691  }
692  .dropdown-menu > .active > a,
693  .dropdown-menu > .active > a:hover,
694  .dropdown-menu > .active > a:focus {
695  color: #".$this->tplSettings['fontactive-menudropdowncolor'].";
696  text-decoration: none;
697  outline: 0;
698  background-color: #".$this->tplSettings['activebg-menudropdowncolor'].";
699  }
700  .dropdown-menu > .disabled > a,
701  .dropdown-menu > .disabled > a:hover,
702  .dropdown-menu > .disabled > a:focus {
703  color: #".$this->tplSettings['disabled-menudropdowncolor'].";
704  }
705  ";
706  }
707 
708  /**
709  * @details Bootstrap 3: JUMBOTRON Component CSS Code
710  * @brief add Bootstrap 3 jumbotron component to this css code string
711  */
712  public function bs3_JumbotronCss()
713  {
714  $this->cssCode .= "
715  /* JUMBOTRON */
716  .jumbotron {
717  padding-top: ".$this->tplSettings['jumbotron-paddingTop'].";
718  padding-bottom: ".$this->tplSettings['jumbotron-paddingBottom'].";
719  margin-bottom: ".$this->tplSettings['jumbotron-marginBottom'].";
720  color: #".$this->tplSettings['jumbotron-fontColor'].";
721  background-color: #".$this->tplSettings['jumbotron-backgroundColor'].";
722  padding-right: ".$this->tplSettings['jumbotron-containerPaddingRight'].";
723  padding-left: ".$this->tplSettings['jumbotron-containerPaddingLeft'].";
724  border-radius: ".$this->tplSettings['jumbotron-borderRadius'].";
725  }
726  .jumbotron h1,
727  .jumbotron .h1 {
728  color: #".$this->tplSettings['jumbotron-h1Color'].";
729  }
730  .jumbotron p {
731  margin-bottom: ".$this->tplSettings['jumbotron-pMarginBottom'].";
732  font-size: ".$this->tplSettings['jumbotron-pFontSize'].";
733  font-weight: ".$this->tplSettings['jumbotron-pFontWeight'].";
734  }
735  .jumbotron > hr {
736  border-top-color: #".$this->tplSettings['jumbotron-hrColor'].";
737  }
738  .container .jumbotron,
739  .container-fluid .jumbotron {
740  padding-right: ".$this->tplSettings['jumbotron-containerPaddingRight'].";
741  padding-left: ".$this->tplSettings['jumbotron-containerPaddingLeft'].";
742  border-radius: ".$this->tplSettings['jumbotron-borderRadius'].";
743  }
744  .jumbotron .container {
745  max-width: ".$this->tplSettings['jumbotron-containerMaxWidth'].";
746  }
747  @media screen and (min-width: 768px) {
748  .jumbotron {
749  padding-top: 48px;
750  padding-bottom: 48px;
751  }
752  .container .jumbotron,
753  .container-fluid .jumbotron {
754  padding-right: ".$this->tplSettings['jumbotron-fluidPaddingRight'].";
755  padding-left: ".$this->tplSettings['jumbotron-fluidPaddingLeft'].";
756  }
757  .jumbotron h1,
758  .jumbotron .h1 {
759  font-size: ".$this->tplSettings['jumbotron-h1FontSize'].";
760  }
761  }
762  ";
763  }
764  }
765 }
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3
Helper function to output custom (overriden) bootstrap 3 css (settings.css)
Definition: bootstrap3.php:15
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\bs3_NavbarCss
bs3_NavbarCss()
add Bootstrap 3 navbar component to this css code string
Definition: bootstrap3.php:543
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\init
init()
Initialize and call bootstrap 3 methods.
Definition: bootstrap3.php:24
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\bs3_ListGroupCss
bs3_ListGroupCss()
add Bootstrap 3 list group component to this css code string
Definition: bootstrap3.php:72
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\bs3_JumbotronCss
bs3_JumbotronCss()
add Bootstrap 3 jumbotron component to this css code string
Definition: bootstrap3.php:711
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\bs3_ButtonsCss
bs3_ButtonsCss()
add Bootstrap 3 buttons component to this css code string
Definition: bootstrap3.php:117
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\bs3_FormsCss
bs3_FormsCss()
add Bootstrap 3 forms component to this css code string
Definition: bootstrap3.php:498
YAWK\FRAMEWORK\BOOTSTRAP3\bootstrap3\bs3_WellCss
bs3_WellCss()
add Bootstrap 3 well component to this css code string
Definition: bootstrap3.php:49
YAWK\FRAMEWORK\cssFramework
Helper function to output custom (overriden) bootstrap css (settings.css)
Definition: cssFramework.php:18