Merge pull request #22 from SAP/feature/Issue#7-status-indicator

Issue#7: adds status for label component

Author: InnaAtanasova

src/App.css

@@ -6295,8 +6295,14 @@ input-addon
 .App {
   background-color: white; }
 
-.fd-tile__content .fd-badge, .fd-tile__content .fd-label, .fd-tile__content .fd-tag,
-.fd-tile__content [class*='fd-button'], .fd-tile__content [class*='fd-identifier'], .fd-tile__content [class*='fd-image'], .fd-tile__content [class*='fd-form'] {
+.fd-tile__content .fd-badge,
+.fd-tile__content .fd-label,
+.fd-tile__content .fd-status-label,
+.fd-tile__content .fd-tag,
+.fd-tile__content [class*='fd-button'],
+.fd-tile__content [class*='fd-identifier'],
+.fd-tile__content [class*='fd-image'],
+.fd-tile__content [class*='fd-form'] {
   margin-right: 10px; }
 
 .fd-tile__content .fd-button--grouped {
@@ -6338,7 +6344,7 @@ input-addon
     color: inherit; }
 
 .logo-subtitle {
-  font-size: .75rem; }
+  font-size: 0.75rem; }
 
 .sidebar {
   color: #21262c;
@@ -6354,7 +6360,7 @@ input-addon
 .nav-item {
   display: block;
   color: #21262c;
-  font-size: .875rem;
+  font-size: 0.875rem;
   position: relative;
   padding: 13px 40px; }
 
@@ -6391,10 +6397,14 @@ input-addon
 .header {
   margin: 12px 0; }
 
-input[type=text], input[type=password],
-input[type=email], input[type=url],
-input[type=search], input[type=tel],
-input[type=number], input[type=date],
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='url'],
+input[type='search'],
+input[type='tel'],
+input[type='number'],
+input[type='date'],
 textarea {
   border-radius: 0; }
 

src/App.scss

@@ -1,193 +1,200 @@
-
-$fd-icons-path: "../node_modules/fundamental-ui/scss/icons/";
-$fd-fonts-path: "../node_modules/fundamental-ui/dist/fonts/";
+$fd-icons-path: '../node_modules/fundamental-ui/scss/icons/';
+$fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/';
 @import '../node_modules/fundamental-ui/scss/all.scss';
 
 .App {
-  background-color: white;
+    background-color: white;
 }
 
 .fd-tile__content {
-  .fd-badge, .fd-label, .fd-tag, 
-  [class*='fd-button'], [class*='fd-identifier'], [class*='fd-image'], [class*='fd-form'] {
-    margin-right: 10px;
-  }
-
-  .fd-button--grouped {
-    margin-right: 0;
-  }
-
-  .fd-input-group {
-    [class*='fd-button'] {
-      margin-right: 0;
+    .fd-badge,
+    .fd-label,
+    .fd-status-label,
+    .fd-tag,
+    [class*='fd-button'],
+    [class*='fd-identifier'],
+    [class*='fd-image'],
+    [class*='fd-form'] {
+        margin-right: 10px;
+    }
+
+    .fd-button--grouped {
+        margin-right: 0;
+    }
+
+    .fd-input-group {
+        [class*='fd-button'] {
+            margin-right: 0;
+        }
     }
-  }
 }
 
 .fd-tabs__content {
-  padding-top: 10px;
-  padding-bottom: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .docs-component {
-  margin-bottom: -28px;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  padding-bottom: 8px;
-  border: 1px solid #ccc;
-
-
+    margin-bottom: -28px;
+    border-radius: 4px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-bottom: 8px;
+    border: 1px solid #ccc;
 }
 
 .fd-side-nav--icons {
-  max-width: 65px;
+    max-width: 65px;
 }
 
-.container{
+.container {
     display: flex;
     justify-content: space-between;
     height: 100vh;
     overflow: hidden;
     width: 90%;
     margin-left: auto;
     margin-right: auto;
-  }
-  
-  .logo {
+}
+
+.logo {
     font-size: 1.25rem;
     margin-bottom: 0;
     display: flex;
     justify-content: center;
     > a {
-      color: inherit;
+        color: inherit;
     }
-  }
-  
-  .logo-subtitle {
-    font-size: .75rem;
-  }
-  
-  .sidebar {
+}
+
+.logo-subtitle {
+    font-size: 0.75rem;
+}
+
+.sidebar {
     color: #21262c;
     min-width: 16rem;
     background-color: #f1f3f6;
-  }
-  
-  .nav {
+}
+
+.nav {
     list-style: none;
     border-top: 2px solid #dbe7f3;
     height: 90%;
     overflow: auto;
-  }
-  
-  .nav-item {
+}
+
+.nav-item {
     display: block;
     color: #21262c;
-    font-size: .875rem;
+    font-size: 0.875rem;
     position: relative;
     padding: 13px 40px;
-  }
-  
-  .side-nav__headers{
+}
+
+.side-nav__headers {
     color: #424e5a;
     padding: 15px 20px;
     display: block;
-  }
-  
-  .nav-item--selected {
+}
+
+.nav-item--selected {
     border-left: 6px solid #2fd0c8;
-  }
+}
 
-  .nav-item:hover,
-  .nav-item--active {
+.nav-item:hover,
+.nav-item--active {
     color: #424e5a;
     border-left: 6px solid #2fd0c8;
     padding-left: 34px;
-  }
-  
-  .content {
+}
+
+.content {
     flex-grow: 1;
     overflow-y: scroll;
     padding-bottom: 2rem;
     background-color: white;
-  }
-  
-  .content-margin {
+}
+
+.content-margin {
     margin-right: auto;
     margin-left: auto;
     padding-left: 1rem;
     padding-right: 1rem;
-  }
+}
 
-  .property-header {
+.property-header {
     text-align: left;
     padding-right: 15px;
-  }
+}
 
-  .header {
+.header {
     margin: 12px 0;
-  }
+}
 
-input[type=text], input[type=password], 
-input[type=email], input[type=url], 
-input[type=search], input[type=tel], 
-input[type=number], input[type=date], 
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='url'],
+input[type='search'],
+input[type='tel'],
+input[type='number'],
+input[type='date'],
 textarea {
-  border-radius: 0;
+    border-radius: 0;
 }
 
 .fd-side-nav {
-  max-width: 250px;
+    max-width: 250px;
 }
 
 .row {
-  display: flex;
+    display: flex;
 }
 
 .col {
-  padding-right: 15px;
-  padding-left: 15px;
-  -webkit-box-flex: 1;
-  flex: 1;
+    padding-right: 15px;
+    padding-left: 15px;
+    -webkit-box-flex: 1;
+    flex: 1;
 }
 
 .form-group {
-  max-height: 500px;
-  overflow-y: scroll;
-  display: block;
-  padding: 20px;
-  border: 1px #eee solid;
+    max-height: 500px;
+    overflow-y: scroll;
+    display: block;
+    padding: 20px;
+    border: 1px #eee solid;
 }
 
 .schema {
-  display: block;
-  padding: 20px;
-  border: 1px #eee solid;
+    display: block;
+    padding: 20px;
+    border: 1px #eee solid;
 }
 
 .form-group-sublevel {
-  display: block;
-  padding: 20px;
-  border: 1px #eee solid;
+    display: block;
+    padding: 20px;
+    border: 1px #eee solid;
 }
 
 .tn-form__label {
-  padding-left: 25px;
+    padding-left: 25px;
 }
 
 .fd-calendar__content {
-  background: white;
+    background: white;
 }
 
 .fd-date-picker {
-  display: inline-block;
+    display: inline-block;
 }
 
 .demo-icon-wrapper {
-  padding: 10px;
-  float: left;
-  width: 16%;
-  text-align: center;
-  height: 120px;
-}
+    padding: 10px;
+    float: left;
+    width: 16%;
+    text-align: center;
+    height: 120px;
+}