@@ -3,7 +3,7 @@ Project: kromacss
33Version: 1.0.2
44Description: A modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability.
55Author: Altxria Inc.
6- License: CC BY-ND 4.0
6+ License: MIT
77*/
88
99/* --- design-tokens.css --- */
@@ -372,24 +372,22 @@ svg {
372372.inline-block { display : inline-block; }
373373.inline { display : inline; }
374374
375-
376375/*REMOVE HIGHLIGHT BACKGROUND*/
377376.no-selection ::selection {
378- background : transparent;
379- color : inherit;
377+ background : transparent;
378+ color : inherit;
380379}
381380
382381.no-selection ::-moz-selection {
383- background : transparent;
384- color : inherit;
382+ background : transparent;
383+ color : inherit;
385384}
386385
387386.no-selection {
388- user-select : none;
387+ user-select : none;
389388}
390389
391390
392-
393391/* --- flexbox.css --- */
394392.flex { display : flex; gap : var (--space-4 ); }
395393.flex-wrap { flex-wrap : wrap; }
@@ -2751,6 +2749,136 @@ blockquote {
27512749}
27522750
27532751
2752+ /* --- footer.css --- */
2753+ /* Base Footer Styles */
2754+ .kroma-footer {
2755+ display : flex;
2756+ flex-wrap : wrap;
2757+ justify-content : space-between;
2758+ align-items : center;
2759+ padding : var (--space-6 ) var (--space-8 );
2760+ background-color : var (--variant-bg , var (--neutral-900 ));
2761+ color : var (--variant-text , var (--neutral-50 ));
2762+ font-family : var (--font-sans );
2763+ gap : var (--space-4 );
2764+ border-top : 1px solid var (--variant-border , var (--neutral-700 ));
2765+ transition : background-color var (--transition-colors ), box-shadow var (--transition-all );
2766+ z-index : var (--z-10 );
2767+ width : 100% ;
2768+ }
2769+
2770+ /* Footer Position: Sticky Bottom */
2771+ .kroma-footer [data-stick = "bottom" ] {
2772+ position : sticky;
2773+ bottom : 0 ;
2774+ }
2775+
2776+ /* Footer Position: Fixed Bottom */
2777+ .kroma-footer [data-stick = "fixed" ] {
2778+ position : fixed;
2779+ bottom : 0 ;
2780+ left : 0 ;
2781+ width : 100% ;
2782+ box-shadow : var (--shadow-lg );
2783+ }
2784+
2785+ /* Footer Layouts */
2786+ .kroma-footer [data-layout = "center" ] {
2787+ flex-direction : column;
2788+ text-align : center;
2789+ gap : var (--space-4 );
2790+ }
2791+
2792+ .kroma-footer [data-layout = "stacked" ] {
2793+ flex-direction : column;
2794+ align-items : flex-start;
2795+ gap : var (--space-6 );
2796+ }
2797+
2798+ /* Footer Links */
2799+ .kroma-footer-links {
2800+ display : flex;
2801+ flex-wrap : wrap;
2802+ justify-content : center;
2803+ gap : var (--space-4 );
2804+ }
2805+
2806+ .kroma-footer-link {
2807+ color : inherit;
2808+ text-decoration : none;
2809+ font-size : clamp (0.875rem , 1vw , 1rem );
2810+ font-weight : 500 ;
2811+ transition : color var (--transition-colors );
2812+ }
2813+
2814+ .kroma-footer-link : hover ,
2815+ .kroma-footer-link : focus {
2816+ color : var (--variant-hover-bg , var (--neutral-300 ));
2817+ text-decoration : underline;
2818+ }
2819+
2820+ /* Footer Brand Section */
2821+ .kroma-footer-brand {
2822+ display : flex;
2823+ align-items : center;
2824+ gap : var (--space-3 );
2825+ font-size : clamp (1.25rem , 2.5vw , 1.75rem );
2826+ font-weight : bold;
2827+ }
2828+
2829+ .kroma-footer-logo {
2830+ max-height : 50px ;
2831+ object-fit : contain;
2832+ }
2833+
2834+ /* Footer Copyright Section */
2835+ .kroma-footer-copyright {
2836+ font-size : clamp (0.75rem , 1vw , 0.875rem );
2837+ color : var (--neutral-400 );
2838+ margin-top : var (--space-4 );
2839+ text-align : center;
2840+ width : 100% ;
2841+ }
2842+
2843+ /* Footer Social Links */
2844+ .kroma-footer-social {
2845+ display : flex;
2846+ justify-content : center;
2847+ gap : var (--space-3 );
2848+ }
2849+
2850+ .kroma-footer-social a {
2851+ font-size : 1.5rem ;
2852+ color : inherit;
2853+ transition : color var (--transition-colors );
2854+ }
2855+
2856+ .kroma-footer-social a : hover ,
2857+ .kroma-footer-social a : focus {
2858+ color : var (--variant-hover-bg , var (--neutral-300 ));
2859+ }
2860+
2861+ /* Responsive Adjustments */
2862+ @media (max-width : 768px ) {
2863+ .kroma-footer {
2864+ flex-direction : column;
2865+ text-align : center;
2866+ gap : var (--space-6 );
2867+ padding : var (--space-4 );
2868+ }
2869+
2870+ .kroma-footer-links ,
2871+ .kroma-footer-social {
2872+ justify-content : center;
2873+ gap : var (--space-3 );
2874+ }
2875+
2876+ .kroma-footer-copyright {
2877+ margin-top : var (--space-6 );
2878+ }
2879+ }
2880+
2881+
27542882/* --- form.css --- */
27552883/* Base Form Group Styling */
27562884.kroma-form-group {
@@ -3777,6 +3905,34 @@ color: var(--variant-hover);
37773905
37783906
37793907
3908+
3909+ .kroma-navbar : not (.toggled-menu ) .nav-menu {
3910+ width : 100% ;
3911+ display : flex;
3912+ justify-content : flex-end;
3913+ align-items : center;
3914+ }
3915+
3916+ .kroma-navbar : not (.toggled-menu ) .nav-menu ul {
3917+ display : flex;
3918+ flex-direction : row;
3919+ list-style : none;
3920+ gap : calc (var (--nav-size-base ) / 6 );
3921+ }
3922+
3923+ .kroma-navbar : not (.toggled-menu ) .nav-menu ul li a {
3924+ text-decoration : none;
3925+ }
3926+
3927+ .kroma-navbar : not (.toggled-menu ) .nav-menu ul li a : hover {
3928+ text-decoration : underline;
3929+ }
3930+
3931+ .kroma-navbar .kroma-avatar {
3932+ max-height : calc (var (--nav-size-base ) / 1.5 );
3933+ max-width : calc (var (--nav-size-base ) / 1.5 );
3934+ }
3935+
37803936/* --- pagination.css --- */
37813937/* Pagination Container */
37823938.kroma-pagination {
@@ -4374,7 +4530,7 @@ html:has(.kroma-navbar) .kroma-sidebar{
43744530}
43754531
43764532.kroma-sidebar .collapsed .sdb-logo : not (: has (img )): after {
4377- display : none;
4533+ display : none;
43784534}
43794535
43804536.kroma-sidebar .sdb-logo span {
@@ -4483,59 +4639,59 @@ html:has(.kroma-navbar) .kroma-sidebar{
44834639
44844640.kroma-sidebar li {
44854641
4486- cursor : pointer;
4487-
4488- }
4642+ cursor : pointer;
4643+
4644+ }
44894645
44904646.kroma-sidebar : not (.collapsed ) li [data-idparent ] {
4491- padding-left : 10px ;
4492- max-height : 100px ;
4493- transition : 100ms ;
4647+ padding-left : 10px ;
4648+ max-height : 100px ;
4649+ transition : 100ms ;
44944650}
44954651
44964652.kroma-sidebar : not (.collapsed ) li .parent a span : before {
4497- content : "\f054" ;
4498- margin-right : 10px ;
4499- font-family : 'FontAwesome' ;
4500- display : inline-block;
4653+ content : "\f054" ;
4654+ margin-right : 10px ;
4655+ font-family : 'FontAwesome' ;
4656+ display : inline-block;
45014657}
45024658
45034659.kroma-sidebar li [data-idparent ].collapsed {
4504- max-height : 0 ;
4505- overflow : hidden;
4660+ max-height : 0 ;
4661+ overflow : hidden;
45064662}
45074663
45084664.kroma-sidebar li .parent : not (.collapsed ) a span : before {
4509- transform : rotate (90deg );
4510- transform-origin : center;
4665+ transform : rotate (90deg );
4666+ transform-origin : center;
45114667}
45124668
45134669
45144670/*variants*/
45154671
45164672.kroma-sidebar [data-variant ]: before {
4517- background : var (--variant-bg );
4518- border-color : var (--variant-border );
4673+ background : var (--variant-bg );
4674+ border-color : var (--variant-border );
45194675}
45204676
45214677.kroma-sidebar [data-variant ] .sdb-logo : after {
4522- background : var (--variant-border );
4678+ background : var (--variant-border );
45234679}
45244680
45254681.kroma-sidebar [data-variant ] .sdb-logo span ,
45264682.kroma-sidebar [data-variant ] .sdb-menu ul li i ,
45274683.kroma-sidebar [data-variant ] .sdb-menu ul li span ,
45284684.kroma-sidebar [data-variant ] .sdb-arrow {
4529- color : var (--variant-text );
4685+ color : var (--variant-text );
45304686}
45314687
45324688.kroma-sidebar [data-variant ] .sdb-menu ul li a : hover : before {
4533- background : var (--variant-hover-bg );
4689+ background : var (--variant-hover-bg );
45344690}
45354691
45364692.kroma-sidebar [data-variant ] .sdb-menu ul li a : hover > i ,
45374693.kroma-sidebar [data-variant ] .sdb-menu ul li a : hover > span {
4538- color : var (--variant-hover );
4694+ color : var (--variant-hover );
45394695}
45404696
45414697/* --- skeleton.css --- */
0 commit comments