superdesk-ui-framework 3.0.0-beta.0 → 3.0.0

package/app/styles/variables/_colors.scss

@@ -2,30 +2,30 @@
 // -------------------------------------------------------------------------
 
 // Refernce Colours
-$ref-color-primary:         hsla(198, 50%, 50%, 1);
-$ref-color-success:         hsla(120, 40%, 50%, 1);
-$ref-color-alert:           hsla(358, 79%, 50%, 1);
-$ref-color-warning:         hsla(35, 100%, 50%, 1);
-$ref-color-highlight:       hsla(291, 64%, 50%, 1);
-$ref-color-neutral:         hsla(0,    0%, 50%, 1);
+// $ref-color-primary:         hsla(198, 50%, 50%, 1);
+// $ref-color-success:         hsla(120, 40%, 50%, 1);
+// $ref-color-alert:           hsla(358, 79%, 50%, 1);
+// $ref-color-warning:         hsla(35, 100%, 50%, 1);
+// $ref-color-highlight:       hsla(291, 64%, 50%, 1);
+// $ref-color-neutral:         hsla(0,    0%, 50%, 1);
 
 // Refernce Colours -- DARK BGs & Lines
-$ref-color-cool-grey--00:   hsl(214, 13%, 12%);
-$ref-color-cool-grey--01:   hsl(214, 13%, 16%);
-$ref-color-cool-grey--02:   hsl(214, 13%, 20%);
-$ref-color-cool-grey--03:   hsl(214, 13%, 25%);
-$ref-color-cool-grey--04:   hsl(214, 13%, 30%);
+// $ref-color-cool-grey--00:   hsl(214, 13%, 12%);
+// $ref-color-cool-grey--01:   hsl(214, 13%, 16%);
+// $ref-color-cool-grey--02:   hsl(214, 13%, 20%);
+// $ref-color-cool-grey--03:   hsl(214, 13%, 25%);
+// $ref-color-cool-grey--04:   hsl(214, 13%, 30%);
 
 // Refernce Colours -- LIGHT BGs & Lines
-$ref-color-light-grey--00:  hsl(214, 13%, 100%);
-$ref-color-light-grey--01:  hsl(214, 13%, 96%);
-$ref-color-light-grey--02:  hsl(214, 13%, 92%);
-$ref-color-light-grey--03:  hsl(214, 13%, 85%);
-$ref-color-light-grey--04:  hsl(214, 13%, 80%);
-$ref-color-light-grey--05:  hsl(214, 13%, 75%);
-$ref-color-light-grey--06:  hsl(214, 13%, 70%);
-$ref-color-light-grey--07:  hsl(214, 13%, 65%);
-$ref-color-light-grey--08:  hsl(214, 13%, 60%);
+// $ref-color-light-grey--00:  hsl(214, 13%, 100%);
+// $ref-color-light-grey--01:  hsl(214, 13%, 96%);
+// $ref-color-light-grey--02:  hsl(214, 13%, 92%);
+// $ref-color-light-grey--03:  hsl(214, 13%, 85%);
+// $ref-color-light-grey--04:  hsl(214, 13%, 80%);
+// $ref-color-light-grey--05:  hsl(214, 13%, 75%);
+// $ref-color-light-grey--06:  hsl(214, 13%, 70%);
+// $ref-color-light-grey--07:  hsl(214, 13%, 65%);
+// $ref-color-light-grey--08:  hsl(214, 13%, 60%);
 
 ///// ==============
 
@@ -81,29 +81,29 @@ $yellow:                hsla(45, 100%, 53%, 1);
 $orange:                hsla(35, 100%, 43%, 1);
 $purple:                hsla(291, 64%, 42%, 1);
 
