Initial Commit - NG UI
* Roboto and font-awesome fonts are added in package.json
* Replace Nginx alpine varient to stable
* Devops files are added
* Docker file aligned as per community reviews
* Enhancement - NS primitive, Azure inclusion and domain name
* RWD changes
Change-Id: If543efbf127964cbd8f4be4c5a67260c91407fd9
Signed-off-by: kumaran.m <kumaran.m@tataelxsi.co.in>
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
new file mode 100644
index 0000000..bc8a216
--- /dev/null
+++ b/src/assets/scss/app.scss
@@ -0,0 +1,688 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/** Styles for the application **/
+@import "../../assets/scss/mixins/mixin";
+@import "../../assets/scss/variable";
+$customnavbar-padding-x: ($spacer / 0.5) !default;
+* {
+ outline: 0;
+}
+button[type=submit]:focus, .sidebar-body button[type=button]:focus {
+ @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
+}
+.btn-danger:focus{
+ @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
+}
+body,
+.list-overflow,
+.scroll-box,
+.smarttable-style,
+.modal-body-custom-height,
+.layout-wrapper, .CodeMirror-vscrollbar, .ng-sidebar, .runninginstances .popover-body {
+ &::-webkit-scrollbar {
+ @include wh-value(10px, null);
+ }
+ &::-webkit-scrollbar-thumb {
+ background-clip: content-box;
+ @include border(all, 3, solid, transparent);
+ @include roundedCorners(7);
+ @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
+ }
+ &::-webkit-scrollbar-button {
+ @include wh-value(0, 0);
+ @include flexbox(none, null, null, null, null, null);
+ }
+ &::-webkit-scrollbar-corner {
+ @include background(null, transparent, null, null, null);
+ }
+}
+body {
+ @include font-family("Roboto");
+ @include background(null, $theme-bg-color, null, null, null);
+ overflow-x: hidden;
+ .osm-logo {
+ @include wh-value(100px, auto);
+ }
+ .bg-light {
+ @include background(null, $theme-bg-color !important, null, null, null);
+ }
+ a {
+ color: $primary;
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+ }
+ .badge {
+ @include line-height(normal);
+ &.badge-pill {
+ @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
+ }
+ }
+ button {
+ outline: none;
+ @include box-shadow(0, 0, 0, 0, transparent);
+ &:hover,
+ &:focus,
+ &:active {
+ outline: none;
+ @include box-shadow(0, 0, 0, 0, transparent !important);
+ }
+ &.btn-primary,
+ &.btn-default,
+ &.btn-warning,
+ &.btn-outline-primary:hover,
+ &.btn-outline-warning:hover {
+ color: $white;
+ &:hover,
+ &:focus,
+ &:not(:disabled):not(.disabled):active {
+ color: $white;
+ @include background(null, $primary, null, null, null);
+ border-color: $primary;
+ }
+ &:disabled {
+ cursor: not-allowed;
+ }
+ }
+ }
+ .row {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .navbar {
+ @include padding-percentage-value(
+ $navbar-padding-y,
+ $customnavbar-padding-x,
+ $navbar-padding-y,
+ $customnavbar-padding-x
+ );
+ }
+ .form-control {
+ @include roundedCorners(4);
+ @include font(null, 12px, null);
+ &::placeholder {
+ color: $gray-400;
+ }
+ }
+ .modal-dialog {
+ max-width: 600px;
+ }
+ .header-style {
+ @include font(null, 1.2rem, 700);
+ color: $primary;
+ @include line-height(1.25);
+ }
+ .cursor-default {
+ cursor: default;
+ }
+ .cursor-pointer {
+ cursor: pointer;
+ }
+ .mr-top-5 {
+ @include margin-value-percentage(5px, auto, auto, auto);
+ }
+ .padLeft0 {
+ padding-left: 0px;
+ }
+ .padRight0 {
+ padding-right: 0px;
+ }
+ .mandatory-label {
+ @include font(null, 10px, null);
+ }
+ .dropzone {
+ min-height: 50px;
+ @include flexbox(table, null, null, null, null, null);
+ @include wh-value(100%, 50px);
+ @include border(all, 1, dashed, $secondary);
+ cursor: pointer;
+ .text-wrapper {
+ @include padding-value(5, 5, 5, 5);
+ @include flexbox(table-cell, null, null, null, null, null);
+ vertical-align: middle;
+ }
+ .file-drop-title {
+ @include font(null, 16px, null);
+ }
+ }
+ .close {
+ opacity: 1 !important;
+ }
+ .roles-section {
+ .card {
+ .bg-secondary {
+ @include background(null, $gray-400 !important, null, null, null);
+ }
+ }
+ }
+ .card {
+ margin-bottom: 1rem;
+ }
+ .custom-card {
+ @include border(top, 3, solid, $primary);
+ @include roundedCorners(3);
+ .custom-card-body {
+ @include padding-value(15, 15, 15, 15);
+ }
+ }
+ table-cell-default-editor select-editor select {
+ @include wh-value(null, calc(2rem + 8px) !important);
+ @include padding-value(0, 10, 0, 10);
+ }
+ .CodeMirror {
+ min-height: 400px !important;
+ }
+ .table-layout-fixed {
+ table-layout: fixed;
+ word-wrap: break-word;
+ }
+ .border-radius-default {
+ @include roundedCorners(3);
+ }
+ /** Model Popup-Design **/
+ .modal-body-custom-height {
+ max-height: 65vh;
+ overflow-y: auto;
+ }
+ /** Hide input clear icon in IE */
+ input::-ms-clear {
+ @include flexbox(none, null, null, null, null, null);
+ }
+ /** Overwrite the tooltip z-index */
+ .tooltip {
+ z-index: 1010;
+ }
+ /** Popover Header **/
+ .popover-header {
+ color: $primary;
+ @include background(null, $theme-bg-color, null, null, null);
+ }
+ /** Vim Show running instance Details **/
+ .runninginstances{
+ width:200px;
+ .popover-body{
+ max-height: 200px;
+ overflow-y: scroll;
+ }
+ }
+ /****************************************************************************/
+ /************************** Smart table custom design ***********************/
+ /****************************************************************************/
+ ng2-smart-table {
+ @include font(null, 15px, null);
+ color: $gray-700;
+ .form-control {
+ @include wh-value(null, auto);
+ }
+ &.dataTables_empty td {
+ text-align: center;
+ }
+ ng2-smart-table-title {
+ * {
+ @include font(null, 12px, null);
+ }
+ a {
+ color: $gray-700 !important;
+ @include flexbox(block, null, null, null, null, null);
+ text-decoration: none;
+ &::after {
+ content: "\f0dc" !important;
+ @include font-family("Font Awesome 5 Free");
+ float: right;
+ color: $gray-500;
+ @include wh-value(0, 0);
+ }
+ &.asc::after {
+ content: "\f0de" !important;
+ @include font-family("Font Awesome 5 Free");
+ float: right;
+ color: $gray-500;
+ }
+ &.desc::after {
+ content: "\f0dd" !important;
+ @include font-family("Font Awesome 5 Free");
+ float: right;
+ color: $gray-500;
+ }
+ &:hover {
+ text-decoration: none !important;
+ }
+ &.sort.desc::after {
+ transform: none !important;
+ margin-bottom: 0;
+ }
+ &.sort.asc::after,
+ &.sort.desc::after {
+ content: "";
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(0, 0);
+ @include border(all, 0, solid, transparent !important);
+ margin-bottom: 0 !important;
+ }
+ }
+ span {
+ color: $gray-700;
+ }
+ }
+ ng2-smart-table-cell {
+ word-break: break-word;
+ table-cell-view-mode {
+ @include font(null, 12px, null);
+ .icon-label {
+ @include font(null, 20px, null);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(100px, 0);
+ text-align: center;
+ cursor: default;
+ }
+ }
+ }
+ .ng2-smart-filter {
+ @include wh-value(null, calc(2rem + 2px) !important);
+ @include font(null, 12px, null);
+ margin-top: 6px;
+ }
+ table.list-data {
+ tr td,
+ tr th {
+ @include padding-value(2, 10, 2, 10);
+ vertical-align: middle !important;
+ }
+ tbody {
+ tr.selected {
+ background: none !important;
+ }
+ }
+ }
+ default-table-filter {
+ select-filter {
+ select.form-control {
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(null, calc(1.5rem + 2px) !important);
+ vertical-align: middle;
+ background: $white
+ url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
+ no-repeat right 0.75rem center;
+ background-size: 8px 10px;
+ @include border(all, 1, solid, $gray-200);
+ @include roundedCorners(2);
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ &::-ms-expand {
+ visibility: hidden;
+ }
+ }
+ }
+ select-filter {
+ select {
+ @include roundedCorners(4);
+ }
+ }
+ input-filter {
+ input[type="text"] {
+ @include position_value(relative, null, null, null, null);
+ }
+ &:after {
+ @include position_value(relative, -26px, null, null, 100%);
+ content: "\f002";
+ @include font("Font Awesome 5 Free", 10px, null);
+ @include padding-value(0, 0, 0, 2);
+ color: $gray-500;
+ }
+ }
+ }
+ ng2-smart-table-pager {
+ @include flexbox(null, null, row-reverse, null, null, null);
+ @include padding-value(5, 20, 5, 20);
+ .ng2-smart-pagination {
+ .ng2-smart-page-item {
+ @include font(null, 10px, null);
+ a {
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ .ng2-smart-page-link {
+ @include font(null, 12px !important, null);
+ &.page-link {
+ text-align: center;
+ vertical-align: middle;
+ color: $primary;
+ @include border(all, 1, solid, $primary !important);
+ &:hover {
+ @include background(null, $primary !important, null, null, null);
+ color: $white;
+ }
+ }
+ }
+ span.ng2-smart-page-link.page-link {
+ color: $white;
+ @include background(null, $primary !important, null, null, null);
+ @include border(all, 1, solid, $primary !important);
+ }
+ }
+ }
+ }
+ }
+ /****************************************************************************/
+ /*********************** Button styles under list class *********************/
+ /****************************************************************************/
+ .list {
+ &.action {
+ button.btn.btn-primary {
+ @include padding-value(2, 8, 2, 8);
+ }
+ }
+ button:focus {
+ outline: 0;
+ @include box-shadow(0, 0, 0, 0, transparent);
+ }
+ button.btn.btn-primary {
+ color: $primary;
+ @include background(null, $white, null, null, null);
+ &:not(.active:hover) {
+ @include background(null, $white, null, null, null);
+ }
+ &:active {
+ color: $primary;
+ @include background(null, $white, null, null, null);
+ }
+ &.action-button {
+ color: $white;
+ @include background(null, $primary !important, null, null, null);
+ &:hover {
+ @include background(null, $primary, null, null, null);
+ }
+ }
+ }
+ .dropdown-menu {
+ @include border(all, 1, solid, $primary);
+ @include padding-value(0, 0, 0, 0);
+ button.btn.btn-primary {
+ @include background(null, transparent, null, null, null);
+ @include padding-value(8, 8, 8, 8);
+ @include roundedCorners(0);
+ &:hover {
+ @include background(null, $primary, null, null, null);
+ color: $white;
+ }
+ &:not(:last-child) {
+ @include border(bottom, 1, solid, $primary);
+ }
+ }
+ }
+ }
+ /****************************************************************************/
+ /*********************** Custom tabel design in topology ********************/
+ /****************************************************************************/
+ .custom-table {
+ td:first-child {
+ @include font(null, null, bold);
+ text-align: right;
+ }
+ th,
+ td {
+ @include padding-value(5, 7, 5, 7);
+ @include font(null, 10px, null);
+ @include line-height(15px);
+ }
+ }
+ /****************************************************************************/
+ /************************** Ng select custom design *************************/
+ /****************************************************************************/
+ .ng-select {
+ &.is-invalid .ng-select-container {
+ @include border(all, 1, solid, $red);
+ }
+ .ng-select-container {
+ @include border(all, 1, solid, $gray-200);
+ .ng-value-container .ng-placeholder {
+ color: $gray-80;
+ }
+ }
+ }
+ /****************************************************************************/
+ /******************** Custom nav section for default status *****************/
+ /****************************************************************************/
+ .list-utilites-actions {
+ @include flexbox(flex, null, row, null, center, null);
+ nav.custom-items-config {
+ @include position_value(relative, null, null, null, null);
+ @include roundedCorners(3);
+ span {
+ @include font(null, 13px, 600);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include position_value(relative, null, null, null, null);
+ text-decoration: none;
+ text-align: center;
+ @include margin-value(0, 0, 0, 10);
+ &:first-child {
+ @include margin-value(0, 0, 0, 0);
+ }
+ i {
+ @include font(null, 14px, null);
+ @include margin-value(0, 5, 0, 0);
+ }
+ }
+ }
+ }
+ /****************************************************************************/
+ /************************* File upload custom design ************************/
+ /****************************************************************************/
+ .custom-file-label {
+ color: $primary;
+ @include roundedCorners(4);
+ @include border(all, 1, solid, $primary);
+ overflow: hidden;
+ @include margin-value(0, 0, 0, 0);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding-right: 80px;
+ &::after {
+ color: $white;
+ @include background(null, $primary, null, null, null);
+ }
+ }
+ /****************************************************************************/
+ /************************* Notifier Container Design ************************/
+ /****************************************************************************/
+ .notifier__container {
+ ul {
+ @include margin-value(0, 0, 0, 0);
+ }
+ }
+ /***************************************************************************/
+ /************************* Topology Common Design **************************/
+ /****************************************************************************/
+ .ns-composer-form,
+ .vnf-composer-form,
+ .ns-instance-form {
+ @include font(null, 12px, null);
+ .ns-svg,
+ .vnf-svg {
+ @include wh-value(30px, 25px);
+ }
+ .svg-container {
+ min-height: 60vh;
+ }
+ .form-control {
+ @include font(null, 10px, null);
+ }
+ .scroll-box {
+ max-height: 285px;
+ overflow-y: scroll;
+ }
+ .border-all {
+ @include border(all, 1, solid, $primary);
+ }
+ .list-group {
+ &.inside-svg {
+ .list-group-item {
+ @include padding-value(3.2, 8, 3.2, 8);
+ }
+ }
+ &.dragable {
+ .list-group-item {
+ cursor: move;
+ @include padding-value(4.8, 4.8, 4.8, 4.8);
+ @include margin-value(0, 0, 5, 0);
+ @include background(null, $gray-200, null, null, null);
+ @include flexbox(flex, null, null, null, center, null);
+ border: none;
+ .span-overflow-text {
+ @include wh-value(90%, null);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ @include line-height(25px);
+ }
+ }
+ }
+ }
+ .drag-icon {
+ color: $gray-600;
+ @include font(null, 15px, null);
+ }
+ .ctrl {
+ cursor: move;
+ }
+ svg {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ image.node:hover,
+ circle.node:hover {
+ opacity: 0.7 !important;
+ }
+ image.active,
+ circle.active {
+ opacity: 0.7 !important;
+ }
+ path.link {
+ stroke: $dark-gray;
+ stroke-width: 2px;
+ fill: none;
+ &:hover {
+ stroke-width: 4px;
+ }
+ .dragline {
+ pointer-events: none;
+ }
+ }
+ .node_text {
+ text-anchor: middle;
+ pointer-events: none;
+ }
+ :not(.ctrl) {
+ cursor: pointer;
+ }
+ }
+ fieldset {
+ @include border(all, 1, solid, $primary);
+ legend {
+ @include padding-value(0, 5, 0, 5);
+ @include font(null, 15px, null);
+ color: $primary;
+ &.vl-legend,
+ &.element-legend {
+ @include wh-value(55%, null);
+ }
+ &.vnfd-legend {
+ @include wh-value(25%, null);
+ }
+ }
+ }
+ .btn-icon {
+ @include wh-value(36px, 36px);
+ text-align: center;
+ @include margin-value(0, 10, 10, 0);
+ }
+ .topology-btn {
+ color: $primary;
+ border-color: $primary;
+ &:hover,
+ &.pinned {
+ color: $white !important;
+ @include background(null, $primary !important, null, null, null);
+ }
+ }
+ .badgegroup {
+ @include flexbox(flex, flex-end, row, center, center, null);
+ }
+ }
+ .ns-topology-sidebar-container,
+ .vnf-topology-sidebar-container,
+ .ns-instance-topology-sidebar-container {
+ @include position_value(absolute !important, 0px, null, null, 0px);
+ .ng-sidebar {
+ @include wh-value(27%, null);
+ @include background(null, $white, null, null, null);
+ @include border(all, 1, solid, $gray-300);
+ .sidebar-header {
+ @include background(null, $modalheader-gray, null, null, null);
+ @include padding-value(5, 10, 5, 10);
+ @include border(bottom, 1, solid, $gray-300);
+ @include flexbox(flex, space-between, null, center, center, null);
+ .topology_title {
+ color: $primary;
+ }
+ }
+ .sidebar-body {
+ @include padding-value(10, 5, 10, 5);
+ }
+ }
+ .ng-sidebar__content {
+ button {
+ @include position_value(absolute, 45%, null, null, 0px);
+ @include background(null, $primary, null, null, null);
+ }
+ .detail-sidebar {
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include position_value(relative, null, null, null, null);
+ animation: push 0.5s infinite linear;
+ }
+ }
+ @keyframes push {
+ 0% {
+ right: 0;
+ }
+ 50% {
+ right: -0.2em;
+ }
+ 70% {
+ right: -0.3em;
+ }
+ 100% {
+ right: 0;
+ }
+ }
+ }
+}
+/****************************************************************************/
+/************************** MEDIA QUERIES ***********************************/
+/****************************************************************************/
+@media (max-width: map-get($grid-breakpoints, md)) {
+ .smarttable-style {
+ overflow-x: auto;
+ white-space: nowrap;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_animation.scss b/src/assets/scss/mixins/_animation.scss
new file mode 100644
index 0000000..ff1d0d5
--- /dev/null
+++ b/src/assets/scss/mixins/_animation.scss
@@ -0,0 +1,50 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for animation property
+ * example for animation: @include animation(rotate 1s linear);
+ * example for keyframes: @include keyframes(rotate) {
+ 0% { @include rotate(0); }
+ 100% { @include rotate(359); }
+ }
+ */
+
+// @mixin for animation properties
+@mixin animation ($animation) {
+ -webkit-animation: #{$animation};
+ -moz-animation: #{$animation};
+ -ms-animation: #{$animation};
+ -o-animation: #{$animation};
+ animation: #{$animation};
+}
+
+// @mixin for keyframes properties
+@mixin keyframes ($animation) {
+ @-webkit-keyframes #{$animation} {
+ @content;
+ }
+ @-moz-keyframes #{$animation} {
+ @content;
+ }
+ @-o-keyframes #{$animation} {
+ @content;
+ }
+ @keyframes #{$animation} {
+ @content;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_background.scss b/src/assets/scss/mixins/_background.scss
new file mode 100644
index 0000000..4eefcef
--- /dev/null
+++ b/src/assets/scss/mixins/_background.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for background property
+ * example: @include background(url, orange, 20px, repeat, center);
+ */
+
+// @mixin for background properties
+@mixin background($url, $color, $size, $repeat, $position) {
+ background-image: $url;
+ background-color: $color;
+ background-size : $size;
+ background-repeat: $repeat;
+ background-position: $position;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_border.scss b/src/assets/scss/mixins/_border.scss
new file mode 100644
index 0000000..7ec370e
--- /dev/null
+++ b/src/assets/scss/mixins/_border.scss
@@ -0,0 +1,43 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for border
+ * example: @include border(top, 1, solid, #000);
+ */
+
+// @mixin for border size and color
+@mixin border($side, $size, $type, $color){
+ @if ($side == top) {
+ border-top: $size+px $type $color;
+ } @else if ($side == right) {
+ border-right: $size+px $type $color;
+ } @else if ($side == left) {
+ border-left: $size+px $type $color;
+ } @else if ($side == bottom ) {
+ border-bottom: $size+px $type $color;
+ } @else if($side == all ){
+ border: $size+px $type $color;
+ }@else {
+ @if ($size == thin){
+ border: $size $type $color;
+ }
+ @else {
+ border: $size+px $type $color;
+ }
+ }
+}
diff --git a/src/assets/scss/mixins/_box-shadow.scss b/src/assets/scss/mixins/_box-shadow.scss
new file mode 100644
index 0000000..d520e84
--- /dev/null
+++ b/src/assets/scss/mixins/_box-shadow.scss
@@ -0,0 +1,34 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for box-shadow
+ * example: @include box-shadow(1px, 2px, 2px, 2px, #000);
+ */
+
+// @mixin for box shadow
+@mixin box-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false, $inset: false) {
+ @if $inset {
+ -webkit-box-shadow:inset $hoff $voff $blur $spread $color;
+ -moz-box-shadow:inset $hoff $voff $blur $spread $color;
+ box-shadow:inset $hoff $voff $blur $spread $color;
+ } @else {
+ -webkit-box-shadow: $hoff $voff $blur $spread $color;
+ -moz-box-shadow: $hoff $voff $blur $spread $color;
+ box-shadow: $hoff $voff $blur $spread $color;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_custom.scss b/src/assets/scss/mixins/_custom.scss
new file mode 100644
index 0000000..c7424de
--- /dev/null
+++ b/src/assets/scss/mixins/_custom.scss
@@ -0,0 +1,108 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains custom @mixin functions
+ */
+
+// @mixin for container width and height
+@mixin wh-value($width, $height) {
+ width: $width;
+ height: $height;
+}
+
+// @mixin for padding values
+@mixin padding-value($top, $right, $bottom, $left) {
+ padding: $top+px $right+px $bottom+px $left+px;
+}
+
+// @mixin for any padding values
+@mixin padding-percentage-value($top: null, $right: null, $bottom: null, $left: null) {
+ padding: $top $right $bottom $left;
+}
+
+// @mixin for margin values
+@mixin margin-value($top, $right, $bottom, $left) {
+ margin: $top+px $right+px $bottom+px $left+px;
+}
+
+// @mixin for margin values in percentage
+@mixin margin-value-percentage($top: null, $right: null, $bottom: null, $left: null) {
+ margin: $top $right $bottom $left;
+}
+
+// @mixin for center-align element/container
+@mixin align-center($topbottom, $width) {
+ margin: $topbottom auto;
+ width: $width;
+}
+
+// @mixin for center-align with top and bottom margin element/container
+@mixin tband-align-center($topbottom, $width, $bottommargin) {
+ margin: $topbottom auto $bottommargin;
+ width: $width;
+}
+
+// @mixin for transform style
+@mixin transform($x, $y, $z)
+{
+ transform: translate3d($x+px, $y+px, $z+px);
+ -webkit-transform: translate3d($x+px, $y+px, $z+px);
+}
+
+// @mixin for font-family setting
+@mixin font-family($font){
+ font-family: $font;
+}
+
+// @mixin for font-style setting
+@mixin font-style($font-style){
+ font-style: $font-style;
+}
+
+// Mixin for font & its attributes
+@mixin font($family, $size, $weight) {
+ font-family: $family;
+ font-size: $size;
+ font-weight: $weight;
+}
+
+// @mixin for line-height setting
+@mixin line-height($line-height){
+ line-height: $line-height;
+}
+
+// @mixin for letter-spacing setting
+@mixin letter-spacing($letter-spacing){
+ letter-spacing: $letter-spacing;
+}
+
+// @mixin to manipulate placeholder attribute in input element
+@mixin placeholder {
+ ::-webkit-input-placeholder {@content}
+ :-moz-placeholder {@content}
+ ::-moz-placeholder {@content}
+ :-ms-input-placeholder {@content}
+}
+
+// mixins for user-select
+@mixin user-select($select) {
+ @each $pre in -webkit-, -moz-, -ms-, -o- {
+ #{$pre + user-select}: #{$select};
+ }
+ #{user-select}: #{$select};
+ }
diff --git a/src/assets/scss/mixins/_flex.scss b/src/assets/scss/mixins/_flex.scss
new file mode 100644
index 0000000..faf870e
--- /dev/null
+++ b/src/assets/scss/mixins/_flex.scss
@@ -0,0 +1,47 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin function for flex properties
+ * example: @include flexbox(flex, flex-start, row-reverse, center, center, flex-end);
+ * 1. display: flex | inline-flex
+ * 2. justify-content : flex-start | flex-end | center | space-between | space-around
+ * 3. flex-direction: row | row-reverse | column | column-reverse
+ * 4. align-content: flex-start | flex-end | center | space-between | space-around | stretch
+ * 5. align-items: flex-start | flex-end | center | baseline | stretch
+ * 6. align-self: auto | flex-start | flex-end | center | baseline | stretch
+ */
+
+@mixin flexbox($display: null, $justify: null, $direction: null, $aligncontent: null, $alignitems: null, $alignself: null) {
+display: $display;
+justify-content: $justify;
+flex-direction: $direction;
+align-content: $aligncontent;
+align-items: $alignitems;
+align-self: $alignself;
+}
+
+/** To set flexible length for items
+ * flex-grow: how much an item will grow relative to the rest of the flexible items
+ flex-shrink: how much an item will shrink relative to the rest of the flexible items
+ flex-basis: The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em"
+ */
+@mixin flex($flex-grow: null, $flex-shrink: null, $flex-basis: null){
+ flex-grow: $flex-grow;
+ flex-shrink: $flex-shrink;
+ flex-basis: $flex-basis;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_font-weight.scss b/src/assets/scss/mixins/_font-weight.scss
new file mode 100644
index 0000000..2210f08
--- /dev/null
+++ b/src/assets/scss/mixins/_font-weight.scss
@@ -0,0 +1,43 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for font-weight
+ * example: @include fontWeight(600); (OR) @include fontWeight(semi-bold);
+ */
+
+// @mixin for font weight
+@mixin fontWeight($weight){
+ $weights: (
+ thin: 100,
+ extra-light: 200,
+ light: 300,
+ regular: 400,
+ medium: 500,
+ semi-bold: 600,
+ bold: 700,
+ extra-bold: 800,
+ ultra-bold: 900
+ );
+
+ $output: $weight;
+ @if map-has-key($weights, $weight) {
+ $output: map-get($weights, $weight);
+ }
+
+ font-weight: $output;
+ }
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_position.scss b/src/assets/scss/mixins/_position.scss
new file mode 100644
index 0000000..420f93d
--- /dev/null
+++ b/src/assets/scss/mixins/_position.scss
@@ -0,0 +1,33 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for offset position
+ * @param {String} $position - Either `relative`, `absolute` or `fixed`
+ * @param {Length} $top [null] - Top offset
+ * @param {Length} $right [null] - Right offset
+ * @param {Length} $bottom [null] - Bottom offset
+ * @param {Length} $left [null] - Left offset
+ */
+
+@mixin position_value($position, $top: null, $right: null, $bottom: null, $left: null) {
+ position: $position;
+ top: $top;
+ right: $right;
+ bottom: $bottom;
+ left: $left;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_rem.scss b/src/assets/scss/mixins/_rem.scss
new file mode 100644
index 0000000..960132a
--- /dev/null
+++ b/src/assets/scss/mixins/_rem.scss
@@ -0,0 +1,42 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for font
+ * example: @include rem("font-size", 14);
+ */
+
+@mixin rem($property, $values...) {
+ $n: length($values);
+ $i: 1;
+ $pxlist: ();
+ $remlist: ();
+ @while $i <=$n {
+ $itemVal: (nth($values, $i));
+ @if $itemVal !="auto" {
+ $pxlist: append($pxlist, $itemVal + px);
+ $remlist: append($remlist, ($itemVal / 16) + rem);
+ }
+ @else {
+ $pxlist: append($pxlist, auto);
+ $remlist: append($remlist, auto);
+ }
+ $i: $i+1;
+ }
+ #{$property}: $pxlist;
+ #{$property}: $remlist;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_rounded-corners.scss b/src/assets/scss/mixins/_rounded-corners.scss
new file mode 100644
index 0000000..dc8f77c
--- /dev/null
+++ b/src/assets/scss/mixins/_rounded-corners.scss
@@ -0,0 +1,96 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for border radius
+ * example: @include roundedCorners(10);
+ */
+
+// Rounded Corner has equal radius
+@mixin roundedCorners($size) {
+ border-radius: $size + px;
+}
+
+// Rounded Corner for percentage values
+@mixin roundedCornersPercentage($size) {
+ border-radius: $size;
+}
+
+// Rounded Corner for Top left/right
+@mixin roundedTop($size) {
+ border-radius: $size + px $size + px 0 0;
+}
+
+// Rounded Corner for Top Left alone
+@mixin roundedTopLeft($size) {
+ border-radius: $size + px 0 0 0;
+}
+
+// Rounded Corner for Top Right alone
+@mixin roundedTopRight($size) {
+ border-radius: 0 $size + px 0 0;
+}
+
+// Rounded Corner for Bottom left/right
+@mixin roundedBottom($size) {
+ border-radius: 0 0 $size + px $size + px;
+}
+
+// Rounded Corner for Bottom Left alone
+@mixin roundedBottomLeft($size) {
+ border-radius: 0 0 0 $size + px;
+}
+
+// Rounded Corner for Bottom Right alone
+@mixin roundedBottomRight($size) {
+ border-radius: 0 0 $size + px 0;
+}
+
+// Rounded Corner for Left Top/Bottom
+@mixin roundedLeft($size) {
+ border-radius: $size + px 0 0 $size + px;
+}
+
+// Rounded Corner for Right Top/Bottom
+@mixin roundedRight($size) {
+ border-radius: 0 $size + px $size + px 0;
+}
+
+// Shorthand for all four corners rounded equally
+@mixin circularCorners($size) {
+ border-radius: $size;
+}
+
+// Border bottom left radius
+@mixin roundedBottomLeftRadius($sive) {
+ border-bottom-left-radius: $sive + px;
+}
+
+// Border bottom right radius
+@mixin roundedBottomRightRadius($sive) {
+ border-bottom-right-radius: $sive + px;
+}
+
+// Border top left radius
+@mixin roundedTopLeftRadius($sive) {
+ border-top-left-radius: $sive + px;
+}
+
+// Border top right radius
+@mixin roundedTopRightRadius($sive) {
+ border-top-right-radius: $sive + px;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/_transform.scss b/src/assets/scss/mixins/_transform.scss
new file mode 100644
index 0000000..927ddae
--- /dev/null
+++ b/src/assets/scss/mixins/_transform.scss
@@ -0,0 +1,31 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for transform
+ */
+
+// @mixin for 3d transform
+@mixin transform_style($txsize, $tysize, $tzsize) {
+ transform: translate3d($txsize, $tysize, $tzsize);
+}
+
+// @mixin for rotate transform
+@mixin rotate($deg){
+ transform: rotate($deg+deg);
+ -webkit-transform: rotate($deg+deg);
+}
diff --git a/src/assets/scss/mixins/_transition.scss b/src/assets/scss/mixins/_transition.scss
new file mode 100644
index 0000000..743c8fb
--- /dev/null
+++ b/src/assets/scss/mixins/_transition.scss
@@ -0,0 +1,29 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @ file contains @mixin functions for transition property
+ * example: @include transition(background, 1s, ease-in-out, 0);
+ */
+
+// @mixin for transition properties
+@mixin transition($property: null, $duration: null, $timing-function: null, $delay: null) {
+ transition-property: $property;
+ transition-duration: $duration;
+ transition-timing-function: $timing-function;
+ transition-delay: $delay;
+}
\ No newline at end of file
diff --git a/src/assets/scss/mixins/mixin.scss b/src/assets/scss/mixins/mixin.scss
new file mode 100644
index 0000000..e5488e1
--- /dev/null
+++ b/src/assets/scss/mixins/mixin.scss
@@ -0,0 +1,30 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/** All mixins are imported here */
+@import '_animation';
+@import '_background';
+@import '_border';
+@import '_box-shadow';
+@import '_custom';
+@import '_flex';
+@import '_font-weight';
+@import '_position';
+@import '_rem';
+@import '_rounded-corners';
+@import '_transform';
+@import '_transition';
\ No newline at end of file
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
new file mode 100644
index 0000000..d39843b
--- /dev/null
+++ b/src/assets/scss/style.scss
@@ -0,0 +1,46 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/*Roboto Fonts*/
+$roboto-font-path: "~roboto-fontface/fonts" !default;
+@import "~roboto-fontface/css/roboto/sass/roboto-fontface-regular";
+/*Custom mixin*/
+@import "mixins/mixin.scss";
+/*Theme setup color*/
+@import "variable";
+/*bootstrap styles*/
+@import "~bootstrap/scss/bootstrap";
+/*Custom theme styles*/
+@import "app.scss";
+/*Code Mirror styles*/
+@import "~codemirror/lib/codemirror";
+@import "~codemirror/addon/fold/foldgutter";
+@import "~codemirror/theme/neat";
+@import "~codemirror/theme/material";
+@import "~codemirror/addon/dialog/dialog";
+@import "~codemirror/addon/display/fullscreen";
+/*ng-select styles*/
+@import "~@ng-select/ng-select/themes/default.theme.css";
+/*Angular notifier styles*/
+@import "~angular-notifier/styles/core.scss";
+@import "~angular-notifier/styles/themes/theme-material.scss";
+@import "~angular-notifier/styles/themes/theme-material.scss";
+@import "~angular-notifier/styles/types/type-success.scss";
+@import "~angular-notifier/styles/types/type-error.scss";
+@import "~angular-notifier/styles/types/type-warning.scss";
+@import "~angular-notifier/styles/types/type-default.scss";
+@import "~angular-notifier/styles/types/type-info.scss";
\ No newline at end of file
diff --git a/src/assets/scss/variable.scss b/src/assets/scss/variable.scss
new file mode 100644
index 0000000..6a274ce
--- /dev/null
+++ b/src/assets/scss/variable.scss
@@ -0,0 +1,265 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+// Custom Variables
+$themecolor: #2962ff;
+$theme-light: #fff;
+
+/*Topbar Colors*/
+
+$topbar: $theme-light;
+$topbar-height: 64px;
+$topbar-navlink-padding: 0px 15px;
+$topbar-navlink-font-size: 0.875rem;
+$topbar-navlink-height: 64px;
+$topbar-navbrand-padding: 0 10px 0 10px;
+/*Sidebar Colors*/
+
+$sidebar: $theme-light;
+$sidebar-text: #fff;
+$sidebar-icons: #fff;
+$sidebar-width-full: 100px;
+$sidebar-width-mini: 65px;
+/*Boxed layout width*/
+
+$boxed-width: 1200px;
+/*Shadow*/
+
+$shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
+/*transitions*/
+
+$transitions: 0.2s ease-in;
+/*Dark transparent bg*/
+
+$transparent-dark-bg: rgba(0, 0, 0, 0.05);
+$lft: left;
+$rgt: right;
+$card-alt: #e4e9ef;
+%square {
+ border-radius: 0px;
+}
+
+%rotate45 {
+ transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+}
+
+/*******************************/
+
+// Bootstrap overrides
+/*******************************/
+
+/**
+ * Table Of Content
+ *
+ * 1. Color system
+ * 2. Options
+ * 3. Body
+ * 4. Typography
+ * 5. Breadcrumbs
+ * 6. Cards
+ * 7. Dropdowns
+ * 8. Buttons
+ * 9. Typography
+ * 10. Progress bars
+ * 11. Tables
+ * 12. Forms
+ * 14. Component
+ */
+
+//
+// Color system
+//
+$primary: #054c8c;
+$secondary: #065fac;
+$theme-bg-color: #eef5f9;
+$breadcrumb-after-color: #002a6a;
+
+$white: #fff !default;
+$gray-100: #f6fafe !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #afb5c1 !default;
+$gray-600: #6c757d !default;
+$gray-700: #4f5467 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$gray-80: #cccccc !default;
+$gray-97: #f7f7f7 !default;
+$medium-pink: #fb6ca4 !default;
+$black-coral: #5a5c69 !default;
+$cerise-pink: #e4397c !default;
+$pure-red: #ff0000 !default;
+$denim: #1467b3 !default;
+$black: #000 !default;
+$blue: #137eff !default;
+$dark-gray: #aaaaaa;
+$indigo: #6610f2 !default;
+$purple: #8b5edd !default;
+$pink: #e83e8c !default;
+$red: #dd4b39 !default;
+$orange: #fb8c00 !default;
+$yellow: #f39c12 !default;
+$green: #00a65a !default;
+$teal: #20c997 !default;
+$cyan: #4fc3f7 !default;
+$grayish-red: #c1bfbf !default;
+$white-smoke: #f1f1f1 !default;
+$text-muted: $gray-500 !default;
+$colors: (
+ blue: $blue,
+ indigo: $indigo,
+ purple: $purple,
+ pink: $pink,
+ red: $red,
+ orange: $orange,
+ yellow: $yellow,
+ green: $green,
+ teal: $teal,
+ cyan: $cyan,
+ white: $white,
+ gray: $gray-600,
+ gray-dark: $gray-800
+);
+$primary: $blue !default;
+$secondary: $gray-400 !default;
+$success: $green !default;
+$info: $blue !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-800 !default;
+$cyan: $cyan !default;
+$orange: $orange !default;
+$theme-colors: () !default;
+$theme-colors: map-merge(
+ (
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark,
+ "cyan": $cyan,
+ "orange": $orange,
+ "purple": $purple
+ ),
+ $theme-colors
+);
+$modalheader-gray: #f8f9fa;
+//
+// Quickly modify global styling by enabling or disabling optional features.
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-hover-media-query: false !default;
+$enable-grid-classes: true !default;
+$enable-print-styles: true !default;
+// Body
+//
+// Settings for the element.
+$main-body-bg: #fff !default;
+$body-bg: #f2f4f5;
+$body-color: #6a7a8c !default;
+$grid-gutter-width: 20px !default;
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+$font-size-base: 0.875rem;
+$font-family-open-sans: "Open Sans";
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 700 !default;
+$h1-font-size: 36px !default;
+$h2-font-size: 30px !default;
+$h3-font-size: 24px !default;
+$h4-font-size: 18px !default;
+$h5-font-size: 16px !default;
+$h6-font-size: 14px !default;
+$headings-margin-bottom: (1rem / 2) !default;
+$headings-font-weight: 400 !default;
+$headings-color: inherit !default;
+// Breadcrumbs
+$breadcrumb-bg: $body-bg;
+$breadcrumb-margin-bottom: 1.5rem;
+// Cards
+$card-border-width: 0px !default;
+$card-border-color: transparent !default;
+$card-border-radius: 0px !default;
+// Dropdowns
+$dropdown-item-padding-x: 1rem !default;
+$dropdown-item-padding-y: 0.65rem !default;
+$dropdown-border-color: $gray-200;
+$dropdown-divider-bg: $gray-100;
+// Buttons
+$btn-secondary-border: $gray-300;
+// Progress bars
+$progress-bg: $gray-100;
+// Tables
+$table-bg-accent: $gray-100;
+$table-bg-hover: $gray-100;
+$table-hover-bg: $gray-100 !default;
+$table-cell-padding: 1rem !default;
+$table-bg-level: -10 !default;
+$table-bg-level2: 1 !default;
+$table-bg-level3: -5 !default;
+// Components
+$component-active-color: $white !default;
+$component-active-bg: $themecolor !default;
+$badge-pill-padding-x: 0.2em !default;
+$badge-pill-padding-y: 1em !default;
+// Forms
+$input-group-addon-bg: $gray-100;
+$input-border-color: $gray-200;
+$input-group-addon-border-color: $gray-200;
+$input-btn-focus-color: rgba(0, 0, 0, 0.25) !default;
+$input-focus-border-color: rgba(0, 0, 0, 0.25) !default;
+$custom-control-indicator-active-bg: rgba(0, 0, 0, 35%) !default;
+$input-btn-focus-box-shadow: transparent !default;
+$custom-select-focus-box-shadow: transparent !default;
+$custom-select-border-width: 1px !default;
+//
+// Define common padding and border radius sizes and more.
+$border-width: 1px !default;
+$border-color: rgba(0, 0, 0, 0.1) !default;
+$border-radius: 2px !default;
+$border-radius-lg: 2px !default;
+$border-radius-sm: 1px !default;
+// Progress bars
+$progress-height: 5px !default;
+//Tabs
+$nav-tabs-link-active-bg: $white !default;
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1600px
+) !default;
\ No newline at end of file