Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
EXSYS2021
da6
Hold Afstand
Commits
bb84c10a
Commit
bb84c10a
authored
May 06, 2021
by
Lasse Overgaard Møldrup
Browse files
Merge and cumulative updates
parents
b7374b2f
ff8d8fee
Pipeline
#52388
passed with stages
in 2 minutes and 43 seconds
Changes
7
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
website/studerende-dk/src/assets/draw-cross.svg
0 → 100644
View file @
bb84c10a
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"2.35556in"
height=
"1.72222in"
viewBox=
"0 0 212 155"
>
<path
id=
"Imported Path"
fill=
"currentColor"
stroke=
"none"
stroke-width=
"0"
d=
"M 43.49,132.51
C 44.58,131.09 45.59,129.60 46.76,128.24
51.75,122.43 57.04,116.90 62.21,111.24
66.13,106.96 69.86,102.47 74.04,98.43
84.34,88.46 97.45,78.30 108.53,69.35
125.47,56.59 142.97,44.60 161.03,33.48
165.70,30.60 179.97,22.38 175.17,25.04
168.64,28.65 149.41,40.09 155.86,36.34
169.65,28.32 183.43,20.26 197.21,12.23
199.79,10.51 202.36,8.80 204.93,7.08
204.93,7.08 169.66,20.89 169.66,20.89
169.66,20.89 169.66,20.89 169.66,20.89
167.25,22.48 164.83,24.08 162.42,25.67
169.75,21.51 191.65,8.91 184.40,13.20
170.18,21.63 155.75,29.68 141.50,38.06
118.99,51.29 97.60,66.38 76.78,82.13
64.29,92.24 52.81,101.13 41.13,112.18
29.21,123.48 18.52,136.14 7.07,147.92
7.07,147.92 43.49,132.51 43.49,132.51
43.49,132.51 43.49,132.51 43.49,132.51 Z
M 54.11,17.91
C 76.39,46.94 97.28,77.00 116.78,107.97
125.20,121.83 133.24,135.91 141.37,149.93
141.37,149.93 173.22,131.38 173.22,131.38
173.22,131.38 173.22,131.38 173.22,131.38
164.26,117.83 155.42,104.20 146.72,90.48
126.69,59.66 105.30,29.60 87.69,-2.70
87.69,-2.70 54.11,17.91 54.11,17.91
54.11,17.91 54.11,17.91 54.11,17.91 Z"
/>
</svg>
website/studerende-dk/src/assets/draw-tick.svg
0 → 100644
View file @
bb84c10a
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"2.51111in"
height=
"1.75556in"
viewBox=
"0 0 226 158"
>
<path
id=
"path867"
fill=
"currentColor"
stroke=
"none"
stroke-width=
"0"
d=
"M 7.09,103.51
C 20.55,116.87 34.35,129.87 48.16,142.87
50.02,144.54 55.31,149.90 58.40,150.57
60.39,151.00 62.68,151.01 64.50,150.08
74.83,144.77 84.97,138.95 94.35,132.09
97.80,129.57 99.88,125.56 102.57,122.22
106.50,117.35 110.32,112.39 114.20,107.47
142.71,74.31 175.09,44.71 208.20,16.26
211.77,13.21 215.34,10.16 218.91,7.10
218.91,7.10 195.73,16.54 195.73,16.54
195.73,16.54 195.73,16.54 195.73,16.54
192.43,19.48 189.12,22.43 185.82,25.37
153.30,54.31 121.31,84.04 92.49,116.73
88.13,121.81 83.89,127.01 79.40,131.98
76.35,135.36 65.47,140.65 69.87,141.79
75.69,143.30 80.73,136.59 86.00,133.69
87.56,132.83 82.81,135.68 81.02,135.67
77.70,135.63 72.31,130.55 70.41,129.05
56.34,116.72 42.38,104.08 30.74,89.34
30.74,89.34 7.09,103.51 7.09,103.51
7.09,103.51 7.09,103.51 7.09,103.51 Z"
/>
</svg>
website/studerende-dk/src/assets/pencil.svg
0 → 100644
View file @
bb84c10a
<?xml version="1.0" encoding="utf-8"?>
<svg
version=
"1.1"
id=
"Layer_1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
viewBox=
"0 0 122.88 122.88"
style=
"enable-background:new 0 0 122.88 122.88"
xml:space=
"preserve"
><style
type=
"text/css"
>
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style><g><path
class=
"st0"
d=
"M14.1,0h94.67c7.76,0,14.1,6.35,14.1,14.1v94.67c0,7.75-6.35,14.1-14.1,14.1H14.1c-7.75,0-14.1-6.34-14.1-14.1 V14.1C0,6.34,6.34,0,14.1,0L14.1,0z M81.35,28.38L94.1,41.14c1.68,1.68,1.68,4.44,0,6.11l-7.06,7.06L68.17,35.44l7.06-7.06 C76.91,26.7,79.66,26.7,81.35,28.38L81.35,28.38z M52.34,88.98c-5.1,1.58-10.21,3.15-15.32,4.74c-12.01,3.71-11.95,6.18-8.68-5.37 l5.16-18.2l0,0l-0.02-0.02L64.6,39.01l18.87,18.87l-31.1,31.11L52.34,88.98L52.34,88.98z M36.73,73.36l12.39,12.39 c-3.35,1.03-6.71,2.06-10.07,3.11c-7.88,2.42-7.84,4.05-5.7-3.54L36.73,73.36L36.73,73.36z"
/></g></svg>
\ No newline at end of file
website/studerende-dk/src/assets/trashcan.svg
0 → 100644
View file @
bb84c10a
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"3.93333in"
height=
"3.93333in"
viewBox=
"0 0 354 354"
>
<path
id=
"Imported Path"
fill=
"none"
stroke=
"currentColor"
stroke-width=
"10"
d=
"M 177.00,125.25
C 177.00,321.69 177.00,321.69 177.00,321.69M 231.46,125.25
C 231.46,321.69 231.46,321.69 231.46,321.69M 122.54,125.25
C 122.54,321.69 122.54,321.69 122.54,321.69M 177.00,125.25
C 177.00,321.69 177.00,321.69 177.00,321.69M 296.23,341.69 296.23,341.69 296.23,341.69 296.23,341.69
M 177.00,12.31
C 156.43,12.31 139.31,27.06 135.64,46.56
135.64,46.56 218.36,46.60 218.36,46.60
214.71,27.08 197.58,12.31 177.00,12.31
177.00,12.31 177.00,12.31 177.00,12.31 Z
M 313.37,48.73
C 313.37,48.73 313.37,91.83 313.37,91.83
313.37,91.83 40.63,91.83 40.63,91.83
40.63,91.83 40.63,48.73 40.63,48.73
40.63,48.73 313.37,48.73 313.37,48.73 Z
M 57.77,92.85
C 57.77,92.85 296.23,92.85 296.23,92.85
296.23,92.85 296.23,341.69 296.23,341.69
296.23,341.69 57.77,341.69 57.77,341.69
57.77,341.69 57.77,92.85 57.77,92.85 Z"
/>
</svg>
website/studerende-dk/src/components/blocks/Calendar.vue
View file @
bb84c10a
...
...
@@ -9,7 +9,7 @@
<div>
<button
id=
"leftButton"
@
click=
"prevWeek()"
>
←
</button>
</div>
<div>
<div
v-if=
"schedule.length == 5"
>
Uge:
{{
getWeek
(
today
)
}}
-
{{
getMonthName
(
today
.
getMonth
())
}}
</div>
<div>
...
...
@@ -23,14 +23,14 @@
<th></th>
<!-- Generating weekday names and month number-->
<template
v-if=
"schedule.length == 1"
>
<th
v-bind
:colspan=
"colSpanValue"
v-for=
"(n,i) in schedule"
:key=
"i"
>
{{
weekDays
[
today
.
getDay
()
-
1
]
}}
-
{{
today
.
getDate
()
}}
<th
:colspan=
"colSpanValue"
v-for=
"(n,i) in schedule"
:key=
"i"
>
{{
getMonthName
(
today
.
getMonth
())
}}
uge
{{
getWeek
(
today
)
}}
-
{{
weekDays
[
today
.
getDay
()
-
1
]
}}
{{
today
.
getDate
()
}}
.
</th>
</
template
>
<!-- Generate a single day, if size is too small -->
<
template
v-else
>
<th
v-bind
:colspan=
"colSpanValue"
v-for=
"(n,i) in schedule"
:key=
"i"
>
{{
weekDays
[
i
]
}}
-
{{
getDateOfISOWeek
(
getWeek
(
today
),
today
.
getFullYear
(),
i
).
getDate
()
}}
<th
:colspan=
"colSpanValue"
v-for=
"(n,i) in schedule"
:key=
"i"
>
{{
weekDays
[
i
]
}}
-
{{
getDateOfISOWeek
(
getWeek
(
today
),
today
.
getFullYear
(),
i
).
getDate
()
}}
</th>
</
template
>
</tr>
...
...
@@ -229,13 +229,14 @@ export default {
// Update the amount of days in the display
// Therefor changes form week to day view
updateDaysInDisplay
(){
if
(
parseInt
(
document
.
getElementById
(
"
calendar
"
).
clientWidth
)
<
this
.
calendarDayWidth
){
const
calendar
=
document
.
getElementById
(
"
calendar
"
);
if
(
parseInt
(
calendar
.
clientWidth
)
<
this
.
calendarDayWidth
){
if
(
this
.
schedule
.
length
==
5
){
this
.
colSpanValue
=
5
;
const
day
=
this
.
schedule
[
this
.
today
.
getDay
()
-
1
];
this
.
scheduleDay
[
0
]
=
day
;
this
.
schedule
=
this
.
scheduleDay
;
const
buttons
=
document
.
getElementsByTagName
(
"
button
"
);
const
buttons
=
calendar
.
getElementsByTagName
(
"
button
"
);
for
(
let
i
=
0
;
i
<
buttons
.
length
;
i
++
)
{
const
element
=
buttons
[
i
];
element
.
style
.
width
=
40
+
"
px
"
;
...
...
@@ -245,7 +246,7 @@ export default {
this
.
colSpanValue
=
1
;
this
.
schedule
=
this
.
scheduleWeek12
;
this
.
changeSchedule
();
const
buttons
=
document
.
getElementsByTagName
(
"
button
"
);
const
buttons
=
calendar
.
getElementsByTagName
(
"
button
"
);
for
(
let
i
=
0
;
i
<
buttons
.
length
;
i
++
)
{
const
element
=
buttons
[
i
];
element
.
style
.
width
=
60
+
"
px
"
;
...
...
@@ -405,12 +406,12 @@ export default {
#rightButton
{
float
:
right
;
margin-right
:
$default-margin
;
margin-right
:
55px
;
}
#leftButton
{
float
:
left
;
margin-left
:
$default-margin
;
margin-left
:
55px
;
}
#headerDiv
{
...
...
website/studerende-dk/src/scss/_variables.scss
View file @
bb84c10a
...
...
@@ -9,6 +9,9 @@ $light-green-theme-color: #cbdccf;
$lighter-green-theme-color
:
#dde8e1
;
$lightest-green-theme-color
:
#e7ede8
;
$red-theme-color
:
#A82D1E
;
$green-theme-color
:
#035C2E
;
$text-color
:
#272b30
;
$bg-color
:
#e7ede8
;
$white-bg-color
:
#fbfbfb
;
...
...
website/studerende-dk/src/views/Home.vue
View file @
bb84c10a
...
...
@@ -2,7 +2,7 @@
<div
class=
"home"
>
<div
id=
"grid"
>
<div
@
mousedown=
"resizeVertical($event, rowIndex)"
:id=
"rowIndex"
class=
"row"
:class=
"
{ drag: draggedBlock !== null }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }"
@mouseleave="cancelRemoveRow(rowIndex)"
@dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
<span
class=
"col-preview"
>
<component
:is=
"previewType"
></component>
...
...
@@ -10,7 +10,19 @@
<div
@
mousedown=
"resizeHorizontal($event, rowIndex, colIndex)"
:id=
"rowIndex+','+colIndex"
class=
"col"
v-show=
"!isDragged(rowIndex, colIndex)"
v-for=
"(colBlock, colIndex) in rowBlock.blocks"
:key=
"colIndex"
:style=
"
{ 'flex-grow': colBlock.width, 'order': colIndex }">
<component
:is=
"colBlock.type"
:row=
"rowIndex"
:col=
"colIndex"
></component>
<button
class=
"hidden-row-item pencil"
>
<img
v-svg-inline
class=
"icon"
src=
"@/assets/pencil.svg"
/>
</button>
</div>
<button
class=
"hidden-row-item remove-block"
@
mouseover=
"slightlyBlurRow(rowIndex)"
@
mouseleave=
"unblurRow(rowIndex)"
@
click=
"mightRemoveRow(rowIndex)"
>
<img
v-svg-inline
class=
"icon"
src=
"@/assets/trashcan.svg"
/>
</button>
<button
class=
"hidden-row-item cancel-remove"
@
click=
"cancelRemoveRow(rowIndex)"
>
<img
v-svg-inline
class=
"icon"
src=
"@/assets/draw-cross.svg"
/>
</button>
<button
class=
"hidden-row-item confirm-remove"
@
click=
"removeRow(rowIndex)"
>
<img
v-svg-inline
class=
"icon"
src=
"@/assets/draw-tick.svg"
/>
</button>
</div>
<button
class=
"add-block"
@
click=
"addBlock()"
>
<img
v-svg-inline
class=
"icon"
src=
"@/assets/collapse-plus.svg"
/>
...
...
@@ -42,6 +54,7 @@ const maxBlocks = 3;
export
default
{
name
:
'
Home
'
,
deleting
:
false
,
data
()
{
return
{
...
...
@@ -77,6 +90,77 @@ export default {
});
},
blurRow
(
rowIndex
)
{
const
cols
=
document
.
getElementById
(
rowIndex
).
getElementsByClassName
(
"
col
"
);
for
(
const
col
of
cols
)
{
col
.
className
=
"
col animate-blur-grey-out-zoom
"
;
}
},
slightlyBlurRow
(
rowIndex
)
{
if
(
!
this
.
deleting
)
{
const
cols
=
document
.
getElementById
(
rowIndex
).
getElementsByClassName
(
"
col
"
);
for
(
const
col
of
cols
)
{
col
.
className
=
"
col animate-slight-blur-grey-out
"
;
}
}
},
unblurRow
(
rowIndex
)
{
if
(
!
this
.
deleting
)
{
const
cols
=
document
.
getElementById
(
rowIndex
).
getElementsByClassName
(
"
col
"
);
for
(
const
col
of
cols
)
{
col
.
className
=
"
col
"
;
}
}
},
mightRemoveRow
(
rowIndex
)
{
if
(
this
.
deleting
)
{
this
.
cancelRemoveRow
(
rowIndex
);
return
;
}
this
.
deleting
=
true
;
this
.
blurRow
(
rowIndex
);
const
row
=
document
.
getElementById
(
rowIndex
);
const
cross
=
row
.
getElementsByClassName
(
"
cancel-remove
"
)[
0
];
const
tick
=
row
.
getElementsByClassName
(
"
confirm-remove
"
)[
0
];
cross
.
className
=
"
visible-row-item cancel-remove
"
;
tick
.
className
=
"
visible-row-item confirm-remove
"
;
// toggle off pencil on hover for cols
const
pens
=
row
.
getElementsByClassName
(
"
pencil
"
)
for
(
const
pen
of
pens
)
{
pen
.
style
.
display
=
"
none
"
;
}
},
removeRow
(
rowIndex
)
{
this
.
cancelRemoveRow
(
rowIndex
);
this
.
layout
.
splice
(
rowIndex
,
1
);
},
cancelRemoveRow
(
rowIndex
)
{
this
.
deleting
=
false
;
this
.
unblurRow
(
rowIndex
);
const
row
=
document
.
getElementById
(
rowIndex
);
const
cross
=
row
.
getElementsByClassName
(
"
cancel-remove
"
)[
0
];
const
tick
=
row
.
getElementsByClassName
(
"
confirm-remove
"
)[
0
];
cross
.
className
=
"
hidden-row-item cancel-remove
"
;
tick
.
className
=
"
hidden-row-item confirm-remove
"
;
// toggle on pencil on hover for cols
const
pens
=
row
.
getElementsByClassName
(
"
pencil
"
)
for
(
const
pen
of
pens
)
{
pen
.
style
.
display
=
"
block
"
;
}
},
resizeHorizontalMouseMove
(
event
)
{
const
deltaX
=
this
.
mouseDragPos
.
x
-
event
.
x
;
this
.
mouseDragPos
.
x
=
event
.
x
;
...
...
@@ -133,15 +217,26 @@ export default {
}
},
resizeVertical
(
event
,
index
)
{
if
(
event
.
offsetY
>
this
.
layout
[
index
].
height
)
{
this
.
mouseDragPos
.
y
=
event
.
y
;
this
.
verticalResizeObject
.
index
=
index
;
document
.
addEventListener
(
"
mousemove
"
,
this
.
resizeVerticalMouseMove
,
false
);
document
.
addEventListener
(
"
mouseup
"
,
this
.
eventRemover
,
false
);
document
.
getElementsByTagName
(
"
html
"
)[
0
].
classList
.
add
(
"
no-select
"
);
this
.
dragEnabled
=
false
;
resizeVertical
(
event
,
index
){
if
(
index
==
0
||
this
.
deleting
){
return
;
}
const
clickTarget
=
event
.
target
;
if
(
clickTarget
.
className
!=
"
row
"
){
return
;
}
if
(
event
.
offsetY
>
this
.
layout
[
index
].
height
){
console
.
log
(
"
:After event
"
)
}
else
{
index
--
;
}
this
.
mouseDragPos
.
y
=
event
.
y
;
this
.
verticalResizeObject
.
index
=
index
;
document
.
addEventListener
(
"
mousemove
"
,
this
.
resizeVerticalMouseMove
,
false
);
document
.
addEventListener
(
"
mouseup
"
,
this
.
eventRemover
,
false
);
document
.
getElementsByTagName
(
"
html
"
)[
0
].
classList
.
add
(
"
no-select
"
);
this
.
dragEnabled
=
false
;
},
eventRemover
()
{
...
...
@@ -182,12 +277,6 @@ export default {
this
.
prevWinWidth
=
winWidth
;
},
removeBlock
(
side
,
row
,
col
)
{
this
[
side
][
row
].
blocks
.
splice
(
col
,
1
);
if
(
this
[
side
][
row
].
blocks
.
length
===
0
)
this
[
side
].
splice
(
row
,
1
);
},
startDrag
(
event
,
row
,
col
)
{
event
.
dataTransfer
.
effectAllowed
=
'
move
'
;
...
...
@@ -408,37 +497,51 @@ export default {
}
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
lang=
"scss"
>
$gap
:
$default-margin
;
#grid
{
width
:
100%
;
padding
:
$gap
$gap
/
2
;
padding
:
0
$gap
/
2
$gap
;
}
.row
{
display
:
flex
;
margin-bot
to
m
:
$gap
/
2
;
padding-
to
p
:
$gap
/
2
;
flex-direction
:
column
;
position
:
relative
;
min-height
:
150px
;
&
.drag
*
{
pointer-events
:
none
;
}
}
// Must be outside ".row" or else after affect children
.
row
:
:
after
{
content
:
" "
;
background-color
:
rgba
(
0
,
0
,
0
,
0
);
position
:
absolute
;
bottom
:
-
$gap
;
width
:
100%
;
height
:
$gap
;
cursor
:
n-resize
;
.row
:not
(
:first-of-type
)
{
&
::before
{
content
:
" "
;
background-color
:
rgba
(
0
,
0
,
0
,
0
);
position
:
absolute
;
top
:
0
;
width
:
100%
;
height
:
$gap
;
cursor
:
n-resize
;
}
}
.row
:last-of-type
{
&
::after
{
content
:
" "
;
background-color
:
rgba
(
0
,
0
,
0
,
0
);
position
:
absolute
;
bottom
:
-
$gap
;
width
:
100%
;
height
:
$gap
;
cursor
:
n-resize
;
}
}
.col
,
.col-preview
{
flex-basis
:
0
;
// a basis of 0px. very important!
background-color
:
$light-green-theme-color
;
...
...
@@ -450,7 +553,7 @@ export default {
.col
{
position
:
relative
;
&
:not
(
:last-
child
)
{
&
:not
(
:last-
of-type
)
{
margin-bottom
:
$gap
/
2
;
}
...
...
@@ -477,6 +580,7 @@ export default {
background
:
none
;
padding
:
0
;
display
:
none
;
margin-top
:
$gap
;
svg
{
fill
:
#777f80
;
...
...
@@ -491,20 +595,171 @@ export default {
}
}
@media
only
screen
and
(
min-width
:
$mobile-width-cutoff
)
{
#grid
{
padding
:
$gap
$gap
/
2
;
.remove-block
{
right
:
$gap
-
5px
+
$gap
/
2
;
order
:
1000
;
}
.cancel-remove
{
right
:
2
*
$gap
-
5px
+
$gap
/
2
;
order
:
1000
;
svg
{
color
:
$red-theme-color
;
}
}
.confirm-remove
{
right
:
3
*
$gap
-
10px
+
$gap
/
2
;
order
:
1000
;
svg
{
color
:
$green-theme-color
;
}
}
.hidden-row-item
{
display
:
none
;
height
:
30px
;
top
:
-
$gap
+
5px
;
border
:
none
;
background
:
none
;
padding
:
0
;
svg
{
width
:
0px
;
height
:
0px
;
}
}
.visible-row-item
{
display
:
flex
;
position
:
relative
;
flex-direction
:
column
;
width
:
0px
;
height
:
30px
;
top
:
-
$gap
+
5px
;
border
:
none
;
background
:
none
;
padding
:
0
;
animation
:
slide-from-bot
0
.4s
;
svg
{
width
:
28px
;
height
:
28px
;
}
&
:hover
,
&
:focus
{
cursor
:
pointer
;
svg
{
color
:
$darker-theme-color
;
}
}
}
.animate-blur-grey-out-zoom
{
animation
:
blur-grey-out-zoom
0
.6s
;
filter
:
blur
(
2px
)
grayscale
(
0
.5
);
transform
:
scale
(
0
.97
);
opacity
:
0
.3
;
pointer-events
:
none
!
important
;
@include
no-select
;
*
{
pointer-events
:
none
!
important
;
}
}
.animate-slight-blur-grey-out
{
animation
:
slight-blur-grey-out
0
.6s
;
filter
:
blur
(
1px
)
grayscale
(
0
.5
);
opacity
:
0
.7
;
}
@keyframes
slide-from-bot
{
0
%
{
top
:
10
.5px
;
z-index
:
-1
;
}
99
%
{
top
:
-
$gap
+
5px
;
z-index
:
-1
;
}
100
%
{
z-index
:
inherit
;
}
}
@keyframes
blur-grey-out-zoom
{
from
{
filter
:
blur
(
1px
)
grayscale
(
0
.5
);
transform
:
scale
(
1
.0
);
opacity
:
0
.7
;
}
to
{
filter
:
blur
(
2px
)
grayscale
(
0
.5
);
transform
:
scale
(
0
.97
);
opacity
:
0
.3
;
}
}
@keyframes
slight-blur-grey-out
{
from
{
filter
:
blur
(
0px
)
grayscale
(
0
);
transform
:
scale
(
1
.0
);
opacity
:
1
;
}
to
{
filter
:
blur
(
1px
)
grayscale
(
0
.5
);
opacity
:
0
.7
;
}
}
@media
only
screen
and
(
min-width
:
$mobile-width-cutoff
)
{
.row
{
flex-direction
:
row
;
margin-bottom
:
$gap
;
padding-top
:
$gap
;
&
:hover
{
.remove-block
{
width
:
0
;
display
:
block
;
position
:
relative
;
animation
:
slide-from-bot
0
.4s
;
svg
{
color
:
$theme-color
;
width
:
28px
;
height
:
28px
;
}
&
:hover
,
&
:focus
{
cursor
:
pointer
;
svg
{
color
:
$darker-theme-color
;
}
}
}
}
}
.col
{
flex-grow
:
0
;
&
:not
(
:first-
child
)
{
&
:not
(
:first-
of-type
)
{
margin-left
:
$gap
/
2
;
&
::before
{