Skip to content

Commit 5365340

Browse files
lonnieezelllonnieezell
committed
Merge branch 'develop' of github.com:codeigniter4/CodeIgniter4 into develop
2 parents 9393af4 + 20b3d78 commit 5365340

11 files changed

Lines changed: 1369 additions & 377 deletions

File tree

‎admin/css/debug-toolbar/_graphic-charter.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// COLORS
2+
// ========================================================================== */
3+
4+
// Themes
5+
$t-dark: #252525;
6+
$t-light: #FFFFFF;
7+
8+
// Glossy colors
9+
$g-blue: #5BC0DE;
10+
$g-gray: #434343;
11+
$g-green: #9ACE25;
12+
$g-orange: #DD8615;
13+
$g-red: #DD4814;
14+
15+
// Matt colors
16+
$m-blue: #D8EAF0;
17+
$m-gray: #DFDFDF;
18+
$m-green: #DFF0D8;
19+
$m-orange: #FDC894;
20+
$m-red: #EF9090;

‎admin/css/debug-toolbar/_mixins.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// MIXINS
2+
// ========================================================================== */
3+
4+
@mixin border-radius($radius) {
5+
border-radius: $radius;
6+
-moz-border-radius: $radius;
7+
-webkit-border-radius: $radius;
8+
}
9+
@mixin box-shadow($left, $top, $radius, $color) {
10+
box-shadow: $left $top $radius $color;
11+
-moz-box-shadow: $left $top $radius $color;
12+
-webkit-box-shadow: $left $top $radius $color;
13+
}

‎admin/css/debug-toolbar/_settings.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// FONT
2+
// ========================================================================== */
3+
4+
// Standard "sans-serif" font stack used by Github
5+
$base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
6+
7+
// Default size, all other styles are based on this size
8+
$base-size: 16px;

‎admin/css/debug-toolbar/_theme-dark.scss‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
// IMPORTS
2+
// ========================================================================== */
3+
4+
// The "box-shadow" mixin uses colors
5+
@import '_mixins';
6+
7+
// Graphic charter
8+
@import '_graphic-charter';
9+
10+
11+
// DEBUG ICON
12+
// ========================================================================== */
13+
14+
#debug-icon {
15+
background-color: $t-dark;
16+
@include box-shadow(0, 0, 4px, $m-gray);
17+
a:active, a:link, a:visited {
18+
color: $g-orange;
19+
}
20+
}
21+
22+
23+
// DEBUG BAR
24+
// ========================================================================== */
25+
26+
#debug-bar {
27+
background-color: $t-dark;
28+
color: $m-gray;
29+
30+
// Reset to prevent conflict with other CSS files
31+
h1,
32+
h2,
33+
h3,
34+
p,
35+
a,
36+
button,
37+
table,
38+
thead,
39+
tr,
40+
td,
41+
button,
42+
.toolbar {
43+
background-color: transparent;
44+
color: $m-gray;
45+
}
46+
47+
// Buttons
48+
button {
49+
background-color: $t-dark;
50+
}
51+
52+
// Tables
53+
table {
54+
strong {
55+
color: $m-orange;
56+
}
57+
tbody tr {
58+
&:hover {
59+
background-color: $g-gray;
60+
}
61+
&.current {
62+
background-color: $m-orange;
63+
td {
64+
color: $t-dark;
65+
}
66+
&:hover td {
67+
background-color: $g-red;
68+
color: $t-light;
69+
}
70+
}
71+
}
72+
}
73+
74+
// The toolbar
75+
.toolbar {
76+
background-color: $g-gray;
77+
@include box-shadow(0, 0, 4px, $g-gray);
78+
img {
79+
filter: brightness(0) invert(1);
80+
}
81+
}
82+
83+
// Fixed top
84+
&.fixed-top {
85+
& .toolbar {
86+
@include box-shadow(0, 0, 4px, $g-gray);
87+
}
88+
.tab {
89+
@include box-shadow(0, 1px, 4px, $g-gray);
90+
}
91+
}
92+
93+
// "Muted" elements
94+
.muted {
95+
color: $m-gray;
96+
td {
97+
color: $g-gray;
98+
}
99+
&:hover td {
100+
color: $m-gray;
101+
}
102+
}
103+
104+
// The toolbar preferences
105+
#toolbar-position,
106+
#toolbar-theme, {
107+
filter: brightness(0) invert(0.6);
108+
}
109+
110+
// The toolbar menus
111+
.ci-label {
112+
&.active {
113+
background-color: $t-dark;
114+
}
115+
&:hover {
116+
background-color: $t-dark;
117+
}
118+
.badge {
119+
background-color: $g-blue;
120+
color: $m-gray;
121+
}
122+
}
123+
124+
// The tabs container
125+
.tab {
126+
background-color: $t-dark;
127+
@include box-shadow(0, -1px, 4px, $g-gray);
128+
}
129+
130+
// The "Timeline" tab
131+
.timeline {
132+
th,
133+
td {
134+
border-color: $g-gray;
135+
}
136+
.timer {
137+
background-color: $g-orange;
138+
}
139+
}
140+
}
141+
142+
143+
// DEBUG VIEW
144+
// ========================================================================== */
145+
146+
.debug-view.show-view {
147+
border-color: $g-orange;
148+
}
149+
.debug-view-path {
150+
background-color: $m-orange;
151+
color: $g-gray;
152+
}

