diff options
Diffstat (limited to 'app/src/web/assets/css/core/_svg.scss')
-rw-r--r-- | app/src/web/assets/css/core/_svg.scss | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/app/src/web/assets/css/core/_svg.scss b/app/src/web/assets/css/core/_svg.scss new file mode 100644 index 00000000..8c714438 --- /dev/null +++ b/app/src/web/assets/css/core/_svg.scss @@ -0,0 +1,74 @@ +// icons courtesy of https://material.io/icons/ + +$camera: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 -10 50 50"><circle cx="25" cy="23" r="3.2"/><path d="M22 13l-1.83 2H17c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V17c0-1.1-.9-2-2-2h-3.17L28 13h-6zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/><path fill="none" d="M13 11h24v24H13z"/></svg>'; + +// status upload image +._50uu { + @include background-svg($camera); +} + +$video: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 50 50"><path fill="none" d="M13 26h24v24H13z"/><path d="M30 31.5V28c0-.55-.45-1-1-1H17c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>'; + +// status upload video +._50uw { + @include background-svg($video); +} + +$like: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>'; +$like_selected: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$accent}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>'; + +// 2018/12/29 +// Previously ._15km ._15ko::before and ._15km ._15ko._77la::before; however, reaction changes no longer affect this element +// The robust measure seems to be the parent of a[data-sigil~="like-reaction-flyout"] along with [data-sigil~="like"] for an unliked post +// and [data-sigil~="unlike"] for a liked post +._15km ._15ko::before { + @include background-svg($like); + background-position: center !important; +} + +._15km ._15ko._77la::before { + @include background-svg($like_selected); + background-position: center !important; +} + +$comment: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 24 24"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path fill="none" d="M0 0h24v24H0z"/></svg>'; + +._15km ._15kq::before { + @include background-svg($comment); + background-position: center !important; +} + +$share: '<svg xmlns="http://www.w3.org/2000/svg" fill="#{$text}" viewBox="0 0 24 24"><path d="M14 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11z"/><path fill="none" d="M24 0H0v24h24z"/></svg>'; + +._15km ._15kr::before { + @include background-svg($share); + background-position: center !important; +} + +$more_horiz: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#{$text}" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'; + +//$menus: ".sp_89zNula0Qh5", +//".sp_MP2OtCXORz9", +//".sp_NIWBacTn8LF", +//// 2018/12/31 +//".sp_9ZFVhnFyWsw", +//// 2019/01/03 +//".sp_SJIJjSlGEIO"; +// +//$menu_collector: (); +// +//@each $menu in $menus { +// $menu_collector: append($menu_collector, unquote('#{$menu}'), 'comma'); +// $menu_collector: append($menu_collector, unquote('#{$menu}_2x'), 'comma'); +// $menu_collector: append($menu_collector, unquote('#{$menu}_3x'), 'comma'); +//} +// +//#{$menu_collector} { +// @include background-svg($more_horiz); +// background-position: center !important; +//} + +.story_body_container i.img[data-sigil*="story-popup-context"] { + @include background-svg($more_horiz); + background-position: center !important; +}
\ No newline at end of file |