6-page-content-elements edit

rrssb edit

Ridiculously Responsive Social Sharing Buttons plugin

HTML
Output
SCSS

Expand

Copy

Edit

<ul class="rrssb-buttons clearfix rrssb-1"> <li class="rrssb-email" data-initwidth="25" data-size="33" style="width: calc(33.3333% - 14px);">  <a href="https://share.wm.edu?t=&u=https://www.wm.edu/news/stories/2019/dane-fischer-named-31st-william-mary-head-mens-basketball-coach.php"> <span class="rrssb-icon"> <svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 28 28" height="28px" version="1.1" viewBox="0 0 28 28" width="28px" x="0px" xml:space="preserve" xmlns:xlink="https://www.w3.org/1999/xlink" y="0px"> <g> <path d="M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z"> </path> </g> </svg> </span> <span class="rrssb-text">email</span> </a> </li> <li class="rrssb-facebook" data-initwidth="25" data-size="60" style="width: calc(33.3333% - 14px);">  <a class="popup" href="https://www.facebook.com/sharer/sharer.php?u=https://www.wm.edu/news/stories/2019/dane-fischer-named-31st-william-mary-head-mens-basketball-coach.php&t=" "=""> <span class=" rrssb-icon facebook-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 28 28" style="image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"> <defs> <style type="text/css" /></defs><path class="fil0" d="M27 14C27 6.9 21.2 1 14 1 6.9 1 1 6.9 1 14 1 20.5 5.8 25.9 12 26.9L12 17.8 8.7 17.8 8.7 14 12 14 12 11.2C12 7.9 13.9 6.1 16.9 6.1 18.3 6.1 19.8 6.4 19.8 6.4L19.8 9.6 18.2 9.6C16.6 9.6 16.1 10.6 16.1 11.6L16.1 14 19.7 14 19.1 17.8 16.1 17.8 16.1 26.9C22.3 25.9 27 20.5 27 14Z" fill="rgb(25, 119, 243)"/><path class="fil1" d="M19.1 17.8L19.7 14 16.1 14 16.1 11.6C16.1 10.6 16.6 9.6 18.2 9.6L19.8 9.6 19.8 6.4C19.8 6.4 18.3 6.1 16.9 6.1 13.9 6.1 12 7.9 12 11.2L12 14 8.7 14 8.7 17.8 12 17.8 12 26.9C12.7 27 13.3 27 14 27 14.7 27 15.4 27 16.1 26.9L16.1 17.8 19.1 17.8Z" fill="rgb(255, 255, 255)"/></svg> </span> <span class="rrssb-text">facebook</span> </a> </li> <li class="rrssb-twitter" data-initwidth="25" data-size="48" style="width: calc(33.3333% - 14px);">  <a class="popup" href="https://twitter.com/home?status= : https://www.wm.edu/news/stories/2019/dane-fischer-named-31st-william-mary-head-mens-basketball-coach.php"> <span class="rrssb-icon"> <svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 28 28" height="28px" id="Layer_1" version="1.1" viewBox="0 0 28 28" width="28px" x="0px" xml:space="preserve" xmlns:xlink="https://www.w3.org/1999/xlink" y="0px"> <path d="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z"> </path> </svg> </span> <span class="rrssb-text">twitter</span> </a> </li> <li class="rrssb-linkedin small" data-initwidth="25" data-size="51" style="width: 42px;">  <a class="popup" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.wm.edu/news/stories/2019/dane-fischer-named-31st-william-mary-head-mens-basketball-coach.php&title="> <span class="rrssb-icon"> <svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 28 28" height="28px" id="Layer_1" version="1.1" viewBox="0 0 28 28" width="28px" x="0px" xml:space="preserve" xmlns:xlink="https://www.w3.org/1999/xlink" y="0px"> <path d="M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803 c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048 h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501 c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546 C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z"> </path> </svg> </span> <span class="rrssb-text">linkedin</span> </a> </li> </ul>

Copy

Edit

/* scss/6-page-content-elements/_rrssb.scss */ /* Ridiculously Responsive Social Sharing Buttons, last update: June 13 2016 */ .rrssb-buttons { box-sizing: border-box; // width: 100%; height: 36px; margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: font(text-sans); font-size: 12px; } .rrssb-buttons:after { clear: both; } .rrssb-buttons:after, .rrssb-buttons:before { display: table; content: " "; } .user_content .rrssb-buttons li { float: left; box-sizing: border-box; height: 100%; margin: 0; padding: 0 2px; list-style: none; line-height: 13px; } .rrssb-buttons li.rrssb-email a { background-color: var(--color-wmgreen-90); } .rrssb-buttons li.rrssb-email a:hover { background-color: black; } .rrssb-buttons li.rrssb-facebook a { background-color: scale-color(#1877f2, $lightness: -10%); } .rrssb-buttons li.rrssb-facebook a:hover { background-color: scale-color(#1877f2, $lightness: -15%); } .rrssb-buttons li.rrssb-tumblr a { background-color: #32506d; } .rrssb-buttons li.rrssb-tumblr a:hover { background-color: #22364a; } .rrssb-buttons li.rrssb-linkedin a { background-color: #007bb5; } .rrssb-buttons li.rrssb-linkedin a:hover { background-color: scale-color(#007bb5, $lightness: -15%); } .rrssb-buttons li.rrssb-twitter a { background-color: scale-color(#1da1f2, $lightness: -25%); } .rrssb-buttons li.rrssb-twitter a:hover { background-color: scale-color(#1da1f2, $lightness: -15%); } .rrssb-buttons li.rrssb-googleplus a { background-color: #e93f2e; } .rrssb-buttons li.rrssb-googleplus a:hover { background-color: #ce2616; } .rrssb-buttons li.rrssb-youtube a { background-color: #df1c31; } .rrssb-buttons li.rrssb-youtube a:hover { background-color: #b21627; } .rrssb-buttons li.rrssb-reddit a { background-color: #8bbbe3; } .rrssb-buttons li.rrssb-reddit a:hover { background-color: #62a3d9; } .rrssb-buttons li.rrssb-pinterest a { background-color: #b81621; } .rrssb-buttons li.rrssb-pinterest a:hover { background-color: #8a1119; } .rrssb-buttons li.rrssb-pocket a { background-color: #ed4054; } .rrssb-buttons li.rrssb-pocket a:hover { background-color: #e4162d; } .rrssb-buttons li.rrssb-github a { background-color: #444; } .rrssb-buttons li.rrssb-github a:hover { background-color: #2b2b2b; } .rrssb-buttons li.rrssb-instagram a { background-color: #125688; } .rrssb-buttons li.rrssb-instagram a:hover { background-color: #0c3a5b; } .rrssb-buttons li.rrssb-delicious a { background-color: #0b79e5; } .rrssb-buttons li.rrssb-delicious a:hover { background-color: #095fb4; } .rrssb-buttons li.rrssb-vk a { background-color: #4d71a9; } .rrssb-buttons li.rrssb-vk a:hover { background-color: #3d5a86; } .rrssb-buttons li.rrssb-hackernews a { background-color: #f60; } .rrssb-buttons li.rrssb-hackernews a:hover { background-color: #cc5200; } .rrssb-buttons li.rrssb-whatsapp a { background-color: #43d854; } .rrssb-buttons li.rrssb-whatsapp a:hover { background-color: #28c039; } .rrssb-buttons li.rrssb-print a { background-color: #8d98a2; } .rrssb-buttons li.rrssb-print a:hover { background-color: #717f8b; } .rrssb-buttons li a { position: relative; display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 11px 7px 12px 27px; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 2px; background-color: #ccc; font-weight: 700; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .rrssb-buttons li a .rrssb-icon { position: absolute; top: 0; left: 10px; display: block; width: 10%; padding-top: 9px; color: white; } .rrssb-buttons li a .rrssb-icon.fa-facebook { top: 0px; @include breakpoint(801px) { top: 13px; } @include breakpoint(930px) { top: 0px; } @include breakpoint(1125px) { top: 13px; } @include breakpoint(1215px) { top: 0px; } } .rrssb-buttons li a .rrssb-icon svg { width: 17px; height: 17px; } .rrssb-buttons li.rrssb-facebook a .rrssb-icon svg path.fil1 { fill: rgb(25, 119, 243); } .rrssb-buttons li a .rrssb-icon svg path { fill: #fff; } .rrssb-buttons li a .rrssb-text { color: #fff; } .rrssb-buttons li a:active { box-shadow: inset 1px 3px 15px 0 rgba(22, 0, 0, 0.25); } .rrssb-buttons li.small a { padding: 0; } .rrssb-buttons li.small a .rrssb-icon { position: relative; top: auto; left: auto; overflow: hidden; width: 100%; margin: 0 auto; } .rrssb-buttons li.small a .rrssb-text { visibility: hidden; } .rrssb-buttons.large-format, .rrssb-buttons.large-format li { height: auto; } .rrssb-buttons.large-format li a { padding: 8.5% 0 8.5% 12%; border-radius: 0.2em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .rrssb-buttons.large-format li a .rrssb-icon { left: 7%; width: 12%; height: 100%; padding-top: 0; } .rrssb-buttons.large-format li a .rrssb-icon svg { position: absolute; top: 0; width: 100%; height: 100%; } .rrssb-buttons.large-format li a .rrssb-text { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .rrssb-buttons.small-format { padding-top: 5px; } .rrssb-buttons.small-format li { height: 80%; padding: 0 1px; } .rrssb-buttons.small-format li a .rrssb-icon { height: 100%; padding-top: 0; } .rrssb-buttons.small-format li a .rrssb-icon svg { position: relative; top: 6px; width: 80%; height: 48%; } .rrssb-buttons.tiny-format { position: relative; height: 22px; } .rrssb-buttons.tiny-format li { padding-right: 7px; } .rrssb-buttons.tiny-format li a { padding: 0; background-color: transparent; } .rrssb-buttons.tiny-format li a .rrssb-icon svg { width: 100%; height: 70%; } .rrssb-buttons.tiny-format li a:active, .rrssb-buttons.tiny-format li a:hover { background-color: transparent; } .rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path { fill: #0a88ff; } .rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path { fill: #0054a3; } .rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path { fill: #306199; } .rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path { fill: #18304b; } .rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path { fill: #32506d; } .rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path { fill: #121d27; } .rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path { fill: #007bb6; } .rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path { fill: #003650; } .rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path { fill: #26c4f1; } .rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path { fill: #0b84a6; } .rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path { fill: #e93f2e; } .rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path { fill: #a01e11; } .rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon svg path { fill: #df1c31; } .rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon svg path { fill: #84111d; } .rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path { fill: #8bbbe3; } .rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path { fill: #398bcf; } .rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path { fill: #b81621; } .rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path { fill: #5d0b11; } .rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path { fill: #ed4054; } .rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path { fill: #b61124; } .rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon svg path { fill: #444; } .rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon svg path { fill: #111; } .rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon svg path { fill: #125688; } .rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon svg path { fill: #061d2e; } .rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path { fill: #0b79e5; } .rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path { fill: #064684; } .rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path { fill: #4d71a9; } .rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path { fill: #2d4263; } .rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path { fill: #f60; } .rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path { fill: #993d00; } .rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon svg path { fill: #43d854; } .rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon:hover .rrssb-icon svg path { fill: #1f962d; } .rrssb-buttons.tiny-format li.rrssb-print a .rrssb-icon svg path { fill: #8d98a2; } .rrssb-buttons.tiny-format li.rrssb-print a .rrssb-icon:hover .rrssb-icon svg path { fill: #5a656f; } .rrssb-buttons li.rrssb-print a .rrssb-icon svg path:nth-child(2) { fill: none; } /* RRSSB - WM tweak */ .rrssb-buttons { font-size: 11px !important; } .rrssb-buttons li a { font-weight: 500 !important; }