diff options
author | Thomas Citharel <tcit@tcit.fr> | 2017-03-31 20:21:41 +0200 |
---|---|---|
committer | Thomas Citharel <tcit@tcit.fr> | 2017-05-04 14:49:44 +0200 |
commit | 64f81bc31699ed239e4becec1cfa7ebc0bef2b5a (patch) | |
tree | 6363a596055683587d11aaffcf30608a682988aa /app/Resources/static/themes/material/css/cards.scss | |
parent | 3b4502e0e663866e7bac00164fd935fdc92309d6 (diff) | |
download | wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.gz wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.zst wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.zip |
Adds Webpack support and removes the use for Grunt
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
use scss
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
fix build, add babel, fix annotations
fixes (and improvements !) for baggy
add live reload & environments & eslint & theme fixes
Diffstat (limited to 'app/Resources/static/themes/material/css/cards.scss')
-rw-r--r-- | app/Resources/static/themes/material/css/cards.scss | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss new file mode 100644 index 00000000..18ef6e60 --- /dev/null +++ b/app/Resources/static/themes/material/css/cards.scss | |||
@@ -0,0 +1,186 @@ | |||
1 | /* ========================================================================== | ||
2 | Cards | ||
3 | ========================================================================== */ | ||
4 | |||
5 | main { | ||
6 | #content { | ||
7 | padding: 0 0.5rem; | ||
8 | } | ||
9 | |||
10 | ul.row { | ||
11 | padding: 0 0.75rem; | ||
12 | } | ||
13 | } | ||
14 | |||
15 | .data .card .card-body { | ||
16 | height: 19em; | ||
17 | overflow: hidden; | ||
18 | } | ||
19 | |||
20 | .card { | ||
21 | .card-content .card-title, | ||
22 | .card-reveal .card-title { | ||
23 | line-height: 22.8px; | ||
24 | max-height: 80px; | ||
25 | font-size: 19px; | ||
26 | font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
27 | color: #313131; | ||
28 | } | ||
29 | |||
30 | .card-content .activator, | ||
31 | .card-reveal .activator { | ||
32 | cursor: pointer; | ||
33 | font-family: "Material Icons"; | ||
34 | } | ||
35 | |||
36 | .card-content i.right, | ||
37 | .card-reveal i.right { | ||
38 | margin-left: 0; | ||
39 | } | ||
40 | |||
41 | .card-content .original { | ||
42 | line-height: 24px; | ||
43 | font-size: 15px; | ||
44 | } | ||
45 | |||
46 | .card-entry-labels { | ||
47 | position: absolute; | ||
48 | top: 10px; | ||
49 | z-index: 90; | ||
50 | max-width: 50%; | ||
51 | } | ||
52 | |||
53 | .card-entry-labels-hidden { | ||
54 | margin: 2.5px auto; | ||
55 | } | ||
56 | |||
57 | .card-entry-labels-hidden li { | ||
58 | display: inline-block; | ||
59 | background-color: $blueAccentColor; | ||
60 | margin: 0 5px; | ||
61 | padding: 5px 12px; | ||
62 | border-radius: 3px; | ||
63 | color: #fff; | ||
64 | max-height: 2em; | ||
65 | max-width: calc(100% - 15px); | ||
66 | overflow: hidden; | ||
67 | text-overflow: ellipsis; | ||
68 | white-space: nowrap; | ||
69 | } | ||
70 | |||
71 | .card-entry-labels-hidden li { | ||
72 | display: inline-block; | ||
73 | background-color: $blueAccentColor; | ||
74 | margin: 0 5px; | ||
75 | padding: 5px 12px; | ||
76 | border-radius: 3px; | ||
77 | color: #fff; | ||
78 | max-height: 2em; | ||
79 | max-width: calc(100% - 15px); | ||
80 | overflow: hidden; | ||
81 | text-overflow: ellipsis; | ||
82 | white-space: nowrap; | ||
83 | } | ||
84 | |||
85 | .card-content .estimatedTime { | ||
86 | margin-bottom: 10px; | ||
87 | } | ||
88 | |||
89 | .card-action { | ||
90 | padding: 10px 5px 10px 15px; | ||
91 | |||
92 | ul.links { | ||
93 | margin: 0; | ||
94 | font-size: 24px; | ||
95 | line-height: 24px; | ||
96 | } | ||
97 | |||
98 | a { | ||
99 | color: #fff; | ||
100 | margin: 0; | ||
101 | } | ||
102 | |||
103 | a:hover { | ||
104 | color: #fff; | ||
105 | } | ||
106 | |||
107 | ul.tools li a.tool { | ||
108 | margin-right: 5px !important; | ||
109 | } | ||
110 | |||
111 | .reading-time { | ||
112 | display: inline-flex; | ||
113 | vertical-align: middle; | ||
114 | } | ||
115 | } | ||
116 | |||
117 | .card-entry-labels li, | ||
118 | .card-tag-labels li { | ||
119 | margin: 10px 10px 10px auto; | ||
120 | padding: 5px 12px 5px 16px !important; | ||
121 | background-color: $blueAccentColor; | ||
122 | border-radius: 0 3px 3px 0; | ||
123 | color: #fff; | ||
124 | cursor: default; | ||
125 | max-height: 2em; | ||
126 | overflow: hidden; | ||
127 | text-overflow: ellipsis; | ||
128 | white-space: nowrap; | ||
129 | } | ||
130 | |||
131 | .card-image { | ||
132 | height: 10em; | ||
133 | } | ||
134 | |||
135 | .card-fullimage { | ||
136 | height: 13.5em; | ||
137 | } | ||
138 | |||
139 | .card-image .preview, | ||
140 | .card-fullimage .preview { | ||
141 | height: 14em; | ||
142 | background: no-repeat 50%/cover; | ||
143 | } | ||
144 | |||
145 | &.sw { | ||
146 | max-width: 370px; | ||
147 | margin-left: auto; | ||
148 | margin-right: auto; | ||
149 | } | ||
150 | } | ||
151 | |||
152 | a.original { | ||
153 | text-overflow: ellipsis; | ||
154 | white-space: nowrap; | ||
155 | overflow: hidden; | ||
156 | display: block; | ||
157 | } | ||
158 | |||
159 | .card-entry-tags a, | ||
160 | .card-entry-labels a, | ||
161 | .card-tag-labels a, | ||
162 | .card-entry-labels-hidden a, | ||
163 | #list .chip a { | ||
164 | text-decoration: none; | ||
165 | font-weight: normal; | ||
166 | color: #fff; | ||
167 | } | ||
168 | |||
169 | .card-stacked { | ||
170 | &:hover ul.tools-list { | ||
171 | display: block; | ||
172 | } | ||
173 | |||
174 | ul.tools-list { | ||
175 | display: none; | ||
176 | } | ||
177 | } | ||
178 | |||
179 | .quickstart .card .card-action a, | ||
180 | .quickstart .card .card-action a:hover { | ||
181 | color: #fff !important; | ||
182 | } | ||
183 | |||
184 | .settings .div_tabs { | ||
185 | padding-bottom: 15px; | ||
186 | } | ||