Assets: Fix download dropdown

src/styles/_config.sass

@@ -142,6 +142,8 @@ $font-size-base: .9rem
 
 $dropdown-border-width: 0
 $dropdown-box-shadow: 0 10px 25px rgba($black, .1)
+$dropdown-padding-y: 0
+$dropdown-item-padding-y: .4rem
 
 // Tooltips.
 $tooltip-font-size: 0.83rem

src/styles/_project.sass

@@ -22,7 +22,6 @@ body.blog
 #project-container
 	display: flex
 	flex-direction: row
-	margin-top: $project_header-height
 	min-height: 300px
 	position: relative
 	z-index: $z-index-base
@@ -269,10 +268,6 @@ ul.project-edit-tools
 		opacity: 1
 
 
-#project-container
-
-
-
 ul.project_nav-edit-list
 	list-style: none
 	padding: 0
@@ -367,16 +362,13 @@ ul.project_nav-edit-list
 #project_tree
 	+media-xs
 		margin-top: 0
-
-	// margin-top: $project_header-height //so it's right below the project title.
 	overflow-y: auto // show vertical scrollbars when needed.
-	padding: 0 0 5px 0 // some padding on top/bottom of jstree.
+	padding: 5px 0 // some padding on top/bottom of jsTree.
 	position: relative
 
 	&.edit
 		margin-top: 0
 
-
 /* Node Context */
 =project-node-title
 	font-size: 1.5em
@@ -824,55 +816,37 @@ section.node-preview.group
 				color: $color-success
 
 			&.download
-				position: relative
-
-				button
-					+button($color-success, 3px)
-
 				.dropdown-toggle
-					padding-right: 0
+					// padding-right: 0
 
 				i.icon-dropdown-menu
-					padding-left: 10px
+					// padding-left: 10px
 
 				/* Download dropdown options */
 				ul.dropdown-menu
-					width: auto
 					min-width: 240px
-					padding: 0
-					margin: 0
-					top: initial
-					left: initial
-					right: 0
-					bottom: 35px
-					border: thin solid rgba(darken($color-background, 5%), .3)
-					border-top-left-radius: 3px
-					border-top-right-radius: 3px
-					border-bottom-left-radius: 0
-					border-bottom-right-radius: 0
 
 					li
-						padding: 0
+						display: block
-						text-align: right
-						clear: both
-						display: flex
-						align-items: center
 
 						a
+							display: flex
 							padding: 10px 15px
-							width: 100%
 
 							&:hover
-								color: $color-primary
+								text-decoration: none
-								background-color: transparent
 
 								span
+									color: $primary
+
 									&.length
 										color: lighten($color-primary, 10%)
 
 							span
+								color: $body-color
+
 								&.length
-									float: left
+									margin-right: auto
 									color: $color-text-dark-hint
 									padding-right: 15px
 								&.format

src/styles/components/_dropdown.sass

@@ -1,11 +1,24 @@
 // Global, we want all menus to look like this.
-.dropdown-menu
+ul.dropdown-menu
 	box-shadow: $dropdown-box-shadow
 	top: 95% // So there is less gap between the dropdown and the item.
 
 	> li
+		&:first-child > a
+			padding-top: ($dropdown-item-padding-y * 1.5)
+		&:last-child > a
+			padding-bottom: ($dropdown-item-padding-y * 1.5)
+
 		> a
-			padding: $dropdown-item-padding-y
+			padding-top: $dropdown-item-padding-y
+			padding-bottom: $dropdown-item-padding-y
+
+	.dropdown-divider
+		margin: 0
+
+	.dropdown-item:last-child
+		border-bottom-left-radius: $border-radius
+		border-bottom-right-radius: $border-radius
 
 // Open dropdown on mouse hover dropdowns in the navbar.
 nav .dropdown:hover

src/templates/nodes/custom/asset/video/view_embed.pug

@@ -32,7 +32,7 @@ button.btn.btn-outline-secondary.dropdown-toggle(
 	| Download
 	i.pi-angle-down.icon-dropdown-menu
 
-ul.dropdown-menu
+ul.dropdown-menu.dropdown-menu-right
 	| {% for variation in node.file_variations %}
 	li
 		a(href="{{ variation.link }}",

src/templates/nodes/view_base.pug

@@ -93,7 +93,7 @@
 						title="Download {{ node.properties.content_type | undertitle }}",
 						href="{{ node.file.link }}",
 						download="{{ node.file.filename }}")
-						button.btn(type="button")
+						button.btn.btn-outline-success.px-3(type="button")
 							i.pi-download
 							| Download
 					| {% endblock node_download %}