lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

colors and filters

Browse Source
This commit is contained in:
Alex Lingris
2024-08-17 19:23:19 +03:00
parent db37653748
commit 322962403d
38 changed files with 648 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/sass/app.scss
+36 -152
View File
@@ -1,138 +1,35 @@
// Include any default variable overrides here (though functions won't be available)
/* SCSS HEX */
$green-crayola: #0dab76ff;
$green-pigment: #139a43ff;
$lincoln-green: #0b5d1eff;
$forest-green-traditional: #053b06ff;
$black: #000000ff;
$dark: #000000ff;
$white: #ffffff;
$light: #eee;
$danger: red;
/* SCSS Gradient */
$gradient-top: linear-gradient(
0deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-right: linear-gradient(
90deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-bottom: linear-gradient(
180deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-left: linear-gradient(
270deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-top-right: linear-gradient(
45deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-bottom-right: linear-gradient(
135deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-top-left: linear-gradient(
225deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-bottom-left: linear-gradient(
315deg,
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$gradient-radial: radial-gradient(
#0dab76ff,
#139a43ff,
#0b5d1eff,
#053b06ff,
#000000ff
);
$primary: #5b86be;
$secondary: #d9cca1;
$success: #80c671;
$background: #f4f6fa;
$table-striped-bg-factor: 0.03;
$dropdown-bg: rgb(206, 223, 210);
//https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu
$themes: (
light: (
text: #04060b,
background: #f4f6fa,
primary: #5b86be,
secondary: #d9cca1,
accent: #80c671,
),
dark: (
text: #f4f6fb,
background: #05070a,
primary: #416ca4,
secondary: #5e5126,
accent: #488e39,
),
);
:root {
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
--border-color: #cecece;
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
--main-font-color: #444;
--input-bg: rgb(245, 245, 249);
--text: #010b05;
--background: #f7fefa;
--background-stack: #f0f6f3;
--background-2: #E8EBEAFF;
--background-3: #C2C7C5FF;
--background-button: #ddd;
--primary: #1ce776;
--secondary: #7bc8f1;
--accent: #5086ed;
--success: #80c671;
--error: red;
--p10: #f4f9ff;
--p20: #eaf1f9;
--p30: #b3ceff;
--p40: #8db5ff;
--p50: #70a2ff;
--p60: #679cff;
--p70: #4284ff;
--p80: #1c6bff;
--p90: #002b7a;
--p100: #000C23;
--err10: #ffb9d0;
--err20: #ff9bb3;
--err30: #fe7e97;
--err40: #de617b;
--err50: #be4461;
--err80: #61001a;
--err90: #560012;
--grey-dark: #424656;
--grey-light: #a6abbd;
--text: var(--p100);
--text-light: var(--grey-dark);
--text-error: var(--err50);
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
}
@@ -163,8 +60,14 @@ $themes: (
@import "./reference-tags";
body {
background-color: var(--background);
background-color: var(--p10);
font-family: var(--main-font), sans-serif;
color: var(--text);
:focus {
outline: none;
box-shadow: 0 0 1px 2px var(--p70);
}
}
.btn-spinner .spinner-border {
@@ -185,25 +88,6 @@ a {
text-decoration: none;
}
.spinner-border {
width: 9px;
height: 9px;
border: 2px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lucent-component {
position: relative;