Skip to content

Commit fd4b544

Browse files
author
Joe Johnston
committed
Add SCSS files
1 parent 6e7533b commit fd4b544

30 files changed

+7785
-0
lines changed

‎css/flat-ui.scss.css

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

‎index.scss.html

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

‎scss/config.scss

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
//
2+
// Variables
3+
// --------------------------------------------------
4+
5+
// Global values
6+
// --------------------------------------------------
7+
8+
//
9+
// Color Swatches
10+
// --------------------------------------------------
11+
$turquoise: #1abc9c;
12+
$green-sea: #16a085;
13+
14+
$emerald: #2ecc71;
15+
$nephritis: #27ae60;
16+
17+
$peter-river: #3498db;
18+
$belize-hole: #2980b9;
19+
20+
$amethyst: #9b59b6;
21+
$wisteria: #8e44ad;
22+
23+
$wet-asphalt: #34495e;
24+
$midnight-blue: #2c3e50;
25+
26+
$sun-flower: #f1c40f;
27+
$orange: #f39c12;
28+
29+
$carrot: #e67e22;
30+
$pumpkin: #d35400;
31+
32+
$alizarin: #e74c3c;
33+
$pomegranate: #c0392b;
34+
35+
$clouds: #ecf0f1;
36+
$silver: #bdc3c7;
37+
38+
$concrete: #95a5a6;
39+
$asbestos: #7f8c8d;
40+
41+
// Main Colors
42+
// -------------------------
43+
$base: $wet-asphalt;
44+
$firm: $turquoise;
45+
46+
$gray: $concrete;
47+
$lightgray: $silver;
48+
$inverse: white;
49+
50+
$success: $emerald;
51+
$danger: $alizarin;
52+
$warning: $sun-flower;
53+
$info: $peter-river;
54+
55+
$link-color: $green-sea;
56+
$link-hover-color: $turquoise;
57+
58+
59+
// Typography
60+
// -------------------------
61+
$base-font-family: "Lato", sans-serif;
62+
$base-font-size: 14px;
63+
$base-line-height: 1.231;
64+
65+
$h1: $base-font-size * 4.429; /* 62px */
66+
$h2: $base-font-size * 3.714; /* 52px */
67+
$h3: $base-font-size * 2.857; /* 40px */
68+
$h4: $base-font-size * 2.071; /* 29px */
69+
$h5: $base-font-size * 2; /* 28px */
70+
$h6: $base-font-size * 1.714; /* 24px */
71+
72+
// Icons
73+
$icon-normal: 16px;
74+
$icon-medium: 18px;
75+
$icon-large: 32px;
76+
77+
// Inputs
78+
// -------------------------
79+
$input-border-radius: 6px;
80+
81+
// Pagination
82+
// -------------------------
83+
$pagination-color: mix($base, white, 20%);
84+
85+
// Pager
86+
// -------------------------
87+
$pager-padding: 9px 15px 10px;
88+
89+
// Buttons
90+
$button-text: $inverse;
91+
$button-hover: mix($lightgray, white, 80%);
92+
$button-active: mix($lightgray, black, 85%);
93+
$button-primary-hover: mix($firm, white, 80%);
94+
$button-primary-active: mix($firm, black, 85%);
95+
$button-info-hover: mix($info, white, 80%);
96+
$button-info-active: mix($info, black, 85%);
97+
$button-success-hover: mix($success, white, 80%);
98+
$button-success-active: mix($success, black, 85%);
99+
$button-danger-hover: mix($danger, white, 80%);
100+
$button-danger-active: mix($danger, black, 85%);
101+
$button-warning-hover: overlay($warning, darken(white, 37.5%));
102+
$button-warning-active: mix($warning, black, 85%);
103+
$button-inverse-hover: overlay($base, darken(white, 37.5%));
104+
$button-inverse-active: mix($base, black, 85%);
105+
106+
// Navbar
107+
// -------------------------
108+
$navbar-link-space: 20px;
109+
$navbar-sublink-space: 9px;
110+
111+
// Dropdown Menu
112+
// -------------------------
113+
$dropdown-background: mix($inverse, $base, 94%);
114+
115+
// Progress/slider
116+
// -------------------------
117+
$progress-height: 12px;
118+
119+
// Switch
120+
// -------------------------
121+
$switch-border-radius: 30px;
122+
$switch-width: 80px;
123+

