superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.22

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "qcode"
+    ]
+}

package/app/fonts/sd_icons.svg

@@ -7,15 +7,15 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe600;" glyph-name="photo" d="M656 421.394c0-79.171-64.181-143.352-143.352-143.352s-143.352 64.181-143.352 143.352c0 79.171 64.181 143.352 143.352 143.352s143.352-64.181 143.352-143.352zM860 768h-140l-112 128h-192l-112-128h-140c-55.228 0-100-44.772-100-100v-504c0-55.228 44.772-100 100-100h696c55.228 0 100 44.772 100 100v504c0 55.228-44.772 100-100 100zM512 197.408c-123.64 0-223.986 100.346-223.986 223.986 0 123.642 100.346 223.988 223.986 223.988s223.986-100.346 223.986-223.988c0-123.64-100.346-223.986-223.986-223.986z" />
-<glyph unicode="&#xe601;" glyph-name="video" d="M768 576v192c0 31.318-32.682 64-64 64h-640c-31.318 0-64-32.682-64-64v-576c0-31.318 32.682-64 64-64h640c31.318 0 64 32.682 64 64v192l256-192v575.854l-256-191.854z" />
+<glyph unicode="&#xe600;" glyph-name="photo" d="M608 896l112-128h140c55.228 0 100-44.772 100-100v-504c0-55.228-44.772-100-100-100h-696c-55.228 0-100 44.772-100 100v504c0 55.228 44.772 100 100 100h140l112 128zM512 645.382c-123.64 0-223.986-100.346-223.986-223.988 0-123.64 100.346-223.986 223.986-223.986s223.986 100.346 223.986 223.986c0 123.642-100.346 223.988-223.986 223.988zM512.648 564.746c79.118 0 143.352-64.234 143.352-143.352s-64.234-143.352-143.352-143.352-143.352 64.234-143.352 143.352 64.234 143.352 143.352 143.352z" />
+<glyph unicode="&#xe601;" glyph-name="video" d="M768 544v160c0 35.346-28.654 64-64 64h-576c-35.346 0-64-28.654-64-64v-512c0-35.346 28.654-64 64-64h576c35.346 0 64 28.654 64 64v160l192-160v512z" />
 <glyph unicode="&#xe602;" glyph-name="map-marker" d="M512 896c-173.828 0-314.416-140.59-314.416-314.416 0-235.814 314.416-581.584 314.416-581.584s314.416 345.77 314.416 581.584c0 173.826-140.588 314.416-314.416 314.416zM512 469.292c-61.986 0-112.292 50.306-112.292 112.292s50.306 112.292 112.292 112.292 112.292-50.306 112.292-112.292-50.308-112.292-112.292-112.292z" />
 <glyph unicode="&#xe603;" glyph-name="slideshow" d="M64 617.91l-34-13.366c-11.238-4.506-19.029-15.308-19.029-27.93 0-3.953 0.764-7.727 2.153-11.184l-0.072 0.202 50.948-129.576v181.854zM931.498 576h-772.898c-16.9 0-30.6-13.7-30.6-30.6v0-578.8c0-16.9 13.7-30.6 30.6-30.6h772.896c16.9 0 30.6 13.7 30.6 30.6v0 578.8c0 16.899-13.699 30.599-30.598 30.6v0zM192 64l192 256 128-176 176 272 208-352h-704zM655.272 720l101.186-80h206.28l-101.8 258.926c-4.515 11.259-15.337 19.065-27.982 19.065-3.96 0-7.741-0.766-11.204-2.157l0.202 0.072-701.766-275.906h518.348z" />
-<glyph unicode="&#xe604;" glyph-name="text" d="M831.6 896h-639.2c-35.4 0-64.4-29-64.4-64.4v-703c0-35.4 29-64.4 64.4-64.4h639c35.4 0 64.4 29 64.4 64.4v703c0.2 35.4-28.8 64.4-64.2 64.4zM704 256h-384v64h384v-64zM704 384h-384v64h384v-64zM704 512h-384v64h384v-64zM704 640h-384v64h384v-64z" />
-<glyph unicode="&#xe605;" glyph-name="file" d="M896 576l-320 320h-320.666c-34.936-0.105-63.229-28.398-63.334-63.324v-769.342c0.105-34.936 28.398-63.229 63.324-63.334h577.342c34.936 0.105 63.229 28.398 63.334 63.324v512.676zM832 576h-256v256z" />
+<glyph unicode="&#xe604;" glyph-name="text" d="M832 896h-640c-35.4 0-64-28.6-64-64v-768c0-35.4 28.6-64 64-64h640c35.4 0 64.001 28.6 64.001 64v768c0.199 35.4-28.601 64-64.001 64zM704 256h-384v64h384zM704 384h-384v64h384zM704 512h-384v64h384zM704 640h-384v64h384z" />
+<glyph unicode="&#xe605;" glyph-name="file" d="M896 576l-320 320h-384c-34.706 0-64-29.294-64-64v-768c0-34.706 29.294-64 64-64h640c34.706 0 64 29.294 64 64zM832 576h-192c-35.346 0-64 28.654-64 64v192z" />
 <glyph unicode="&#xe606;" glyph-name="calender" d="M256 512h256v-256h-256zM896 832h-64v64h-128v-64h-384v64h-128v-64h-64c-43.316 0-64-20.684-64-64v-704c0-43.316 20.684-64 64-64h768c43.316 0 64 20.684 64 64v704c0 43.316-20.684 64-64 64zM896 64h-768v576h768v-576z" />
 <glyph unicode="&#xe607;" glyph-name="composite" d="M64 896h896v-192h-896zM128 640v-512c0-35.346 28.654-64 64-64h640c35.346 0 64 28.654 64 64v512h-768zM704 448h-384v128h384v-128z" />