-$black:                 #000;
-$grayDarker:            #222;
-$grayDark:              #333333;
-$grayMedium:            #444;
-$gray:                  #666;
-$grayNeutral:           #7b7b7b;
-$grayText:              #747474;
-$grayLight:             #999;
-$grayLighter:           #F5F5F5;
-$white:                 #fff;
+$black:                 hsl(214, 13%, 0%);
+$grayDarker:            hsl(214, 13%, 13%);
+$grayDark:              hsl(214, 13%, 20%);
+$grayMedium:            hsl(214, 13%, 27%);
+$gray:                  hsl(214, 13%, 40%);
+$grayNeutral:           hsl(214, 13%, 48%);
+$grayText:              hsl(214, 13%, 45%);
+$grayLight:             hsl(214, 13%, 60%);
+$grayLighter:           hsl(214, 13%, 96%);
+$white:                 hsl(214, 13%, 100%);
 
 // Greys
-$gray--900:             #333;
-$gray--800:             #444;
-$gray--700:             #555;
-$gray--600:             #666;
-$gray--500:             #747474;
-$gray--400:             #888;
-$gray--300:             #999;
-$gray--200:             #ccc;
-$gray--100:             #dedede;
-$gray--75:              #ededed;
-$grey--50:              #F5F5F5;
+// $gray--900:             hsl(214, 13%, 20%);
+// $gray--800:             hsl(214, 13%, 27%);
+// $gray--700:             hsl(214, 13%, 33%);
+// $gray--600:             hsl(214, 13%, 40%);
+// $gray--500:             hsl(214, 13%, 45%);
+// $gray--400:             hsl(214, 13%, 53%);
+// $gray--300:             hsl(214, 13%, 60%);
+// $gray--200:             hsl(214, 13%, 80%);
+// $gray--100:             hsl(214, 13%, 87%);
+// $gray--75:              hsl(214, 13%, 93%);
+// $grey--50:              hsl(214, 13%, 96%);
 
 // Extended colors
 $fernGreen:             hsla(91, 47%, 34%, 1);
@@ -116,12 +116,12 @@ $darkViolet:            hsla(280, 100%, 34%, 1);
 $navy:                  hsla(240, 100%, 25%, 1);
 
 // Panel backgrounds
-$panel-bg--00:          #fff;
-$panel-bg--01:          #f8f8f8;
-$panel-bg--02:          #f5f5f5;
-$panel-bg--03:          #ededed;
-$panel-bg--04:          #dedede;
-$panel-bg--05:          #a1a1a1;
+// $panel-bg--00:          #fff;
+// $panel-bg--01:          #f8f8f8;
+// $panel-bg--02:          #f5f5f5;
+// $panel-bg--03:          #ededed;
+// $panel-bg--04:          #dedede;
+// $panel-bg--05:          #a1a1a1;
 
 // Text specific colors
 //Subnav colours
