diff --git a/cms/static/css/menu.css b/cms/static/css/menu.css index a084c5c..af77619 100644 --- a/cms/static/css/menu.css +++ b/cms/static/css/menu.css @@ -1,3 +1,8 @@ +/** +* This file implements styling for menus i.e we have +* 1. Traditional menus and +* 2. Tabbed menus +*/ .menu { padding:8px; border:1px solid #CAD5E0 ; @@ -44,4 +49,33 @@ display:block; height:auto; +} + +/** +* This section shows how we use css to implement tabs i.e we will be using radio boxes and labels +* +*/ +.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; + /* background-color: #f3f3f3; */ + padding-top:4px; + padding-left:4px; + padding-right:4px; +} +.tabs input[type=radio] {display:none; } +.tabs input[type=radio] + label { font-weight:lighter; + border:1px solid transparent; + border-bottom-color: #CAD5E0; + background-color: #f3f3f3; + padding:8px; + padding-right:10px; padding-left:10px; + + cursor:pointer +} +.tabs input[type=radio]:checked +label { + background-color: #ffffff; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + font-weight:bold; + border-color: #CAD5E0; + border-bottom-color: #FFFFFF; } \ No newline at end of file diff --git a/cms/static/css/search.css b/cms/static/css/search.css index e473425..835bffb 100644 --- a/cms/static/css/search.css +++ b/cms/static/css/search.css @@ -2,6 +2,13 @@ /** * components: search */ + +/* .search-box { + display:grid; + grid-template-columns: auto 64px; gap:4px; + +} */ + .search .frame .suggestion-frame { width:98%; overflow: hidden;