-<glyph unicode="&#xe608;" glyph-name="audio" d="M0 640v-320h192l320-256v832l-320-256h-192zM710.152 478.396c0 94.98-54.734 176.544-134.152 216.252v-431.968c79.418 39.174 134.152 120.738 134.152 215.716zM576 949v-110.54c155.078-46.148 268.302-189.958 268.302-360.062s-113.224-313.916-268.302-360.064v-110.54c215.178 48.832 375.624 240.936 375.624 470.604s-160.446 421.77-375.624 470.602z" />
+<glyph unicode="&#xe608;" glyph-name="audio" d="M0 640v-320h192l320-256v832l-320-256zM710.152 478.396c0 94.98-54.734 176.544-134.152 216.252v-431.968c79.418 39.174 134.152 120.738 134.152 215.716zM576 949v-110.54c155.078-46.148 268.302-189.958 268.302-360.062s-113.224-313.916-268.302-360.064v-110.54c215.178 48.832 375.624 240.936 375.624 470.604s-160.446 421.77-375.624 470.602z" />
 <glyph unicode="&#xe609;" glyph-name="stream" d="M832 768h-640c-35.346 0-64-28.654-64-64v-64c0-35.346 28.654-64 64-64h640c35.346 0 64 28.654 64 64v64c0 35.346-28.654 64-64 64zM256 640h-64v64h64v-64zM832 512h-640c-35.346 0-64-28.652-64-64v-64c0-35.348 28.654-64 64-64h640c35.346 0 64 28.652 64 64v64c0 35.348-28.654 64-64 64zM256 384h-64v64h64v-64zM832 256h-640c-35.346 0-64-28.652-64-64v-64c0-35.348 28.654-64 64-64h640c35.346 0 64 28.652 64 64v64c0 35.348-28.654 64-64 64zM256 128h-64v64h64v-64z" />
 <glyph unicode="&#xe60a;" glyph-name="ingest" d="M832 384v-256h-640v256h-128v-384h896v384zM770 512h-190v256h-132v-256h-192l256-256zM384 256h-128v-64h192zM768 192v64h-128l-64-64z" />
 <glyph unicode="&#xe60b;" glyph-name="archive" d="M960 768h-320v-320h128l-224-256-224 256h128v320h-320c-35.346 0-64-28.654-64-64v-192h64v-448c0-35.346 28.654-64 64-64h704c35.346 0 64 28.654 64 64v448h64v192c0 35.346-28.654 64-64 64z" />
@@ -47,7 +47,7 @@
 <glyph unicode="&#xe625;" glyph-name="upload" d="M544 704l-416-384h256v-384h320v384h256l-416 384zM960 832v128h-832v-128h832z" />
 <glyph unicode="&#xe626;" glyph-name="repeat" d="M511.408 119.25c-182.558 0-330.48 148.006-330.48 330.478s147.922 330.48 330.48 330.48c146.956 0 202.996-64.658 202.996-64.658l-122.404-139.55h304v336l-102.712-110.676c0 0-98.958 87.77-281.88 87.77-242.24 0-439.376-197.050-439.376-439.3 0-242.226 197.136-439.28 439.376-439.28 242.238 0.002 439.592 195.26 439.592 437.486h-103c0-182.538-154.044-328.75-336.592-328.75z" />
 <glyph unicode="&#xe627;" glyph-name="refresh" d="M180.95 448c-0.002 0.576-0.022 1.15-0.022 1.728 0 182.472 147.922 330.48 330.48 330.48 146.956 0 202.996-64.658 202.996-64.658l-122.404-139.55h304v336l-102.712-110.676c0 0-98.958 87.77-281.88 87.77-242.24 0-439.376-197.050-439.376-439.3 0-0.6 0.020-1.196 0.022-1.796h108.896zM843.050 448c0.002-0.576 0.022-1.15 0.022-1.728 0-182.472-147.922-330.48-330.48-330.48-146.956 0-202.996 64.658-202.996 64.658l122.404 139.55h-304v-336l102.712 110.676c0 0 98.958-87.77 281.88-87.77 242.24 0 439.376 197.050 439.376 439.3 0 0.6-0.020 1.196-0.022 1.796h-108.896z" />