‎admin/css/debug-toolbar/_theme-light.scss‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
// IMPORTS
2+
// ========================================================================== */
3+
4+
// The "box-shadow" mixin uses colors
5+
@import '_mixins';
6+
7+
// Graphic charter
8+
@import '_graphic-charter';
9+
10+
11+
// DEBUG ICON
12+
// ========================================================================== */
13+
14+
#debug-icon {
15+
background-color: $t-light;
16+
@include box-shadow(0, 0, 4px, $m-gray);
17+
a:active, a:link, a:visited {
18+
color: $g-orange;
19+
}
20+
}
21+
22+
23+
// DEBUG BAR
24+
// ========================================================================== */
25+
26+
#debug-bar {
27+
background-color: $t-light;
28+
color: $g-gray;
29+
30+
// Reset to prevent conflict with other CSS files */
31+
h1,
32+
h2,
33+
h3,
34+
p,
35+
a,
36+
button,
37+
table,
38+
thead,
39+
tr,
40+
td,
41+
button,
42+
.toolbar {
43+
background-color: transparent;
44+
color: $g-gray;
45+
}
46+
47+
// Buttons
48+
button {
49+
background-color: $t-light;
50+
}
51+
52+
// Tables
53+
table {
54+
strong {
55+
color: $m-orange;
56+
}
57+
tbody tr {
58+
&:hover {
59+
background-color: $m-gray;
60+
}
61+
&.current {
62+
background-color: $m-orange;
63+
&:hover td {
64+
background-color: $g-red;
65+
color: $t-light;
66+
}
67+
}
68+
}
69+
}
70+
71+
// The toolbar
72+
.toolbar {
73+
background-color: $t-light;
74+
@include box-shadow(0, 0, 4px, $m-gray);
75+
img {
76+
filter: brightness(0) invert(0.4);
77+
}
78+
}
79+
80+
// Fixed top
81+
&.fixed-top {
82+
& .toolbar {
83+
@include box-shadow(0, 0, 4px, $m-gray);
84+
}
85+
.tab {
86+
@include box-shadow(0, 1px, 4px, $m-gray);
87+
}
88+
}
89+
90+
// "Muted" elements
91+
.muted {
92+
color: $g-gray;
93+
td {
94+
color: $m-gray;
95+
}
96+
&:hover td {
97+
color: $g-gray;
98+
}
99+
}
100+
101+
// The toolbar preferences
102+
#toolbar-position,
103+
#toolbar-theme, {
104+
filter: brightness(0) invert(0.6);
105+
}
106+
107+
// The toolbar menus
108+
.ci-label {
109+
&.active {
110+
background-color: $m-gray;
111+
}
112+
&:hover {
113+
background-color: $m-gray;
114+
}
115+
.badge {
116+
background-color: $g-blue;
117+
color: $t-light;
118+
}
119+
}
120+
121+
// The tabs container
122+
.tab {
123+
background-color: $t-light;
124+
@include box-shadow(0, -1px, 4px, $m-gray);
125+
}
126+
127+
// The "Timeline" tab
128+
.timeline {
129+
th,
130+
td {
131+
border-color: $m-gray;
132+
}
133+
.timer {
134+
background-color: $g-orange;
135+
}
136+
}
137+
}
138+
139+
140+
// DEBUG VIEW
141+
// ========================================================================== */
142+
143+
.debug-view.show-view {
144+
border-color: $g-orange;
145+
}
146+
.debug-view-path {
147+
background-color: $m-orange;
148+
color: $g-gray;
149+
}

0 commit comments

Comments
 (0)