Skip to content

Fix: Update form control focus border and add green box-shadow #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nihal4777 merged 2 commits into from
May 31, 2026
Merged

Fix: Update form control focus border and add green box-shadow #258

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ae0341
Fix: Update form control focus border and add green box-shadow to mat…
ghanshyam2005singh Dec 24, 2025
619fa72
ref: remove important flag and format CSS file
Nihal4777 May 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 88 additions & 51 deletions assets/scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,60 @@
@mixin mobile-xs{
@media(max-width:400px){
@mixin mobile-xs {
@media(max-width:400px) {
@content;
}
}
@mixin mobile{
@media(max-width:575px){

@mixin mobile {
@media(max-width:575px) {
@content;
}
}
@mixin tablet{
@media(max-width:767px){

@mixin tablet {
@media(max-width:767px) {
@content;
}
}
@mixin desktop{
@media(max-width:991px){

@mixin desktop {
@media(max-width:991px) {
@content;
}
}
@mixin desktop-lg{
@media(max-width:1200px){

@mixin desktop-lg {
@media(max-width:1200px) {
@content;
}
}
@mixin desktop-xl{
@media(min-width:1201px){ // Overriden here

@mixin desktop-xl {
@media(min-width:1201px) {
// Overriden here
@content;
}
}

@mixin size($size){
width: $size; height: $size;
@mixin size($size) {
width: $size;
height: $size;
}

/*
Custom Overrides
*/
.navbar-brand {
@media(max-width:767px){
@media(max-width:767px) {
.img-fluid {
max-width: 200px;
margin-top: 10px;
}
}
}

// Circuitverse Logo
.navigation{
.img-fluid{
.navigation {
.img-fluid {
max-width: 70% !important;
}
}
Expand All @@ -57,66 +65,80 @@
padding: 10px 20px !important;
font-size: 1rem;
}

.navbar-light .navbar-nav .nav-link:hover {
color: #40ba84 !important;
border-radius: 5px;
}
.search-btn{

.search-btn {
font-weight: bold;
margin-left: 1rem;
}
.search-btn:hover{

.search-btn:hover {
color: #40ba84;
}
.navbar-brand{

.navbar-brand {
padding-bottom: 0;
}
.navbar-expand-lg .navbar-nav .nav-item:nth-child(1){

.navbar-expand-lg .navbar-nav .nav-item:nth-child(1) {
display: none;
}

// Blogs theme
.block a {
color: #40ba84;
}

.block a:hover {
color: #40ba84;
}
.block .btn-transparent{

.block .btn-transparent {
border-bottom: 1px solid #40ba84;
}

// Pagination theme
.mt-5 .pagination .page-item.active .page-link {
background: #40ba84 ;
background: #40ba84;
}

.mt-5 .pagination .page-item .page-link:hover {
background: #40ba84 ;
background: #40ba84;
}

// Button Theme
.container .btn-primary {
background: #40ba84 ;
border-color: #40ba84 ;
background: #40ba84;
border-color: #40ba84;
}
.container .btn-primary:active,.container .btn-primary:hover, .container .btn-primary.focus, .container .btn-primary.active {
background: #40ba84 ;
border-color: #40ba84 ;

.container .btn-primary:active,
.container .btn-primary:hover,
.container .btn-primary.focus,
.container .btn-primary.active {
background: #40ba84;
border-color: #40ba84;
}

// Footer navlinks Theme
.container .social-icon a{
color: #40ba84 ;
border-color: #40ba84 ;
.container .social-icon a {
color: #40ba84;
border-color: #40ba84;
}

.container .social-icon a:hover {
background: #40ba84 ;
color: #fff ;
background: #40ba84;
color: #fff;
}

.text-center {
span{
a{
color: #40ba84 ;
span {
a {
color: #40ba84;
}
}
}
Expand All @@ -137,30 +159,39 @@
}

body .toc a {
display: block;
text-decoration: none;
color: #000 !important; /* Dark black text color with !important */
font-weight: bold !important; /* Make the text bold with !important */
cursor: pointer;
margin-left: 10px; /* Adjust the margin to control the indentation */
margin-bottom: 5px; /* Reduce space between headings */
display: block;
text-decoration: none;
color: #000 !important;
/* Dark black text color with !important */
font-weight: bold !important;
/* Make the text bold with !important */
cursor: pointer;
margin-left: 10px;
/* Adjust the margin to control the indentation */
margin-bottom: 5px;
/* Reduce space between headings */
}

body .toc a:hover {
color: #4CAF50 !important; /* Light green text color on hover with !important */
}
color: #4CAF50 !important;
/* Light green text color on hover with !important */
}

/* --- 992–1200px squeeze zone fixes --- */
/* --- 992–1200px squeeze zone fixes --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
.banner .illustration {
max-width: 540px !important; /* ensure image size sticks */
right: 15px !important; /* prevent overlap */
max-width: 540px !important;
/* ensure image size sticks */
right: 15px !important;
/* prevent overlap */
}
}

/* In the squeeze band, cap the image and give the text a nudge */
@media (min-width: 992px) and (max-width: 1199.98px) {
.section.pt-0 .row.shadow.bg-white.p-5 > div:first-child img {
width: 180px !important; /* 320–360 works well */
.section.pt-0 .row.shadow.bg-white.p-5>div:first-child img {
width: 180px !important;
/* 320–360 works well */
}
}

Expand All @@ -175,4 +206,10 @@ body .toc a:hover {
.container .btn-primary.active {
background: #368f6e !important;
border-color: #368f6e !important;
}

input.form-control:focus,
textarea.form-control:focus {
border-color: #40ba84;
box-shadow: 0 0 0 0.2rem rgba(64, 186, 132, 0.25);
}
Loading