diff --git a/css/index.css b/css/index.css index da5ae20a9bf58b050afe899a54cf4e71769a925c..c48d7fd85f3cd51981581f90773c9e8ded6e820a 100644 --- a/css/index.css +++ b/css/index.css @@ -1,4 +1,4 @@ -.coopedia-kldb { +.coopedia-kldb-search-box { /**************** GLOBAL CLASSES ****************/ @@ -9,33 +9,33 @@ SEARCH BOXES ****************/ } -.coopedia-kldb solid-form-label-text, .coopedia-kldb solid-form-dropdown, .coopedia-kldb solid-form-dropdown-label, .coopedia-kldb cs-display-select, -.coopedia-kldb solid-form-dropdown-label-autocompletion, .coopedia-kldb solid-form-dropdown-autocompletion, .coopedia-kldb solid-form-label-number { +.coopedia-kldb-search-box solid-form-label-text, .coopedia-kldb-search-box solid-form-dropdown, .coopedia-kldb-search-box solid-form-dropdown-label, .coopedia-kldb-search-box cs-display-select, +.coopedia-kldb-search-box solid-form-dropdown-label-autocompletion, .coopedia-kldb-search-box solid-form-dropdown-autocompletion, .coopedia-kldb-search-box solid-form-label-number { display: block; width: 48.5%; } -.coopedia-kldb cs-display-select { +.coopedia-kldb-search-box cs-display-select { display: flex; flex-direction: column; } -.coopedia-kldb cs-display-select > span { +.coopedia-kldb-search-box cs-display-select > span { display: flex; align-items: inherit; justify-content: left; } -.coopedia-kldb cs-display-select > span > input { +.coopedia-kldb-search-box cs-display-select > span > input { width: 1.5rem; } -.coopedia-kldb cs-display-select > span > label { +.coopedia-kldb-search-box cs-display-select > span > label { margin-left: 1rem; } -.coopedia-kldb .w_75 { +.coopedia-kldb-search-box .w_75 { width: 75%; } -.coopedia-kldb .w_100 { +.coopedia-kldb-search-box .w_100 { width: 100%; } -.coopedia-kldb input, .coopedia-kldb textarea, .coopedia-kldb select { +.coopedia-kldb-search-box input, .coopedia-kldb-search-box textarea, .coopedia-kldb-search-box select { background: #ecf1fb; color: #7A8789; font-size: 1.4rem; @@ -50,7 +50,7 @@ border-radius: 0; box-sizing: border-box; } -.coopedia-kldb input[type=submit] { +.coopedia-kldb-search-box input[type=submit] { transition: all 0.3s ease-in-out; background-color: #58AB05; color: #FFFFFF; @@ -65,10 +65,10 @@ width: auto; cursor: pointer; } -.coopedia-kldb .flex-espace { +.coopedia-kldb-search-box .flex-espace { justify-content: space-between; } -.coopedia-kldb .title_lead { +.coopedia-kldb-search-box .title_lead { width: 50%; font-size: 1.2rem; line-height: 1.4; @@ -77,10 +77,10 @@ font-weight: 900; font-family: avenir; } -.coopedia-kldb h2.title_form { +.coopedia-kldb-search-box h2.title_form { margin-top: 3rem; } -.coopedia-kldb .title_form { +.coopedia-kldb-search-box .title_form { font-family: "Cabin", sans-serif; font-size: 2.2rem; text-align: left; @@ -90,21 +90,21 @@ padding: 0 0 1.5rem 0; margin: 2rem 0 2rem 0; } -.coopedia-kldb [name=resources_search] { +.coopedia-kldb-search-box [name=resources_search] { width: 100%; } -.coopedia-kldb .block_list { +.coopedia-kldb-search-box .block_list { width: 100%; max-width: 950px; margin: 2rem auto; display: block; margin-bottom: 19rem; } -.coopedia-kldb .block_list .block-g-entre { +.coopedia-kldb-search-box .block_list .block-g-entre { background: white; padding: 2rem; } -.coopedia-kldb label div, .coopedia-kldb label { +.coopedia-kldb-search-box label div, .coopedia-kldb-search-box label { display: block; text-align: left; font-size: 1.4rem; @@ -112,28 +112,28 @@ padding: 1rem 0; font-family: "Cabin", sans-serif; } -.coopedia-kldb .block_list .w_75 { +.coopedia-kldb-search-box .block_list .w_75 { width: 100%; } -.coopedia-kldb .more_criterias.flex.flex_espace { +.coopedia-kldb-search-box .more_criterias.flex.flex_espace { width: 100%; } -.coopedia-kldb solid-form-search > form { +.coopedia-kldb-search-box solid-form-search > form { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } -.coopedia-kldb solid-form-search > form > solid-form-dropdown-label[name=type], -.coopedia-kldb solid-form-search > form .form-input-hidden { +.coopedia-kldb-search-box solid-form-search > form > solid-form-dropdown-label[name=type], +.coopedia-kldb-search-box solid-form-search > form .form-input-hidden { display: none; } -.coopedia-kldb solid-form-search > form solid-set-default { +.coopedia-kldb-search-box solid-form-search > form solid-set-default { width: 100%; margin-bottom: 20px; } -.coopedia-kldb solid-form-search > form solid-set-default solid-form-placeholder-label-text[name=name] { +.coopedia-kldb-search-box solid-form-search > form solid-set-default solid-form-placeholder-label-text[name=name] { width: 100%; } diff --git a/scss/src/main.scss b/scss/src/main.scss index cdc45771cba99457aa493e9fb5d95e0516472b7b..1c9c3261cc6718d8589779be70d0107fa6f57e6d 100644 --- a/scss/src/main.scss +++ b/scss/src/main.scss @@ -1,5 +1,5 @@ -.coopedia-kldb{ +.coopedia-kldb-search-box{ /**************** GLOBAL CLASSES diff --git a/search-box.js b/search-box.js index 2219b3ea9f7c029dbd2d13607297d46c591dfc1a..7f71b7438eee48cb8a39fdafe6ca774a810c51bb 100644 --- a/search-box.js +++ b/search-box.js @@ -40,7 +40,7 @@ export class CoopediaSearchBox extends SolidTemplateElement { > </template> </solid-widget> - <div id="coopedia-search-box-component" class="container coopedia-kldb"> + <div id="coopedia-search-box-component" class="container coopedia-kldb-search-box"> <container class="block_list flex flex_espace"> <div class="w_75 block-g-entre"> <div>