Skip to content

Commit b50c930

Browse files
netaisllcnetaisllc
committed
Jqueryized ui skin
1 parent 4f980fa commit b50c930

21 files changed

+4289
-0
lines changed

‎ui/css/animate.css

Lines changed: 2809 additions & 0 deletions
Large diffs are not rendered by default.

‎ui/css/animate.min.css

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/css/app.css

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
/**
2+
* * JSON-to-GO
3+
* =============================================================================
4+
*
5+
*/
6+
/*
7+
* Basic UI ======================================================================
8+
*
9+
*/
10+
html,
11+
body {
12+
height: 100%;
13+
width: 100%;
14+
background-color: #14204d;
15+
background: #14204d;
16+
/* Old browsers */
17+
/* FF3.6+ */
18+
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #14204d), color-stop(100%, #3cc8f4));
19+
/* Chrome,Safari4+ */
20+
background: -webkit-linear-gradient(45deg, #14204d 0%, #3cc8f4 100%);
21+
/* Chrome10+,Safari5.1+ */
22+
/* Opera 11.10+ */
23+
/* IE10+ */
24+
background: linear-gradient(45deg, #14204d 0%, #3cc8f4 100%);
25+
/* W3C */
26+
}
27+
input,
28+
button,
29+
textarea,
30+
select {
31+
border-radius: none;
32+
}
33+
/**
34+
* Form elements ============================================================
35+
*/
36+
.ui.button:hover {
37+
cursor: pointer;
38+
}
39+
.ui.button,
40+
.ui.input,
41+
.ui.select,
42+
.ui.textarea {
43+
border-radius: none;
44+
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
45+
font-size: 14px;
46+
height: 2em;
47+
line-height: 1em;
48+
margin: 0 0 6px 0;
49+
padding: 4px 8px;
50+
width: 75%;
51+
}
52+
.ui.textarea {
53+
background-color: #f3f3f3;
54+
border: none;
55+
height: 350px;
56+
margin-top: 6px;
57+
width: 100%;
58+
}
59+
.ui.inline.button,
60+
.ui.inline.input,
61+
.ui.inline.select {
62+
float: left;
63+
}
64+
.ui.inline.button {
65+
float: right;
66+
}
67+
.ui.button.medium,
68+
.ui.button.inline.medium,
69+
.ui.button.medium:hover,
70+
.ui.button.inline.medium:hover {
71+
background-color: #AAAAAA;
72+
border: 1px solid #AAAAAA;
73+
color: #999999;
74+
cursor: default;
75+
width: 23%;
76+
}
77+
.ui.button.medium.convert,
78+
.ui.button.inline.medium.convert {
79+
background-color: #5fa80e;
80+
border: 1px solid #5fa80e;
81+
color: #ffffff;
82+
}
83+
.ui.button.medium.convert:hover,
84+
.ui.button.inline.medium.convert:hover {
85+
background-color: #008000;
86+
border: 1px solid #008000;
87+
cursor: pointer;
88+
}
89+
.ui.inline.button.reset {
90+
background-color: #444444;
91+
border: 1px solid #333333;
92+
color: #999999;
93+
width: 100%;
94+
}
95+
.ui.inline.button.reset:hover {
96+
background-color: #111111;
97+
border: 1px solid #000000;
98+
color: #ffffff;
99+
cursor: pointer;
100+
width: 100%;
101+
}
102+
.ui.input:focus,
103+
.ui.select:focus,
104+
.ui.textarea:focus {
105+
background-color: LemonChiffon;
106+
}
107+
.ui.json.go-type,
108+
.ui.json.code {
109+
height: auto;
110+
width: auto;
111+
}
112+
.more {
113+
margin: 10px 0;
114+
}
115+
.read-more {
116+
background-color: #87CEEB;
117+
color: #333333;
118+
cursor: pointer;
119+
font-weight: 300;
120+
margin-top: 3px;
121+
padding: 4px 8px;
122+
text-decoration: none;
123+
}
124+
.read-more:hover {
125+
background-color: #71c5e7;
126+
color: #000000;
127+
}
128+
.original {
129+
color: #e3f988;
130+
font-weight: 400;
131+
}
132+
/**
133+
* Animations ===============================================================
134+
*/
135+
.ui.json.code.ng-show-add {
136+
-webkit-animation: fadeIn 1s;
137+
animation: fadeIn 1s;
138+
}
139+
.ui.golang.code.ng-show-add {
140+
-webkit-animation: fadeIn 1s;
141+
animation: fadeIn 1s;
142+
}
143+
.ui.json.code.ng-hide-add {
144+
-webkit-animation: fadeOut 1s;
145+
animation: fadeOut 1s;
146+
}
147+
.ui.golang.code.ng-hide-add {
148+
-webkit-animation: fadeOut 1s;
149+
animation: fadeOut 1s;
150+
}
151+
.csstransitions .fadeIn.ng-enter,
152+
.csstransitions .fadeIn.ng-leave,
153+
.csstransitions .slideLeft.ng-enter,
154+
.csstransitions .slideLeft.ng-leave,
155+
.csstransitions .slideRight.ng-enter,
156+
.csstransitions .slideRight.ng-leave {
157+
-webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
158+
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
159+
/* easeOutExpo */
160+
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
161+
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
162+
/* easeOutExpo */
163+
}
164+
.csstransitions .fadeIn.ng-enter.ng-enter-active {
165+
-webkit-animation: fadeIn 1s;
166+
animation: fadeIn 1s;
167+
}
168+
.csstransitions .fadeIn.ng-leave.ng-leave-active {
169+
-webkit-animation: fadeOut 1s;
170+
animation: fadeOut 1s;
171+
}
172+
.csstransitions .slideLeft.ng-enter {
173+
left: 100%;
174+
}
175+
.csstransitions .slideLeft.ng-enter.ng-enter-active {
176+
left: 0;
177+
}
178+
.csstransitions .slideLeft.ng-leave.ng-leave-active {
179+
left: -100%;
180+
}
181+
.csstransitions .slideRight.ng-enter {
182+
left: -100%;
183+
}
184+
.csstransitions .slideRight.ng-enter.ng-enter-active {
185+
left: 0;
186+
}
187+
.csstransitions .slideRight.ng-leave.ng-leave-active {
188+
left: 100%;
189+
}

‎ui/css/app.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/css/gridism.css

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/*
2+
* Gridism
3+
* A simple, responsive, and handy CSS grid by @cobyism
4+
* https://github.com/cobyism/gridism
5+
*/
6+
7+
/* Preserve some sanity */
8+
9+
.grid,
10+
.unit {
11+
-webkit-box-sizing: border-box;
12+
box-sizing: border-box;
13+
}
14+
/* Set up some rules to govern the grid */
15+
16+
.grid {
17+
display: block;
18+
clear: both;
19+
}
20+
.grid .unit {
21+
float: left;
22+
width: 100%;
23+
padding: 10px;
24+
}
25+
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
26+
27+
.grid .unit:first-child {
28+
padding-left: 20px;
29+
}
30+
.grid .unit:last-child {
31+
padding-right: 20px;
32+
}
33+
/* Nested grids already have padding though, so let’s nuke it */
34+
35+
.unit .unit:first-child {
36+
padding-left: 0;
37+
}
38+
.unit .unit:last-child {
39+
padding-right: 0;
40+
}
41+
.unit .grid:first-child > .unit {
42+
padding-top: 0;
43+
}
44+
.unit .grid:last-child > .unit {
45+
padding-bottom: 0;
46+
}
47+
/* Let people nuke the gutters/padding completely in a couple of ways */
48+
49+
.no-gutters .unit,
50+
.unit.no-gutters {
51+
padding: 0 !important;
52+
}
53+
.no-left-gutters .unit,
54+
.unit.no-left-gutters {
55+
padding-left: 0 !important;
56+
padding-bottom: 0 !important;
57+
}
58+
.push.right {
59+
padding-left: 75px !important;
60+
}
61+
/* Wrapping at a maximum width is optional */
62+
63+
.wrap .grid,
64+
.grid.wrap {
65+
max-width: 978px;
66+
margin: 0 auto;
67+
}
68+
/* Width classes also have shorthand versions numbered as fractions
69+
* For example: for a grid unit 1/3 (one third) of the parent width,
70+
* simply apply class="w-1-3" to the element. */
71+
72+
.grid .whole,
73+
.grid .w-1-1 {
74+
width: 100%;
75+
}
76+
.grid .half,
77+
.grid .w-1-2 {
78+
width: 50%;
79+
}
80+
.grid .one-third,
81+
.grid .w-1-3 {
82+
width: 33.3332%;
83+
}
84+
.grid .two-thirds,
85+
.grid .w-2-3 {
86+
width: 66.6665%;
87+
}
88+
.grid .one-quarter,
89+
.grid .w-1-4 {
90+
width: 25%;
91+
}
92+
.grid .three-quarters,
93+
.grid .w-3-4 {
94+
width: 75%;
95+
}
96+
.grid .one-fifth,
97+
.grid .w-1-5 {
98+
width: 20%;
99+
}
100+
.grid .two-fifths,
101+
.grid .w-2-5 {
102+
width: 40%;
103+
}
104+
.grid .three-fifths,
105+
.grid .w-3-5 {
106+
width: 60%;
107+
}
108+
.grid .four-fifths,
109+
.grid .w-4-5 {
110+
width: 80%;
111+
}
112+
.grid .golden-small,
113+
.grid .w-g-s {
114+
width: 38.2716%;
115+
}
116+
/* Golden section: smaller piece */
117+
118+
.grid .golden-large,
119+
.grid .w-g-l {
120+
width: 61.7283%;
121+
}
122+
/* Golden section: larger piece */
123+
124+
.grid .one-sixth,
125+
.grid .w-1-6 {
126+
width: 16.66666666666667%;
127+
}
128+
.grid .two-sixths,
129+
.grid .w-2-6 {
130+
width: 33.33333333333332%;
131+
}
132+
.grid .three-sixths,
133+
.grid .w-3-6 {
134+
width: 50%;
135+
}
136+
.grid .four-sixths,
137+
.grid .w-4-6 {
138+
width: 66.666666666667%;
139+
}
140+
.grid .five-sixths,
141+
.grid .w-5-6 {
142+
width: 83.33333333333333%;
143+
}
144+
/* Clearfix after every .grid */
145+
146+
.grid {
147+
*zoom: 1;
148+
}
149+
.grid:before,
150+
.grid:after {
151+
display: table;
152+
content: "";
153+
line-height: 0;
154+
}
155+
.grid:after {
156+
clear: both;
157+
}
158+
/* Utility classes */
159+
160+
.align-center {
161+
text-align: center;
162+
}
163+
.align-left {
164+
text-align: left;
165+
}
166+
.align-right {
167+
text-align: right;
168+
}
169+
.pull-left {
170+
float: left;
171+
}
172+
.pull-right {
173+
float: right;
174+
}
175+
/* Responsive Stuff */
176+
177+
@media screen and (max-width: 568px) {
178+
/* Stack anything that isn’t full-width on smaller screens */
179+
180+
.grid .unit {
181+
width: 100% !important;
182+
padding-left: 20px;
183+
padding-right: 20px;
184+
}
185+
.unit .grid .unit {
186+
padding-left: 0px;
187+
padding-right: 0px;
188+
}
189+
/* Sometimes, you just want to be different on small screens */
190+
191+
.center-on-mobiles {
192+
text-align: center !important;
193+
}
194+
.hide-on-mobiles {
195+
display: none !important;
196+
}
197+
}
198+
/* Expand the wrap a bit further on larger screens */
199+
200+
@media screen and (min-width: 1180px) {
201+
.wider .grid {
202+
max-width: 1180px;
203+
margin: 0 auto;
204+
}
205+
}

0 commit comments

Comments
 (0)