-<glyph unicode="&#xe628;" glyph-name="list-alt" d="M836.694 896h-649.388c-32.754 0-59.306-26.552-59.306-59.306v-777.388c0-32.754 26.552-59.306 59.306-59.306v0h649.388c32.754 0 59.306 26.552 59.306 59.306v0 777.388c0 32.754-26.552 59.306-59.306 59.306v0zM320 256h-64v64h64v-64zM320 384h-64v64h64v-64zM320 512h-64v64h64v-64zM320 640h-64v64h64v-64zM768 256h-384v64h384v-64zM768 384h-384v64h384v-64zM768 512h-384v64h384v-64zM768 640h-384v64h384v-64z" />
+<glyph unicode="&#xe628;" glyph-name="list-alt" d="M832 896h-640c-34.7 0-64-29.3-64-64v-768c0-32.7 29.3-64 64-64h640c34.7 0 64 29.3 64 64v768c0 34.7-29.3 64-64 64zM320 256h-64v64h64zM320 384h-64v64h64zM320 512h-64v64h64zM320 640h-64v64h64zM768 256h-384v64h384zM768 384h-384v64h384zM768 512h-384v64h384zM768 640h-384v64h384z" />
 <glyph unicode="&#xe629;" glyph-name="plus-large" d="M896 512h-320v320h-128v-320h-320v-128h320v-320h128v320h320z" />
 <glyph unicode="&#xe62a;" glyph-name="picture" d="M960 128.284v639.432c0 35.503-28.781 64.284-64.284 64.284v0h-767.432c-35.503 0-64.284-28.781-64.284-64.284v0-639.432c0-35.503 28.781-64.284 64.284-64.284v0h767.432c35.503 0 64.284 28.781 64.284 64.284v0zM336 432l128-144.556 176 272.556 256-368h-752z" />
 <glyph unicode="&#xe62b;" glyph-name="question-sign" d="M512 895.998c-247.424 0-448-200.578-448-448s200.576-448 448-448 448 200.578 448 448-200.576 448-448 448zM576 128h-128v128h128v-128zM512 320c-54.666 0-64 0-64 0v112c0 0 178.666-35.334 178.666 101.334 0 54.666-27.334 109.334-109.334 109.334-109.332-0.002-109.332-109.334-109.332-109.334h-109.334c0 0 0 218.666 218.666 218.666 109.334 0 218.668-54.666 218.668-218.666 0-136.668-87.334-213.334-224-213.334z" />
@@ -79,7 +79,7 @@
 <glyph unicode="&#xe645;" glyph-name="plus-small" d="M768 512h-192v192h-128v-192h-192v-128h192v-192h128v192h192z" />
 <glyph unicode="&#xe646;" glyph-name="minus-small" d="M256 512h512v-128h-512v128z" />
 <glyph unicode="&#xe647;" glyph-name="close-small" d="M835.672 203.3l-244.004 243.878 241.518 241.594-77.296 77.098-243.812-243.824-243.75 243.694-77.17-77.36 242.092-242.032-243.75-243.67 79.72-79.588 241.966 242.086 243.238-243.176z" />
-<glyph unicode="&#xe648;" glyph-name="post" d="M896 832h-768c-33 0-64-33-64-64v-704l192 192h640c32 0 64 30 64 64v448c0 31-30 64-64 64zM640 384h-384v64h384v-64zM768 512h-512v64h512v-64zM768 640h-512v64h512v-64z" />
+<glyph unicode="&#xe648;" glyph-name="post" d="M896 832h-768c-33.3 0-64-28.7-64-64v-704l192 192h640c34.7 0 64 29.3 64 64v448c0 34.7-29.3 64-64 64zM640 384h-384v64h384zM768 512h-512v64h512zM768 640h-512v64h512z" />
 <glyph unicode="&#xe649;" glyph-name="external" d="M832 128l-640.588-0.586 0.588 640.586h192v128h-192.588c-70.714 0-127.412-57.336-127.412-127.414v-640.586c0-70.078 56.698-128 127.412-128h641.174c70.078 0 127.414 57.336 127.414 127.414v192.586h-127.412l-0.588-192zM512 896v-128h224l-424-424 96-96 424 424v-224l128-0.126v448.126z" />
 <glyph unicode="&#xe64a;" glyph-name="chevron-up-thin" d="M857.518 349.148l-345.204 354.852-338.98-358.16 74.562-70.562 265.484 280.518 270.562-278.214z" />
 <glyph unicode="&#xe64b;" glyph-name="chevron-down-thin" d="M167.282 630.128l345.204-354.85 338.98 358.16-74.562 70.562-265.484-280.52-270.562 278.216z" />
@@ -186,4 +186,11 @@
 <glyph unicode="&#xe6b0;" glyph-name="arrow_small" d="M320 320v-64h64l256 256v-192h128v384h-384v-128h192z" />
 <glyph unicode="&#xe6b1;" glyph-name="clean_all" d="M769.032 480c-0.594 25.87-1.032 52.57-1.032 80 0 48-35.818 80-80 80h-112l16 176c0 44.182-35.818 80-80 80s-80-35.818-80-80l16-176h-112c-44.182 0-80-32-80-80 0-12.182-0.824-41.216-4.972-80h518.004zM247.082 448c-16.21-116.3-61.060-289.664-183.082-384 8.212 0 112.528 0 220.346 0 48.088 48.254 71.068 91.66 96 159.25 0.452 1.226 2.272 0.86 2.25-0.446-1.38-76.748-25.394-132.882-39.074-158.802 61.704 0 125.992 0 182.998 0 21.324 28.882 34.74 62.266 46.144 95.41 0.37 1.074 1.77 0.564 1.686-0.582-3.252-44.010-7.996-74.162-12.97-94.828 10.592 0 20.838 0 30.62 0 193.734 0 184.006 155.668 177.84 384h-522.758z" />
 <glyph unicode="&#xe6b2;" glyph-name="broascast" d="M896 704h-293.786l210.586 210.586-44.8 45.414-256-256-256 256-45.414-45.414 211.2-210.586h-293.786c-70.4 0-128-56.986-128-128v-512c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v512c0 71.014-57.6 128-128 128zM128 64v512h768v-512zM704 320l-320-192v384z" />
