Skip to content

Commit e5bb91d

Browse files
lory87lory87
committed
add icon task and styles
1 parent 17fc308 commit e5bb91d

17 files changed

+274
-4
lines changed

‎filer/private/sass/layout/_all.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// #LAYOUT#
22

3+
@import "iconography";
4+
@import "icons";
35
@import "old";
46
@import "main";
57
@import "modal";

‎filer/private/sass/layout/_drag-and-drop.scss

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,84 @@
55
&.dz-drag-hover {
66
border: solid 1px $color-primary !important;
77
}
8+
&.dz-started {
9+
.fileUpload {
10+
display: none;
11+
}
12+
}
13+
.dz-preview {
14+
min-height: auto;
15+
width: 100%;
16+
padding-bottom: 10px;
17+
margin-left: 0;
18+
margin-right: 0;
19+
margin-bottom: 0;
20+
border-bottom: solid 1px $gray-light;
21+
.dz-details {
22+
min-width: calc(100% - 80px);
23+
max-width: calc(100% - 80px);
24+
padding: 0;
25+
margin-left: 40px;
26+
margin-top: 7px;
27+
opacity: 1;
28+
.dz-filename,
29+
.dz-filename:hover,
30+
.dz-size {
31+
float: left;
32+
text-align: left;
33+
span {
34+
color: $gray;
35+
border: 0 !important;
36+
background-color: transparent !important;
37+
}
38+
}
39+
}
40+
.dz-error-message {
41+
top: 45px;
42+
left: 0;
43+
width: 100%;
44+
}
45+
.dz-success-mark,
46+
.dz-error-mark {
47+
top: 5px;
48+
left: auto;
49+
right: 0;
50+
margin-top: 0;
51+
&:before {
52+
color: $gray;
53+
}
54+
svg {
55+
display: none;
56+
}
57+
}
58+
.dz-success-mark {
59+
@include icon(check);
60+
}
61+
.dz-error-mark {
62+
@include icon(remove);
63+
}
64+
&.dz-image-preview {
65+
background-color: transparent;
66+
}
67+
.dz-progress {
68+
top: 18px;
69+
left: 0;
70+
height: 10px;
71+
width: calc(100% - 40px);
72+
margin-left: 40px;
73+
}
74+
.dz-image {
75+
overflow: hidden;
76+
width: 36px;
77+
height: 36px;
78+
border-radius: 0;
79+
border: solid 1px $gray-light;
80+
img {
81+
width: 100%;
82+
height: auto;
83+
}
84+
}
85+
}
886
.dz-message {
987
color: $gray;
1088
float: right;

‎filer/private/sass/layout/_iconography.scss

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
//######################################################################################################################
2+
// #ICONOGRAPHY#
3+
4+
// default font file generated by gulp
5+
@font-face {
6+
font-family: "django-filer-iconfont";
7+
src: url("../fonts/django-filer-iconfont.eot?v=3.2.0");
8+
src: url("../fonts/django-filer-iconfont.eot?v=3.2.0#iefix") format("eot"),
9+
url("../fonts/django-filer-iconfont.woff2?v=3.2.0") format("woff2"),
10+
url("../fonts/django-filer-iconfont.woff?v=3.2.0") format("woff"),
11+
url("../fonts/django-filer-iconfont.ttf?v=3.2.0") format("truetype"),
12+
url("../fonts/django-filer-iconfont.svg?v=3.2.0#django-filer-iconfont") format("svg");
13+
font-weight: normal;
14+
font-style: normal;
15+
}
16+
17+
%icon {
18+
display: inline-block;
19+
font: normal normal normal 14px/1 django-filer-iconfont;
20+
font-size: inherit;
21+
text-rendering: auto;
22+
transform: translate(0, 0);
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
@function icon-char($filename) {
28+
$char: "";
29+
30+
@if $filename == check {
31+
$char: "E001";
32+
}
33+
@if $filename == remove {
34+
$char: "E002";
35+
}
36+
37+
@return $char;
38+
}
39+
40+
.cms-icon {
41+
@extend %icon;
42+
}
43+
@mixin icon($filename, $insert: before) {
44+
&:#{$insert} {
45+
content: #{"\"\\"}#{icon-char($filename) + "\""};
46+
}
47+
}
48+
49+
// #####################################################################################################################
50+
// #ICONS:start#
51+
// use unicode characters for accessibility reasons and use aria-hidden="true" for decorative icons
52+
// DOCS: http://filamentgroup.com/lab/bulletproof_icon_fonts.html
53+
54+
.cms-icon-check {
55+
@include icon(check);
56+
}
57+
58+
.cms-icon-remove {
59+
@include icon(remove);
60+
}

‎filer/private/sass/layout/_icons.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.dz-success-mark,
2+
.dz-error-mark {
3+
&:before {
4+
@extend %icon;
5+
font-size: $font-size-large;
6+
vertical-align: middle;
7+
margin-right: 5px;
8+
}
9+
}

‎filer/private/sass/libs/_iconfont.scss

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
//######################################################################################################################
2+
// #ICONOGRAPHY#
3+
4+
// default font file generated by gulp
5+
@font-face {
6+
font-family: "<%= fontName %>";
7+
src: url("<%= fontPath %><%= fontName %>.eot?v=3.2.0");
8+
src: url("<%= fontPath %><%= fontName %>.eot?v=3.2.0#iefix") format("eot"),
9+
url("<%= fontPath %><%= fontName %>.woff2?v=3.2.0") format("woff2"),
10+
url("<%= fontPath %><%= fontName %>.woff?v=3.2.0") format("woff"),
11+
url("<%= fontPath %><%= fontName %>.ttf?v=3.2.0") format("truetype"),
12+
url("<%= fontPath %><%= fontName %>.svg?v=3.2.0#<%= fontName %>") format("svg");
13+
font-weight: normal;
14+
font-style: normal;
15+
}
16+
17+
%icon {
18+
display: inline-block;
19+
font: normal normal normal 14px/1 <%= fontName %>;
20+
font-size: inherit;
21+
text-rendering: auto;
22+
transform: translate(0, 0);
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
@function icon-char($filename) {
28+
$char: "";
29+
<% _.each(glyphs, function(glyph) { %>
30+
@if $filename == <%= glyph.fileName %> {
31+
$char: "<%= glyph.codePoint %>";
32+
}<% }); %>
33+
34+
@return $char;
35+
}
36+
37+
.cms-icon {
38+
@extend %icon;
39+
}
40+
@mixin icon($filename, $insert: before) {
41+
&:#{$insert} {
42+
content: #{"\"\\"}#{icon-char($filename) + "\""};
43+
}
44+
}
45+
46+
// #####################################################################################################################
47+
// #ICONS:start#
48+
// use unicode characters for accessibility reasons and use aria-hidden="true" for decorative icons
49+
// DOCS: http://filamentgroup.com/lab/bulletproof_icon_fonts.html
50+
<% _.each(glyphs, function(glyph) { %>
51+
.cms-icon-<%= glyph.fileName %> {
52+
@include icon(<%= glyph.fileName %>);
53+
}
54+
<% }); %>

‎filer/private/sass/mixins/_custom.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@
1313
clear: both;
1414
}
1515
}
16-
16+
// taken from bootstrap with adaptations
17+
@function important($important) {
18+
@if($important == true) {
19+
@return !important;
20+
} @else {
21+
@return true;
22+
}
23+
}
1724
@mixin button-variant($color, $background, $border, $important: false) {
1825
background-image: none important($important);
1926
margin-bottom: 0; // For input.btn

‎filer/static/filer/css/admin_filer.css

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

‎filer/static/filer/css/maps/admin_filer.css.map

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

‎filer/static/filer/fonts/django-filer-iconfont.eot

2.01 KB
Binary file not shown.

‎filer/static/filer/fonts/django-filer-iconfont.svg

Lines changed: 18 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)