Skip to content

Commit

Permalink
remove old select css
Browse files Browse the repository at this point in the history
  • Loading branch information
@henriettemoe
henriettemoe committed Apr 21, 2023
1 parent 2a521f1 commit adac281
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 162 deletions.
1 change: 1 addition & 0 deletions src/components/Combobox/Combobox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
}
};

// TODO: make id-s unique
return (
<div className={className}>
<label id={`${id}-label`} className="visually-hidden combo-label" htmlFor={id}>
Expand Down
257 changes: 95 additions & 162 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,190 +87,123 @@
}
}

select {
appearance: none; // Remove default arrow
background-color: #f5f7fc;
border: none;
color: #356bbd;
cursor: pointer;
font-size: 1em;
font-weight: 700;
line-height: 1.2;
padding: 0.75em 2.75em 0.75em 2.7em;

&:hover:not(:disabled),
&:focus:not(:disabled) {
background-color: #eaeff8;
.h5p-vocabulary-drill-combobox {
.combo *,
.combo *::before,
.combo *::after {
box-sizing: border-box;
}

&:disabled {
background-color: #f2f2f2;
color: grey;
cursor: not-allowed;
opacity: 1;
}
}

&-select {
align-items: center;
display: flex;
gap: 1em;
position: relative;

&::after {
color: #356bbd;
content: '\f107';
font-family: 'H5PFontAwesome4';
font-size: 1.2em;
pointer-events: none;
position: absolute;
right: 1em;
top: 50%;
transform: translate(0, -50%);
}
.combo {
display: block;
max-width: 400px;
position: relative;

&::before {
color: #356bbd;
content: '\F040';
font-family: 'H5PFontAwesome4';
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 1.25em;
}
&::after {
color: #356bbd;
content: '\f107';
font-family: 'H5PFontAwesome4';
font-size: 1.2em;
pointer-events: none;
position: absolute;
right: 1em;
top: 50%;
transform: translate(0, -50%);
}

&.disabled {
&::after,
&::before {
color: grey;
color: #356bbd;
content: '\F040';
font-family: 'H5PFontAwesome4';
position: absolute;
pointer-events: none;
top: 50%;
transform: translate(0, -50%);
left: 1.25em;
}
}

&.h5p-vocabulary-drill-fill-in::before {
content: '\F040';
}

&.h5p-vocabulary-drill-drag-text::before {
content: '\F047';
}
}

.combo *,
.combo *::before,
.combo *::after {
box-sizing: border-box;
}

.combo {
display: block;
max-width: 400px;
position: relative;

&::after {
color: #356bbd;
content: '\f107';
font-family: 'H5PFontAwesome4';
font-size: 1.2em;
pointer-events: none;
position: absolute;
right: 1em;
top: 50%;
transform: translate(0, -50%);
}

&::before {
color: #356bbd;
content: '\F040';
font-family: 'H5PFontAwesome4';
position: absolute;
pointer-events: none;
top: 50%;
transform: translate(0, -50%);
left: 1.25em;
}

&.h5p-vocabulary-drill-fill-in::before {
content: '\F040';
}

&.h5p-vocabulary-drill-drag-text::before {
content: '\F047';
}

&.disabled {
&::after,
&::before {
color: grey;
&.h5p-vocabulary-drill-fill-in::before {
content: '\F040';
}
}

&-input {
background-color: #f5f7fc;
border: none;
border-radius: 0;
color: #356bbd;
cursor: pointer;
font-size: 1em;
font-weight: 700;
line-height: 1.2;
padding: 0.75em 2.75em 0.75em 2.7em;
}
&.h5p-vocabulary-drill-drag-text::before {
content: '\F047';
}

&.disabled {
.combo-input {
background-color: #f2f2f2;
color: grey;
cursor: not-allowed;
opacity: 1;
&.disabled {
&::after,
&::before {
color: grey;
}
}
}

&-menu {
background-color: #f5f7fc;
border: 1px solid rgb(0 0 0 / 25%);
border-radius: 0;
display: none;
max-height: 300px;
overflow-y: scroll;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
}
&-input {
background-color: #f5f7fc;
border: none;
border-radius: 0;
color: #356bbd;
cursor: pointer;
font-size: 1em;
font-weight: 700;
line-height: 1.2;
padding: 0.75em 2.75em 0.75em 2.7em;
}

&-option {
padding: 0.5em 0.75em;
position: relative;
&.disabled {
.combo-input {
background-color: #f2f2f2;
color: grey;
cursor: not-allowed;
opacity: 1;
}
}

&.option-current {
background-color: #356bbd;
color: #fff;
&-menu {
background-color: #f5f7fc;
border: 1px solid rgb(0 0 0 / 25%);
border-radius: 0;
display: none;
max-height: 300px;
overflow-y: scroll;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
}

&[aria-selected="true"] {
&::after {
border-bottom: 1.5px solid #000;
border-right: 1.5px solid #000;
content: "";
height: 0.8em;
position: absolute;
right: 1em;
top: 46%;
transform: translate(0, -54%) rotate(45deg);
width: 0.4em;
&-option {
padding: 0.5em 0.75em;
position: relative;

&.option-current {
background-color: #356bbd;
color: #fff;
}

&.option-current::after {
border-color: #fff;
&[aria-selected="true"] {
&::after {
border-bottom: 1.5px solid #000;
border-right: 1.5px solid #000;
content: "";
height: 0.8em;
position: absolute;
right: 1em;
top: 46%;
transform: translate(0, -54%) rotate(45deg);
width: 0.4em;
}

&.option-current::after {
border-color: #fff;
}
}
}
}

&.open .combo-menu {
display: block;
&.open .combo-menu {
display: block;
}
}

}
}

Expand Down

0 comments on commit adac281

Please sign in to comment.