+<glyph unicode="&#xe6b3;" glyph-name="photo-cancel" d="M67.882 891.8l123.8-123.8h0.228l175.541-175.541-0.123-0.105 57.603-57.603c0.043 0.033 0.086 0.066 0.129 0.1l201.045-201.045-0.101-0.128 56.955-56.956c0.035 0.041 0.070 0.083 0.105 0.124l207.943-207.946-0.174-0.053 65.174-65.174-67.882-67.882-128.208 128.208h-595.918c-54.676 0-99.104 43.881-99.987 98.346l-0.013 1.654v504c0 25.557 9.588 48.875 25.363 66.554l-89.363 89.364zM608 896l112-128h140c54.676 0 99.104-43.881 99.987-98.346l0.013-1.654v-504c0-8.682-1.107-17.106-3.186-25.139l-227.618 227.619c4.434 17.573 6.79 35.97 6.79 54.914 0 123.642-100.346 223.988-223.986 223.988-18.944 0-37.342-2.356-54.916-6.79l-142.036 142.034 100.952 115.374zM288.014 421.394c0-123.64 100.346-223.986 223.986-223.986 33.528 0 65.344 7.379 93.91 20.601l-63.198 63.196c-9.696-2.072-19.753-3.163-30.063-3.163-79.118 0-143.352 64.234-143.352 143.352 0 10.31 1.091 20.368 3.163 30.063l-63.845 63.846c-13.221-28.566-20.6-60.381-20.6-93.91zM532.268 563.412c63.434-8.698 113.7-58.963 122.398-122.398z" />
+<glyph unicode="&#xe6b4;" glyph-name="video-cancel" d="M67.882 891.8l123.796-123.796 0.23-0.002 764.1-764.328-67.882-67.882-192.21 192.21-567.916-0.002c-34.993 0-63.426 28.084-63.991 62.942l-0.009 1.058v512c0 15.615 5.592 29.924 14.884 41.034l-78.884 78.884zM327.672 768.002l376.328-0.002c34.993 0 63.426-28.084 63.991-62.942l0.009-1.058v-160l192 160v-512l-192 160v-24.324z" />
+<glyph unicode="&#xe6b5;" glyph-name="text-cancel" d="M896 63.882l60.212-60.213-67.882-67.882-64.212 64.213h-632.118c-35.046 0-63.427 28.031-63.991 62.94l-0.009 1.060v632.118l-127.796 127.795 67.882 67.882 59.914-59.914v0.234l768-767.998zM832 896c35.046 0 63.623-28.031 63.998-62.94l0.003-1.060-0.001-632.118-192 192v56.118h-56.118l-64 64h120.118v64h-184.118l-64 64h248.118v64h-312.118l-192 192zM504.116 320.002l-184.116-0.002v-64h248.118zM376.118 448h-56.118v-64h120.118z" />
+<glyph unicode="&#xe6b6;" glyph-name="file-cancel" d="M67.882 891.8l60.116-60.114 0.002 0.226 828.009-828.238-67.882-67.882-64.208 64.208h-631.918c-34.359 0-63.414 28.711-63.991 62.96l-0.009 1.040-0.002 631.92-127.998 127.998zM576 896l320-320v-376.324l-696.322 696.324zM576 832v-192c0-34.993 28.084-63.426 62.942-63.991l1.058-0.009h192z" />
+<glyph unicode="&#xe6b7;" glyph-name="audio-cancel" d="M67.882 891.8l195.052-195.052 0.128 0.102 477.43-477.66c0.037 0.039 0.074 0.077 0.111 0.116l75.807-75.805-0.114-0.115 139.712-139.712-67.882-67.882-145.282 145.284c-48.898-33.743-104.339-58.713-164.049-72.639l-2.796-0.643v110.54c31.797 9.462 61.834 23.030 89.496 40.088l-153.496 153.496v-247.918l-320 256h-192v320h183.918l-183.918 183.918zM576 949c215.178-48.832 375.624-240.934 375.624-470.602 0-95.32-27.637-184.169-75.354-258.991l-78.258 78.258c29.502 53.629 46.29 115.232 46.29 180.733 0 168.403-110.971 311.035-263.662 358.648l-4.64 1.414zM576 694.648c79.418-39.708 134.152-121.272 134.152-216.252 0-27.892-4.72-54.628-13.4-79.473l-120.752 120.751zM512 896v-312.326l-173.516 173.514z" />
+<glyph unicode="&#xe6b8;" glyph-name="list-alt-cancel" d="M67.882 891.8l60.116-60.116 0.002 0.228 128-128-0.002-0.228 63.684-63.684h0.23l64.088-64.088-0.002-0.228 63.684-63.684h0.23l64-64h-0.23l64-64h0.23l64-64h-0.23l64-64h0.23l192.088-192.088-0.004-0.226 60.012-60.012-67.882-67.882-64.208 64.208h-631.918c-34.353 0-63.413 30.677-63.991 63.019l-0.009 0.981-0.002 631.92-127.998 127.998zM832 896c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-632.324l-184.324 184.324h56.324v64h-120.324l-63.998 64h184.322v64h-248.322l-64 64h312.322v64h-376.322l-192 192zM567.918 256l-64 64h-119.918v-64zM320 320h-64v-64h64zM439.918 384l-55.92 55.92 0.002-55.92zM320 448h-64v-64h64zM255.998 567.92l0.002-55.92h55.918z" />
+<glyph unicode="&#xe6b9;" glyph-name="post-cancel" d="M67.882 891.8l59.8-59.8 0.228 0.002 128.090-128.092v-0.228l63.68-63.68h0.228l64-64h-0.228l64-64h0.228l64-64h-0.228l64-64h0.23l128-128h-0.23l252.328-252.328-67.882-67.882-320.21 320.21-311.916-0.002-192-192v695.918l-64 64zM896 832c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-448c0-34.353-28.717-63.413-62.961-63.991l-1.039-0.009-56.326 0.002-256.002 256 184.328-0.002v64l-248.328 0.002-64 64 312.328-0.002v64l-376.328 0.002-128 128zM439.916 384.002l-64 64-119.916-0.002v-64zM311.916 512.002l-55.916 55.916v-55.918z" />
 </font></defs></svg>

