devops_admin
/
odex25_standard
mirror of https://github.com/hydracp9/odex25_standard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhanced SCSS with comprehensive placeholder styling and visual improvements

This commit is contained in:
Mohamed Eltayar 2025-08-28 16:54:51 +03:00
parent 966609559c
commit 87c9948d18
1 changed files with 149 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
odex25_base/web_hijri_datepicker/static/src/scss/web_hijri_date.scss
View File

@ -2,6 +2,7 @@
* Web Hijri Datepicker SCSS - Odoo 14 Integration
* Enhanced to work seamlessly with Odoo's standard datepicker system
* Maintains all Hijri functionality while matching Odoo's exact appearance
* Fixed placeholder display for both Gregorian and Hijri fields
*/
// Import Odoo variables and mixins for consistency
@ -143,6 +144,58 @@
}
}
/* ==================== PLACEHOLDER STYLING ==================== */
// Enhanced placeholder styling for both Gregorian and Hijri fields
.o_datepicker_input {
&::placeholder {
color: $text-muted;
font-style: italic;
opacity: 0.7;
}
// When field has placeholder class
&.o_input_placeholder {
color: $text-muted !important;
font-style: italic;
&::placeholder {
opacity: 1;
}
}
// When field has value
&:not(.o_input_placeholder) {
color: $body-color;
font-style: normal;
}
}
.o_hijri {
&::placeholder {
color: rgba($success, 0.6);
font-style: italic;
opacity: 0.8;
}
// When field has placeholder class
&.o_input_placeholder {
color: rgba($success, 0.6) !important;
font-style: italic;
&::placeholder {
opacity: 1;
}
}
// When field has value
&:not(.o_input_placeholder) {
color: $success;
font-style: normal;
font-weight: 500;
}
}
/* ==================== ODOO FORM INTEGRATION ==================== */
// List view integration
@ -170,7 +223,7 @@
border-color: $border-color;
&::placeholder {
color: $text-muted;
color: rgba($success, 0.6);
font-style: italic;
}
}
@ -214,8 +267,18 @@
}
&.o_input_placeholder {
color: $text-muted;
color: rgba($success, 0.6);
font-style: italic;
&::placeholder {
color: rgba($success, 0.6);
opacity: 1;
}
}
&:not(.o_input_placeholder) {
font-weight: 500;
color: $success;
}
}
@ -234,6 +297,36 @@
}
}
/* ==================== INPUT GROUP STYLING ==================== */
// Enhanced input group styling for better integration
.o_hijri_datepicker {
.input-group-text {
background-color: rgba($success, 0.1);
border-color: rgba($success, 0.2);
color: $success;
&:hover {
background-color: rgba($success, 0.15);
color: darken($success, 10%);
}
}
}
// Main datepicker input group
.o_datepicker.input-group {
.input-group-text {
background-color: $white;
border-color: $border-color;
color: $text-muted;
&:hover {
background-color: $gray-100;
color: $body-color;
}
}
}
/* ==================== READONLY VIEW STYLING ==================== */
.o_gregorian_date {
@ -282,6 +375,14 @@
.o_hijri_date {
font-size: 0.75rem !important;
}
// Adjust placeholders for smaller screens
.o_datepicker_input,
.o_hijri {
&::placeholder {
font-size: 0.75rem;
}
}
}
/* ==================== SPECIAL HIJRI FEATURES ==================== */
@ -381,6 +482,35 @@
}
}
/* ==================== PLACEHOLDER ENHANCEMENT ==================== */
// Ensure proper placeholder behavior across different states
.o_input {
&.o_input_placeholder {
&:not(:focus) {
&::placeholder {
opacity: 1;
}
}
}
}
// Special handling for empty state
.o_datepicker_input:placeholder-shown,
.o_hijri:placeholder-shown {
font-style: italic;
opacity: 0.8;
}
// Focus state enhancements
.o_datepicker_input:focus,
.o_hijri:focus {
&::placeholder {
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
}
/* ==================== ANIMATION REFINEMENTS ==================== */
// Subtle entrance animation matching Odoo's style
@ -397,4 +527,21 @@
.calendars-popup {
animation: odooFadeInUp 0.15s ease-out;
}
/* ==================== DEBUG AND DEVELOPMENT HELPERS ==================== */
// Only visible in development mode
.o_debug {
.o_hijri_debug_info {
position: absolute;
top: 0;
right: 0;
background: rgba($warning, 0.9);
color: $white;
font-size: 0.6rem;
padding: 0.1rem 0.2rem;
border-radius: 0 0 0 0.2rem;
z-index: 1000;
}
}