浏览代码

Added new card element for icons.

Colin Kierans 8 年前
父节点
当前提交
d703e9c993
共有 2 个文件被更改,包括 37 次插入2 次删除
  1. 20
    1
      generator/css/cards.css
  2. 17
    1
      generator/js/cards.js

+ 20
- 1
generator/css/cards.css 查看文件

@@ -1,12 +1,12 @@
1 1
 .card {
2 2
     border: 2mm solid;
3
-    border-radius: 4px;
4 3
     box-sizing: border-box;
5 4
     position: relative;
6 5
     display: flex;
7 6
     flex-direction: column;
8 7
     font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
9 8
     font-size: 8pt;
9
+    overflow: hidden;
10 10
 }
11 11
 
12 12
 .card-content-container {
@@ -140,6 +140,25 @@
140 140
     line-height: 18px;
141 141
     margin-bottom: 0.0em;
142 142
 }
143
+.card-inline-icon {
144
+    background-size: auto 80%;
145
+    background-repeat: no-repeat;
146
+    background-position: center center;
147
+    position: relative;
148
+    border-radius: 2mm;
149
+}
150
+
151
+.card-inline-icon.align-left {
152
+}
153
+
154
+.card-inline-icon.align-right {
155
+    margin-right: 0px;
156
+}
157
+
158
+.card-inline-icon.align-center {
159
+    left: 50%;
160
+}
161
+
143 162
 .card-property-line {
144 163
     text-indent: -1em;
145 164
     margin-left: 1em;

+ 17
- 1
generator/js/cards.js 查看文件

@@ -108,6 +108,21 @@ function card_element_subtitle(params, card_data, options) {
108 108
     return '<div class="card-element card-subtitle">' + subtitle + '</div>';
109 109
 }
110 110
 
111
+function card_element_inline_icon(params, card_data, options) {
112
+    var icon = params[0] || "";
113
+    var size = params[1] || "40";
114
+    var align = params[2] || "center"
115
+    var margin_left = 0
116
+    var color = card_data_color_front(card_data, options);
117
+    if(align == "center") {
118
+        margin_left = (size/-2) + 'px'
119
+    }
120
+    else if(align == 'right') {
121
+        margin_left = 'auto'
122
+    }
123
+    return '<div class="card-element card-inline-icon align-' + align + ' icon-' + icon + '" style ="height:' + size + 'px; width: ' + size + 'px; margin-left: ' + margin_left + '; background-color: ' + color + '"></div>';
124
+}
125
+
111 126
 function card_element_picture(params, card_data, options) {
112 127
     var url = params[0] || "";
113 128
 	var height = params[1] || "";
@@ -255,7 +270,8 @@ var card_element_generators = {
255 270
     fill: card_element_fill,
256 271
     section: card_element_section,
257 272
     disabled: card_element_empty,
258
-	picture: card_element_picture
273
+    picture: card_element_picture,
274
+    icon: card_element_inline_icon
259 275
 };
260 276
 
261 277
 // ============================================================================

正在加载...
取消
保存