Skip to content

Commit

Permalink
ADDED: Utility: 'Gradients'
Browse files Browse the repository at this point in the history
  • Loading branch information
@SagnikGanguly96
SagnikGanguly96 committed Dec 30, 2022
1 parent f252c71 commit 6c9e4c8
Show file tree
Hide file tree
Showing 4 changed files with 394 additions and 0 deletions.
Binary file added demos/assets/img/img01.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/assets/img/img02.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
220 changes: 220 additions & 0 deletions demos/gradients.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
<!--
~ Copyright (c) 2022 SGNetworks. All rights reserved.
~
~ The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
~ VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradients - SGNUIKit Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="/src/js/SGNUIKit.loader.js"></script>
<script src="/src/addons/PrismJS/prism.js"></script>
<!--<script src="/dist/js/SGNUIKit.loader.js"></script>-->
<style>
.color-block {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<main>
<div class="sgn-container auto-grid col-5 text-center">
<div class="mb-4">
<div class="primary-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>primary-gradient</h5>
</div>

<div class="mb-4">
<div class="secondary-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>secondary-gradient</h5>
</div>

<div class="mb-4">
<div class="success-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>success-gradient</h5>
</div>

<div class="mb-4">
<div class="info-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>info-gradient</h5>
</div>

<div class="mb-4">
<div class="warning-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>warning-gradient</h5>
</div>

<div class="mb-4">
<div class="danger-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>danger-gradient</h5>
</div>

<div class="mb-4">
<div class="primary-double-width-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>primary-double-width-gradient</h5>
</div>

<div class="mb-4">
<div class="secondary-double-width-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>secondary-double-width-gradient</h5>
</div>

<div class="mb-4">
<div class="success-double-width-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>success-double-width-gradient</h5>
</div>

<div class="mb-4">
<div class="info-double-width-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>info-double-width-gradient</h5>
</div>

<div class="mb-4">
<div class="warning-double-width-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>warning-double-width-gradient</h5>
</div>

<div class="mb-4">
<div class="danger-double-width-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>danger-double-width-gradient</h5>
</div>

<div class="mb-4">
<div class="frozen-dreams-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>frozen-dreams-gradient</h5>
</div>

<div class="mb-4">
<div class="lady-lips-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>lady-lips-gradient</h5>
</div>

<div class="mb-4">
<div class="spring-warmth-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>spring-warmth-gradient</h5>
</div>

<div class="mb-4">
<div class="amy-crisp-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>amy-crisp-gradient</h5>
</div>

<div class="mb-4">
<div class="mean-fruit-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>mean-fruit-gradient</h5>
</div>

<div class="mb-4">
<div class="juicy-peach-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>juicy-peach-gradient</h5>
</div>

<div class="mb-4">
<div class="warm-flame-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>warm-flame-gradient</h5>
</div>

<div class="mb-4">
<div class="young-passion-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>young-passion-gradient</h5>
</div>

<div class="mb-4">
<div class="peach-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>peach-gradient</h5>
</div>

<div class="mb-4">
<div class="sunny-morning-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>sunny-morning-gradient</h5>
</div>

<div class="mb-4">
<div class="deep-blue-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>deep-blue-gradient</h5>
</div>

<div class="mb-4">
<div class="aqua-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>aqua-gradient</h5>
</div>

<div class="mb-4">
<div class="blue-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>blue-gradient</h5>
</div>

<div class="mb-4">
<div class="dusty-grass-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>dusty-grass-gradient</h5>
</div>

<div class="mb-4">
<div class="morpheus-den-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>morpheus-den-gradient</h5>
</div>

<div class="mb-4">
<div class="near-moon-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>near-moon-gradient</h5>
</div>

<div class="mb-4">
<div class="tempting-azure-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>tempting-azure-gradient</h5>
</div>

<div class="mb-4">
<div class="winter-neva-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>winter-neva-gradient</h5>
</div>

<div class="mb-4">
<div class="rare-wind-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>rare-wind-gradient</h5>
</div>

<div class="mb-4">
<div class="rainy-ashville-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>rainy-ashville-gradient</h5>
</div>

<div class="mb-4">
<div class="night-fade-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>night-fade-gradient</h5>
</div>

<div class="mb-4">
<div class="purple-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>purple-gradient</h5>
</div>

<div class="mb-4">
<div class="ripe-malinka-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>ripe-malinka-gradient</h5>
</div>

<div class="mb-4">
<div class="cloudy-knoxville-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>cloudy-knoxville-gradient</h5>
</div>

<div class="mb-4">
<div class="heavy-rain-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>heavy-rain-gradient</h5>
</div>

<div class="mb-4">
<div class="custom-gradient color-block shape-circle z-depth-1-half mx-auto"></div>
<h5>custom-gradient</h5>
</div>

</div>
</main>
</body>
</html>
174 changes: 174 additions & 0 deletions src/css/utilities/gradients.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
/*
* Copyright (c) 2022 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
*/

.primary-gradient {
background-image: var(--sgn-gradient-primary) !important;
}

.secondary-gradient {
background-image: var(--sgn-gradient-secondary) !important;
}

.success-gradient {
background-image: var(--sgn-gradient-success) !important;
}

.info-gradient {
background-image: var(--sgn-gradient-info) !important;
}

.warning-gradient {
background-image: var(--sgn-gradient-warning) !important;
}

.danger-gradient {
background-image: var(--sgn-gradient-danger) !important;
}

.primary-double-width-gradient {
background-image: var(--sgn-gradient-primary-double-width) !important;
}

.secondary-double-width-gradient {
background-image: var(--sgn-gradient-secondary-double-width) !important;
}

.success-double-width-gradient {
background-image: var(--sgn-gradient-success-double-width) !important;
}

.info-double-width-gradient {
background-image: var(--sgn-gradient-info-double-width) !important;
}

.warning-double-width-gradient {
background-image: var(--sgn-gradient-warning-double-width) !important;
}

.danger-double-width-gradient {
background-image: var(--sgn-gradient-danger-double-width) !important;
}


.frozen-dreams-gradient {
background-image: linear-gradient(to top, #fdcbf1 0, #fdcbf1 1%, #e6dee9 100%) !important;
}

.lady-lips-gradient {
background-image: linear-gradient(to top, #ff9a9e 0, #fecfef 99%, #fecfef 100%) !important;
}

.spring-warmth-gradient {
background-image: linear-gradient(to top, #fad0c4 0, #ffd1ff 100%) !important;
}

.amy-crisp-gradient {
background-image: linear-gradient(120deg, #a6c0fe 0, #f68084 100%) !important;
}

.mean-fruit-gradient {
background-image: linear-gradient(120deg, #fccb90 0, #d57eeb 100%) !important;
}

.juicy-peach-gradient {
background-image: linear-gradient(to right, #ffecd2 0, #fcb69f 100%) !important;
}

.warm-flame-gradient {
background-image: linear-gradient(45deg, #ff9a9e 0, #fad0c4 99%, #fad0c4 100%) !important;
}

.young-passion-gradient {
background-image: linear-gradient(to right, #ff8177 0, #ff867a 0, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%) !important;
}

.peach-gradient {
background: linear-gradient(40deg, #ffd86f, #fc6262) !important;
}

.sunny-morning-gradient {
background-image: linear-gradient(120deg, #f6d365 0, #fda085 100%) !important;
}

.deep-blue-gradient {
background-image: linear-gradient(120deg, #e0c3fc 0, #8ec5fc 100%) !important;
}

.aqua-gradient {
background: linear-gradient(40deg, #2096ff, #05ffa3) !important;
}

.blue-gradient {
background: linear-gradient(40deg, #45cafc, #303f9f) !important;
}

.dusty-grass-gradient {
background-image: linear-gradient(120deg, #d4fc79 0, #96e6a1 100%) !important;
}

.morpheus-den-gradient {
background-image: linear-gradient(to top, #30cfd0 0, #330867 100%) !important;
}

.near-moon-gradient {
background-image: linear-gradient(to top, #5ee7df 0, #b490ca 100%) !important;
}

.tempting-azure-gradient {
background-image: linear-gradient(120deg, #84fab0 0, #8fd3f4 100%) !important;
}

.winter-neva-gradient {
background-image: linear-gradient(120deg, #a1c4fd 0, #c2e9fb 100%) !important;
}

.rare-wind-gradient {
background-image: linear-gradient(to top, #a8edea 0, #fed6e3 100%) !important;
}

.rainy-ashville-gradient {
background-image: linear-gradient(to top, #fbc2eb 0, #a6c1ee 100%) !important;
}

.night-fade-gradient {
background-image: linear-gradient(to top, #a18cd1 0, #fbc2eb 100%) !important;
}

.purple-gradient {
background: linear-gradient(40deg, #ff6ec4, #7873f5) !important;
}

.ripe-malinka-gradient {
background-image: linear-gradient(120deg, #f093fb 0, #f5576c 100%) !important;
}

.cloudy-knoxville-gradient {
background-image: linear-gradient(120deg, #fdfbfb 0, #ebedee 100%) !important;
}

.heavy-rain-gradient {
background-image: linear-gradient(to top, #cfd9df 0, #e2ebf0 100%) !important;
}

.custom-gradient {
background-image: var(--sgn-gradient-custom) !important; !important;
--sgn-gradient-custom: radial-gradient(circle at center,
hsl(0, 100%, 50%) 0%,
hsl(30, 100%, 50%) 10%,
hsl(60, 100%, 50%) 20%,
hsl(120, 100%, 50%) 30%,
hsl(180, 100%, 50%) 40%,
hsl(210, 100%, 50%) 50%,
hsl(240, 100%, 50%) 60%,
hsl(270, 100%, 50%) 70%,
hsl(300, 100%, 50%) 80%,
hsl(330, 100%, 50%) 90%,
hsl(360, 100%, 50%) 100%
);
}


0 comments on commit 6c9e4c8

Please sign in to comment.