Update (scss): Update color schemes
Update (navigation): Test country button
This commit is contained in:
9
public/build/assets/front-app-9bc7257c.css
Normal file
9
public/build/assets/front-app-9bc7257c.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -32,7 +32,7 @@
|
||||
"src": "resources/sass/admin-app.scss"
|
||||
},
|
||||
"resources/sass/front-app.scss": {
|
||||
"file": "assets/front-app-db700ae3.css",
|
||||
"file": "assets/front-app-9bc7257c.css",
|
||||
"isEntry": true,
|
||||
"src": "resources/sass/front-app.scss"
|
||||
}
|
||||
|
||||
@@ -1,7 +1,322 @@
|
||||
// Body
|
||||
$body-bg: #f8fafc;
|
||||
// Variables
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Nunito', sans-serif;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
// Color system
|
||||
|
||||
// scss-docs-start gray-color-variables
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
// scss-docs-end gray-color-variables
|
||||
|
||||
// fusv-disable
|
||||
// scss-docs-start gray-colors-map
|
||||
$grays: (
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
);
|
||||
// scss-docs-end gray-colors-map
|
||||
// fusv-enable
|
||||
|
||||
// scss-docs-start color-variables
|
||||
$blue: #0d6efd;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #d63384;
|
||||
$red: #dc3545;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #ffc107;
|
||||
$green: #198754;
|
||||
$teal: #20c997;
|
||||
$cyan: #0dcaf0;
|
||||
// scss-docs-end color-variables
|
||||
|
||||
// scss-docs-start colors-map
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"black": $black,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800
|
||||
);
|
||||
// scss-docs-end colors-map
|
||||
|
||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
||||
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
||||
$min-contrast-ratio: 4.5;
|
||||
|
||||
// Customize the light and dark text colors for use in our color contrast function.
|
||||
$color-contrast-dark: $black;
|
||||
$color-contrast-light: $white;
|
||||
|
||||
// fusv-disable
|
||||
$blue-100: tint-color($blue, 80%);
|
||||
$blue-200: tint-color($blue, 60%);
|
||||
$blue-300: tint-color($blue, 40%);
|
||||
$blue-400: tint-color($blue, 20%);
|
||||
$blue-500: $blue;
|
||||
$blue-600: shade-color($blue, 20%);
|
||||
$blue-700: shade-color($blue, 40%);
|
||||
$blue-800: shade-color($blue, 60%);
|
||||
$blue-900: shade-color($blue, 80%);
|
||||
|
||||
$indigo-100: tint-color($indigo, 80%);
|
||||
$indigo-200: tint-color($indigo, 60%);
|
||||
$indigo-300: tint-color($indigo, 40%);
|
||||
$indigo-400: tint-color($indigo, 20%);
|
||||
$indigo-500: $indigo;
|
||||
$indigo-600: shade-color($indigo, 20%);
|
||||
$indigo-700: shade-color($indigo, 40%);
|
||||
$indigo-800: shade-color($indigo, 60%);
|
||||
$indigo-900: shade-color($indigo, 80%);
|
||||
|
||||
$purple-100: tint-color($purple, 80%);
|
||||
$purple-200: tint-color($purple, 60%);
|
||||
$purple-300: tint-color($purple, 40%);
|
||||
$purple-400: tint-color($purple, 20%);
|
||||
$purple-500: $purple;
|
||||
$purple-600: shade-color($purple, 20%);
|
||||
$purple-700: shade-color($purple, 40%);
|
||||
$purple-800: shade-color($purple, 60%);
|
||||
$purple-900: shade-color($purple, 80%);
|
||||
|
||||
$pink-100: tint-color($pink, 80%);
|
||||
$pink-200: tint-color($pink, 60%);
|
||||
$pink-300: tint-color($pink, 40%);
|
||||
$pink-400: tint-color($pink, 20%);
|
||||
$pink-500: $pink;
|
||||
$pink-600: shade-color($pink, 20%);
|
||||
$pink-700: shade-color($pink, 40%);
|
||||
$pink-800: shade-color($pink, 60%);
|
||||
$pink-900: shade-color($pink, 80%);
|
||||
|
||||
$red-100: tint-color($red, 80%);
|
||||
$red-200: tint-color($red, 60%);
|
||||
$red-300: tint-color($red, 40%);
|
||||
$red-400: tint-color($red, 20%);
|
||||
$red-500: $red;
|
||||
$red-600: shade-color($red, 20%);
|
||||
$red-700: shade-color($red, 40%);
|
||||
$red-800: shade-color($red, 60%);
|
||||
$red-900: shade-color($red, 80%);
|
||||
|
||||
$orange-100: tint-color($orange, 80%);
|
||||
$orange-200: tint-color($orange, 60%);
|
||||
$orange-300: tint-color($orange, 40%);
|
||||
$orange-400: tint-color($orange, 20%);
|
||||
$orange-500: $orange;
|
||||
$orange-600: shade-color($orange, 20%);
|
||||
$orange-700: shade-color($orange, 40%);
|
||||
$orange-800: shade-color($orange, 60%);
|
||||
$orange-900: shade-color($orange, 80%);
|
||||
|
||||
$yellow-100: tint-color($yellow, 80%);
|
||||
$yellow-200: tint-color($yellow, 60%);
|
||||
$yellow-300: tint-color($yellow, 40%);
|
||||
$yellow-400: tint-color($yellow, 20%);
|
||||
$yellow-500: $yellow;
|
||||
$yellow-600: shade-color($yellow, 20%);
|
||||
$yellow-700: shade-color($yellow, 40%);
|
||||
$yellow-800: shade-color($yellow, 60%);
|
||||
$yellow-900: shade-color($yellow, 80%);
|
||||
|
||||
$green-100: tint-color($green, 80%);
|
||||
$green-200: tint-color($green, 60%);
|
||||
$green-300: tint-color($green, 40%);
|
||||
$green-400: tint-color($green, 20%);
|
||||
$green-500: $green;
|
||||
$green-600: shade-color($green, 20%);
|
||||
$green-700: shade-color($green, 40%);
|
||||
$green-800: shade-color($green, 60%);
|
||||
$green-900: shade-color($green, 80%);
|
||||
|
||||
$teal-100: tint-color($teal, 80%);
|
||||
$teal-200: tint-color($teal, 60%);
|
||||
$teal-300: tint-color($teal, 40%);
|
||||
$teal-400: tint-color($teal, 20%);
|
||||
$teal-500: $teal;
|
||||
$teal-600: shade-color($teal, 20%);
|
||||
$teal-700: shade-color($teal, 40%);
|
||||
$teal-800: shade-color($teal, 60%);
|
||||
$teal-900: shade-color($teal, 80%);
|
||||
|
||||
$cyan-100: tint-color($cyan, 80%);
|
||||
$cyan-200: tint-color($cyan, 60%);
|
||||
$cyan-300: tint-color($cyan, 40%);
|
||||
$cyan-400: tint-color($cyan, 20%);
|
||||
$cyan-500: $cyan;
|
||||
$cyan-600: shade-color($cyan, 20%);
|
||||
$cyan-700: shade-color($cyan, 40%);
|
||||
$cyan-800: shade-color($cyan, 60%);
|
||||
$cyan-900: shade-color($cyan, 80%);
|
||||
|
||||
$blues: (
|
||||
"blue-100": $blue-100,
|
||||
"blue-200": $blue-200,
|
||||
"blue-300": $blue-300,
|
||||
"blue-400": $blue-400,
|
||||
"blue-500": $blue-500,
|
||||
"blue-600": $blue-600,
|
||||
"blue-700": $blue-700,
|
||||
"blue-800": $blue-800,
|
||||
"blue-900": $blue-900
|
||||
);
|
||||
|
||||
$indigos: (
|
||||
"indigo-100": $indigo-100,
|
||||
"indigo-200": $indigo-200,
|
||||
"indigo-300": $indigo-300,
|
||||
"indigo-400": $indigo-400,
|
||||
"indigo-500": $indigo-500,
|
||||
"indigo-600": $indigo-600,
|
||||
"indigo-700": $indigo-700,
|
||||
"indigo-800": $indigo-800,
|
||||
"indigo-900": $indigo-900
|
||||
);
|
||||
|
||||
$purples: (
|
||||
"purple-100": $purple-100,
|
||||
"purple-200": $purple-200,
|
||||
"purple-300": $purple-300,
|
||||
"purple-400": $purple-400,
|
||||
"purple-500": $purple-500,
|
||||
"purple-600": $purple-600,
|
||||
"purple-700": $purple-700,
|
||||
"purple-800": $purple-800,
|
||||
"purple-900": $purple-900
|
||||
);
|
||||
|
||||
$pinks: (
|
||||
"pink-100": $pink-100,
|
||||
"pink-200": $pink-200,
|
||||
"pink-300": $pink-300,
|
||||
"pink-400": $pink-400,
|
||||
"pink-500": $pink-500,
|
||||
"pink-600": $pink-600,
|
||||
"pink-700": $pink-700,
|
||||
"pink-800": $pink-800,
|
||||
"pink-900": $pink-900
|
||||
);
|
||||
|
||||
$reds: (
|
||||
"red-100": $red-100,
|
||||
"red-200": $red-200,
|
||||
"red-300": $red-300,
|
||||
"red-400": $red-400,
|
||||
"red-500": $red-500,
|
||||
"red-600": $red-600,
|
||||
"red-700": $red-700,
|
||||
"red-800": $red-800,
|
||||
"red-900": $red-900
|
||||
);
|
||||
|
||||
$oranges: (
|
||||
"orange-100": $orange-100,
|
||||
"orange-200": $orange-200,
|
||||
"orange-300": $orange-300,
|
||||
"orange-400": $orange-400,
|
||||
"orange-500": $orange-500,
|
||||
"orange-600": $orange-600,
|
||||
"orange-700": $orange-700,
|
||||
"orange-800": $orange-800,
|
||||
"orange-900": $orange-900
|
||||
);
|
||||
|
||||
$yellows: (
|
||||
"yellow-100": $yellow-100,
|
||||
"yellow-200": $yellow-200,
|
||||
"yellow-300": $yellow-300,
|
||||
"yellow-400": $yellow-400,
|
||||
"yellow-500": $yellow-500,
|
||||
"yellow-600": $yellow-600,
|
||||
"yellow-700": $yellow-700,
|
||||
"yellow-800": $yellow-800,
|
||||
"yellow-900": $yellow-900
|
||||
);
|
||||
|
||||
$greens: (
|
||||
"green-100": $green-100,
|
||||
"green-200": $green-200,
|
||||
"green-300": $green-300,
|
||||
"green-400": $green-400,
|
||||
"green-500": $green-500,
|
||||
"green-600": $green-600,
|
||||
"green-700": $green-700,
|
||||
"green-800": $green-800,
|
||||
"green-900": $green-900
|
||||
);
|
||||
|
||||
$teals: (
|
||||
"teal-100": $teal-100,
|
||||
"teal-200": $teal-200,
|
||||
"teal-300": $teal-300,
|
||||
"teal-400": $teal-400,
|
||||
"teal-500": $teal-500,
|
||||
"teal-600": $teal-600,
|
||||
"teal-700": $teal-700,
|
||||
"teal-800": $teal-800,
|
||||
"teal-900": $teal-900
|
||||
);
|
||||
|
||||
$cyans: (
|
||||
"cyan-100": $cyan-100,
|
||||
"cyan-200": $cyan-200,
|
||||
"cyan-300": $cyan-300,
|
||||
"cyan-400": $cyan-400,
|
||||
"cyan-500": $cyan-500,
|
||||
"cyan-600": $cyan-600,
|
||||
"cyan-700": $cyan-700,
|
||||
"cyan-800": $cyan-800,
|
||||
"cyan-900": $cyan-900
|
||||
);
|
||||
// fusv-enable
|
||||
|
||||
// scss-docs-start theme-color-variables
|
||||
$primary: $red;
|
||||
$secondary: $gray-600;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $gray-100;
|
||||
$dark: $gray-900;
|
||||
// scss-docs-end theme-color-variables
|
||||
|
||||
// scss-docs-start theme-colors-map
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
);
|
||||
// scss-docs-end theme-colors-map
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "variables";
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
@import "~/bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
@@ -53,8 +53,10 @@
|
||||
<div class="card-body">
|
||||
<p class="card-title fw-bold">Here is why a kitten catches mice faster
|
||||
than an adult cat.</p>
|
||||
<p class="card-text"><small class="text-body-secondary">5 April 2023
|
||||
<span class="mx-4"></span> 3 mins</small></p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-body-secondary">5 April 2023</small>
|
||||
<small class="text-body-secondary">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,25 @@
|
||||
<h4 class="offcanvas-title fw-bold mb-0" id="offcanvasNavbarLabel">{{ config('app.name') }}</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="offcanvas-body p-0">
|
||||
|
||||
<div class="p-3">
|
||||
<div class="dropdown d-grid">
|
||||
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuSwitch"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ $country->name }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuSwitch">
|
||||
<li><a class="dropdown-item" href="#">Country 1</a></li>
|
||||
<li><a class="dropdown-item" href="#">Country 2</a></li>
|
||||
<li><a class="dropdown-item" href="#">Country 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-bottom"></div>
|
||||
|
||||
<div class="p-3">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
@@ -23,6 +41,8 @@
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
|
||||
@@ -39,17 +59,7 @@
|
||||
</ul>
|
||||
|
||||
<div class="col-md-3 text-end">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuSwitch"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ $country->name }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuSwitch">
|
||||
<li><a class="dropdown-item" href="#">Country 1</a></li>
|
||||
<li><a class="dropdown-item" href="#">Country 2</a></li>
|
||||
<li><a class="dropdown-item" href="#">Country 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user