‎scss/flat-ui.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Flat UI main stylesheet that aggregates all modules
2+
3+
// Loading custom fonts
4+
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
5+
@import "icon-font";
6+
7+
// Loading config with variables (changing them leads to changing a color scheme)
8+
@import "config";
9+
10+
// Utility mixins for greater good
11+
@import "mixins";
12+
13+
// Modules
14+
@import "modules/demo";
15+
@import "modules/type";
16+
@import "modules/buttons";
17+
@import "modules/caret";
18+
@import "modules/navbar";
19+
@import "modules/select";
20+
@import "modules/input";
21+
@import "modules/checkbox-and-radio";
22+
@import "modules/tagsinput";
23+
@import "modules/progress";
24+
@import "modules/ui-slider";
25+
@import "modules/pager";
26+
@import "modules/pagination";
27+
@import "modules/tooltip";
28+
@import "modules/dropdown";
29+
@import "modules/switch";
30+
@import "modules/share";
31+
@import "modules/palette";
32+
@import "modules/tile";
33+
@import "modules/todo";
34+
@import "modules/footer";
35+
@import "modules/video";
36+
@import "modules/login";
37+
38+
// Spaces
39+
@import "spaces";

‎scss/icon-font.scss

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@font-face {
2+
font-family: 'Flat-UI-Icons';
3+
src:url('../fonts/Flat-UI-Icons.eot');
4+
src:url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'),
5+
url('../fonts/Flat-UI-Icons.woff') format('woff'),
6+
url('../fonts/Flat-UI-Icons.ttf') format('truetype'),
7+
url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
8+
font-weight: normal;
9+
font-style: normal;
10+
}
11+
12+
/* Use the following CSS code if you want to use data attributes for inserting your icons */
13+
[data-icon]:before {
14+
font-family: 'Flat-UI-Icons';
15+
content: attr(data-icon);
16+
speak: none;
17+
font-weight: normal;
18+
font-variant: normal;
19+
text-transform: none;
20+
-webkit-font-smoothing: antialiased;
21+
}
22+
23+
/* Use the following CSS code if you want to have a class per icon */
24+
/*
25+
Instead of a list of all class selectors,
26+
you can use the generic selector below, but it's slower:
27+
[class*="fui-"] {
28+
*/
29+
.fui-arrow-right, .fui-arrow-left, .fui-cmd, .fui-check-inverted, .fui-heart, .fui-location, .fui-plus, .fui-check, .fui-cross, .fui-list, .fui-new, .fui-video, .fui-photo, .fui-volume, .fui-time, .fui-eye, .fui-chat, .fui-search, .fui-user, .fui-mail, .fui-lock, .fui-gear, .fui-radio-unchecked, .fui-radio-checked, .fui-checkbox-unchecked, .fui-checkbox-checked, .fui-calendar-solid, .fui-pause, .fui-play, .fui-check-inverted-2 {
30+
display: inline-block;
31+
font-family: 'Flat-UI-Icons';
32+
speak: none;
33+
font-style: normal;
34+
font-weight: normal;
35+
font-variant: normal;
36+
text-transform: none;
37+
-webkit-font-smoothing: antialiased;
38+
}
39+
.fui-arrow-right:before {
40+
content: "\e02c";
41+
}
42+
.fui-arrow-left:before {
43+
content: "\e02d";
44+
}
45+
.fui-cmd:before {
46+
content: "\e02f";
47+
}
48+
.fui-check-inverted:before {
49+
content: "\e006";
50+
}
51+
.fui-heart:before {
52+
content: "\e007";
53+
}
54+
.fui-location:before {
55+
content: "\e008";
56+
}
57+
.fui-plus:before {
58+
content: "\e009";
59+
}
60+
.fui-check:before {
61+
content: "\e00a";
62+
}
63+
.fui-cross:before {
64+
content: "\e00b";
65+
}
66+
.fui-list:before {
67+
content: "\e00c";
68+
}
69+
.fui-new:before {
70+
content: "\e00d";
71+
}
72+
.fui-video:before {
73+
content: "\e00e";
74+
}
75+
.fui-photo:before {
76+
content: "\e00f";
77+
}
78+
.fui-volume:before {
79+
content: "\e010";
80+
}
81+
.fui-time:before {
82+
content: "\e011";
83+
}
84+
.fui-eye:before {
85+
content: "\e012";
86+
}
87+
.fui-chat:before {
88+
content: "\e013";
89+
}
90+
.fui-search:before {
91+
content: "\e01c";
92+
}
93+
.fui-user:before {
94+
content: "\e01d";
95+
}
96+
.fui-mail:before {
97+
content: "\e01e";
98+
}
99+
.fui-lock:before {
100+
content: "\e01f";
101+
}
102+
.fui-gear:before {
103+
content: "\e024";
104+
}
105+
.fui-radio-unchecked:before {
106+
content: "\e02b";
107+
}
108+
.fui-radio-checked:before {
109+
content: "\e032";
110+
}
111+
.fui-checkbox-unchecked:before {
112+
content: "\e033";
113+
}
114+
.fui-checkbox-checked:before {
115+
content: "\e034";
116+
}
117+
.fui-calendar-solid:before {
118+
content: "\e022";
119+
}
120+
.fui-pause:before {
121+
content: "\e03b";
122+
}
123+
.fui-play:before {
124+
content: "\e03c";
125+
}
126+
.fui-check-inverted-2:before {
127+
content: "\e000";
128+
}

0 commit comments

Comments
 (0)