Merge branch 'development' into feature/update-edit-ontology-design

app/assets/stylesheets/application.css.scss.erb

@@ -51,8 +51,8 @@
 @import "components/index";
 @import "account";
 @import "agents";
+@import "upload_ontology";
 @import "edit-ontology";
-
 @import "nav_bar";
 @import "ontology_details_header";
 @import "ontology_viewer";

app/assets/stylesheets/bioportal.scss

@@ -1143,6 +1143,9 @@ a.truncated_less, a.truncated_more {
 .highlighted .search_ontology_acronym {
   color: white;
 }
+.hide {
+  display: none !important;
+}
 
 .empty-state {
   display: none;

app/assets/stylesheets/components/alert.scss

@@ -0,0 +1,84 @@
+.alert-container{
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    border-radius: 5px;
+}
+.alert-container.alert-info-type{
+    background-color: rgba(59, 130, 246, 0.1);
+}
+.alert-container.alert-warning-type {
+    background-color: rgba(234, 179, 8, 0.1);
+}
+.alert-container.alert-danger-type {
+    background-color: rgba(239, 68, 68, 0.1);
+}
+.alert-container.alert-success-type {
+    background-color: rgba(34, 197, 94, 0.1);
+}
+
+
+
+
+
+.alert-message{
+    font-size: 16px;
+    margin: 0 10px;
+    text-align: center;
+}
+
+
+
+.alert-message.alert-info-type{
+    color: rgb(59, 130, 246);
+}
+.alert-message.alert-warning-type {
+    color: rgb(234, 179, 8);
+}
+.alert-message.alert-danger-type {
+    color: rgb(239, 68, 68);
+}
+.alert-message.alert-success-type {
+    color: rgb(34, 197, 94);
+}
+
+
+
+
+.alert-icon svg{
+    width: 25px;
+    margin: 0 !important;
+}
+.alert-icon.alert-info-type svg path{
+    fill: rgb(59, 130, 246);
+}
+.alert-icon.alert-warning-type svg path {
+    fill: rgb(234, 179, 8);
+}
+.alert-icon.alert-danger-type svg path {
+    fill: rgb(239, 68, 68);
+}
+.alert-icon.alert-success-type svg path {
+    fill: rgb(34, 197, 94);
+}
+
+
+.alert-close svg{
+    width: 25px;
+    cursor: pointer;
+}
+
+.alert-close.alert-info-type svg path{
+    fill:rgb(59, 130, 246);
+}
+.alert-close.alert-warning-type svg path {
+    fill: rgb(234, 179, 8);
+}
+.alert-close.alert-danger-type svg path {
+    fill: rgb(239, 68, 68);
+}
+.alert-close.alert-success-type svg path {
+    fill: rgb(34, 197, 94);
+}
+
+

app/assets/stylesheets/components/chips.scss

@@ -1,3 +1,7 @@
+.chips-container > div{
+    margin-right: 10px;
+}
+
 .chips-container svg path{
     fill: var(--primary-color);
 }
@@ -7,6 +11,7 @@
     display: none;
 }
 
+
 .chips-container div label{
     cursor: pointer;
 }
@@ -20,9 +25,9 @@
     background:white;
     border: 0.5px solid #BDBDBD;
     color: #a7a7a7;
-    padding: 3px;
+    padding: 8px;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 13px;
     user-select: none;
 
 }

app/assets/stylesheets/components/index.scss

@@ -24,5 +24,5 @@
 @import "card";
 @import "header";
 @import "image";
-
-
+@import "alert";
+@import "progress_pages";

app/assets/stylesheets/components/input_field.scss

@@ -66,4 +66,20 @@
     right: calc(0.75rem + 5px);
     top: 50%;
     width: 0;
+}
+
+.ts-wrapper.multi .ts-control>div{
+    border-radius: 5px;
+    font-size: 11px;
+    padding: 2px 0 4px 6px;
+    color: #888888;
+}
+
+.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{
+    border-left: none;
+    color: #888888 !important;
+    margin-left: 0;
+}
+.ts-wrapper.plugin-remove_button .item .remove:hover{
+    background: unset;
 }

app/assets/stylesheets/components/primary_button.scss

@@ -0,0 +1,101 @@
+.button-container{
+    width: 100%;
+}
+.primary-button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: white;
+    height: 60px;
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: 9px;
+    transition: background-color ease 0.3s;
+}
+.primary-button:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+
+.animation-container{
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    background-color: var(--hover-color);
+    border: none;
+    border-radius: 9px;
+    justify-content: center;
+    align-items: center;
+    display: none;
+
+}
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    margin-top: 50px;
+    width: 80px;
+    height: 80px;
+    transform: scale(0.7);
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: white;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(24px, 0);
+    }
+}