Merge pull request #795 from templaza/v3

v3.1.4

README.md

@@ -57,6 +57,8 @@
 * Testimonials Widget
 * Map Widget
 * Accordion Widget
+* Hover Motion Widget
+* [View all Widgets](https://astroidframe.work/widgets)
 
 ## Article Widgets
 * Author Info
@@ -79,26 +81,27 @@
 
 ## Requirements
 * Joomla: 4.x, 5.x
-* PHP : 8.0+
+* PHP : 8.1+
 
 ## Browser Support
 | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)|![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)|![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)|![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)|
 | :---: | :---:	|:---:|:---:|
 |   Chrome 64+   |   Firefox 58+   |   Edge 14+   |   Safari 10+    |
 
 ## How to install
-1. [Download Astroid Latest](https://github.com/templaza/astroid-framework/releases/latest)
-2. Go to Joomla Administrator -> System -> Install Extensions -> Upload Package File
-3. Upload 'astroid-package-v.x.x.Framework-Template.zip'
-4. Back to System -> Templates -> Site Template Styles
-5. Find one of Astroid template make it default
-6. Go to front-end and check it.
+
+1. Go to Joomla Administrator -> System -> Install Extensions -> Install from Web
+2. On search box type "astroid" -> Enter -> You can see "Astroid Framework" right below
+3. Click and install it. -> Click "Get Started" Button
+4. Install one of Astroid template & make it default
+5. Go to front-end and check it.
 
 ## Links
 * [Homepage](https://astroidframe.work/) - Learn more about Astroid
 * [Documentation](https://docs.astroidframe.work/) - How to use Astroid
-* [Translations](https://github.com/templaza/astroid-framework/tree/language) - Join to translate Astroid
+* [Roadmap](https://github.com/orgs/templaza/projects/3/views/4?sortedBy%5Bdirection%5D=desc&sortedBy%5BcolumnId%5D=Milestone) - See our roadmap
 * [Changelogs](https://github.com/templaza/astroid-framework/releases) - View our Changelogs
+* [Join our Community](https://www.facebook.com/groups/astroid) - Come and share with us.
 * [Discord Chat](https://discord.gg/2MwtsAX4Py) - Join our developer chat on Discord.
 
 ## Find an Astroid Template provider

assets/vendor/astroid/scss/_rtl.scss

@@ -158,6 +158,15 @@ body.rtl {
          }
       }
    }
+   .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+      @include border-start-radius(var(--bs-border-radius));
+      @include border-end-radius(0);
+      margin-left: 0;
+      margin-right: calc(var(--bs-border-width)* -1);
+   }
+   .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
+      @include border-end-radius(var(--bs-border-radius));
+   }
    .input-group>.input-group-prepend>.btn,
    .input-group>.input-group-prepend>.input-group-text,
    .input-group>.input-group-append:not(:last-child)>.btn,

assets/vendor/hover_motion/css/base.css

@@ -0,0 +1,130 @@
+:root {
+	--angle: -15deg;
+}
+
+/* Page Loader */
+.as-hover-motion-gallery.loading::before,
+.as-hover-motion-gallery.loading::after {
+	content: '';
+	position: absolute;
+	z-index: 1000;
+}
+
+.as-hover-motion-gallery.loading::before {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--bs-body-bg);
+}
+
+.as-hover-motion-gallery.loading::after {
+	top: 50%;
+	left: 50%;
+	width: 60px;
+	height: 60px;
+	margin: -30px 0 0 -30px;
+	border-radius: 50%;
+	opacity: 0.4;
+	background: var(--bs-body-color) !important;
+	animation: loaderAnim 0.7s linear infinite alternate forwards;
+}
+
+@keyframes loaderAnim {
+	to {
+		opacity: 1;
+		transform: scale3d(0.5,0.5,1);
+	}
+}
+
+.as-hover-motion-gallery {
+	width: 100%;
+	height: 100vh;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.as-hover-motion-gallery::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+.as-hover-motion-gallery-inner {
+	gap: 1rem;
+	flex: none;
+	position: relative;
+	width: 200vw;
+	height: 200vh;
+	display: grid;
+	grid-template-rows: repeat(5,1fr);
+	grid-template-columns: 100%;
+	transform: rotate(var(--angle));
+  	transform-origin: center center;
+}
+
+.as-hover-motion-row {
+	display: grid;
+	gap: 1rem;
+	grid-template-columns: repeat(5,1fr);
+  	will-change: transform, filter;
+}
+
+.as-hover-motion-row-item {
+	position: relative;
+}
+
+.as-hover-motion-row-item-inner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+.as-item-click {
+	cursor: pointer;
+}
+
+.as-hover-motion-row-item-image {
+	object-fit: cover;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.as-hover-motion-row-item-img-large {
+	width: 100vw;
+	height: 100vh;
+	top: 50%;
+	left: 50%;
+	margin: -50vh 0 0 -50vw;
+	background-position: 50% 70%;
+	will-change: transform, filter;
+}
+
+.as-hover-motion-gallery-fullview {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	z-index: 1050;
+	cursor: pointer;
+}
+.as-hover-motion-close {
+	cursor: pointer;
+}
+.as-hover-motion-gallery-fullview > .as-hover-motion-row-item-inner {
+	pointer-events: none;
+}
+.as-hover-motion-gallery-fullview .as-hover-motion-row-item-inner {
+	border-radius: 0px;
+}