superdesk-ui-framework 3.0.1-beta.9 → 3.0.2

package/dist/examples.bundle.css

@@ -850,7 +850,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     margin: 0;
     font-size: 13px;
     line-height: 1.42857143;
-    color: #333;
+    color: hsl(214, 13%, 20%);
     word-break: break-all;
     word-wrap: break-word;
     background-color: #eee;
@@ -858,11 +858,11 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     border-radius: 2px;
 }
 .docs-page__code-window {
-    border: 1px solid rgba(123, 123, 123, 0.2);
+    border: 1px solid hsla(0, 0%, 48%, 0.2);
     border-radius: 2px;
     margin: 10px 0 20px;
-    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.07);
-    box-shadow: 0 2px 8px rgba(0,0,0,.07);
+    -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
+    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
 }
 .docs-page__window-bar {
     padding: 10px;
@@ -3640,7 +3640,7 @@ doc-react-playground {
   color: var(--sd-colour-interactive) !important; }
 
 .icon--white {
-  color: #fff !important; }
+  color: white !important; }
 
 .icon--light-blue {
   color: #68abc8 !important;
@@ -11105,9 +11105,48 @@ doc-react-playground {
   --icon-base-size: 64px
         ; }
 
+.icon-text-block:before {
+  content: ""; }
+
+.icon-text-block.color--default {
+  color: var(--color-icon-default); }
+
+.icon-text-block.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-text-block.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-text-block.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-text-block.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-text-block.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-text-block.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-text-block.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-text-block.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-text-block.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-text-block.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
 .icn-mix {
   position: relative;
-  display: inline-block;
+  display: inline-flex !important;
   font-size: 16px;
   height: 16px; }
   .icn-mix .icn-mix__icn {
@@ -11118,11 +11157,11 @@ doc-react-playground {
     box-sizing: content-box;
     line-height: 100%;
     color: #9b27b0;
-    right: -0.5rem;
-    bottom: -0.7rem;
+    inset-inline-end: -0.4rem;
+    inset-block-end: -0.6rem;
     height: 1em;
     width: 1em;
-    background-color: var(--sd-item__main-Bg);
+    background-color: var(--sd-item__main-Bg) !important;
     border-radius: var(--b-radius--full);
     padding: 1px;
     z-index: 1;
@@ -11138,8 +11177,8 @@ doc-react-playground {
       font-size: 32px; }
     .icn-mix--2x .icn-mix__sub-icn {
       font-size: 1.6rem;
-      right: -0.6rem;
-      bottom: -0.3rem; }
+      inset-inline-end: -0.6rem;
+      inset-block-end: -0.3rem; }
 
 .double-size-icn {
   display: inline-block;
@@ -11156,13 +11195,13 @@ doc-react-playground {
     opacity: 0.5; }
 
 .subnav .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--100); }
+  background-color: var(--sd-colour-panel-bg--100) !important; }
 
 .subnav--darker .icn-mix__sub-icn {
-  background-color: var(--sd-colour-panel-bg--200); }
+  background-color: var(--sd-colour-panel-bg--200) !important; }
 
 .subnav--dark-blue-grey .icn-mix__sub-icn {
-  background-color: var(--color-subnav-bg--blueGrey-10);
+  background-color: var(--color-subnav-bg--blueGrey-10) !important;
   color: #d686e4; }
 
 .subnav--dark-blue-grey .icn-mix__icn {
@@ -13481,7 +13520,7 @@ doc-react-playground {
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
-  color: #333333;
+  color: var(--color-icon-default);
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
@@ -13490,7 +13529,7 @@ doc-react-playground {
   color: var(--sd-colour-interactive); }
 
 .big-icon--white {
-  color: #fff !important; }
+  color: white !important; }
 
 [class*=big-icon--].red,
 .big-icon--red {
@@ -13499,7 +13538,7 @@ doc-react-playground {
 .big-icon--dashboard {
   content: ""; }
   .big-icon--dashboard.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--dashboard.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--dashboard.color--success {
@@ -13530,7 +13569,7 @@ doc-react-playground {
 .big-icon--view {
   content: ""; }
   .big-icon--view.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--view.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--view.color--success {
@@ -13561,7 +13600,7 @@ doc-react-playground {
 .big-icon--tasks {
   content: ""; }
   .big-icon--tasks.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--tasks.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--tasks.color--success {
@@ -13592,7 +13631,7 @@ doc-react-playground {
 .big-icon--calendar {
   content: ""; }
   .big-icon--calendar.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--calendar.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--calendar.color--success {
@@ -13623,7 +13662,7 @@ doc-react-playground {
 .big-icon--marked-star {
   content: ""; }
   .big-icon--marked-star.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--marked-star.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--marked-star.color--success {
@@ -13654,7 +13693,7 @@ doc-react-playground {
 .big-icon--archive {
   content: ""; }
   .big-icon--archive.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--archive.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--archive.color--success {
@@ -13685,7 +13724,7 @@ doc-react-playground {
 .big-icon--spike {
   content: ""; }
   .big-icon--spike.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--spike.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--spike.color--success {
@@ -13716,7 +13755,7 @@ doc-react-playground {
 .big-icon--unspike {
   content: ""; }
   .big-icon--unspike.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--unspike.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--unspike.color--success {
@@ -13747,7 +13786,7 @@ doc-react-playground {
 .big-icon--personal {
   content: ""; }
   .big-icon--personal.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--personal.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--personal.color--success {
@@ -13778,7 +13817,7 @@ doc-react-playground {
 .big-icon--global-search {
   content: ""; }
   .big-icon--global-search.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--global-search.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--global-search.color--success {
@@ -13809,7 +13848,7 @@ doc-react-playground {
 .big-icon--analytics {
   content: ""; }
   .big-icon--analytics.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--analytics.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--analytics.color--success {
@@ -13840,7 +13879,7 @@ doc-react-playground {
 .big-icon--web {
   content: ""; }
   .big-icon--web.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--web.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--web.color--success {
@@ -13871,7 +13910,7 @@ doc-react-playground {
 .big-icon--cog {
   content: ""; }
   .big-icon--cog.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--cog.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--cog.color--success {
@@ -13902,7 +13941,7 @@ doc-react-playground {
 .big-icon--send-to {
   content: ""; }
   .big-icon--send-to.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--send-to.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--send-to.color--success {
@@ -13933,7 +13972,7 @@ doc-react-playground {
 .big-icon--info {
   content: ""; }
   .big-icon--info.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--info.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--info.color--success {
@@ -13964,7 +14003,7 @@ doc-react-playground {
 .big-icon--find-replace {
   content: ""; }
   .big-icon--find-replace.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--find-replace.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--find-replace.color--success {
@@ -13995,7 +14034,7 @@ doc-react-playground {
 .big-icon--comments {
   content: ""; }
   .big-icon--comments.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--comments.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--comments.color--success {
@@ -14026,7 +14065,7 @@ doc-react-playground {
 .big-icon--history {
   content: ""; }
   .big-icon--history.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--history.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--history.color--success {
@@ -14057,7 +14096,7 @@ doc-react-playground {
 .big-icon--package {
   content: ""; }
   .big-icon--package.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--package.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--package.color--success {
@@ -14088,7 +14127,7 @@ doc-react-playground {
 .big-icon--create-package {
   content: ""; }
   .big-icon--create-package.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--create-package.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--create-package.color--success {
@@ -14119,7 +14158,7 @@ doc-react-playground {
 .big-icon--add-to-package {
   content: ""; }
   .big-icon--add-to-package.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--add-to-package.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--add-to-package.color--success {
@@ -14150,7 +14189,7 @@ doc-react-playground {
 .big-icon--fetch {
   content: ""; }
   .big-icon--fetch.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--fetch.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--fetch.color--success {
@@ -14181,7 +14220,7 @@ doc-react-playground {
 .big-icon--fetch-as {
   content: ""; }
   .big-icon--fetch-as.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--fetch-as.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--fetch-as.color--success {
@@ -14212,7 +14251,7 @@ doc-react-playground {
 .big-icon--macro {
   content: ""; }
   .big-icon--macro.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--macro.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--macro.color--success {
@@ -14243,7 +14282,7 @@ doc-react-playground {
 .big-icon--related {
   content: ""; }
   .big-icon--related.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--related.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--related.color--success {
@@ -14274,7 +14313,7 @@ doc-react-playground {
 .big-icon--minimize {
   content: ""; }
   .big-icon--minimize.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--minimize.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--minimize.color--success {
@@ -14305,7 +14344,7 @@ doc-react-playground {
 .big-icon--settings {
   content: ""; }
   .big-icon--settings.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--settings.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--settings.color--success {
@@ -14336,7 +14375,7 @@ doc-react-playground {
 .big-icon--multiedit {
   content: ""; }
   .big-icon--multiedit.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--multiedit.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--multiedit.color--success {
@@ -14367,7 +14406,7 @@ doc-react-playground {
 .big-icon--export {
   content: ""; }
   .big-icon--export.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--export.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--export.color--success {
@@ -14398,7 +14437,7 @@ doc-react-playground {
 .big-icon--create-list {
   content: ""; }
   .big-icon--create-list.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--create-list.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--create-list.color--success {
@@ -14429,7 +14468,7 @@ doc-react-playground {
 .big-icon--add-to-list {
   content: ""; }
   .big-icon--add-to-list.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--add-to-list.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--add-to-list.color--success {
@@ -14460,7 +14499,7 @@ doc-react-playground {
 .big-icon--text {
   content: ""; }
   .big-icon--text.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--text.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--text.color--success {
@@ -14491,7 +14530,7 @@ doc-react-playground {
 .big-icon--desk {
   content: ""; }
   .big-icon--desk.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--desk.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--desk.color--success {
@@ -14522,7 +14561,7 @@ doc-react-playground {
 .big-icon--chevron-left {
   content: ""; }
   .big-icon--chevron-left.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--chevron-left.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--chevron-left.color--success {
@@ -14553,7 +14592,7 @@ doc-react-playground {
 .big-icon--chevron-right {
   content: ""; }
   .big-icon--chevron-right.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--chevron-right.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--chevron-right.color--success {
@@ -14584,7 +14623,7 @@ doc-react-playground {
 .big-icon--dashboard-alt {
   content: ""; }
   .big-icon--dashboard-alt.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--dashboard-alt.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--dashboard-alt.color--success {
@@ -14615,7 +14654,7 @@ doc-react-playground {
 .big-icon--master {
   content: ""; }
   .big-icon--master.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--master.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--master.color--success {
@@ -14646,7 +14685,7 @@ doc-react-playground {
 .big-icon--attachment {
   content: ""; }
   .big-icon--attachment.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--attachment.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--attachment.color--success {
@@ -14677,7 +14716,7 @@ doc-react-playground {
 .big-icon--upload-alt {
   content: ""; }
   .big-icon--upload-alt.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--upload-alt.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--upload-alt.color--success {
@@ -14708,7 +14747,7 @@ doc-react-playground {
 .big-icon--document-default {
   content: ""; }
   .big-icon--document-default.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--document-default.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--document-default.color--success {
@@ -14739,7 +14778,7 @@ doc-react-playground {
 .big-icon--document-pdf {
   content: ""; }
   .big-icon--document-pdf.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--document-pdf.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--document-pdf.color--success {
@@ -14770,7 +14809,7 @@ doc-react-playground {
 .big-icon--document-doc {
   content: ""; }
   .big-icon--document-doc.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--document-doc.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--document-doc.color--success {
@@ -14801,7 +14840,7 @@ doc-react-playground {
 .big-icon--semantics {
   content: ""; }
   .big-icon--semantics.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--semantics.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--semantics.color--success {
@@ -14832,7 +14871,7 @@ doc-react-playground {
 .big-icon--picture {
   content: ""; }
   .big-icon--picture.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--picture.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--picture.color--success {
@@ -14863,7 +14902,7 @@ doc-react-playground {
 .big-icon--manage-package {
   content: ""; }
   .big-icon--manage-package.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--manage-package.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--manage-package.color--success {
@@ -14894,7 +14933,7 @@ doc-react-playground {
 .big-icon--live {
   content: ""; }
   .big-icon--live.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--live.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--live.color--success {
@@ -14925,7 +14964,7 @@ doc-react-playground {
 .big-icon--live-alt {
   content: ""; }
   .big-icon--live-alt.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--live-alt.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--live-alt.color--success {
@@ -14956,7 +14995,7 @@ doc-react-playground {
 .big-icon--meta-search {
   content: ""; }
   .big-icon--meta-search.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--meta-search.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--meta-search.color--success {
@@ -14987,7 +15026,7 @@ doc-react-playground {
 .big-icon--chat {
   content: ""; }
   .big-icon--chat.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--chat.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--chat.color--success {
@@ -15018,7 +15057,7 @@ doc-react-playground {
 .big-icon--annotation {
   content: ""; }
   .big-icon--annotation.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--annotation.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--annotation.color--success {
@@ -15049,7 +15088,7 @@ doc-react-playground {
 .big-icon--suggestion {
   content: ""; }
   .big-icon--suggestion.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--suggestion.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--suggestion.color--success {
@@ -15080,7 +15119,7 @@ doc-react-playground {
 .big-icon--publisher {
   content: ""; }
   .big-icon--publisher.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--publisher.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--publisher.color--success {
@@ -15111,7 +15150,7 @@ doc-react-playground {
 .big-icon--tag {
   content: ""; }
   .big-icon--tag.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--tag.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--tag.color--success {
@@ -15142,7 +15181,7 @@ doc-react-playground {
 .big-icon--rundown {
   content: ""; }
   .big-icon--rundown.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--rundown.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--rundown.color--success {
@@ -15173,7 +15212,7 @@ doc-react-playground {
 .big-icon--checkmark-circle {
   content: ""; }
   .big-icon--checkmark-circle.color--default {
-    color: #333333; }
+    color: #2c323a; }
   .big-icon--checkmark-circle.color--primary {
     color: var(--sd-colour-primary) !important; }
   .big-icon--checkmark-circle.color--success {