skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(progress-bar): DRY up the buffer background image (#1942)

Browse Source 
* chore(progress-bar): DRY up the buffer background image

The buffer background image is a long URL-encoded SVG, which was being repeated 3 times. This change moves it into a variable in order to reduce repetition.

* fix: use a function to generate the background
This commit is contained in:
Kristiyan Kostadinov
2016-11-30 20:51:12 +01:00
committed by tinayuangao
parent cb0d6fca47
commit 76a8d79534
1 changed files with 31 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/progress-bar/_progress-bar-theme.scss
+31 -39
View File
@@ -7,50 +7,19 @@
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
// TODO(josephperrott): Find better way to inline svgs.
// In buffer mode a repeated SVG object is used as a background.
// Each of the following defines the SVG object for each of the class defined colors.
//
// Each string is a URL encoded version of:
//
// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
// version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
// xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
// <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
// </svg>
//
$buffer-bubbles-primary-url: url(
'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
'%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
'%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
md-color($primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
$buffer-bubbles-accent-url: url(
'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
'%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
'%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
md-color($accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
$buffer-bubbles-warn-url: url(
'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
'%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
'%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
md-color($warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
.md-progress-bar-background {
background: $buffer-bubbles-primary-url;
background: #{_md-progress-bar-buffer($primary, 100)};
}
.md-progress-bar-buffer {
background-color: md-color($primary, 100);
}
md-progress-bar[color='accent'] {
.md-progress-bar-background {
background: $buffer-bubbles-accent-url;
background: #{_md-progress-bar-buffer($accent, 100)};
}
.md-progress-bar-buffer {
background-color: md-color($accent, 100);
}
@@ -58,12 +27,12 @@
background-color: md-color($accent, 600);
}
}
md-progress-bar[color='warn'] {
.md-progress-bar-background {
background: $buffer-bubbles-warn-url;
background: #{_md-progress-bar-buffer($warn, 100)};
}
.md-progress-bar-buffer {
background-color: md-color($warn, 100);
}
@@ -76,3 +45,26 @@
background-color: md-color($primary, 600);
}
}
// TODO(josephperrott): Find better way to inline svgs.
// In buffer mode a repeated SVG object is used as a background.
// Each of the following defines the SVG object for each of the class defined colors.
//
// The string is a URL encoded version of:
//
// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
// version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
// xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
// <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
// </svg>
@function _md-progress-bar-buffer($palette, $hue) {
$result: '' +
'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +
'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +
'7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +
'3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +
'%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
md-color($palette, $hue) + '%27%2F%3E%3C%2Fsvg%3E';
@return url($result);
}