Replicating InfinityCarousel and fixing outdated bugfixes, css changes
This commit is contained in:
Moris Zen
91
src/components/Carousel/InfiniteCarousel.css
Normal file
91
src/components/Carousel/InfiniteCarousel.css
Normal file
@@ -0,0 +1,91 @@
|
||||
.InfiniteCarousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.InfiniteCarouselFrame {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.InfiniteCarouselScrollTrack {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: -moz-scrollbars-none;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.InfiniteCarouselScrollTrack::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.InfiniteCarouselSlide img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.InfiniteCarouselDots {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.InfiniteCarouselDot {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0 5px;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.InfiniteCarouselDotIcon {
|
||||
display: block;
|
||||
background-color: #e5e5e5;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.InfiniteCarouselDotActiveIcon {
|
||||
background-color: #48799a;
|
||||
}
|
||||
|
||||
.InfiniteCarouselArrow {
|
||||
display: block;
|
||||
background: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
outline: none;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.InfiniteCarouselArrowPrev {
|
||||
left: 15px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.InfiniteCarouselArrowNext {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.InfiniteCarouselArrowIcon {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
border: solid #e5e5e5;
|
||||
border-width: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.InfiniteCarouselArrowNextIcon {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.InfiniteCarouselArrowPrevIcon {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
41
src/components/Carousel/InfiniteCarouselArrow.js
Normal file
41
src/components/Carousel/InfiniteCarouselArrow.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
function InfiniteCarouselArrow({ next, onClick, styles }) {
|
||||
const arrowClassName = styles.InfiniteCarouselArrow
|
||||
let typeClassName
|
||||
if (next) {
|
||||
typeClassName = styles.InfiniteCarouselArrowNext
|
||||
} else {
|
||||
typeClassName = styles.InfiniteCarouselArrowPrev
|
||||
}
|
||||
|
||||
const iconClassName = styles.InfiniteCarouselArrowIcon
|
||||
let iconTypeClassName
|
||||
if (next) {
|
||||
iconTypeClassName = styles.InfiniteCarouselArrowNextIcon
|
||||
} else {
|
||||
iconTypeClassName = styles.InfiniteCarouselArrowPrevIcon
|
||||
}
|
||||
|
||||
const className = `${arrowClassName} ${typeClassName}`
|
||||
const classNameIcon = `${iconClassName} ${iconTypeClassName}`
|
||||
|
||||
return (
|
||||
<button className={className} onClick={onClick}>
|
||||
<i className={classNameIcon} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
InfiniteCarouselArrow.propTypes = {
|
||||
next: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
styles: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
InfiniteCarouselArrow.defaultProps = {
|
||||
next: true,
|
||||
}
|
||||
|
||||
export default InfiniteCarouselArrow
|
||||
36
src/components/Carousel/InfiniteCarouselDots.js
Normal file
36
src/components/Carousel/InfiniteCarouselDots.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
function InfiniteCarouselDots({ numberOfDots, activePage, onClick, styles }) {
|
||||
const dots = []
|
||||
const className = styles.InfiniteCarouselDots
|
||||
const dotClassName = styles.InfiniteCarouselDot
|
||||
const dotIconClassName = styles.InfiniteCarouselDotIcon
|
||||
const activeClass = styles.InfiniteCarouselDotActiveIcon
|
||||
let classNameIcon
|
||||
|
||||
for (let i = 0; i < numberOfDots; i += 1) {
|
||||
classNameIcon = `${dotIconClassName} ${i === activePage ? activeClass : ''}`
|
||||
dots.push(
|
||||
<button
|
||||
className={dotClassName}
|
||||
data-index={i}
|
||||
key={i + 1}
|
||||
onClick={onClick}
|
||||
>
|
||||
<i className={classNameIcon} />
|
||||
</button>
|
||||
) // eslint-disable-line react/jsx-closing-tag-location
|
||||
}
|
||||
|
||||
return <ul className={className}>{dots}</ul>
|
||||
}
|
||||
|
||||
InfiniteCarouselDots.propTypes = {
|
||||
numberOfDots: PropTypes.number.isRequired,
|
||||
activePage: PropTypes.number.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
styles: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
export default InfiniteCarouselDots
|
||||
44
src/components/Carousel/helpers.js
Normal file
44
src/components/Carousel/helpers.js
Normal file
@@ -0,0 +1,44 @@
|
||||
export function getElementWidth(elem) {
|
||||
return elem.getBoundingClientRect().width || elem.offsetWidth || 0
|
||||
}
|
||||
|
||||
export function getElementHeight(elem) {
|
||||
return elem.getBoundingClientRect().height || elem.offsetHeight || 0
|
||||
}
|
||||
|
||||
export function getSwipeDirection(x1, x2, y1, y2) {
|
||||
const xDist = x1 - x2
|
||||
const yDist = y1 - y2
|
||||
|
||||
let swipeAngle = Math.round((Math.atan2(yDist, xDist) * 180) / Math.PI)
|
||||
|
||||
if (swipeAngle < 0) {
|
||||
swipeAngle = 360 - Math.abs(swipeAngle)
|
||||
}
|
||||
if (swipeAngle <= 45 && swipeAngle >= 0) {
|
||||
return 1
|
||||
}
|
||||
if (swipeAngle <= 360 && swipeAngle >= 315) {
|
||||
return 1
|
||||
}
|
||||
if (swipeAngle >= 135 && swipeAngle <= 225) {
|
||||
return -1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
export function isTouchDevice() {
|
||||
return 'ontouchstart' in document.documentElement
|
||||
}
|
||||
|
||||
export function sortNumber(a, b) {
|
||||
return a - b
|
||||
}
|
||||
|
||||
export function getScreenWidth() {
|
||||
return (
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth
|
||||
)
|
||||
}
|
||||
1012
src/components/Carousel/index.js
Normal file
1012
src/components/Carousel/index.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { Component } from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
|
||||
import iconReact from '../images/react.svg'
|
||||
@@ -17,10 +17,9 @@ import iconPython from '../images/python.svg'
|
||||
import iconRuby from '../images/ruby.svg'
|
||||
import iconRails from '../images/rails.svg'
|
||||
import iconRedis from '../images/redis.svg'
|
||||
import Carousel from './Carousel'
|
||||
|
||||
import Carousel from 'react-leaf-carousel'
|
||||
|
||||
const Technologies = ({ ...props }) => (
|
||||
const Technologies = () => (
|
||||
<Carousel
|
||||
breakpoints={[
|
||||
{
|
||||
@@ -45,13 +44,13 @@ const Technologies = ({ ...props }) => (
|
||||
},
|
||||
},
|
||||
]}
|
||||
dots={false}
|
||||
dots={true}
|
||||
autoCycle={true}
|
||||
arrows={false}
|
||||
arrows={true}
|
||||
showSides={true}
|
||||
pauseOnHover={false}
|
||||
cycleInterval={2000}
|
||||
showSides={false}
|
||||
showSides={true}
|
||||
sidesOpacity={0.5}
|
||||
sideSize={0.1}
|
||||
slidesToScroll={2}
|
||||
|
||||
@@ -22,9 +22,9 @@ const ServicesPage = () => (
|
||||
text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
|
||||
/>
|
||||
<div className="md:flex mt-4">
|
||||
<div className="my-1 md:mx-1 border p-6 hover:shadow-md rounded">
|
||||
<h3 className="text-l my-2">Modern Web Development</h3>
|
||||
<p className="leading-normal">
|
||||
<div className="bg-indigo shadow p-6 bg:indigo-light md:rounded-tl">
|
||||
<h3 className="text-l my-2 text-white">Modern Web Development</h3>
|
||||
<p className="leading-normal text-white opacity-80">
|
||||
We offer full-cycle web development services for the connected
|
||||
world. Our talented developers work with popular languages and are
|
||||
always up to speed with cutting edge trends in web development. We
|
||||
@@ -33,9 +33,9 @@ const ServicesPage = () => (
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="my-1 md:mx-1 border hover:shadow-md p-6 rounded">
|
||||
<h3 className="text-l my-2">Mobile App Development</h3>
|
||||
<p className="leading-normal">
|
||||
<div className="bg-indigo shadow p-6">
|
||||
<h3 className="text-l text-white my-2">Mobile App Development</h3>
|
||||
<p className="leading-normal text-white opacity-80">
|
||||
We have what it takes to develop competitive iOS and Android
|
||||
applications using both native languages and hybrid solutions.
|
||||
Solutions for iOS are built with Swift & Objective-C and Android
|
||||
@@ -44,9 +44,9 @@ const ServicesPage = () => (
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="my-1 md:mx-1 border hover:shadow-md p-6 rounded">
|
||||
<h3 className="text-l my-2">UX & UI Design</h3>
|
||||
<p className="leading-normal">
|
||||
<div className="bg-indigo shadow p-6 rounded-tr">
|
||||
<h3 className="text-l my-2 text-white">UX & UI Design</h3>
|
||||
<p className="leading-normal text-white opacity-80">
|
||||
Our approach is simple: focus on how users might use the product in
|
||||
the best way possible. We offer UX and interface design for all
|
||||
screens and devices. The solutions are usually shaped through
|
||||
@@ -54,7 +54,7 @@ const ServicesPage = () => (
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border md:mx-1 my-1 mb-8 hover:shadow-md rounded p-6">
|
||||
<div className="border border-indigo mb-8 rounded-b p-4 shadow">
|
||||
<SectionIntro
|
||||
headline="Technologies"
|
||||
classes="text-center text-l max-w-lg mx-auto"
|
||||
|
||||
@@ -875,7 +875,7 @@ table {
|
||||
}
|
||||
|
||||
.bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.bg-indigo-light {
|
||||
@@ -1167,7 +1167,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:bg-indigo-light {
|
||||
@@ -1459,7 +1459,7 @@ table {
|
||||
}
|
||||
|
||||
.hover\:bg-indigo:hover {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.hover\:bg-indigo-light:hover {
|
||||
@@ -1823,7 +1823,7 @@ table {
|
||||
}
|
||||
|
||||
.border-indigo {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.border-indigo-light {
|
||||
@@ -2115,7 +2115,7 @@ table {
|
||||
}
|
||||
|
||||
.hover\:border-indigo:hover {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.hover\:border-indigo-light:hover {
|
||||
@@ -4519,7 +4519,7 @@ table {
|
||||
}
|
||||
|
||||
.text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.text-indigo-light {
|
||||
@@ -4811,7 +4811,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-indigo-light {
|
||||
@@ -5103,7 +5103,7 @@ table {
|
||||
}
|
||||
|
||||
.hover\:text-indigo:hover {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.hover\:text-indigo-light:hover {
|
||||
@@ -5771,7 +5771,7 @@ table {
|
||||
}
|
||||
|
||||
.sm\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.sm\:bg-indigo-light {
|
||||
@@ -6063,7 +6063,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .sm\:group-hover\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .sm\:group-hover\:bg-indigo-light {
|
||||
@@ -6355,7 +6355,7 @@ table {
|
||||
}
|
||||
|
||||
.sm\:hover\:bg-indigo:hover {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.sm\:hover\:bg-indigo-light:hover {
|
||||
@@ -6711,7 +6711,7 @@ table {
|
||||
}
|
||||
|
||||
.sm\:border-indigo {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.sm\:border-indigo-light {
|
||||
@@ -7003,7 +7003,7 @@ table {
|
||||
}
|
||||
|
||||
.sm\:hover\:border-indigo:hover {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.sm\:hover\:border-indigo-light:hover {
|
||||
@@ -9391,7 +9391,7 @@ table {
|
||||
}
|
||||
|
||||
.sm\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.sm\:text-indigo-light {
|
||||
@@ -9683,7 +9683,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .sm\:group-hover\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .sm\:group-hover\:text-indigo-light {
|
||||
@@ -9975,7 +9975,7 @@ table {
|
||||
}
|
||||
|
||||
.sm\:hover\:text-indigo:hover {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.sm\:hover\:text-indigo-light:hover {
|
||||
@@ -10644,7 +10644,7 @@ table {
|
||||
}
|
||||
|
||||
.md\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.md\:bg-indigo-light {
|
||||
@@ -10936,7 +10936,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .md\:group-hover\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .md\:group-hover\:bg-indigo-light {
|
||||
@@ -11228,7 +11228,7 @@ table {
|
||||
}
|
||||
|
||||
.md\:hover\:bg-indigo:hover {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.md\:hover\:bg-indigo-light:hover {
|
||||
@@ -11584,7 +11584,7 @@ table {
|
||||
}
|
||||
|
||||
.md\:border-indigo {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.md\:border-indigo-light {
|
||||
@@ -11876,7 +11876,7 @@ table {
|
||||
}
|
||||
|
||||
.md\:hover\:border-indigo:hover {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.md\:hover\:border-indigo-light:hover {
|
||||
@@ -14264,7 +14264,7 @@ table {
|
||||
}
|
||||
|
||||
.md\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.md\:text-indigo-light {
|
||||
@@ -14556,7 +14556,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .md\:group-hover\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .md\:group-hover\:text-indigo-light {
|
||||
@@ -14848,7 +14848,7 @@ table {
|
||||
}
|
||||
|
||||
.md\:hover\:text-indigo:hover {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.md\:hover\:text-indigo-light:hover {
|
||||
@@ -15517,7 +15517,7 @@ table {
|
||||
}
|
||||
|
||||
.lg\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.lg\:bg-indigo-light {
|
||||
@@ -15809,7 +15809,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .lg\:group-hover\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .lg\:group-hover\:bg-indigo-light {
|
||||
@@ -16101,7 +16101,7 @@ table {
|
||||
}
|
||||
|
||||
.lg\:hover\:bg-indigo:hover {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.lg\:hover\:bg-indigo-light:hover {
|
||||
@@ -16457,7 +16457,7 @@ table {
|
||||
}
|
||||
|
||||
.lg\:border-indigo {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.lg\:border-indigo-light {
|
||||
@@ -16749,7 +16749,7 @@ table {
|
||||
}
|
||||
|
||||
.lg\:hover\:border-indigo:hover {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.lg\:hover\:border-indigo-light:hover {
|
||||
@@ -19137,7 +19137,7 @@ table {
|
||||
}
|
||||
|
||||
.lg\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.lg\:text-indigo-light {
|
||||
@@ -19429,7 +19429,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .lg\:group-hover\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .lg\:group-hover\:text-indigo-light {
|
||||
@@ -19721,7 +19721,7 @@ table {
|
||||
}
|
||||
|
||||
.lg\:hover\:text-indigo:hover {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.lg\:hover\:text-indigo-light:hover {
|
||||
@@ -20390,7 +20390,7 @@ table {
|
||||
}
|
||||
|
||||
.xl\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.xl\:bg-indigo-light {
|
||||
@@ -20682,7 +20682,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .xl\:group-hover\:bg-indigo {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .xl\:group-hover\:bg-indigo-light {
|
||||
@@ -20974,7 +20974,7 @@ table {
|
||||
}
|
||||
|
||||
.xl\:hover\:bg-indigo:hover {
|
||||
background-color: #6574cd;
|
||||
background-color: #636ef2;
|
||||
}
|
||||
|
||||
.xl\:hover\:bg-indigo-light:hover {
|
||||
@@ -21330,7 +21330,7 @@ table {
|
||||
}
|
||||
|
||||
.xl\:border-indigo {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.xl\:border-indigo-light {
|
||||
@@ -21622,7 +21622,7 @@ table {
|
||||
}
|
||||
|
||||
.xl\:hover\:border-indigo:hover {
|
||||
border-color: #6574cd;
|
||||
border-color: #636ef2;
|
||||
}
|
||||
|
||||
.xl\:hover\:border-indigo-light:hover {
|
||||
@@ -24010,7 +24010,7 @@ table {
|
||||
}
|
||||
|
||||
.xl\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.xl\:text-indigo-light {
|
||||
@@ -24302,7 +24302,7 @@ table {
|
||||
}
|
||||
|
||||
.group:hover .xl\:group-hover\:text-indigo {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.group:hover .xl\:group-hover\:text-indigo-light {
|
||||
@@ -24594,7 +24594,7 @@ table {
|
||||
}
|
||||
|
||||
.xl\:hover\:text-indigo:hover {
|
||||
color: #6574cd;
|
||||
color: #636ef2;
|
||||
}
|
||||
|
||||
.xl\:hover\:text-indigo-light:hover {
|
||||
|
||||
Reference in New Issue
Block a user