diff options
| author | Tony Rom <thetonyrom@gmail.com> | 2017-12-20 14:39:40 +0300 |
|---|---|---|
| committer | Tony Rom <thetonyrom@gmail.com> | 2018-01-29 17:39:19 +0300 |
| commit | d90d141c24228b8df6333b03d26a1723480837ba (patch) | |
| tree | 008dd759ae827d3d2b0a3320efa4866fec655980 /app | |
| parent | 501d81c523b2cf53128e62ea2d7c4dff6681928d (diff) | |
Add Colors to GitLab Flavored Markdown
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/gfm_auto_complete.js | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gfm.scss | 30 |
2 files changed, 31 insertions, 1 deletions
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index df20e1e9c88..57a1fa107e5 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/app/assets/javascripts/gfm_auto_complete.js @@ -461,7 +461,7 @@ class GfmAutoComplete { const accentAChar = decodeURI('%C3%80'); const accentYChar = decodeURI('%C3%BF'); - const regexp = new RegExp(`^(?:\\B|[^a-zA-Z0-9_${atSymbolsWithoutBar}]|\\s)${resultantFlag}(?!${atSymbolsWithBar})((?:[A-Za-z${accentAChar}-${accentYChar}0-9_'.+-]|[^\\x00-\\x7a])*)$`, 'gi'); + const regexp = new RegExp(`^(?:\\B|[^a-zA-Z0-9_\`${atSymbolsWithoutBar}]|\\s)${resultantFlag}(?!${atSymbolsWithBar})((?:[A-Za-z${accentAChar}-${accentYChar}0-9_'.+-]|[^\\x00-\\x7a])*)$`, 'gi'); return regexp.exec(targetSubtext); } diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index 5621505996d..6eff57157cc 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -16,3 +16,33 @@ background-color: $user-mention-bg-hover; } } + +.gfm-color_chip { + display: inline-block; + margin-left: 4px; + margin-bottom: 2px; + vertical-align: middle; + border-radius: 3px; + + $side: 0.9em; + $bg-size: $side / 0.9; + $bg-pos: $bg-size / 2; + $bg-color: $gray-dark; + + width: $side; + height: $side; + background: $white-light; + background-image: linear-gradient(135deg, $bg-color 25%, transparent 0%, transparent 75%, $bg-color 0%), + linear-gradient(135deg, $bg-color 25%, transparent 0%, transparent 75%, $bg-color 0%); + background-size: $bg-size $bg-size; + background-position: 0 0, $bg-pos $bg-pos; + + > span { + display: inline-block; + width: 100%; + height: 100%; + margin-bottom: 2px; + border-radius: 3px; + border: 1px solid $black-transparent; + } +} |