YaWK  24.1
Yet another WebKit
Public Member Functions | Public Attributes | List of all members
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4 Class Reference

Helper function to output custom (overriden) bootstrap 4 css (settings.css) More...

+ Inheritance diagram for YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4:

Public Member Functions

 bs4_ButtonsCss ()
 Bootstrap 4: BUTTONS Component CSS Code. More...
 
 bs4_CardsCss ()
 Bootstrap 4: CARDS Component CSS Code. More...
 
 bs4_FormsCss ()
 Bootstrap 4: FORMS Component CSS Code. More...
 
 bs4_JumbotronCss ()
 Bootstrap 4: JUMBOTRON Component CSS Code. More...
 
 bs4_ListGroupCss ()
 Bootstrap 4: LIST GROUP Component CSS Code. More...
 
 bs4_navbarCss ()
 Bootstrap 4 Navbar CSS Code. More...
 
 init ()
 Call all the methods to set bootstrap 4 custom css and return it as string. More...
 
- Public Member Functions inherited from YAWK\FRAMEWORK\cssFramework
 outputCssCode ()
 Check CSS code and return it on success as string, otherwise return null. More...
 
 setBootstrapComponents ()
 Check if Bootstrap is version 3 or 4 and load the required component methods. More...
 

Public Attributes

 $cssCode = ''
 
- Public Attributes inherited from YAWK\FRAMEWORK\cssFramework
 $cssCode = ''
 
 $tplSettings = ''
 
 $version = ''
 

Detailed Description

Helper function to output custom (overriden) bootstrap 4 css (settings.css)

TODO: add all bootstrap 4 methods Bootstrap 4 CSS methods

Extends \YAWK\bootstrap - this class serves all bootstrap 4 component methods and set this->cssCode variable that will be used by \YAWK\FRAMEWORK\cssFramework()

Author
Daniel Retzl danie.nosp@m.lret.nosp@m.zl@gm.nosp@m.ail..nosp@m.com
Copyright
2009-2015 Daniel Retzl yawk.io @license https://opensource.org/licenses/MIT
Version
1.0.0

Definition at line 15 of file bootstrap4.php.

Member Function Documentation

◆ bs4_ButtonsCss()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::bs4_ButtonsCss ( )

Bootstrap 4: BUTTONS Component CSS Code.

add Bootstrap 3 buttons component to this css code string

Definition at line 310 of file bootstrap4.php.