package/app/img/SD-logo.svg

@@ -0,0 +1,52 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="154px" height="48px" viewBox="0 0 154 48" enable-background="new 0 0 154 48" xml:space="preserve">
+<path fill="#1EB06C" d="M80.711,16.993h-0.057c-0.707-0.933-2.375-1.641-3.564-1.641c-3.79,0-5.883,3.62-5.883,7.241
+	c0,4.582,1.98,8.034,5.883,8.034c1.584,0,2.743-0.65,3.988-1.867l0.17,1.584h2.97V9.922h-3.507V16.993z M80.711,26.497
+	c-0.736,0.565-1.217,1.301-2.715,1.301c-2.093,0-3.28-1.698-3.28-4.809c0-3.112,1.187-4.809,3.28-4.809
+	c1.131,0,2.008,0.594,2.715,1.245V26.497z M59.814,27.629l-2.546-1.585c-0.876,1.019-1.64,1.755-3.281,1.755
+	c-1.641,0-2.999-1.188-3.056-4.243h8.882v-1.443c0-3.536-2.15-6.788-5.996-6.76c-3.988,0-6.393,2.97-6.393,7.638
+	c0,4.667,2.404,7.637,6.222,7.637C56.476,30.628,58.456,29.722,59.814,27.629z M53.761,17.955c1.697,0,2.772,1.188,2.828,3.225
+	h-5.658C50.988,19.144,52.063,17.955,53.761,17.955z M65.75,18.153h-0.057v-2.517H62.47v14.708h3.507v-8.939
+	c0-0.367,1.527-2.375,3.281-2.375c0.254,0,0.453,0,0.622,0.028v-3.706C67.787,15.41,66.6,16.4,65.75,18.153z M126.495,15.636h-4.016
+	l-4.327,5.685h-0.113V9.922h-3.507v20.423h3.507v-4.527l1.782-2.065l3.253,6.592h3.733l-4.639-9.221L126.495,15.636z M92.927,30.628
+	c2.828,0,4.808-0.906,6.165-2.999l-2.545-1.585c-0.877,1.019-1.641,1.755-3.281,1.755c-1.641,0-2.998-1.188-3.055-4.243h8.881
+	v-1.443c0-3.536-2.149-6.788-5.996-6.76c-3.988,0-6.392,2.97-6.392,7.638C86.705,27.657,89.109,30.628,92.927,30.628z M93.04,17.955
+	c1.697,0,2.772,1.188,2.828,3.225h-5.657C90.268,19.144,91.343,17.955,93.04,17.955z M4.272,14.957c0-1.584,1.215-2.262,2.912-2.262
+	c1.838,0,3.055,1.075,3.649,2.658l3.564-1.102C13.18,11.28,10.465,9.64,7.184,9.64c-3.536,0-6.589,2.065-6.589,5.713
+	c0,6.28,10.521,5.488,10.521,9.504c0,1.98-1.499,2.715-3.451,2.715c-2.291,0-3.507-1.272-4.441-3.196L0,25.79
+	c1.16,2.971,4.3,4.838,7.637,4.838c4.525,0,7.156-2.093,7.156-6.281C14.793,17.729,4.272,18.464,4.272,14.957z M25.707,26.242
+	c-0.594,0.68-1.754,1.557-3.281,1.557c-1.188,0-1.81-0.623-1.81-2.603v-9.56h-3.507v10.068c0,3,1.414,4.923,4.356,4.923
+	c1.725,0,3.225-0.962,4.525-1.867v1.584h3.224V15.636h-3.507V26.242z M39.96,15.353c-1.584,0-2.743,0.651-3.762,1.641v-1.357h-3.366
+	v20.082h3.507v-6.732h0.057c0.707,0.934,2.376,1.641,3.564,1.641c3.79,0,5.883-3.621,5.883-7.242
+	C45.843,18.803,43.863,15.353,39.96,15.353z M39.055,27.799c-1.132,0-2.009-0.595-2.716-1.245v-7.071
+	c0.735-0.566,1.217-1.301,2.716-1.301c2.093,0,3.281,1.697,3.281,4.809C42.336,26.1,41.148,27.799,39.055,27.799z M111.762,26.214
+	c0-5.373-7.354-4.299-7.354-6.815c0-0.877,0.623-1.443,1.98-1.443c1.103,0,2.036,0.791,2.743,1.556l2.206-1.923
+	c-1.273-1.499-3.224-2.235-5.176-2.235c-2.545,0-4.865,1.527-4.865,4.272c0,5.12,7.354,4.214,7.354,6.732
+	c0,0.989-0.849,1.669-2.093,1.669c-1.499,0-2.602-0.99-3.422-2.122l-2.348,1.754c1.301,1.924,3.225,2.971,5.572,2.971
+	C109.442,30.628,111.762,29.27,111.762,26.214z M140.611,0l-11.523,3.955l14.217,5.386l-5.218,14.094l9.686-5.538L154,5.063
+	L140.611,0z M51.918,42.583c0-0.549,0.42-0.783,1.007-0.783c0.636,0,1.057,0.372,1.262,0.92l1.232-0.382
+	c-0.42-1.027-1.359-1.595-2.494-1.595c-1.222,0-2.279,0.714-2.279,1.976c0,2.171,3.639,1.897,3.639,3.286
+	c0,0.684-0.518,0.939-1.194,0.939c-0.792,0-1.212-0.439-1.535-1.105l-1.115,0.489c0.4,1.027,1.486,1.672,2.64,1.672
+	c1.565,0,2.475-0.723,2.475-2.171C55.557,43.54,51.918,43.794,51.918,42.583z M97.907,40.831l-2.034,7.071h1.34l0.42-1.525h2.23
+	l0.392,1.525h1.34l-2.005-7.071H97.907z M97.927,45.262l0.831-3.071h0.02l0.792,3.071H97.927z M107.042,44.176
+	c0.773-0.303,1.076-0.87,1.076-1.604c-0.078-1.261-0.988-1.731-2.397-1.731h-2.621v7.062h2.602c1.8,0,2.573-0.763,2.573-1.858
+	C108.275,44.969,107.962,44.548,107.042,44.176z M104.451,41.936h1.35c0.646,0,0.969,0.372,0.969,0.861
+	c0,0.489-0.323,0.861-0.969,0.861h-1.35V41.936z M105.8,46.807h-1.35v-2.054h1.35c0.783,0,1.125,0.352,1.125,1.027
+	C106.926,46.455,106.583,46.807,105.8,46.807z M115.19,42.934c-0.009-1.164-0.655-2.093-2.259-2.093h-2.817v7.062h1.35v-2.875h1.164
+	l1.331,2.875h1.496l-1.555-3.149C114.76,44.509,115.2,43.805,115.19,42.934z M112.461,43.932h-0.998v-1.996h1.232
+	c0.743,0,1.144,0.333,1.144,0.998C113.84,43.599,113.517,43.932,112.461,43.932z M117.195,47.902h1.35v-7.062h-1.35V47.902z
+	 M59.811,40.743c-1.927,0-2.963,1.32-2.963,3.628c0,2.308,1.036,3.629,2.963,3.629c1.927,0,2.964-1.32,2.964-3.629
+	C62.775,42.063,61.738,40.743,59.811,40.743z M59.811,46.866c-1.115,0-1.633-0.841-1.613-2.494c0-1.652,0.509-2.493,1.613-2.493
+	c1.106,0,1.614,0.841,1.614,2.493C61.425,46.025,60.917,46.866,59.811,46.866z M91.129,47.902h1.35v-3.11h2.358v-1.134h-2.358
+	v-1.682h3.15v-1.135h-4.499V47.902z M123.112,46.866c-1.017,0-1.506-0.841-1.486-2.494c0-1.652,0.548-2.493,1.447-2.493
+	c0.665,0,1.086,0.42,1.281,1.016l1.222-0.293c-0.332-1.252-1.115-1.858-2.465-1.858c-1.8,0-2.836,1.32-2.836,3.628
+	c0,2.308,1.036,3.629,2.836,3.629c1.291,0,2.211-0.625,2.631-1.848l-1.252-0.333C124.091,46.65,123.719,46.866,123.112,46.866z
+	 M76.488,42.934c-0.01-1.164-0.655-2.093-2.259-2.093h-2.816v7.062h1.35v-2.875h1.164l1.33,2.875h1.496l-1.555-3.149
+	C76.057,44.509,76.497,43.805,76.488,42.934z M73.759,43.932h-0.998v-1.996h1.232c0.743,0,1.145,0.333,1.145,0.998
+	C75.138,43.599,74.815,43.932,73.759,43.932z M68.262,45.321c0,1.144-0.45,1.545-1.36,1.545c-0.909,0-1.359-0.402-1.359-1.545v-4.48
+	h-1.35v4.421c0,2.063,1.271,2.738,2.709,2.738c1.438,0,2.71-0.675,2.71-2.738v-4.421h-1.35V45.321z M86.112,44.792h2.415v-1.134
+	h-2.415v-1.682h3.325v-1.135h-4.675v7.062h4.783v-1.134h-3.433V44.792z M80.684,46.866c-1.018,0-1.506-0.841-1.487-2.494
+	c0-1.652,0.548-2.493,1.447-2.493c0.665,0,1.085,0.42,1.281,1.016l1.223-0.293c-0.333-1.252-1.115-1.858-2.464-1.858
+	c-1.799,0-2.837,1.32-2.837,3.628c0,2.308,1.037,3.629,2.837,3.629c1.291,0,2.21-0.625,2.631-1.848l-1.252-0.333
+	C81.661,46.65,81.29,46.866,80.684,46.866z"/>
+</svg>