@@ -160,7 +160,7 @@ $sd-inputBorderColor-darkUi:          $transparent-white;
 
 
 $sd-basic-palette: (
-  default: rgba(128,128,128,1),
+  default: hsla(214, 13%, 60%, 1),
   primary: $sd-blue,
   success: $green,
   warning: $orange,
@@ -270,454 +270,4 @@ $baseColors: (
   .text-#{$color} { 
     color: $value;
   }
-}
-
-.sd-top-menu, #top-menu {
-  .navbtn, .sd-navbtn {
-    --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-    --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important;
-  }
-}
-
-// CSS variables for default (light) theme
-
-
-[data-theme="accessible-light-ui"] {
-
-  --font-size-large: 1.5rem;
-
-  --color-accessible-text:              hsla(0, 0%, 7%, 1);
-  --sd-slugline-color:                  hsla(241, 100%, 50%, 1);
-
-  --color-input-bg:                     hsla(0, 0%, 0%, 0.05);
-  --color-input-bg--hover:              hsla(0, 0%, 0%, 0.08);
-  --color-input-bg--focus:              hsla(198, 49%, 58%, 0.14);
-  --color-label-text:                   hsla(0, 0%, 25%, 1);
-
-  --color-input-border:                 hsla(0, 0%, 0%, 0.35);
-  --color-input-border-hover:           hsla(0, 0%, 0%, 0.8);
-
-  --color-form-bg:                      hsla(0, 0%, 100%, 0);
-  --color-text:                         hsla(0, 0%, 0%, 1);
-
-  --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-  --color-selected-bg--hover:           hsl(198, 36%, 91%, 1);
-
-  --color-bg-00:                        hsla(0, 0%, 100%, 1);
-  --color-bg-50:                        hsla(0, 0%, 97%, 1);
-  --color-bg-100:                       hsla(0, 0%, 93%, 1);
-  --color-bg-150:                       hsla(0, 0%, 87%, 1);
-  --color-bg-200:                       hsla(0, 0%, 63%, 1);
-
-  --color-bg-800:                       hsla(0, 0%, 17%, 1);
-
-
-  --color-accessible-primary:           hsla(241, 100%, 50%, 1);
-
-  [class^="icon-"],
-  [class*=" icon-"],
-  [class^="big-icon--"],
-  [class*=" big-icon--"] {
-    color:                              hsla(0, 0%, 0%, 1);
-  }
-
-  .sd-checkbox--button-style {
-    color:                              hsla(0, 0%, 7%, 1);
-  }
-  .sd-checkbox--button-style.checked,
-  .sd-checkbox--button-style[checked="checked"] {
-    background-color:                   var(--color-accessible-primary);
-    border-color:                       var(--color-accessible-primary);
-    border-top-color:                   hsla(241, 98%, 17%, 1);
-    color:                              hsla(0, 0%, 100%, 1);
-    &:hover {
-      background-color:                 hsla(241, 98%, 20%, 1);
-      border-color:                     hsla(241, 98%, 20%, 1);
-      border-top-color:                 hsla(241, 100%, 11%, 1);
-    }
-  }
-  .sd-create-btn .circle {
-    background-color:                   var(--color-accessible-primary);
-  }
-
-  .navbtn.navbtn--active {
-    background-color:                   hsla(0, 0%, 27%, 1);
-    color:                              $white;
-  }
-  .btn {
-    color: var(--color-accessible-text);
-    font-weight: 600;
-    font-size: 1.4rem;
-    &.btn--primary {
-      background-color:                 var(--color-accessible-primary);
-      color:                            $white;
-    }
-    &.btn--hollow {
-      background-color:                 $white;
-    }
-  }
-
-  .sd-list-item {
-    font-size: 1.5rem;
-    .sd-list-item__slugline {
-      font-size: 1.3rem;
-    }
-    time {
-      color:                            hsla(0, 0%, 28%, 1);
-      font-weight: 400;
-    }
-  }
-  .badge {
-    font-size: 1.2rem;
-    line-height: 1.1em;
-    font-weight: 600;
-  }
-  .side-panel {
-    background-color: $white;
-    color: var(--color-accessible-text);
-    .side-panel__header {
-      background-color:               $white;
-    }
-    .side-panel__heading {
-      font-weight: 500;
-      color:                          var(--color-accessible-text);
-    }
-    p {
-      font-size: 1.6rem;
-      line-height: 1.5;
-      color:                          var(--color-accessible-text);
-    }
-    .sd-text__date-and-author {
-      font-size: 1.4rem;
-      time {
-        font-weight: 400;
-        color:                        hsla(0, 0%, 35%, 1);
-      }
-    }
-    &.side-panel--dark-ui {
-      background-color: var(--color-bg-800);
-      color: $white;
-     i[class^="icon-"] {
-        color:                        $white;
-      }
-      .side-panel__header {
-        background-color:             var(--color-bg-800);
-        color:                        $white !important;
-        i[class^="icon-"] {
-          color:                      $white !important;
-        }
-        
-      }
-    }
-  }
-
-  .sd-input {
-    .sd-input__label {
-      font-weight: 600;
-      font-size: 1.2rem;
-    }
-    .sd-input__input,
-    .sd-input__select {
-      font-size: 1.5rem;
-    }
-    .sd-input__hint,
-    .sd-input__message {
-      font-size: 1.4rem;
-      margin: 0.8rem 0;
-    }
-    .sd-input__hint {
-      color:                          hsla(0, 0%, 27%, 1);
-    }
-  }
-
-  .form-label {
-    font-size: 1.2rem;
-    font-weight: 500;
-    &.form-label--light {
-      color:                          hsla(0, 0%, 32%, 1);
-    }
-  }
-
-  .navbtn {
-    color: #111;
-    [class^="icon-"], [class*=" icon-"] {
-      color: currentColor;
-    }
-  }
-
-  .dropdown__menu-label {
-    font-size: 1.2rem;
-    color:                            hsla(0, 0%, 35%, 1);
-  }
-  .dropdown__toggle:active,
-  .dropdown.open .dropdown__toggle {
-    color: var(--color-accessible-primary);
-  }
-  .dropdown__menu li a:not(.btn),
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
-  .dropdown__menu .dropdown__menu-item a:not(.btn), 
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
-    font-size: 1.5rem;
-    font-weight: 500;
-    color:                            currentColor;
-  }
-  .dropdown__menu li a:not(.btn):hover,
-  .dropdown__menu li a:not(.btn):focus,
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
-  .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
-  .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
-    background:                       var(--color-accessible-primary);
-    color:                            $white;
-     > i[class^="icon-"] {
-      color:                          $white;
-    }
-  }
-  .dropdown.open .navbtn > i {
-    color:                            var(--color-accessible-primary);
-  }
-
-  .sd-text__slugline,
-  p.sd-text__slugline {
-    color:                            var(--color-accessible-primary) !important;
-  }
-
-  .toggle-box--circle .toggle-box__chevron {
-    background-color:                 hsla(0, 0%, 48%, 0.5);
-    height: 2rem;
-    width: 2rem;
-  }
-  .toggle-box__label {
-    font-size: 1.4rem;
-    color:                            var(--color-label-text);
-    font-weight: 500;
-  }
-
-  .sd-grid-item {
-    time {
-      color:                          hsla(0, 0%, 28%, 1);
-      font-size: 1.3rem;
-      font-weight: 400;
-    }
-    .sd-grid-item__slugline {
-      font-size: 1.2rem;
-    }
-  }
-  .nav-tabs {
-    .nav-tabs__link {
-      font-size: 1.6rem;
-      font-weight: 500;
-    }
-    &--big {
-      .nav-tabs__link {
-        font-size: 2rem;
-      }
-    }
-  }
-
-  .nav-tabs__tab--active, 
-  .nav-tabs__tab--active:hover {
-    .nav-tabs__link {
-      border-bottom-color:          var(--color-accessible-primary);
-      color:                        var(--color-accessible-text);
-    }
-  }
-
-  .side-panel.side-panel--dark-ui {
-    .nav-tabs__tab {
-        .nav-tabs__link {
-          border-bottom-color: transparent;
-          color:                    $white;
-          opacity: 0.6;
-      }
-      &:hover {
-        .nav-tabs__link {
-          border-bottom-color:      hsla(0, 0%, 100%, 0.25);
-          opacity: 1;
-        }
-      }
-      &.nav-tabs__tab--active,
-      &.nav-tabs__tab--active:hover {
-        .nav-tabs__link {
-          border-bottom-color:      hsla(240, 100%, 65%, 1);
-          color:                    $white;
-          opacity: 1;
-        }
-      }
-    }
-
-    .toggle-box__label {
-      color:                        $white;
-    }
-
-    .sd-line-input .sd-line-input__label {
-      color:                        $white;
-      opacity: 0.7;
-    }
-
-    a.text-link.text-link--white {
-      color:                        $white;
-      opacity: 0.75;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  .badge {
-    &.badge--primary {
-      background-color: var(--color-accessible-primary);
-    }
-    &.badge--success {
-      background-color:             hsla(133, 100%, 19%, 1);
-    }
-    &.badge--warning {
-      background-color:             hsla(33, 100%, 26%, 1);
-    }
-  }
-  .sd-sidebar-menu__btn--active,
-  .sd-sidebar-menu__btn--active:hover {
-    background-color:               var(--color-accessible-primary);
-
-  }
-}
-
-//TEMP
-.test-div {
-  height: 4rem;
-  display:flex;
-  flex-direction: row;
-  div {
-    flex-grow: 1;
-    height: 100%;
-  }
-} 
-
-
-.test-div--1 {
-  background-color: var(--sd-colour-neutral);
-}
-.test-div--2 {
-  background-color: var(--sd-colour-neutral--hover);
-}
-.test-div--3 {
-  background-color: var(--sd-colour-neutral--active);
-}
-
-.test-div--4 {
-  background-color: var(--sd-colour-primary);
-}
-.test-div--5 {
-  background-color: var(--sd-colour-primary--hover);
-}
-.test-div--6 {
-  background-color: var(--sd-colour-primary--active);
-}
-
-.test-div--7 {
-  background-color: var(--sd-colour-success);
-}
-.test-div--8 {
-  background-color: var(--sd-colour-success--hover);
-}
-.test-div--9 {
-  background-color: var(--sd-colour-success--active);
-}
-
-.test-div--10 {
-  background-color: var(--sd-colour-alert);
-}
-.test-div--11 {
-  background-color: var(--sd-colour-alert--hover);
-}
-.test-div--12 {
-  background-color: var(--sd-colour-alert--active);
-}
-
-.test-div--13 {
-  background-color: var(--sd-colour-warning);
-}
-.test-div--14 {
-  background-color: var(--sd-colour-warning--hover);
-}
-.test-div--15 {
-  background-color: var(--sd-colour-warning--active);
-}
-
-.test-div--16 {
-  background-color: var(--sd-colour-highlight);
-}
-.test-div--17 {
-  background-color: var(--sd-colour-highlight--hover);
-}
-.test-div--18 {
-  background-color: var(--sd-colour-highlight--active);
-}
-
-
-.test-div--19-1 {
-  background-color:   $ref-color-light-grey--00;
-}
-.test-div--19-2 {
-  background-color:   var(--sd-colour-bg--00);
-}
-// --
-.test-div--20-1 {
-  background-color:   $ref-color-light-grey--01;
-}
-.test-div--20-2 {
-  background-color:   var(--sd-colour-bg--01);
-}
-// --
-.test-div--21-1 {
-  background-color:   $ref-color-light-grey--02;
-}
-.test-div--21-2 {
-  background-color:   var(--sd-colour-bg--02);
-}
-// --
-.test-div--22-1 {
-  background-color:   $ref-color-light-grey--03;
-}
-.test-div--22-2 {
-  background-color:   var(--sd-colour-bg--03);
-}
-// --
-.test-div--23-1 {
-  background-color:   $ref-color-light-grey--04;
-}
-.test-div--23-2 {
-  background-color:   var(--sd-colour-bg--04);
-}
-
-.test-div--24-1 {
-  background-color:   $ref-color-light-grey--05;
-}
-.test-div--24-2 {
-  background-color:   var(--sd-colour-bg--05);
-}
-
-.test-div--25-1 {
-  background-color:   $ref-color-light-grey--06;
-}
-.test-div--25-2 {
-  background-color:   var(--sd-colour-bg--06);
-}
-
-.test-div--26-1 {
-  background-color:   $ref-color-light-grey--07;
-}
-.test-div--26-2 {
-  background-color:   var(--sd-colour-bg--07);
-}
-
-.test-div--27-1 {
-  background-color:   $ref-color-light-grey--08;
-}
-.test-div--27-2 {
-  background-color:   var(--sd-colour-bg--08);
-}
-
-
-
+}

