Adds default and alternate style options to block.
This commit is contained in:
Mateus Machado Luna
parent
ec1934b3d9
commit
370dc60815
|
|
@ -19,6 +19,8 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-4 src/gutenberg-blocks/tainacan
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss:src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss:src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
|
||||||
|
|
||||||
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/gutenberg-blocks/tainacan-items/search-bar/search-bar.scss:src/assets/css/tainacan-gutenberg-block-search-bar.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
[data-align='full'] .block-control {
|
||||||
|
width: calc(100% + 14px); }
|
||||||
|
|
||||||
|
.block-control {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
top: -14px;
|
||||||
|
left: -14px;
|
||||||
|
width: calc(100% + 28px);
|
||||||
|
background: #f2f2f2; }
|
||||||
|
.block-control p {
|
||||||
|
font-size: 0.875rem !important;
|
||||||
|
margin: 12px 1.5rem 16px 0;
|
||||||
|
fill: #555758; }
|
||||||
|
.block-control p svg {
|
||||||
|
top: 4px;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
position: relative;
|
||||||
|
fill: #555758; }
|
||||||
|
|
||||||
|
.components-placeholder__fieldset p {
|
||||||
|
font-size: 0.875rem !important;
|
||||||
|
margin-top: -2px;
|
||||||
|
fill: #555758; }
|
||||||
|
.components-placeholder__fieldset p svg {
|
||||||
|
margin-right: 1rem;
|
||||||
|
top: 4px;
|
||||||
|
position: relative;
|
||||||
|
fill: #555758; }
|
||||||
|
|
||||||
|
.wp-block-tainacan-modal {
|
||||||
|
width: 50%; }
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.wp-block-tainacan-modal {
|
||||||
|
width: 75%; } }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-modal {
|
||||||
|
width: 100%; } }
|
||||||
|
.wp-block-tainacan-modal.dynamic-modal {
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
width: 80vw;
|
||||||
|
height: 80vh; }
|
||||||
|
.wp-block-tainacan-modal.dynamic-modal iframe {
|
||||||
|
width: calc(100% + 32px);
|
||||||
|
height: calc(100% - 128px);
|
||||||
|
margin-left: -16px; }
|
||||||
|
.wp-block-tainacan-modal.dynamic-modal .modal-footer-area {
|
||||||
|
height: 68px;
|
||||||
|
width: calc(100% + 32px);
|
||||||
|
margin-left: -16px !important;
|
||||||
|
padding: 1.2rem 1.2rem !important;
|
||||||
|
border-top: 1px solid #cbcbcb; }
|
||||||
|
.wp-block-tainacan-modal .spinner-container {
|
||||||
|
min-height: 56px;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #555758; }
|
||||||
|
.wp-block-tainacan-modal .spinner-container .components-spineer {
|
||||||
|
margin: 8px; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 24px; }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control {
|
||||||
|
width: 60%; }
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control {
|
||||||
|
width: 95%; } }
|
||||||
|
.wp-block-tainacan-modal .modal-search-area .components-base-control label {
|
||||||
|
text-align: center; }
|
||||||
|
.wp-block-tainacan-modal .modal-radio-area-label {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 1.75rem; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
|
||||||
|
padding: 0;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, 250px);
|
||||||
|
grid-gap: 0px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 12px;
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: auto; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-base-control,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control {
|
||||||
|
overflow: hidden; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item img,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option img,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item img,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 10px; }
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 85%; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
|
||||||
|
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
|
||||||
|
max-width: 80%; } }
|
||||||
|
.wp-block-tainacan-modal .modal-loadmore-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center; }
|
||||||
|
.wp-block-tainacan-modal .modal-loadmore-section p {
|
||||||
|
color: #555758;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-top: 2px; }
|
||||||
|
.wp-block-tainacan-modal .modal-footer-area {
|
||||||
|
border-top: 1px solid #e2e4e7;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 16px 0 16px;
|
||||||
|
margin: 0 -16px; }
|
||||||
|
.wp-block-tainacan-modal .modal-footer-area p {
|
||||||
|
padding: 0 12px;
|
||||||
|
color: #454647; }
|
||||||
|
|
||||||
|
.wp-block-tainacan-search-bar {
|
||||||
|
margin: 2rem 0px; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block {
|
||||||
|
width: 800px;
|
||||||
|
height: 32px;
|
||||||
|
max-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
transition: border-color ease 0.3s; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
padding: 4px 0.75rem; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:focus, .wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block input#taincan-search-bar-block_input:active {
|
||||||
|
border: 1px solid #545758;
|
||||||
|
border-right: none; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block button {
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: #f2f2f2;
|
||||||
|
padding: 4px 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: background ease 0.3s; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block button:hover {
|
||||||
|
background: #dbdbdb; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block button .icon {
|
||||||
|
height: 28px; }
|
||||||
|
.wp-block-tainacan-search-bar .tainacan-search-container form#taincan-search-bar-block button .icon svg {
|
||||||
|
fill: #298596; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
border: none; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block input#taincan-search-bar-block_input {
|
||||||
|
width: 35%;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-left: -52px;
|
||||||
|
padding-left: 52px;
|
||||||
|
border: 1px solid white;
|
||||||
|
transition: border-color 0.7s ease, width 0.5s ease-in; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block input#taincan-search-bar-block_input:focus, .wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block input#taincan-search-bar-block_input:active, .wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block input#taincan-search-bar-block_input:hover {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
box-shadow: none; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block button {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
padding: 0 0.35rem;
|
||||||
|
min-height: 28px;
|
||||||
|
z-index: 2;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block button .icon svg {
|
||||||
|
fill: #cbcbcb;
|
||||||
|
transition: fill 0.4s ease; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block button:hover .icon svg {
|
||||||
|
fill: #545758; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block {
|
||||||
|
flex-wrap: wrap; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block .search-button {
|
||||||
|
order: 4;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 37px; }
|
||||||
|
.wp-block-tainacan-search-bar.is-style-alternate form#taincan-search-bar-block input {
|
||||||
|
width: 100% !important;
|
||||||
|
order: 5;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
padding-left: 4px !important;
|
||||||
|
border-color: #dbdbdb !important; } }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=tainacan-gutenberg-block-search-bar.css.map */
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": ["../../gutenberg-blocks/gutenberg-blocks-style.scss","../../gutenberg-blocks/tainacan-items/search-bar/search-bar.scss"],
|
||||||
|
"names": [],
|
||||||
|
"file": "tainacan-gutenberg-block-search-bar.css"
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
const { registerBlockType } = wp.blocks;
|
const { registerBlockType, registerBlockStyle } = wp.blocks;
|
||||||
|
|
||||||
const { __ } = wp.i18n;
|
const { __ } = wp.i18n;
|
||||||
|
|
||||||
|
|
@ -118,6 +118,16 @@ registerBlockType('tainacan/search-bar', {
|
||||||
align: ['full', 'wide'],
|
align: ['full', 'wide'],
|
||||||
html: false,
|
html: false,
|
||||||
},
|
},
|
||||||
|
styles: [
|
||||||
|
{
|
||||||
|
name: 'default',
|
||||||
|
label: __('Default', 'tainacan'),
|
||||||
|
isDefault: true,
|
||||||
|
},{
|
||||||
|
name: 'alternate',
|
||||||
|
label: __('alternate', 'tainacan'),
|
||||||
|
}
|
||||||
|
],
|
||||||
edit({ attributes, setAttributes, className, isSelected, clientId }){
|
edit({ attributes, setAttributes, className, isSelected, clientId }){
|
||||||
let {
|
let {
|
||||||
items,
|
items,
|
||||||
|
|
@ -159,11 +169,24 @@ registerBlockType('tainacan/search-bar', {
|
||||||
id="taincan-search-bar-block_input"
|
id="taincan-search-bar-block_input"
|
||||||
label={ __('Search', 'taincan')}
|
label={ __('Search', 'taincan')}
|
||||||
name='search'
|
name='search'
|
||||||
|
placeholder={ __('Search', 'taincan')}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="button"
|
class="button"
|
||||||
type="submit">
|
type="submit">
|
||||||
{ __('Search', 'tainacan') }
|
<span class="icon">
|
||||||
|
<i>
|
||||||
|
<svg width="24" height="24" viewBox="-2 -4 20 20">
|
||||||
|
<path class="st0" d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
|
||||||
|
c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
|
||||||
|
c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
|
||||||
|
c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
|
||||||
|
C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
|
||||||
|
c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
|
||||||
|
c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,94 +6,108 @@
|
||||||
.tainacan-search-container {
|
.tainacan-search-container {
|
||||||
form#taincan-search-bar-block {
|
form#taincan-search-bar-block {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
|
height: 32px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: middle;
|
align-items: stretch;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
transition: border-color ease 0.3s;
|
||||||
|
|
||||||
input#taincan-search-bar-block_input {
|
input#taincan-search-bar-block_input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
padding: 4px 0.75rem;
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
border: 1px solid #545758;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: #f2f2f2;
|
||||||
|
padding: 4px 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: background ease 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #dbdbdb;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
height: 28px;
|
||||||
|
svg {
|
||||||
|
fill: #298596;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search control bar
|
&.is-style-alternate {
|
||||||
.search-bar-search-bar {
|
form#taincan-search-bar-block {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: row-reverse;
|
||||||
border-bottom: 1px solid #cbcbcb;
|
|
||||||
padding: 1.00rem 0.5rem 0.75rem 0.5rem;
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.search-button {
|
|
||||||
order: 4;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 37px;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 100% !important;
|
|
||||||
order: 5;
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-left: 0px !important;
|
|
||||||
padding-left: 4px !important;
|
|
||||||
border-color: #dbdbdb !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
padding: 0 0.35rem;
|
|
||||||
min-height: 28px;
|
|
||||||
z-index: 2;
|
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
svg {
|
input#taincan-search-bar-block_input {
|
||||||
fill: #cbcbcb;
|
width: 35%;
|
||||||
transition: fill 0.4s ease;
|
border-radius: 0;
|
||||||
}
|
margin-left: -52px;
|
||||||
&:hover svg { fill: #545758; }
|
padding-left: 52px;
|
||||||
&:focus, &:active { border: none; box-shadow: none; }
|
border: 1px solid white;
|
||||||
&.sorting-button-selected svg {
|
transition: border-color 0.7s ease, width 0.5s ease-in;
|
||||||
fill: #545758;
|
|
||||||
}
|
|
||||||
&.next-button {
|
|
||||||
margin-right: 0rem;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
svg { fill: #298596; }
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&:hover {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.previous-button {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: 1rem;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
svg { fill: #298596; }
|
button {
|
||||||
}
|
margin-right: 0.75rem;
|
||||||
&[disabled] svg {
|
padding: 0 0.35rem;
|
||||||
fill: #f2f2f2;
|
min-height: 28px;
|
||||||
cursor: not-allowed;
|
z-index: 2;
|
||||||
}
|
border: none;
|
||||||
}
|
background: transparent;
|
||||||
input {
|
cursor: pointer;
|
||||||
height: 32px;
|
.icon {
|
||||||
width: 20%;
|
svg {
|
||||||
border-radius: 0;
|
fill: #cbcbcb;
|
||||||
margin-left: -52px;
|
transition: fill 0.4s ease;
|
||||||
padding-left: 52px;
|
}
|
||||||
border: 1px solid white;
|
}
|
||||||
transition: border-color 0.7s ease, width 0.5s ease-in;
|
&:hover .icon svg { fill: #545758; }
|
||||||
|
|
||||||
&:focus,
|
}
|
||||||
&:active,
|
|
||||||
&:hover {
|
@media only screen and (max-width: 768px) {
|
||||||
width: 100%;
|
flex-wrap: wrap;
|
||||||
border: 1px solid #cbcbcb;
|
|
||||||
box-shadow: none;
|
.search-button {
|
||||||
|
order: 4;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 37px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 100% !important;
|
||||||
|
order: 5;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
padding-left: 4px !important;
|
||||||
|
border-color: #dbdbdb !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue