Merge pull request #1324 from github/desprite

Replace the license property sprite (green/blue/red circles) with individual icons

Author: mlinksva

_includes/css/responsive.css

@@ -146,25 +146,17 @@
     font-size: 10px;
   }
   .license-rules:not(.license-rules-sidebar) li {
+    padding-left: 14px;
     margin-right: 5px;
     font-size: 10px;
     -webkit-text-size-adjust: none;
   }
-  .license-rules:not(.license-rules-sidebar) li span {
-    background-size: 44px;
+  .license-rules:not(.license-rules-sidebar) .license-marker {
     width: 10px;
-    height: 10px;
+    font-size: 10px;
+    left: 0;
     top: 1px;
-    position: relative;
-  }
-  .license-rules:not(.license-rules-sidebar) .license-conditions span {
-    background-position: -34px 0;
-  }
-  .license-rules:not(.license-rules-sidebar) .license-permissions span {
-    background-position: -24px 0px;
-  }
-  .license-rules:not(.license-rules-sidebar) .license-limitations span {
-    background-position: -14px 0;
+    position: absolute;
   }
 
   .hint--large::after{

_includes/license-overview.html

@@ -33,7 +33,7 @@ <h3 class="license-overview-name">
                   {% assign req = rule_obj.tag %}
                   {% if license[type] contains req %}
                     <li class="{{ req }}">
-                      <span class="license-sprite"></span>
+                      <span class="license-marker">{% if type == "permissions" %}✓{% elsif type == "conditions" %}ⓘ{% else %}✕{% endif %}</span>
                       {{ rule_obj.label }}
                     </li>
                   {% endif %}

_includes/sidebar.html

@@ -38,7 +38,7 @@ <h4 id="optional-steps">Optional steps</h4>
 
   <div class="source">
     <a href="https://spdx.org/licenses/{{ page.spdx-id }}{% if lateronly %}-or-later{% endif %}.html">
-      <span class="license-sprite"></span>
+      <span class="source-marker" aria-hidden="true">↗</span>
       Source
     </a>
   </div>

_layouts/license.html

@@ -32,7 +32,7 @@
                           {% assign req = rule_obj.tag %}
                           {% if page[type] contains req %}
                             <li class="{{ req }}">
-                              <span class="license-sprite"></span>
+                              <span class="license-marker">{% if type == "permissions" %}✓{% elsif type == "conditions" %}ⓘ{% else %}✕{% endif %}</span>
                               {{ rule_obj.label }}
                             </li>
                           {% endif %}

appendix.md

@@ -43,12 +43,12 @@ If you're here to choose a license, **[start from the home page](/)** to see a f
           {% if r contains req %}
             <td class="license-{{ t }}" style="text-align:center">
               {% if r contains "--" %}
-                {% assign lite = " lite" %}
+                {% assign lite = "lite" %}
               {% else %}
                 {% assign lite = "" %}
               {% endif %}
-              <span class="{{ r | append: lite }}" style="margin: auto;">
-                <span class="license-sprite {{ r }}"></span>
+              <span class="{{ lite }}" style="margin: auto;">
+                <span class="license-marker {{ r }}">{% if t == "permissions" %}✓{% elsif t == "conditions" %}ⓘ{% else %}✕{% endif %}</span>
               </span>
             </td>
             {% assign seen_req = true %}
@@ -66,11 +66,11 @@ If you're here to choose a license, **[start from the home page](/)** to see a f
 
 ## Legend
 
-<p>Open source licenses grant to the public <span class="license-permissions"><span class="license-sprite"></span></span> <b>permissions</b> to do things with licensed works which copyright or other "intellectual property" laws might otherwise disallow.</p>
+<p>Open source licenses grant to the public <span class="license-permissions"><span class="license-marker">✓</span></span> <b>permissions</b> to do things with licensed works which copyright or other "intellectual property" laws might otherwise disallow.</p>
 
-<p>Most open source licenses' grants of permissions are subject to compliance with <span class="license-conditions"><span class="license-sprite"></span></span> <b>conditions</b>.</p>
+<p>Most open source licenses' grants of permissions are subject to compliance with <span class="license-conditions"><span class="license-marker">ⓘ</span></span> <b>conditions</b>.</p>
 
-<p>Most open source licenses also have <span class="license-limitations"><span class="license-sprite"></span></span> <b>limitations</b> that usually disclaim warranty and liability, and sometimes expressly exclude patents or trademarks from licenses' grants.</p>
+<p>Most open source licenses also have <span class="license-limitations"><span class="license-marker">✕</span></span> <b>limitations</b> that usually disclaim warranty and liability, and sometimes expressly exclude patents or trademarks from licenses' grants.</p>
 
 {% for type in types %}
 ### {% if type == "permissions" %}Permissions{% elsif type == "conditions" %}Conditions{% else %}Limitations{% endif %}
@@ -85,8 +85,8 @@ If you're here to choose a license, **[start from the home page](/)** to see a f
       {% else %}
         {% assign lite = "" %}
       {% endif %}
-      <span class="{{ req | append: lite }}">
-        <span class="license-sprite {{ req }}"></span>
+      <span class="{{ lite | strip }}">
+        <span class="license-marker {{ req }}">{% if type == "permissions" %}✓{% elsif type == "conditions" %}ⓘ{% else %}✕{% endif %}</span>
       </span>
       {{ rule_obj.description }}
     </dd>

assets/css/application.scss

@@ -300,6 +300,8 @@ strong {
 }
 
 .license-rules li {
+  position: relative;
+  padding-left: 18px;
   margin-right: 15px;
   margin-bottom: 5px;
 }
@@ -308,17 +310,39 @@ strong {
   color: #444;
 }
 
-.license-sprite {
-  background-image: url(../img/license-sprite.png);
-  background-repeat: no-repeat;
+.source-marker {
+  display: inline-block;
+  width: 16px;
+  text-align: center;
+  margin-right: 4px;
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+.license-marker {
   display: inline-block;
+  width: 12px;
+  text-align: center;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.license-rules li .license-marker {
+  position: absolute;
+  left: 0;
+  top: 0.1em;
 }
+.license-types td .license-marker { display: block; margin: 0 auto; }
+.license-types td .license-marker,
+.license-types dd .license-marker { font-size: 0.8125rem; }
 
-.sidebar .source span   { background-position: 0 0;     width: 16px; height: 12px; }
-.license-limitations span { background-position: -16px 0; width: 12px; height: 12px; }
-.license-permissions span { background-position: -28px 0; width: 12px; height: 12px; }
-.license-conditions span  { background-position: -40px 0; width: 12px; height: 12px; }
-.lite span { opacity: 0.5; }
+.license-permissions .license-marker { color: #298625; }
+.license-conditions .license-marker { color: #0d648a; }
+.license-limitations .license-marker { color: #812a28; }
+
+.license-permissions .lite .license-marker { color: rgba(41, 134, 37, 0.5); }
+.license-conditions .lite .license-marker { color: rgba(13, 100, 138, 0.5); }
+.license-limitations .lite .license-marker { color: rgba(129, 42, 40, 0.5); }
 
 .license-rules-sidebar li {
   float: none;
@@ -492,6 +516,7 @@ strong {
 // Selecting all the tooltip bodies to increase their font-size
 [class*="hint--"][aria-label]:after {
   font-size: 0.80rem;
+  font-weight: 400;
   text-shadow: none;
 }
 
@@ -554,13 +579,6 @@ strong {
     background-size: 72px 182px;
   }
 
-  .license-sprite {
-    background-image: url(../img/license-sprite@2x.png);
-    -webkit-background-size: 52px 12px;
-    -moz-background-size: 52px 12px;
-    background-size: 52px 12px;
-  }
-
 }
 
 {% include css/responsive.css %}