diff options
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_card.scss | 40 |
1 files changed, 17 insertions, 23 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 5d36e7e..7fa54e5 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -73,15 +73,17 @@ | |||
73 | color: prop(--colors --hover --fg); | 73 | color: prop(--colors --hover --fg); |
74 | } | 74 | } |
75 | 75 | ||
76 | @include element('row') { | ||
77 | @include modifier('hidden') { | ||
78 | opacity: 1; | ||
79 | } | ||
80 | } | ||
81 | |||
76 | @include element('block') { | 82 | @include element('block') { |
77 | @include modifier('indicator') { | 83 | @include modifier('indicator') { |
78 | color: prop(--colors --hover --fg); | 84 | color: prop(--colors --hover --fg); |
79 | } | 85 | } |
80 | } | 86 | } |
81 | |||
82 | /*@include element('row') { | ||
83 | border-top-color: transparent; | ||
84 | }*/ | ||
85 | } | 87 | } |
86 | } | 88 | } |
87 | 89 | ||
@@ -111,22 +113,28 @@ | |||
111 | align-items: center; | 113 | align-items: center; |
112 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | 114 | padding: prop(--dims --pad-y) prop(--dims --pad-x); |
113 | gap: prop(--dims --pad-x); | 115 | gap: prop(--dims --pad-x); |
114 | //transition: border-top-color .2s; | ||
115 | 116 | ||
116 | @include modifier('flush') { | 117 | @include modifier('flush') { |
117 | padding: 0; | 118 | padding: 0; |
118 | } | 119 | } |
119 | 120 | ||
120 | /*@include next-twin-element { | 121 | @include modifier('hidden') { |
121 | border-top: 1px solid prop(--colors --border); | 122 | position: absolute; |
122 | }*/ | 123 | z-index: 10; |
124 | right: 0; | ||
125 | bottom: 0; | ||
126 | left: 0; | ||
127 | transition: opacity .2s; | ||
128 | opacity: 0; | ||
129 | background-color: prop(--colors --hover --bg); | ||
130 | } | ||
123 | } | 131 | } |
124 | 132 | ||
125 | @include element('thumbnail') { | 133 | @include element('thumbnail') { |
126 | position: relative; | 134 | position: relative; |
127 | width: 100%; | 135 | width: 100%; |
128 | height: 2em; | 136 | height: 2em; |
129 | padding-top: 40%; | 137 | padding-top: 46%; |
130 | } | 138 | } |
131 | 139 | ||
132 | @include element('thumbnail-img') { | 140 | @include element('thumbnail-img') { |
@@ -149,20 +157,6 @@ | |||
149 | width: 100%; | 157 | width: 100%; |
150 | } | 158 | } |
151 | 159 | ||
152 | /*@include modifier('separator') { | ||
153 | align-self: stretch; | ||
154 | padding-top: 0; | ||
155 | padding-bottom: 0; | ||
156 | |||
157 | &::before { | ||
158 | content: ''; | ||
159 | display: block; | ||
160 | width: 1px; | ||
161 | height: 100%; | ||
162 | background-color: prop(--colors --border); | ||
163 | } | ||
164 | }*/ | ||
165 | |||
166 | @include modifier('indicator') { | 160 | @include modifier('indicator') { |
167 | transition: color .2s; | 161 | transition: color .2s; |
168 | color: prop(--colors --unread); | 162 | color: prop(--colors --unread); |