package/app/styles/variables/_dimensions.scss

@@ -1,6 +1,90 @@
 $zindexDropdown: 1000;
 $zindexFixedNavbar: 1030;
+$sd-main-menu-width: 30rem;
 
+$sd-base-increment: 0.8rem;
 
+// Border Radius
+$border-radius__base--x-small:  var(--b-radius--x-small);
+$border-radius__base--small:    var(--b-radius--small);
+$border-radius__base--medium:   var(--b-radius--medium);
+$border-radius__base--large:    var(--b-radius--large);
+$border-radius__base--x-large:  var(--b-radius--x-large);
+$border-radius__base--full:     var(--b-radius--full);
 
-$sd-main-menu-width: 30rem;
+// TYPOGRAPHY
+// ----------------------------------------------------
+$font-size__base: 1.3rem;
+$font-size__base--: 1.3rem;
+
+$font-size__button--default: 1.2rem;
+$font-size__button--small: 1rem;
+$font-size__button--large: 1.4rem;
+
+$font-size__heading--1: 1.4rem;
+
+$font-size__editor_base: 1.6rem;
+$font-size__editor_H1: 2em;
+$font-size__editor_H2: 1.5em;
+$font-size__editor_H3: 1.125em;
+$font-size__editor_H4: 0.875em;
+$font-size__editor_H5: 0.75em;
+$font-size__editor_H6: 0.6875em;
+
+// SHAPES & SIZES
+// ----------------------------------------------------
+
+// left and right side-tab navigation width
+
+$sd-sidebarMenu-width: 4.8rem;
+$nav-height: 4.8rem;
+$subnav-height: 4.8rem;
+
+// Heights
+$height-input--default: $sd-base-increment * 4;
+
+$height__button--default: $height-input--default;
+$height__button--small: $sd-base-increment * 3;
+$height__button--large: $sd-base-increment * 5;
+$height__button--x-large: $sd-base-increment * 7;
+
+
+$height__label--default: $sd-base-increment * 2;
+$height__label--large: $sd-base-increment * 3;
+
+$height__icon-button--default: $height-input--default;
+$height__icon-button--small: $sd-base-increment * 3;
+
+$height__modal-header: $sd-base-increment * 6;
+$height__modal-footer: $sd-base-increment * 6;
+
+// Spaces
+$padding-x__button--default: 1.2rem !default;
+$padding-x__button--small: 0.8rem;
+$padding-x__button--large: 1.6rem;
+
+$padding-x__label--default: 0.8rem;
+$padding-y__label--large: 0.5rem;
+$padding-x__label--large: 1.2rem;
+
+
+// ELEVATIONS
+// ----------------------------------------------------
+$shadow__base--z1: 0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z2: 0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z3: 0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z4: 0 2px 10px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
+
+$shadow__dropdown--default: var(--sd-shadow__dropdown);
+$shadow__modal--default: var(--sd-shadow__modal);
+
+
+// TRANSITIONS
+// ----------------------------------------------------
+$sd-transition__menu-item: background-color ease 0.1s;
+
+
+// FORM ELEMENTS
+// ----------------------------------------------------
+$form-label-height: $sd-base-increment * 2;
+$form-input-height: $sd-base-increment * 4;

package/app/styles/variables/_form-elements.scss

@@ -1,2 +0,0 @@
-$form-label-height: $sd-base-increment * 2;
-$form-input-height: $sd-base-increment * 4;

package/app/template/search-handler.html

@@ -1,6 +1,6 @@
-<div class="flat-searchbar" ng-class="{extended: extended}">
+<div class="flat-searchbar extended">
     <div class="search-handler" ng-class="{'search-handler--left-border': borderleft}">
-        <label for="search-input" class="trigger-icon" ng-click="extended = !extended"><i class="icon-search"></i></label>
+        <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
         <input id="search-input" type="text" placeholder="{{ :: label || 'Search' }}" ng-model="model" ng-model-options="{debounce: debounce}">
         <button class="search-close" ng-if="model.length" ng-click="clearInput()" ng-class="{visible: model.length}"><i class="icon-remove-sign"></i></button>