Commit bf9b196c authored by Dimitrie Hoekstra's avatar Dimitrie Hoekstra Committed by Fatih Acet

UI polish work on snippets

New snippet icons created. Remove
old logo and use new svg logo + text.
Clean up css and new haml markup. This fixes
some styling issues for embeded snippets.
parent 905a48b6
<svg width="100" height="32" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="#8C929D" d="M67.67 8.11h-2.06l.009 15.364h8.348v-1.9H67.68l-.01-13.465zM81.913 20.778a3.517 3.517 0 01-2.553 1.078c-1.57 0-2.203-.775-2.203-1.787 0-1.522 1.059-2.25 3.309-2.25.487.002.974.04 1.456.113v2.846h-.01zm-2.137-9.313a6.826 6.826 0 00-4.387 1.579l.728 1.267c.841-.492 1.872-.983 3.356-.983 1.693 0 2.44.87 2.44 2.326v.747a9.4 9.4 0 00-1.428-.114c-3.612 0-5.446 1.267-5.446 3.914 0 2.374 1.456 3.565 3.659 3.565 1.484 0 2.912-.68 3.404-1.787l.378 1.503h1.456v-7.866c-.01-2.487-1.087-4.151-4.16-4.151zM90.587 21.926c-.776 0-1.456-.094-1.967-.33v-7.102c.7-.586 1.57-1.011 2.676-1.011 1.995 0 2.76 1.408 2.76 3.687 0 3.234-1.238 4.756-3.47 4.756m.87-10.457a3.775 3.775 0 00-2.836 1.257V10.74l-.01-2.629h-2.013l.01 14.987c1.01.425 2.391.652 3.895.652 3.848 0 5.701-2.458 5.701-6.704-.01-3.356-1.72-5.578-4.746-5.578M45.228 9.776c1.825 0 3.006.605 3.772 1.22l.889-1.541c-1.2-1.06-2.827-1.627-4.567-1.627-4.387 0-7.46 2.676-7.46 8.075 0 5.654 3.319 7.857 7.11 7.857a12.083 12.083 0 004.577-.888L49.5 16.83v-1.9h-5.63v1.9h3.594l.047 4.586c-.473.236-1.286.425-2.392.425-3.045 0-5.087-1.92-5.087-5.957-.01-4.113 2.1-6.108 5.19-6.108M59.744 8.107H57.73l.01 2.582v8.916c0 2.487 1.078 4.15 4.15 4.15.416.002.83-.036 1.24-.113v-1.806c-.31.047-.624.07-.937.066-1.692 0-2.44-.87-2.44-2.326v-6.145h3.376v-1.683h-3.373l-.009-3.64h-.003zM52.608 23.474h2.014V11.75h-2.014zM52.608 10.133h2.014V8.119h-2.014z"/><path d="M31.864 17.907l-1.788-5.496-3.538-10.9a.612.612 0 00-1.16 0L21.84 12.406H10.085L6.547 1.512a.612.612 0 00-1.16 0L1.855 12.405.066 17.907c-.162.5.015 1.05.44 1.36L15.963 30.5l15.456-11.233a1.22 1.22 0 00.446-1.36" fill="#FC6D26"/><path d="M15.966 30.49l5.875-18.086H10.09z" fill="#E24329"/><path d="M15.962 30.49l-5.877-18.086H1.859z" fill="#FC6D26"/><path d="M1.852 12.41L.063 17.906c-.162.5.015 1.05.441 1.36L15.959 30.5 1.852 12.41z" fill="#FCA326"/><path d="M1.854 12.41h8.237L6.546 1.517a.612.612 0 00-1.16 0L1.854 12.41z" fill="#E24329"/><path d="M15.966 30.49l5.875-18.086h8.236z" fill="#FC6D26"/><path d="M30.074 12.41l1.79 5.496a1.219 1.219 0 01-.44 1.36L15.966 30.49l14.107-18.08z" fill="#FCA326"/><path d="M30.079 12.41H21.84L25.38 1.517a.612.612 0 011.16 0l3.539 10.893z" fill="#E24329"/></g></svg>
\ No newline at end of file
......@@ -8,7 +8,7 @@
pre {
padding: 10px 0;
border: 0;
border-radius: 0 0 $border-radius-default $border-radius-default;
border-radius: 0 0 $border-radius-default;
font-family: $monospace-font;
font-size: $code-font-size;
line-height: 1.5;
......
......@@ -11,7 +11,7 @@
line-height: $code-line-height;
color: $gl-text-color;
margin: 20px;
font-weight: 200;
font-weight: $gl-font-weight-normal;
.gl-snippet-icon {
display: inline-block;
......@@ -34,7 +34,7 @@
.file-content.code {
border: $border-style;
border-radius: 0 0 4px 4px;
border-radius: 0 0 $border-radius-default $border-radius-default;
display: flex;
box-shadow: none;
margin: 0;
......@@ -45,6 +45,7 @@
overflow-x: auto;
pre {
height: 100%;
padding: 10px;
border: 0;
border-radius: 0;
......@@ -110,17 +111,13 @@
}
}
.gitlab-logo {
display: inline-block;
padding-left: 5px;
text-decoration: none;
color: $gl-text-color-secondary;
.gitlab-logo-wrapper {
padding-left: $gl-padding-8;
position: relative;
top: 2px;
.logo-text {
background: image_url('ext_snippet_icons/logo.png') no-repeat left center;
background-size: 18px;
font-weight: $gl-font-weight-normal;
padding-left: 24px;
.gitlab-logo {
height: 18px;
}
}
}
......@@ -128,7 +125,7 @@
img,
.gl-snippet-icon {
display: inline-block;
vertical-align: middle;
vertical-align: text-bottom;
}
}
......@@ -136,7 +133,7 @@
a.btn {
background-color: $white-light;
text-decoration: none;
padding: 7px 9px;
padding: 8px 9px;
border: $border-style;
border-right: 0;
......@@ -147,11 +144,11 @@
}
&:first-child {
border-radius: 3px 0 0 3px;
border-radius: $border-radius-default 0 0 $border-radius-default;
}
&:last-child {
border-radius: 0 3px 3px 0;
border-radius: 0 $border-radius-default $border-radius-default 0;
border-right: $border-style;
}
}
......
......@@ -10,10 +10,8 @@
%small
= number_to_human_size(blob.raw_size)
%a.gitlab-logo{ href: url_for(only_path: false, overwrite_params: nil), title: 'view on gitlab' }
on &nbsp;
%span.logo-text
GitLab
%a.gitlab-logo-wrapper{ href: url_for(only_path: false, overwrite_params: nil), title: 'view on gitlab' }
%img.gitlab-logo{ src: image_url('ext_snippet_icons/logo.svg'), alt: "GitLab logo" }
.file-actions.d-none.d-sm-block
.btn-group{ role: "group" }<
......
---
title: Fix embedded snippets UI polish issues
merge_request: !22637
author:
type: changed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment