@oat-sa/tao-core-ui 1.58.2 → 1.59.0

package/src/scss/inc/_feedback.scss

@@ -0,0 +1,150 @@
+[class^="feedback-"], [class*=" feedback-"] {
+    border: 1px transparent solid;
+    position: relative;
+    padding: 20px 20px 20px 45px;
+    margin: 5px 0 10px 0;
+    border-radius: 3px;
+    color: $textColor !important;
+    &.small {
+        padding: 8px 20px 8px 45px;
+        & > [class^="icon-"], & > [class*=" icon-"] {
+            top: 9px;
+            left: 10px;
+        }
+    }
+    & > [class^="icon-"], & > [class*=" icon-"] {
+        @include font-size(20);
+        position: absolute;
+        top: 20px;
+        left: 15px;
+        &.icon-close, &.icon-remove {
+            @include font-size(15);
+            color: #999;
+            left: auto;
+
+            top: 5px;
+            cursor: pointer;
+            &:hover {
+                color: #222;
+            }
+        }
+        &.icon-remove {
+            right: 24px;
+        }
+        &.icon-close {
+            right: 7px;
+        }
+    }
+    &.popup {
+        display : block;
+        position : fixed;
+        top : 50px;
+        left : 50%;
+        margin-left : -200px;
+        width : 400px;
+        z-index : 999999;
+    }
+}
+
+.feedback-success {
+    border-color: $successBorderColor;
+    background-color: $successBgColor;
+    .icon-success {
+        color: $success !important;
+    }
+}
+
+.feedback-info {
+    border-color: $infoBorderColor;
+    background-color: $infoBgColor;
+    .icon-info, .icon-lock {
+        color: $info !important;
+    }
+    .button-container {
+        margin-top:20px;
+    }
+}
+
+.feedback-warning {
+    border-color: $warningBorderColor;
+    background-color: $warningBgColor;
+    .icon-warning {
+        color: $warning !important;
+    }
+}
+
+.feedback-danger {
+    border-color: $dangerBorderColor;
+    background-color: $dangerBgColor;
+    .icon-danger {
+        color: $danger !important;
+    }
+}
+
+.feedback-error {
+    border-color: $errorBorderColor;
+    background-color: $errorBgColor;
+    .icon-error {
+        color: $error !important;
+    }
+}
+
+.brd-success {
+    border: 1px solid $successBorderColor !important;
+}
+
+.brd-info {
+    border: 1px solid $infoBorderColor !important;
+}
+
+.brd-warning {
+    border: 1px solid $warningBorderColor !important;
+}
+
+.brd-danger {
+    border: 1px solid $dangerBorderColor !important;
+}
+
+.brd-error {
+    border: 1px solid $errorBorderColor !important;
+}
+
+.txt-success {
+    color: $success !important;
+}
+
+.txt-info {
+    color: $info !important;
+}
+
+.txt-warning {
+    color: $warning !important;
+}
+
+.txt-danger {
+    color: $danger !important;
+}
+
+.txt-error {
+    color: $error !important;
+}
+
+.bg-success {
+    background-color: $successBgColor;
+}
+
+.bg-info {
+    background-color: $infoBgColor;
+}
+
+.bg-warning {
+    background-color: $warningBgColor;
+}
+
+.bg-danger {
+    background-color: $dangerBgColor;
+}
+
+.bg-error {
+    background-color: $errorBgColor;
+}

package/src/scss/inc/_flex-grid.scss

@@ -0,0 +1,15 @@
+.flex-grid {
+  @include flex-container(wrap);
+  overflow-x: hidden;
+  width: 100%;
+}
+
+@for $i from 1 through 12 {
+  .flex-col-#{$i} {
+    @include simple-flex-box($i);
+    $width: ((100/12)*$i) * 1%;
+    $margin: 20px;
+    margin-left: $margin;
+    width: calc(#{$width} - #{$margin});
+  }
+}

package/src/scss/inc/_fonts.scss

@@ -0,0 +1,4 @@
+@import "fonts/source-sans-pro";
+@import "fonts/tao-icon-def";
+@import "fonts/tao-icon-vars";
+@import "fonts/tao-icon-classes";