@sapphire-ion/framework 0.30.0

package/themes/components/tooltip/tooltip.component.scss

@@ -0,0 +1,23 @@
+.right{
+  @apply left-[calc(100%+0.5rem)] top-0 bottom-0 my-auto -translate-x-4;
+}
+
+.left{
+  @apply right-[calc(100%+0.5rem)] top-0 bottom-0 my-auto translate-x-4;
+}
+
+.top{
+  @apply bottom-[calc(100%+0.5rem)] left-0 right-0 mx-auto -translate-y-4;
+}
+
+.bottom{
+  @apply top-[calc(100%+0.5rem)] left-0 right-0 mx-auto translate-y-4;
+}
+
+#wrapper{
+  &:hover{
+    #tooltip{
+      @apply translate-x-0 translate-y-0 opacity-100 filter-none #{!important};
+    }
+  }
+}

package/themes/styles/components.scss

@@ -0,0 +1,52 @@
+default-list{
+    @apply size-full block;
+}
+
+default-view{
+    @apply size-full block;
+}
+
+tabs{
+    @apply size-full;
+}
+tab{
+    @apply overflow-hidden;
+}
+
+.wrapper{
+	@apply flex flex-col h-full;
+	ion-breadcrumbs{
+		@apply flex-shrink-0 my-1
+	}
+	& > ion-card{
+		@apply grow flex-1 flex flex-col m-0 shadow-none rounded-none border-x-0 border-b-0 rounded-t-2xl;
+		& > ion-card-header{
+			@apply shrink-0 p-3;
+		}
+		& > ion-card-content{
+			@apply px-3 h-full grow p-3 pt-0 flex flex-col overflow-hidden;
+		}
+	}
+}
+
+image{
+	@apply max-h-full max-w-full flex items-center justify-center;
+}
+
+//[ Taiwlind Extension ]
+.rounded-none{
+    --border-radius: 0rem;
+}
+.\!rounded-none{
+    --border-radius: 0rem !important;
+}
+.bg-transparent{
+    --background: transparent
+}
+.\!bg-transparent{
+    --background: transparent !important
+}
+
+tabs{
+	@apply block;
+}

package/themes/styles/core.styles.scss