312  {
313  // all css code for buttons
314  $this->cssCode .= "
315  /* BUTTONS */
316  .btn {
317  color: #".$this->tplSettings['btn-default-color'].";
318  display: inline-block;
319  padding: 6px 12px;
320  margin-bottom: 0;
321  font-size: ".$this->tplSettings['btn-fontsize'].";
322  font-weight: ".$this->tplSettings['btn-font-weight'].";
323  line-height: 1.42857143;
324  text-align: center;
325  white-space: nowrap;
326  vertical-align: middle;
327  -ms-touch-action: manipulation;
328  touch-action: manipulation;
329  cursor: pointer;
330  -webkit-user-select: none;
331  -moz-user-select: none;
332  -ms-user-select: none;
333  user-select: none;
334  background-image: none;
335  border: ".$this->tplSettings['btn-border']." ".$this->tplSettings['btn-border-style']." transparent;
336  border-radius: ".$this->tplSettings['btn-border-radius'].";
337  }
338 
339  .btn-default {
340  color: #".$this->tplSettings['btn-default-color'].";
341  background-color: #".$this->tplSettings['btn-default-background-color'].";
342  border-color: #".$this->tplSettings['btn-default-border-color'].";
343  }
344  .btn-default:focus,
345  .btn-default.focus {
346  color: #".$this->tplSettings['btn-default-color'].";
347  background-color: #".$this->tplSettings['btn-default-focus-background-color'].";
348  border-color: #".$this->tplSettings['btn-default-focus-background-color'].";
349  }
350  .btn-default:hover {
351  color: #".$this->tplSettings['btn-default-hover-color'].";
352  background-color: #".$this->tplSettings['btn-default-hover-background-color'].";
353  border-color: #".$this->tplSettings['btn-default-hover-border-color'].";
354  }
355  .btn-default:active,
356  .btn-default.active,
357  .open > .dropdown-toggle.btn-default {
358  color: #".$this->tplSettings['btn-default-color'].";
359  background-color: #".$this->tplSettings['btn-default-focus-background-color'].";
360  border-color: #".$this->tplSettings['btn-default-hover-border-color'].";
361  }
362  .btn-default:active:hover,
363  .btn-default.active:hover,
364  .open > .dropdown-toggle.btn-default:hover,
365  .btn-default:active:focus,
366  .btn-default.active:focus,
367  .open > .dropdown-toggle.btn-default:focus,
368  .btn-default:active.focus,
369  .btn-default.active.focus,
370  .open > .dropdown-toggle.btn-default.focus {
371  color: #".$this->tplSettings['btn-default-color'].";
372  background-color: #".$this->tplSettings['btn-default-focus-background-color'].";
373  border-color: #".$this->tplSettings['btn-default-hover-border-color'].";
374  }
375  .btn-default:active,
376  .btn-default.active,
377  .open > .dropdown-toggle.btn-default {
378  background-image: none;
379  }
380  .btn-default.disabled:hover,
381  .btn-default[disabled]:hover,
382  fieldset[disabled] .btn-default:hover,
383  .btn-default.disabled:focus,
384  .btn-default[disabled]:focus,
385  fieldset[disabled] .btn-default:focus,
386  .btn-default.disabled.focus,
387  .btn-default[disabled].focus,
388  fieldset[disabled] .btn-default.focus {
389  background-color: #".$this->tplSettings['btn-default-background-color'].";
390  border-color: #".$this->tplSettings['btn-default-border-color'].";
391  }
392  .btn-default .badge {
393  color: #".$this->tplSettings['btn-default-background-color'].";
394  background-color: #".$this->tplSettings['btn-default-color'].";
395  }
396 
397  .btn-primary {
398  color: #".$this->tplSettings['btn-primary-color'].";
399  background-color: #".$this->tplSettings['btn-primary-background-color'].";
400  border-color: #".$this->tplSettings['btn-primary-border-color'].";
401  }
402  .btn-primary:focus,
403  .btn-primary.focus {
404  color: #".$this->tplSettings['btn-primary-color'].";
405  background-color: #".$this->tplSettings['btn-primary-focus-background-color'].";
406  border-color: #".$this->tplSettings['btn-primary-focus-border-color'].";
407  }
408  .btn-primary:hover {
409  color: #".$this->tplSettings['btn-primary-color'].";
410  background-color: #".$this->tplSettings['btn-primary-hover-background-color'].";
411  border-color: #".$this->tplSettings['btn-primary-hover-border-color'].";
412  }
413  .btn-primary:active,
414  .btn-primary.active,
415  .open > .dropdown-toggle.btn-primary {
416  color: #".$this->tplSettings['btn-primary-color'].";
417  background-color: #".$this->tplSettings['btn-primary-focus-background-color'].";
418  border-color: #".$this->tplSettings['btn-primary-hover-border-color'].";
419  }
420  .btn-primary:active:hover,
421  .btn-primary.active:hover,
422  .open > .dropdown-toggle.btn-primary:hover,
423  .btn-primary:active:focus,
424  .btn-primary.active:focus,
425  .open > .dropdown-toggle.btn-primary:focus,
426  .btn-primary:active.focus,
427  .btn-primary.active.focus,
428  .open > .dropdown-toggle.btn-primary.focus {
429  color: #".$this->tplSettings['btn-primary-color'].";
430  background-color: #".$this->tplSettings['btn-primary-focus-background-color'].";
431  border-color: #".$this->tplSettings['btn-primary-hover-border-color'].";
432  }
433  .btn-primary:active,
434  .btn-primary.active,
435  .open > .dropdown-toggle.btn-primary {
436  background-image: none;
437  }
438  .btn-primary.disabled:hover,
439  .btn-primary[disabled]:hover,
440  fieldset[disabled] .btn-primary:hover,
441  .btn-primary.disabled:focus,
442  .btn-primary[disabled]:focus,
443  fieldset[disabled] .btn-primary:focus,
444  .btn-primary.disabled.focus,
445  .btn-primary[disabled].focus,
446  fieldset[disabled] .btn-primary.focus {
447  background-color: #".$this->tplSettings['btn-primary-background-color'].";
448  border-color: #".$this->tplSettings['btn-primary-border-color'].";
449  }
450  .btn-primary .badge {
451  color: #".$this->tplSettings['btn-primary-background-color'].";
452  background-color: #".$this->tplSettings['btn-primary-color'].";
453  }
454 
455  .btn-success {
456  color: #".$this->tplSettings['btn-success-color'].";
457  background-color: #".$this->tplSettings['btn-success-background-color'].";
458  border-color: #".$this->tplSettings['btn-success-background-color'].";
459  }
460  .btn-success:focus,
461  .btn-success.focus {
462  color: #".$this->tplSettings['btn-success-color'].";
463  background-color: #".$this->tplSettings['btn-success-focus-background-color'].";
464  border-color: #".$this->tplSettings['btn-success-focus-border-color'].";
465  }
466  .btn-success:hover {
467  color: #".$this->tplSettings['btn-success-hover-color'].";
468  background-color: #".$this->tplSettings['btn-success-hover-background-color'].";
469  border-color: #".$this->tplSettings['btn-success-hover-border-color'].";
470  }
471  .btn-success:active,
472  .btn-success.active,
473  .open > .dropdown-toggle.btn-success {
474  color: #".$this->tplSettings['btn-success-color'].";
475  background-color: #".$this->tplSettings['btn-success-focus-background-color'].";
476  border-color: #".$this->tplSettings['btn-success-hover-border-color'].";
477  }
478  .btn-success:active:hover,
479  .btn-success.active:hover,
480  .open > .dropdown-toggle.btn-success:hover,
481  .btn-success:active:focus,
482  .btn-success.active:focus,
483  .open > .dropdown-toggle.btn-success:focus,
484  .btn-success:active.focus,
485  .btn-success.active.focus,
486  .open > .dropdown-toggle.btn-success.focus {
487  color: #".$this->tplSettings['btn-success-color'].";
488  background-color: #".$this->tplSettings['btn-success-hover-border-color'].";
489  border-color: #".$this->tplSettings['btn-success-focus-border-color'].";
490  }
491  .btn-success:active,
492  .btn-success.active,
493  .open > .dropdown-toggle.btn-success {
494  background-image: none;
495  }
496  .btn-success.disabled:hover,
497  .btn-success[disabled]:hover,
498  fieldset[disabled] .btn-success:hover,
499  .btn-success.disabled:focus,
500  .btn-success[disabled]:focus,
501  fieldset[disabled] .btn-success:focus,
502  .btn-success.disabled.focus,
503  .btn-success[disabled].focus,
504  fieldset[disabled] .btn-success.focus {
505  background-color: #5cb85c;
506  border-color: #4cae4c;
507  }
508  .btn-success .badge {
509  color: #".$this->tplSettings['btn-success-background-color'].";
510  background-color: #".$this->tplSettings['btn-success-color'].";
511  }
512 
513  .btn-info {
514  color: #".$this->tplSettings['btn-info-color'].";
515  background-color: #".$this->tplSettings['btn-info-background-color'].";
516  border-color: #".$this->tplSettings['btn-info-border-color'].";
517  }
518  .btn-info:focus,
519  .btn-info.focus {
520  color: #".$this->tplSettings['btn-info-color'].";
521  background-color: #".$this->tplSettings['btn-info-focus-background-color'].";
522  border-color: #".$this->tplSettings['btn-info-focus-border-color'].";
523  }
524  .btn-info:hover {
525  color: #".$this->tplSettings['btn-info-hover-color'].";
526  background-color: #".$this->tplSettings['btn-info-hover-background-color'].";
527  border-color: #".$this->tplSettings['btn-info-hover-border-color'].";
528  }
529  .btn-info:active,
530  .btn-info.active,
531  .open > .dropdown-toggle.btn-info {
532  color: #".$this->tplSettings['btn-info-color'].";
533  background-color: #".$this->tplSettings['btn-info-focus-background-color'].";
534  border-color: #".$this->tplSettings['btn-info-hover-border-color'].";
535  }
536  .btn-info:active:hover,
537  .btn-info.active:hover,
538  .open > .dropdown-toggle.btn-info:hover,
539  .btn-info:active:focus,
540  .btn-info.active:focus,
541  .open > .dropdown-toggle.btn-info:focus,
542  .btn-info:active.focus,
543  .btn-info.active.focus,
544  .open > .dropdown-toggle.btn-info.focus {
545  color: #".$this->tplSettings['btn-info-color'].";
546  background-color: #".$this->tplSettings['btn-info-hover-border-color'].";
547  border-color: #".$this->tplSettings['btn-info-focus-border-color'].";
548  }
549  .btn-info:active,
550  .btn-info.active,
551  .open > .dropdown-toggle.btn-info {
552  background-image: none;
553  }
554  .btn-info.disabled:hover,
555  .btn-info[disabled]:hover,
556  fieldset[disabled] .btn-info:hover,
557  .btn-info.disabled:focus,
558  .btn-info[disabled]:focus,
559  fieldset[disabled] .btn-info:focus,
560  .btn-info.disabled.focus,
561  .btn-info[disabled].focus,
562  fieldset[disabled] .btn-info.focus {
563  background-color: #5bc0de;
564  border-color: #46b8da;
565  }
566  .btn-info .badge {
567  color: #".$this->tplSettings['btn-info-background-color'].";
568  background-color: #".$this->tplSettings['btn-info-color'].";
569  }
570 
571  .btn-warning {
572  color: #".$this->tplSettings['btn-warning-color'].";
573  background-color: #".$this->tplSettings['btn-warning-background-color'].";
574  border-color: #".$this->tplSettings['btn-warning-border-color'].";
575  }
576  .btn-warning:focus,
577  .btn-warning.focus {
578  color: #".$this->tplSettings['btn-warning-color'].";
579  background-color: #".$this->tplSettings['btn-warning-focus-background-color'].";
580  border-color: #".$this->tplSettings['btn-warning-focus-border-color'].";
581  }
582  .btn-warning:hover {
583  color: #".$this->tplSettings['btn-warning-hover-color'].";
584  background-color: #".$this->tplSettings['btn-warning-hover-background-color'].";
585  border-color: #".$this->tplSettings['btn-warning-hover-border-color'].";
586  }
587  .btn-warning:active,
588  .btn-warning.active,
589  .open > .dropdown-toggle.btn-warning {
590  color: #".$this->tplSettings['btn-warning-color'].";
591  background-color: #".$this->tplSettings['btn-warning-focus-background-color'].";
592  border-color: #".$this->tplSettings['btn-warning-hover-border-color'].";
593  }
594  .btn-warning:active:hover,
595  .btn-warning.active:hover,
596  .open > .dropdown-toggle.btn-warning:hover,
597  .btn-warning:active:focus,
598  .btn-warning.active:focus,
599  .open > .dropdown-toggle.btn-warning:focus,
600  .btn-warning:active.focus,
601  .btn-warning.active.focus,
602  .open > .dropdown-toggle.btn-warning.focus {
603  color: #".$this->tplSettings['btn-warning-color'].";
604  background-color: #".$this->tplSettings['btn-warning-hover-border-color'].";
605  border-color: #".$this->tplSettings['btn-warning-focus-border-color'].";
606  }
607  .btn-warning:active,
608  .btn-warning.active,
609  .open > .dropdown-toggle.btn-warning {
610  background-image: none;
611  }
612  .btn-warning.disabled:hover,
613  .btn-warning[disabled]:hover,
614  fieldset[disabled] .btn-warning:hover,
615  .btn-warning.disabled:focus,
616  .btn-warning[disabled]:focus,
617  fieldset[disabled] .btn-warning:focus,
618  .btn-warning.disabled.focus,
619  .btn-warning[disabled].focus,
620  fieldset[disabled] .btn-warning.focus {
621  background-color: #f0ad4e;
622  border-color: #eea236;
623  }
624  .btn-warning .badge {
625  color: #".$this->tplSettings['btn-warning-background-color'].";
626  background-color: #".$this->tplSettings['btn-warning-color'].";
627  }
628 
629  .btn-danger {
630  color: #".$this->tplSettings['btn-danger-color'].";
631  background-color: #".$this->tplSettings['btn-danger-background-color'].";
632  border-color: #".$this->tplSettings['btn-danger-border-color'].";
633  }
634  .btn-danger:focus,
635  .btn-danger.focus {
636  color: #".$this->tplSettings['btn-danger-color'].";
637  background-color: #".$this->tplSettings['btn-danger-focus-background-color'].";
638  border-color: #".$this->tplSettings['btn-danger-focus-border-color'].";
639  }
640  .btn-danger:hover {
641  color: #".$this->tplSettings['btn-danger-hover-color'].";
642  background-color: #".$this->tplSettings['btn-danger-hover-background-color'].";
643  border-color: #".$this->tplSettings['btn-danger-hover-border-color'].";
644  }
645  .btn-danger:active,
646  .btn-danger.active,
647  .open > .dropdown-toggle.btn-danger {
648  color: #".$this->tplSettings['btn-danger-color'].";
649  background-color: #".$this->tplSettings['btn-danger-focus-background-color'].";
650  border-color: #".$this->tplSettings['btn-danger-hover-border-color'].";
651  }
652  .btn-danger:active:hover,
653  .btn-danger.active:hover,
654  .open > .dropdown-toggle.btn-danger:hover,
655  .btn-danger:active:focus,
656  .btn-danger.active:focus,
657  .open > .dropdown-toggle.btn-danger:focus,
658  .btn-danger:active.focus,
659  .btn-danger.active.focus,
660  .open > .dropdown-toggle.btn-danger.focus {
661  color: #".$this->tplSettings['btn-danger-color'].";
662  background-color: #".$this->tplSettings['btn-danger-hover-border-color'].";
663  border-color: #".$this->tplSettings['btn-danger-focus-border-color'].";
664  }
665  .btn-danger:active,
666  .btn-danger.active,
667  .open > .dropdown-toggle.btn-danger {
668  background-image: none;
669  }
670  .btn-danger.disabled:hover,
671  .btn-danger[disabled]:hover,
672  fieldset[disabled] .btn-danger:hover,
673  .btn-danger.disabled:focus,
674  .btn-danger[disabled]:focus,
675  fieldset[disabled] .btn-danger:focus,
676  .btn-danger.disabled.focus,
677  .btn-danger[disabled].focus,
678  fieldset[disabled] .btn-danger.focus {
679  background-color: #d9534f;
680  border-color: #d43f3a;
681  }
682  .btn-danger .badge {
683  color: #".$this->tplSettings['btn-danger-background-color'].";
684  background-color: #".$this->tplSettings['btn-danger-color'].";
685  }";

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

◆ bs4_CardsCss()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::bs4_CardsCss ( )

Bootstrap 4: CARDS Component CSS Code.

add bootstrap 4 cards component to this css code string

Definition at line 55 of file bootstrap4.php.

57  {
58  // cards css code
59  $this->cssCode .= "
60  /* CARDS */
61  .card {
62  position: relative;
63  display: -ms-flexbox;
64  display: flex;
65  -ms-flex-direction: column;
66  flex-direction: column;
67  min-width: 0;
68  word-wrap: break-word;
69  background-color: #" . $this->tplSettings['card-bgcolor'] . ";
70  background-clip: border-box;
71  border: ".$this->tplSettings['card-border']." #".$this->tplSettings['card-bordercolor'].";
72  border-radius: ".$this->tplSettings['card-border-radius'].";
73  }
74 
75  .card > hr {
76  margin-right: 0;
77  margin-left: 0;
78  }
79 
80  .card > .list-group:first-child .list-group-item:first-child {
81  border-top-left-radius: ".$this->tplSettings['card-border-radius'].";
82  border-top-right-radius: ".$this->tplSettings['card-border-radius'].";
83  }
84 
85  .card > .list-group:last-child .list-group-item:last-child {
86  border-bottom-right-radius: ".$this->tplSettings['card-border-radius'].";
87  border-bottom-left-radius: ".$this->tplSettings['card-border-radius'].";
88  }
89 
90  .card-body {
91  -ms-flex: 1 1 auto;
92  flex: 1 1 auto;
93  padding: ".$this->tplSettings['card-body-padding'].";
94  }
95 
96  .card-title {
97  margin-bottom: ".$this->tplSettings['card-title-margin-bottom'].";
98  }
99 
100  .card-subtitle {
101  margin-top: -0.375rem;
102  margin-bottom: 0;
103  }
104 
105  .card-text:last-child {
106  margin-bottom: 0;
107  }
108 
109  .card-link:hover {
110  text-decoration: ".$this->tplSettings['card-link-decoration'].";
111  }
112 
113  .card-link + .card-link {
114  margin-left: ".$this->tplSettings['card-link-margin-left'].";
115  }
116 
117  .card-header {
118  padding: ".$this->tplSettings['card-header-padding'].";
119  margin-bottom: 0;
120  background-color: #".$this->tplSettings['card-header-bgcolor'].";
121  border-bottom: ".$this->tplSettings['card-header-border-bottom']." #".$this->tplSettings['card-header-border-bottom-color'].";
122  }
123 
124  .card-header:first-child {
125  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
126  }
127 
128  .card-header + .list-group .list-group-item:first-child {
129  border-top: 0;
130  }
131 
132  .card-footer {
133  padding: ".$this->tplSettings['card-footer-padding'].";
134  background-color: #".$this->tplSettings['card-footer-bgcolor'].";
135  border-top: ".$this->tplSettings['card-footer-border-top']." #".$this->tplSettings['card-footer-border-top-color'].";
136  }
137 
138  .card-footer:last-child {
139  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
140  }
141 
142  .card-header-tabs {
143  margin-right: -0.625rem;
144  margin-bottom: -0.75rem;
145  margin-left: -0.625rem;
146  border-bottom: 0;
147  }
148 
149  .card-header-pills {
150  margin-right: -0.625rem;
151  margin-left: -0.625rem;
152  }
153 
154  .card-img-overlay {
155  position: absolute;
156  top: 0;
157  right: 0;
158  bottom: 0;
159  left: 0;
160  padding: 1.25rem;
161  }
162 
163  .card-img {
164  width: 100%;
165  border-radius: calc(0.25rem - 1px);
166  }
167 
168  .card-img-top {
169  width: 100%;
170  border-top-left-radius: calc(0.25rem - 1px);
171  border-top-right-radius: calc(0.25rem - 1px);
172  }
173 
174  .card-img-bottom {
175  width: 100%;
176  border-bottom-right-radius: calc(0.25rem - 1px);
177  border-bottom-left-radius: calc(0.25rem - 1px);
178  }
179 
180  .card-deck {
181  display: -ms-flexbox;
182  display: flex;
183  -ms-flex-direction: column;
184  flex-direction: column;
185  }
186 
187  .card-deck .card {
188  margin-bottom: 15px;
189  }
190 
191  @media (min-width: 576px) {
192  .card-deck {
193  -ms-flex-flow: row wrap;
194  flex-flow: row wrap;
195  margin-right: -15px;
196  margin-left: -15px;
197  }
198  .card-deck .card {
199  display: -ms-flexbox;
200  display: flex;
201  -ms-flex: 1 0 0%;
202  flex: 1 0 0%;
203  -ms-flex-direction: column;
204  flex-direction: column;
205  margin-right: 15px;
206  margin-bottom: 0;
207  margin-left: 15px;
208  }
209  }
210 
211  .card-group {
212  display: -ms-flexbox;
213  display: flex;
214  -ms-flex-direction: column;
215  flex-direction: column;
216  }
217 
218  .card-group > .card {
219  margin-bottom: 15px;
220  }
221 
222  @media (min-width: 576px) {
223  .card-group {
224  -ms-flex-flow: row wrap;
225  flex-flow: row wrap;
226  }
227  .card-group > .card {
228  -ms-flex: 1 0 0%;
229  flex: 1 0 0%;
230  margin-bottom: 0;
231  }
232  .card-group > .card + .card {
233  margin-left: 0;
234  border-left: 0;
235  }
236  .card-group > .card:first-child {
237  border-top-right-radius: 0;
238  border-bottom-right-radius: 0;
239  }
240  .card-group > .card:first-child .card-img-top,
241  .card-group > .card:first-child .card-header {
242  border-top-right-radius: 0;
243  }
244  .card-group > .card:first-child .card-img-bottom,
245  .card-group > .card:first-child .card-footer {
246  border-bottom-right-radius: 0;
247  }
248  .card-group > .card:last-child {
249  border-top-left-radius: 0;
250  border-bottom-left-radius: 0;
251  }
252  .card-group > .card:last-child .card-img-top,
253  .card-group > .card:last-child .card-header {
254  border-top-left-radius: 0;
255  }
256  .card-group > .card:last-child .card-img-bottom,
257  .card-group > .card:last-child .card-footer {
258  border-bottom-left-radius: 0;
259  }
260  .card-group > .card:only-child {
261  border-radius: 0.25rem;
262  }
263  .card-group > .card:only-child .card-img-top,
264  .card-group > .card:only-child .card-header {
265  border-top-left-radius: 0.25rem;
266  border-top-right-radius: 0.25rem;
267  }
268  .card-group > .card:only-child .card-img-bottom,
269  .card-group > .card:only-child .card-footer {
270  border-bottom-right-radius: 0.25rem;
271  border-bottom-left-radius: 0.25rem;
272  }
273  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) {
274  border-radius: 0;
275  }
276  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
277  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
278  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-header,
279  .card-group > .card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
280  border-radius: 0;
281  }
282  }
283 
284  .card-columns .card {
285  margin-bottom: 0.75rem;
286  }
287 
288  @media (min-width: 576px) {
289  .card-columns {
290  -webkit-column-count: 3;
291  -moz-column-count: 3;
292  column-count: 3;
293  -webkit-column-gap: 1.25rem;
294  -moz-column-gap: 1.25rem;
295  column-gap: 1.25rem;
296  orphans: 1;
297  widows: 1;
298  }
299  .card-columns .card {
300  display: inline-block;
301  width: 100%;
302  }
303  }
304  ";

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