package/app/scripts/toggleBoxNext.js

@@ -23,7 +23,7 @@ export class ToggleBoxNext extends React.Component {
         const {isOpen} = this.state;
 
         const classNames = [
-            `toggle-box toggle-box--${style}`,
+            `toggle-box toggle-box--margin-normal toggle-box--${style}`,
             mode,
         ];
 

package/app/styles/_accessibility.scss

@@ -7,6 +7,7 @@
     height: 0 !important;
     width: 0 !important;
     min-width: 0 !important;
+    min-height: 0 !important;
     overflow: hidden !important;
     font-size: 0.01px !important;
     padding: 0 !important;

package/app/styles/_big-icon-font.scss

@@ -140,6 +140,9 @@ $sd-big-icon-font: (
         &.color--light {
             color: var(--color-text-lighter) !important;
         }
+        &.color--white {
+            color: hsla(214, 13%, 90, 1) !important;
+        }
 
         &.scale--2x {
             --big-icon-size: 52px

package/app/styles/_boxed-list.scss

@@ -42,6 +42,9 @@ $boxed-list-palette: $sd-basic-palette;
     &--selected {
         box-shadow: var(--sd-shadow__item--selected);
     }
+    &--unread {
+        box-shadow: var(--sd-shadow__item--unread);
+    }
     &--clickable {
         &:hover {
             cursor: pointer;

package/app/styles/_buttons.scss

@@ -327,13 +327,13 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     border-radius: $border-radius__base--full;
     background-color: transparent;
     opacity: 0.75;
-    background-color: rgba(55,55,55,0);
-    color: inherit;
+    background-color: hsla(214, 13%, 55%, 0);
+    color: var(--color-icon-default);
     text-decoration: none;
     cursor: pointer;
     flex-shrink: 0;
     [class^="icon-"], [class*=" icon-"] {
-        color: inherit;
+        color: var(--color-icon-default) !important;
         vertical-align: baseline !important;
     }
     &:hover {
@@ -382,7 +382,6 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
         height: $height__button--x-large;
         width: $height__button--x-large;
         [class^="icon-"], [class*=" icon-"] {
-            color: inherit;
             vertical-align: baseline !important;
             font-size: 2.4rem;
             height: 2.4rem;
@@ -398,12 +397,18 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
         }
     }
     &--outlineWhite {
-        color: hsla(214, 13%, 95%, 0.8);
+        color: hsla(214, 13%, 95%, 0.8) !important;
         border: 1px solid currentColor;
+        [class^="icon-"], [class*=" icon-"] {
+            color: hsla(214, 13%, 95%, 0.8) !important;
+        }
         &:hover:not(.icn-btn--disabled) {
-            color: hsla(214, 13%, 95%, 1);
+            color: hsla(214, 13%, 95%, 1) !important;
             border-color: hsla(214, 13%, 95%, 1);
             background-color: hsla(0, 0%, 0%, 0.4);
+            [class^="icon-"], [class*=" icon-"] {
+                color: hsla(214, 13%, 95%, 1) !important;
+            }
         }
         &:active:not(.icn-btn--disabled) {
             border-color: var(--sd-colour-interactive);

package/app/styles/_content-divider.scss

@@ -4,6 +4,9 @@
     padding: 0;
     color: $sd-text;
     list-style: none;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
     border-top: 1px var(--sd-colour-line--medium);
     border-style: solid;
 
@@ -15,8 +18,11 @@
         white-space: nowrap;
         text-align: center;
         border-top: 0;
+        border-bottom: 0;
+        border-left: 0;
+        border-right: 0;
         border-top-color: var(--sd-colour-line--medium);
-        border-top-style: solid;
+        border-style: solid;
     }
 
     &.sd-content-divider--horizontal {
@@ -24,7 +30,23 @@
         clear: both;
         width: 100%;
         min-width: 100%;
-        margin: $sd-base-increment * 3 0;
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
+
+        
     }
     &.sd-content-divider--horizontal.sd-content-divider--with-text {
         margin: 1.6rem 0;
@@ -37,8 +59,10 @@
             border-top-color: transparent;
             border-top-color: inherit;
             border-bottom: 0;
+            border-left: 0;
+            border-right: 0;
             transform: translateY(50%);
-            border-top-style: inherit;
+            border-style: inherit;
         }
         &.sd-content-divider--text-left {
             &::before {
@@ -56,17 +80,31 @@
                 width: 5%;
             }
         }
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: $sd-base-increment / 2 0;
+        }
     }
 
-
     &.sd-content-divider--vertical {
         position: relative;
         display: inline-block;
-        margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
+        //margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
         vertical-align: middle;
         border-top: 0;
         border-left: 1px var(--sd-colour-line--medium);
-        border-left-style: solid;
+        border-style: solid;
         flex-grow: 0;
         align-self: stretch;
         min-height: $sd-base-increment * 2;
@@ -86,9 +124,11 @@
                 position: relative;
                 height: 50%;
                 border-left: 1px var(--sd-colour-line--medium);
+                border-right: 0;
                 border-bottom: 0;
+                border-top: 0;
                 width: 1px;
-                border-left-style: solid;
+                border-style: solid;
             }
             &.sd-content-divider--dashed {
                 &::before, &::after {
@@ -98,11 +138,26 @@
             }
             &.sd-content-divider--dotted {
                 &::before, &::after {
-                    border-left-style: dotted;
+                    border-style: dotted;
                     border-color: var(--sd-colour-line--strong);
                 }
             }
         }
+        &.sd-content-divider--margin-x-small {
+            margin: 0 $sd-base-increment * 1;
+        }
+        &.sd-content-divider--margin-small {
+            margin: 0 $sd-base-increment * 2;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: 0 $sd-base-increment * 3;
+        }
+        &.sd-content-divider--margin-large {
+            margin: 0 $sd-base-increment * 4;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
     }
     &.sd-content-divider--dashed {
         border-style: dashed;

package/app/styles/_hamburger.scss

@@ -0,0 +1,160 @@
+// Settings
+// ==================================================
+$hamburger-layer-width         : 18px !default;
+$hamburger-layer-height        : 3px !default;
+$hamburger-layer-spacing       : 3px !default;
+$hamburger-layer-color         : #fff !default;
+$hamburger-layer-border-radius : 1px !default;
+$hamburger-hover-opacity       : 0.7 !default;
+$hamburger-active-layer-color  : $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+
+// Hamburger
+// ==================================================
+.hamburger {
+    cursor: pointer;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+
+    &:hover {
+        opacity: $hamburger-hover-opacity;
+    }
+  
+    &.is-active {
+        opacity: 0.5;
+      &:hover {
+          opacity: $hamburger-active-hover-opacity;
+      }
+  
+      .hamburger__inner,
+      .hamburger__inner::before,
+      .hamburger__inner::after {
+        background-color: $hamburger-active-layer-color;
+      }
+    }
+  }
+  
+  .hamburger__box {
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+    display: inline-block;
+    position: relative;
+  }
+  
+  .hamburger__inner {
+    display: block;
+    top: 50%;
+    margin-top: $hamburger-layer-height / -2;
+  
+    &,
+    &::before,
+    &::after {
+      width: $hamburger-layer-width;
+      height: $hamburger-layer-height;
+      background-color: $hamburger-layer-color;
+      border-radius: $hamburger-layer-border-radius;
+      position: absolute;
+      transition-property: transform;
+      transition-duration: 0.15s;
+      transition-timing-function: ease;
+    }
+  
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+    }
+  
+    &::before {
+      top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+    }
+  
+    &::after {
+      bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+    }
+  }
+  
+
+// Hamburger animation
+// ==================================================
+
+/* Spin */
+.hamburger--spin {
+    .hamburger__inner {
+        transition-duration: 0.22s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top 0.1s 0.25s ease-in,
+                        opacity 0.1s ease-in;
+        }
+
+        &::after {
+            transition: bottom 0.1s 0.25s ease-in,
+                        transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    &.is-active {
+        .hamburger__inner {
+            transform: rotate(225deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+            top: 0;
+            opacity: 0;
+            transition: top 0.1s ease-out,
+                        opacity 0.1s 0.12s ease-out;
+            }
+
+            &::after {
+            bottom: 0;
+            transform: rotate(-90deg);
+            transition: bottom 0.1s ease-out,
+                        transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}
+
+/* Squeeze */
+.hamburger--squeeze {
+    .hamburger__inner {
+        transition-duration: 0.075s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top 0.075s 0.12s ease,
+                        opacity 0.075s ease;
+        }
+
+        &::after {
+            transition: bottom 0.075s 0.12s ease,
+                        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    &.is-active {
+        .hamburger__inner {
+            transform: rotate(45deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+                top: 0;
+                opacity: 0;
+                transition: top 0.075s ease,
+                            opacity 0.075s 0.12s ease;
+            }
+
+            &::after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition: bottom 0.075s ease,
+                            transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}

package/app/styles/_helpers.scss

@@ -384,7 +384,7 @@ p strong {
     font-weight: 500;
 }
 time {
-    color: $sd-text-lighter;
+    color: $sd-text-light;
     font-weight: 400;
     letter-spacing: .025em;
     &.small {
@@ -446,6 +446,13 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 1.4;
 }
 
+.sd-time {
+    font-size: 1.2rem;
+    display: inline-block;
+    color: var(--color-text-light);
+    letter-spacing: 0.025em;
+}
+
 // Font weights 
 
 .sd-text__light,
@@ -948,16 +955,16 @@ $sd-properties: (padding, margin); // It's generating these properties
 
 // Font size
 .sd-font-size--x-small {
-    font-size: calc(var(--text-size--base) * 1.2); // 14px;
+    font-size: calc(var(--text-size--base) * 1.2); // 12px;
 }
 .sd-font-size--small {
     font-size: calc(var(--text-size--base) * 1.4); // 14px;
 }
 .sd-font-size--medium {
-    font-size: calc(var(--text-size--base) * 1.6); // 14px;
+    font-size: calc(var(--text-size--base) * 1.6); // 16px;
 }
 .sd-font-size--large {
-    font-size: calc(var(--text-size--base) * 2); // 14px;
+    font-size: calc(var(--text-size--base) * 2); // 20px;
 }
 
 // Text colour
@@ -1017,4 +1024,27 @@ $sd-properties: (padding, margin); // It's generating these properties
 }
 .sd-width--full {
     width: var(--width__container--full);
-}
+}
+
+
+.sd-gap--x-small {
+    gap: var(--gap--x-small);
+}
+.sd-gap--small {
+    gap: var(--gap--small);
+}
+.sd-gap--medium {
+    gap: var(--gap--medium);
+}
+.sd-gap--large {
+    gap: var(--gap--large);
+}
+.sd-gap--x-large {
+    gap: var(--gap--x-large);
+}
+.sd-gap--xx-large {
+    gap: var(--gap--xx-large);
+}
+.sd-gap--auto {
+    gap: var(--gap--auto);
+}