@@ -0,0 +1,409 @@
+@use "sass:math";
+
+@import "./assets/fonts/OpenSans/OpenSans.css";
+@import "./assets/fonts/Poppins/Poppins.css";
+@import "./mixins.scss";
+
+.default-responsiveness{
+  @apply xl:col-span-3 md:col-span-6 col-span-full;
+}
+
+input-date{
+	@apply rounded-2xl overflow-hidden;
+}
+
+
+:root {
+	--ion-framework-table-light: #dfe0e3;
+	--ion-table-filter-wrap: nowrap;
+	--ion-table-row-wrap: nowrap;
+  --ion-color-translucid: color-mix(in srgb, var(--ion-color-medium) 20%, transparent 80%);
+}
+
+/* width */
+::-webkit-scrollbar {
+  height: 5px;
+  width: 5px;
+  margin: 2px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--ion-color-medium); 
+  border-radius: 10px;
+}
+
+input-bool, input-color,  input-date,  input-date-time,  input-time,  input-decimal,  input-number,  input-currency, 
+input-file,  input-select,  input-string,  input-textarea {
+	@apply block;
+}
+
+.translucid-border{
+  border: 1px solid $translucid-border-color;
+}
+.\!translucid-border{
+  border: 1px solid $translucid-border-color !important;
+}
+.translucid-background{
+  background: $translucid-background-color;
+}
+.\!translucid-background{
+  background: $translucid-background-color !important;
+}
+.translucid-primary-background{
+  background: $translucid-primary-background-color;
+}
+.\!translucid-primary-background{
+  background: $translucid-primary-background-color !important;
+}
+
+.blur-background{
+  --background: transparent !important;
+  background: $translucid-background-color;
+  backdrop-filter: blur(10px);
+}
+
+.default-transition{
+  @apply transition-all ease-in-out duration-200;
+}
+
+ion-modal.filter-modal{
+	--height: fit-content;
+	--min-height: fit-content;
+	--max-height: calc(80vh);
+	--max-width: 80%;
+}
+
+table{
+  color: var(--ion-color-step-700);
+  @apply min-w-full text-sm text-left rtl:text-right table-fixed;
+  thead{
+    @apply text-xs uppercase;
+    user-select: none;
+    background-color: var(--ion-color-step-300);
+    color: var(--ion-color-step-700);
+    @media (prefers-color-scheme: light) {
+      background-color: var(--ion-framework-table-light);
+    }
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 100;
+  }
+  tbody{
+    tr{
+      cursor: pointer;
+      background-color: color-mix(in srgb, var(--ion-color-light) 70%, transparent  30%);
+      border-bottom: color-mix(in srgb, var(--ion-color-dark)  50%, transparent 50%) solid 1px;
+      &:last-child{
+        border: none;
+      }
+      &:hover{
+        background-color: color-mix(in srgb, var(--ion-color-light) 50%, var(--ion-color-dark)  10%)
+      }
+    }
+  }
+}
+
+*{
+	font-family: 'Poppins';
+}
+
+.font-poppins{
+	font-family: 'Poppins' !important;
+}
+.font-open-sans{
+	font-family: 'OpenSans' !important;
+}
+
+ion-icon{
+	transition: color .5s;
+}
+
+ion-button, ion-item{
+	&::part(native){
+		transition: border-radius .5s;
+	}
+}
+
+ion-item.submitted.ion-invalid{
+	&.submitted{
+		--border-color: var(--ion-color-danger) !important;
+	}
+	ion-icon{
+		color: var(--danger) !important;
+	}
+}
+
+ion-toast{
+  &::part(container) {
+    padding-right: 0 !important;
+  }
+}
+
+ion-card-header, ion-card-content{
+	padding: .5rem;
+}
+
+ion-card{
+	border-radius: 1rem;
+}
+
+ion-button{
+	--border-radius: 1rem
+}
+
+ion-item{
+	ion-label{
+		ion-icon{
+			vertical-align: middle;
+		}
+	}
+}
+
+ion-content{
+  @apply bg-transparent;
+}
+
+ion-card{
+	@extend .translucid-border !optional;
+	background: transparent;
+	ion-card-header{
+	  background: var(--ion-color-light);
+	}
+	ion-card-content{
+		background: var(--ion-color-light);
+	}
+}
+  
+.blur-before{
+	&::before{
+		background-color: transparent;
+		content: '';
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		backdrop-filter: blur(5px);
+	}
+}
+
+ion-input.number-class{
+	input[type=number]::-webkit-inner-spin-button,
+	input[type=number]::-webkit-outer-spin-button {
+		-webkit-appearance: none !important;
+		-moz-appearance: none !important;
+		appearance: none !important;
+		margin: 0;
+}
+}
+
+home{
+	@apply size-full;
+}
+
+.card-disabled{
+	opacity: .5 !important;
+}
+
+step{
+  @apply w-full;
+}
+tab{
+  @apply size-full block;
+}
+
+
+.animated-from-right{
+    animation-name: from-right;
+    animation-duration: .3s;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out 
+}
+
+@keyframes from-right {
+    from {
+        opacity: 0;
+        transform: translateX(3rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateX();
+    }
+}
+
+.animated-from-left{
+    animation-name: from-left;
+    animation-duration: .3s;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out 
+}
+
+@keyframes from-left {
+    from {
+        opacity: 0;
+        transform: translateX(-3rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateX();
+    }
+}
+
+
+.animated-from-top{
+    animation-name: from-top;
+    animation-duration: .3s;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out 
+}
+
+@keyframes from-top {
+    from {
+        opacity: 0;
+        transform: translateY(-3rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY();
+    }
+}
+
+.animated-from-bottom{
+    animation-name: from-bottom;
+    animation-duration: .3s;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out 
+}
+
+@keyframes from-bottom {
+    from {
+        opacity: 0;
+        transform: translateY(3rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY();
+    }
+}
+
+.animated{
+  animation-name: anim-opacity;
+  animation-duration: .3s;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in-out 
+}
+
+@keyframes anim-opacity {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1;
+  }
+}
+
+ion-list{
+  & > ion-item{
+      --background: transparent
+      --border-color: var(--ion-color-translucid);
+      --border-width: 1px 1px 0px 1px;
+      --inner-border-width: 0 !important;
+  }
+  & > ion-item:first-child {
+      --border-radius: 1rem 1rem 0rem 0rem;
+  }
+  & > ion-item:last-child {
+      --border-radius: 0rem 0rem 1rem 1rem;
+      --border-width: 1px;
+  }
+  & > ion-item:only-child{
+      --border-radius: 1rem;
+      --border-width: 1px;
+  }
+  &.no-outer-border {
+      & > ion-item{
+          --border-width: 1px 0px 0px 0px;
+      }
+      & > ion-item:first-child{
+          --border-width: 0px;
+      }
+  }
+}
+
+.ion-content-scroll-host::before,
+.ion-content-scroll-host::after {
+  position: absolute;
+  
+  width: 1px;
+  height: 1px;
+  
+  content: "";
+}
+
+.ion-content-scroll-host::before {
+  bottom: -1px;
+}
+
+.ion-content-scroll-host::after {
+  top: -1px;
+}
+
+
+.bg-mesh{
+  background-color: var(--ion-color-background);
+
+  --color-1: color-mix(in srgb, var(--ion-color-secondary) 10%, var(--ion-color-light)); // rgb(4, 120, 87);
+  --color-2: color-mix(in srgb, var(--ion-color-primary) 30%, var(--ion-color-light)); // rgb(49, 46, 129);
+  --color-3: color-mix(in srgb, var(--ion-color-primary) 5% , var(--ion-color-light)); // rgb(110, 231, 183);
+  --color-4: color-mix(in srgb, var(--ion-color-danger)  10%, var(--ion-color-light)); // rgb(112, 26, 117);
+  --color-5: color-mix(in srgb, var(--ion-color-primary) 90%, var(--ion-color-light));  //rgb(191, 219, 254);
+  --color-6: color-mix(in srgb, var(--ion-color-secondary) 50%, var(--ion-color-light));  //rgb(153, 246, 228);
+
+  background-image: 
+      radial-gradient(at 57% 67%, 
+         var(--color-1) 0, transparent 86%), 
+      radial-gradient(at 15% 68%, 
+         var(--color-2) 0, transparent 70%), 
+      radial-gradient(at 49% 40%, 
+         var(--color-3) 0, transparent 84%), 
+      radial-gradient(at 92% 45%, 
+         var(--color-4) 0, transparent 90%), 
+      radial-gradient(at 97% 5% , 
+         var(--color-5) 0, transparent 99%), 
+      radial-gradient(at 72% 63%, 
+         var(--color-6) 0, transparent 16%);
+}
+
+cdk-virtual-scroll-viewport {
+  height: 100%;
+  width: 100%;
+  .cdk-virtual-scroll-content-wrapper{
+    @apply w-full;
+  }
+}
+.remove-select-padding{
+  --inner-padding-end: 10px !important;
+}
+
+ion-popover.input-select-popover{
+  &::part(arrow)::after{
+    background: color-mix(in srgb, var(--ion-color-primary) 10%, var(--ion-color-light));
+    border: var(--ion-color-step-250) 1px solid;
+  }
+}
+
+carousel{
+  @apply block;
+}
+
+ion-breadcrumb{
+  @apply text-sm
+}
+
+tooltip{
+  @apply size-full absolute left-0 top-0;
+}
+
+text-tooltip{
+  @apply block relative w-full;
+}

package/themes/styles/ionic/ion-action-sheet.scss

@@ -0,0 +1,8 @@
+.action-sheet-group, .action-sheet-group-cancel{
+  --button-background-selected: transparent;
+  @apply bg-transparent;
+  button{
+    background: $translucid-background-color !important;
+    border: 1px solid $translucid-border-color;
+  }
+}

package/themes/styles/ionic/ion-alert.scss

@@ -0,0 +1,9 @@
+ion-alert{
+  --background: transparent !important;
+  background: transparent !important;
+  .alert-wrapper{
+    background: $translucid-background-color !important;
+    border: 1px solid $translucid-border-color;
+    @apply backdrop-blur-md;
+  }
+}

package/themes/styles/ionic/ion-button.scss

@@ -0,0 +1,3 @@
+ion-button{
+  @apply m-0;
+}

package/themes/styles/ionic/ion-card.scss

@@ -0,0 +1,3 @@
+ion-card-header{
+  @apply p-3;
+}

package/themes/styles/ionic/ion-content.scss

@@ -0,0 +1,3 @@
+ion-content{
+  --keyboard-offset: 0px !important;
+}

package/themes/styles/ionic/ion-datetime.scss

@@ -0,0 +1,6 @@
+ion-datetime{
+  border: 1px solid $translucid-border-color;
+  @apply rounded-2xl;
+  --wheel-fade-background-rgb: transparent;
+  //--ion-color-step-300: var(--ion-color-step-150);
+}

package/themes/styles/ionic/ion-item.scss

@@ -0,0 +1,10 @@
+ion-item{
+  &::part(native){
+    @apply transition-all ease-in-out duration-300;
+    transition: background;
+  }
+  &.select-interface-option{
+    --background: transparent !important;
+    background: $translucid-background-color !important;
+  }
+}

package/themes/styles/ionic/ion-list.scss

@@ -0,0 +1,4 @@
+ion-list{
+  --background: transparent !important;
+  background: transparent !important;
+}

package/themes/styles/ionic/ion-modal.scss

@@ -0,0 +1,8 @@
+ion-modal{
+  &::part(content){
+    @media (orientation: landscape) {
+      border-radius: 1rem;
+    }
+    overflow: hidden;
+  }
+}

package/themes/styles/ionic/ion-popover.scss

@@ -0,0 +1,31 @@
+ion-popover{
+  &::part(content){
+    border-radius: 1rem;
+    overflow-y: hidden;
+    background: $translucid-background-color;
+    border: 1px solid $translucid-border-color;
+    //@apply backdrop-blur-md;
+  
+  }
+  &::part(arrow)::after{
+    background: $translucid-background-color;
+    //backdrop-filter: blur(10px);
+  }
+  .popover-viewport{
+    --wheel-fade-background-rgb: transparent;
+    @apply rounded-2xl
+  }
+}
+
+ion-popover{
+  ion-select-popover{
+    ion-list{
+      ion-item:first-of-type{
+        --border-width: 0px !important;
+      }
+      ion-item{
+        --border-width: 1px 0px 0px 0px  !important;
+      }
+    }
+  }
+}

package/themes/styles/ionic/ion-progress-bar.scss

@@ -0,0 +1,3 @@
+ion-progress-bar{
+  @apply rounded-2xl
+}

package/themes/styles/ionic/ion-searchbar.scss

@@ -0,0 +1,4 @@
+
+ion-searchbar{
+  --border-radius: 1rem;
+}

package/themes/styles/ionic/ion-toast.scss

@@ -0,0 +1,14 @@
+ion-toast{
+  --background: var(--ion-color-light);
+  --ion-background-color-rgb: transparent;
+  --border-color: color-mix(in srgb,  var(--ion-color-medium) 30%, transparent 90%);
+  --border-width: 1px;
+  --border-style: solid;
+  --border-radius: 1rem;
+//   &::part(container){
+//     //backdrop-filter: blur(12px) !important; //saturate(120%);
+//     //border: 1px solid color-mix(in srgb,  var(--ion-color-medium) 30%, transparent 90%);
+//     @apply rounded-2xl;
+//   }
+// }
+}

package/themes/styles/ionic.scss

@@ -0,0 +1,13 @@
+@import './ionic/ion-action-sheet.scss';
+@import './ionic/ion-alert.scss';
+@import './ionic/ion-button.scss';
+@import './ionic/ion-card.scss';
+@import './ionic/ion-content.scss';
+@import './ionic/ion-datetime.scss';
+@import './ionic/ion-item.scss';
+@import './ionic/ion-list.scss';
+@import './ionic/ion-modal.scss';
+@import './ionic/ion-popover.scss';
+@import './ionic/ion-progress-bar.scss';
+@import './ionic/ion-searchbar.scss';
+@import './ionic/ion-toast.scss';

package/themes/styles/login-default.scss

@@ -0,0 +1,87 @@
+
+main {
+    @media (prefers-color-scheme: dark) {
+      background: $dark-gradient;
+    }
+    @media (prefers-color-scheme: light) {
+      background: $light-gradient;
+    }
+    //background: linear-gradient(45deg, #1e293b 0%,#0369a1 100%);
+    animation: Gradient 15s ease infinite;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-evenly;
+    overflow: hidden;
+    position: relative; 
+  }
+  
+  main::before, 
+  main::after {
+  content: "";
+    width: 70vmax;
+    height: 70vmax;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.07);
+    left: -20vmin;
+    top: -20vmin;
+    animation: morph 15s linear infinite alternate, spin 20s linear infinite;
+    z-index: 1;
+    will-change: border-radius, transform;
+    transform-origin: 55% 55%;
+    pointer-events: none; 
+  }
+  
+  main::after {
+    width: 70vmin;
+    height: 70vmin;
+    left: auto;
+    right: -10vmin;
+    top: auto;
+    bottom: 0;
+    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
+    transform-origin: 20% 20%; 
+  }
+  
+  
+  
+  @keyframes Gradient {
+  0% {
+    background-position: 0 50%
+  }
+  50% {
+    background-position: 100% 50%
+  }
+  100% {
+    background-position: 0 50%
+  }
+  }
+  
+  @keyframes morph {
+  0% {
+    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
+  100% {
+    border-radius: 40% 60%; } 
+  }
+  
+  @keyframes spin {
+  to {
+    transform: rotate(1turn); 
+  } 
+  }
+  .st0{display:none;}
+  .st1{display:inline;}
+  .st2{opacity:0.29;}
+  .st3{fill:#FFFFFF;}
+  .st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
+  .st5{clip-path:url(#SVGID_4_);}
+  .st6{clip-path:url(#SVGID_6_);}
+  .st7{clip-path:url(#SVGID_8_);}
+  .st8{clip-path:url(#SVGID_10_);}
+  .st9{fill:none;}
+  .st10{clip-path:url(#SVGID_12_);}
+  .st11{opacity:0.7;}
+  .st12{clip-path:url(#SVGID_14_);}
+  .st13{opacity:0.2;}
+  .st14{clip-path:url(#SVGID_16_);}
+  .st15{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}