◆ bs4_FormsCss()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::bs4_FormsCss ( )

Bootstrap 4: FORMS Component CSS Code.

add Bootstrap 4 forms component to this css code string

Definition at line 1081 of file bootstrap4.php.

1083  {
1084  $this->cssCode .= "
1085  /* FORMS */
1086  .form-control {
1087  display: ".$this->tplSettings['form-display'].";
1088  width: ".$this->tplSettings['form-width'].";
1089  height: ".$this->tplSettings['form-height'].";
1090  padding: ".$this->tplSettings['form-padding'].";
1091  font-size: ".$this->tplSettings['form-textSize'].";
1092  line-height: ".$this->tplSettings['form-lineHeight'].";
1093  color: #".$this->tplSettings['form-textColor'].";
1094  background-color: #".$this->tplSettings['form-bgcolor'].";
1095  background-image: none;
1096  border: ".$this->tplSettings['form-border'].";
1097  border-radius: ".$this->tplSettings['form-border-radius'].";
1098  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
1099  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
1100  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
1101  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
1102  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
1103  }
1104  .form-control:focus {
1105  border-color: #".$this->tplSettings['form-activeBorderColor'].";
1106  outline: 0;
1107  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
1108  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
1109  }
1110  .form-control::-moz-placeholder {
1111  color: #".$this->tplSettings['form-placeholderColor'].";
1112  opacity: 1;
1113  }
1114  .form-control:-ms-input-placeholder {
1115  color: #999;
1116  }
1117  .form-control::-webkit-input-placeholder {
1118  color: #999;
1119  }
1120  ";

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

◆ bs4_JumbotronCss()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::bs4_JumbotronCss ( )

Bootstrap 4: JUMBOTRON Component CSS Code.

add Bootstrap 4 jumbotron component to this css code string

Definition at line 690 of file bootstrap4.php.

692  {
693  $this->cssCode .= "
694  /* JUMBOTRON */
695  .jumbotron {
696  padding-top: ".$this->tplSettings['jumbotron-paddingTop'].";
697  padding-bottom: ".$this->tplSettings['jumbotron-paddingBottom'].";
698  margin-bottom: ".$this->tplSettings['jumbotron-marginBottom'].";
699  color: #".$this->tplSettings['jumbotron-fontColor'].";
700  background-color: #".$this->tplSettings['jumbotron-backgroundColor'].";
701  padding-right: ".$this->tplSettings['jumbotron-containerPaddingRight'].";
702  padding-left: ".$this->tplSettings['jumbotron-containerPaddingLeft'].";
703  border-radius: ".$this->tplSettings['jumbotron-borderRadius'].";
704  }
705  .jumbotron h1,
706  .jumbotron .h1 {
707  color: #".$this->tplSettings['jumbotron-h1Color'].";
708  }
709  .jumbotron p {
710  margin-bottom: ".$this->tplSettings['jumbotron-pMarginBottom'].";
711  font-size: ".$this->tplSettings['jumbotron-pFontSize'].";
712  font-weight: ".$this->tplSettings['jumbotron-pFontWeight'].";
713  }
714  .jumbotron > hr {
715  border-top-color: #".$this->tplSettings['jumbotron-hrColor'].";
716  }
717  .container .jumbotron,
718  .container-fluid .jumbotron {
719  padding-right: ".$this->tplSettings['jumbotron-containerPaddingRight'].";
720  padding-left: ".$this->tplSettings['jumbotron-containerPaddingLeft'].";
721  border-radius: ".$this->tplSettings['jumbotron-borderRadius'].";
722  }
723  .jumbotron .container {
724  max-width: ".$this->tplSettings['jumbotron-containerMaxWidth'].";
725  }
726  @media screen and (min-width: 768px) {
727  .jumbotron {
728  padding-top: 48px;
729  padding-bottom: 48px;
730  }
731  .container .jumbotron,
732  .container-fluid .jumbotron {
733  padding-right: ".$this->tplSettings['jumbotron-fluidPaddingRight'].";
734  padding-left: ".$this->tplSettings['jumbotron-fluidPaddingLeft'].";
735  }
736  .jumbotron h1,
737  .jumbotron .h1 {
738  font-size: ".$this->tplSettings['jumbotron-h1FontSize'].";
739  }
740  }
741  ";

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

◆ bs4_ListGroupCss()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::bs4_ListGroupCss ( )

Bootstrap 4: LIST GROUP Component CSS Code.

add Bootstrap 4 list group component to this css code string

Definition at line 747 of file bootstrap4.php.

749  {
750  // list group css code
751  $this->cssCode .= "
752  /* LIST GROUP */
753  .list-group {
754  display: -ms-flexbox;
755  display: flex;
756  -ms-flex-direction: column;
757  flex-direction: column;
758  padding-left: ".$this->tplSettings['listgroup-paddingLeft'].";
759  margin-bottom: ".$this->tplSettings['listgroup-marginBottom'].";
760  color: #".$this->tplSettings['listgroup-fontColor'].";
761  }
762 
763  .list-group-item-action {
764  width: 100%;
765  color: #".$this->tplSettings['listgroup-fontColor'].";
766  text-align: inherit;
767  }
768 
769  .list-group-item-action:hover, .list-group-item-action:focus {
770  color: #".$this->tplSettings['listgroup-fontColor'].";
771  text-decoration: none;
772  background-color: #f8f9fa;
773  }
774 
775  .list-group-item-action:active {
776  color: #212529;
777  background-color: #e9ecef;
778  }
779 
780  .list-group-item {
781  position: ".$this->tplSettings['listgroup-itemPosition'].";
782  display: ".$this->tplSettings['listgroup-itemDisplay'].";
783  padding: ".$this->tplSettings['listgroup-itemPadding'].";
784  margin-bottom: -1px;
785  background-color: #".$this->tplSettings['background-listgroup'].";
786  border: ".$this->tplSettings['listgroup-itemBorder'].";
787  }
788 
789  .list-group-item:first-child {
790  border-top-left-radius: ".$this->tplSettings['listgroup-firstChild-topLeft-radius'].";
791  border-top-right-radius: ".$this->tplSettings['listgroup-firstChild-topRight-radius'].";
792  }
793 
794  .list-group-item:last-child {
795  margin-bottom: 0;
796  border-bottom-right-radius: ".$this->tplSettings['listgroup-lastChild-bottomRight-radius'].";
797  border-bottom-left-radius: ".$this->tplSettings['listgroup-lastChild-bottomLeft-radius'].";
798  }
799 
800  .list-group-item:hover, .list-group-item:focus {
801  z-index: 1;
802  text-decoration: none;
803  }
804 
805  .list-group-item.disabled, .list-group-item:disabled {
806  color: #6c757d;
807  background-color: #fff;
808  }
809 
810  .list-group-item.active {
811  z-index: 2;
812  color: #".$this->tplSettings['listgroup-itemActiveColor'].";
813  background-color: #".$this->tplSettings['listgroup-itemActiveBackgroundColor'].";
814  border-color: #".$this->tplSettings['listgroup-itemActiveBorderColor'].";
815  }";
816 
817  /*
818 
819  .list-group-flush .list-group-item {
820  border-right: 0;
821  border-left: 0;
822  border-radius: 0;
823  }
824 
825  .list-group-flush:first-child .list-group-item:first-child {
826  border-top: 0;
827  }
828 
829  .list-group-flush:last-child .list-group-item:last-child {
830  border-bottom: 0;
831  }
832 
833  .list-group-item-primary {
834  color: #004085;
835  background-color: #b8daff;
836  }
837 
838  .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
839  color: #004085;
840  background-color: #9fcdff;
841  }
842 
843  .list-group-item-primary.list-group-item-action.active {
844  color: #fff;
845  background-color: #004085;
846  border-color: #004085;
847  }
848 
849  .list-group-item-secondary {
850  color: #383d41;
851  background-color: #d6d8db;
852  }
853 
854  .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
855  color: #383d41;
856  background-color: #c8cbcf;
857  }
858 
859  .list-group-item-secondary.list-group-item-action.active {
860  color: #fff;
861  background-color: #383d41;
862  border-color: #383d41;
863  }
864 
865  .list-group-item-success {
866  color: #155724;
867  background-color: #c3e6cb;
868  }
869 
870  .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
871  color: #155724;
872  background-color: #b1dfbb;
873  }
874 
875  .list-group-item-success.list-group-item-action.active {
876  color: #fff;
877  background-color: #155724;
878  border-color: #155724;
879  }
880 
881  .list-group-item-info {
882  color: #0c5460;
883  background-color: #bee5eb;
884  }
885 
886  .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
887  color: #0c5460;
888  background-color: #abdde5;
889  }
890 
891  .list-group-item-info.list-group-item-action.active {
892  color: #fff;
893  background-color: #0c5460;
894  border-color: #0c5460;
895  }
896 
897  .list-group-item-warning {
898  color: #856404;
899  background-color: #ffeeba;
900  }
901 
902  .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
903  color: #856404;
904  background-color: #ffe8a1;
905  }
906 
907  .list-group-item-warning.list-group-item-action.active {
908  color: #fff;
909  background-color: #856404;
910  border-color: #856404;
911  }
912 
913  .list-group-item-danger {
914  color: #721c24;
915  background-color: #f5c6cb;
916  }
917 
918  .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
919  color: #721c24;
920  background-color: #f1b0b7;
921  }
922 
923  .list-group-item-danger.list-group-item-action.active {
924  color: #fff;
925  background-color: #721c24;
926  border-color: #721c24;
927  }
928 
929  .list-group-item-light {
930  color: #818182;
931  background-color: #fdfdfe;
932  }
933 
934  .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
935  color: #818182;
936  background-color: #ececf6;
937  }
938 
939  .list-group-item-light.list-group-item-action.active {
940  color: #fff;
941  background-color: #818182;
942  border-color: #818182;
943  }
944 
945  .list-group-item-dark {
946  color: #1b1e21;
947  background-color: #c6c8ca;
948  }
949 
950  .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
951  color: #1b1e21;
952  background-color: #b9bbbe;
953  }
954 
955  .list-group-item-dark.list-group-item-action.active {
956  color: #fff;
957  background-color: #1b1e21;
958  border-color: #1b1e21;
959  } */
960 

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

◆ bs4_navbarCss()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::bs4_navbarCss ( )

Bootstrap 4 Navbar CSS Code.

add Bootstrap 4 navbar component to this css code string

Definition at line 966 of file bootstrap4.php.

968  {
969  $this->cssCode .= "
970 
971  .navbar {
972  border-style: ".$this->tplSettings['navbar-borderstyle'].";
973  border-width: ".$this->tplSettings['navbar-bordersize'].";
974  border-color: #".$this->tplSettings['border-menubgcolor'].";
975  text-shadow: ".$this->tplSettings['globaltext-fontshadowsize']." #".$this->tplSettings['fontshadow-menucolor'].";
976  }
977 
978  .navbar-bg-custom {
979  background-color:#".$this->tplSettings['default-menubgcolor'].";
980  }
981 
982  .navbar-toggler-custom {
983  color:#".$this->tplSettings['iconbar-menubgcolor'].";
984  }
985 
986  .navbar .navbar-light {
987  color:#".$this->tplSettings['font-menucolor'].";
988  border-color: #".$this->tplSettings['border-menubgcolor'].";
989  margin-bottom: ".$this->tplSettings['navbar-marginBottom'].";
990  }
991 
992  .dropdown-menu {
993  background-color: #".$this->tplSettings['background-menudropdowncolor'].";
994  }
995 
996  .navbar-brand {
997  color: #".$this->tplSettings['brand-menucolor'].";
998  text-shadow: ".$this->tplSettings['globaltext-fontshadowsize']." #".$this->tplSettings['fontshadow-menucolor'].";
999  }
1000 
1001  .navbar-brand:hover, .navbar-brand:focus {
1002  text-decoration: none;
1003  }
1004 
1005  .navbar-light .navbar-brand {
1006  color: #".$this->tplSettings['brand-menucolor'].";
1007  }
1008 
1009  .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
1010  color: #".$this->tplSettings['brandhover-menucolor'].";
1011  }
1012 
1013  .navbar-light .navbar-nav .nav-link {
1014  color: #".$this->tplSettings['font-menucolor'].";
1015  }
1016 
1017  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
1018  color: #".$this->tplSettings['fonthover-menucolor'].";
1019  }
1020 
1021  .navbar-light .navbar-nav .nav-link.disabled {
1022  color: #".$this->tplSettings['fontdisabled-menucolor'].";
1023  }
1024 
1025  .navbar-light .navbar-nav .show > .nav-link,
1026  .navbar-light .navbar-nav .active > .nav-link,
1027  .navbar-light .navbar-nav .nav-link.show,
1028  .navbar-light .navbar-nav .nav-link.active {
1029  color: #".$this->tplSettings['fontactive-menucolor'].";
1030  }
1031 
1032  .custom-toggler.navbar-toggler {
1033  border-color:#".$this->tplSettings['toggle-menubgcolor'].";
1034  background-color:#".$this->tplSettings['toggle-menu-bordercolor'].";
1035  }";
1036 
1037 // to avoid encoding errors, the icon bars will be held in this variable:
1038 $svg = "data:image/svg+xml;charset=utf8,%3Csvg%20viewBox='0 0 30 30'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20stroke='%23".$this->tplSettings['iconbar-menubgcolor']."'%20stroke-width='2'%20stroke-linecap='round'%20stroke-miterlimit='10'%20d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E";
1039 
1040  // css goes on with custom toggle icon
1041  $this->cssCode .= "
1042  .navbar-light .custom-toggler .navbar-toggler-icon {
1043  background-image: url(\"".$svg."\");
1044  }";
1045 
1046  // check, if navbar brand should be shown
1047  if ($this->tplSettings['navbar-brand'] == "0")
1048  { // if not, set display to none
1049  $this->cssCode .= ".navbar-brand { display:none; }";
1050  }
1051 
1052  // check, if vertical divider should be shown
1053  if ($this->tplSettings['navbar-vertical-divider'] == 1)
1054  { // css markup for v divider
1055  $this->cssCode .= ".navbar-nav > li {border-right: 1px solid #ebebeb;}
1056  .navbar-nav {border-left: 1px solid #ebebeb;}";
1057  }
1058 
1059  // check, if navbar should be sticky
1060  if ($this->tplSettings['navbar-sticky'] == "1")
1061  { // set sticky css tags
1062  $this->cssCode .="
1063  .sticky {
1064  position: fixed;
1065  top: 0;
1066  width: 100%;
1067  z-index: 9998;
1068  }
1069 
1070  .sticky + .main {
1071  padding-top: 120px;
1072  }
1073  ";
1074  }
1075 

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

◆ init()

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::init ( )

Call all the methods to set bootstrap 4 custom css and return it as string.

Returns
string|null

Reimplemented from YAWK\FRAMEWORK\cssFramework.

Definition at line 24 of file bootstrap4.php.

25  : ?string
26  {
27  // set css tags for Bootstrap 4
28  $this->bs4_CardsCss();
29  // bootstrap 4 buttons
30  $this->bs4_ButtonsCss();
31  // bootstrap 4 jumbotron
32  $this->bs4_JumbotronCss();
33  // bootstrap 4 list groups
34  $this->bs4_ListGroupCss();
35  // bootstrap 4 navbar (globalmenu)
36  $this->bs4_navbarCss();
37  // $this->bs4_globalmenu();
38  // bootstrap 4 form settings
39  $this->bs4_FormsCss();
40 
41  // check if css code is set, not empty and correct type
42  if (isset($this->cssCode) && (is_string($this->cssCode) && (!empty($this->cssCode))))
43  { // all good, return all generated code
44  return $this->cssCode;
45  }
46  else
47  { // css code is not set properly
48  return null;
49  }
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_ButtonsCss
bs4_ButtonsCss()
Bootstrap 4: BUTTONS Component CSS Code.
Definition: bootstrap4.php:310
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_navbarCss
bs4_navbarCss()
Bootstrap 4 Navbar CSS Code.
Definition: bootstrap4.php:966
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_CardsCss
bs4_CardsCss()
Bootstrap 4: CARDS Component CSS Code.
Definition: bootstrap4.php:55
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_FormsCss
bs4_FormsCss()
Bootstrap 4: FORMS Component CSS Code.
Definition: bootstrap4.php:1081
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_ListGroupCss
bs4_ListGroupCss()
Bootstrap 4: LIST GROUP Component CSS Code.
Definition: bootstrap4.php:747
YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_JumbotronCss
bs4_JumbotronCss()
Bootstrap 4: JUMBOTRON Component CSS Code.
Definition: bootstrap4.php:690

References YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\$cssCode, YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_ButtonsCss(), YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_CardsCss(), YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_FormsCss(), YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_JumbotronCss(), YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_ListGroupCss(), and YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\bs4_navbarCss().

Member Data Documentation

◆ $cssCode

YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4::$cssCode = ''
Parameters
stringall the css as string

Definition at line 18 of file bootstrap4.php.

Referenced by YAWK\FRAMEWORK\BOOTSTRAP4\bootstrap4\init().

The documentation for this class was generated from the following file: