mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-29 03:52:20 +02:00
Output expanded css
This commit is contained in:
Josh Johnson
parent
89fff1a164
commit
9e9d820f56
|
|
@ -4,76 +4,105 @@
|
||||||
.choices {
|
.choices {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 16px; }
|
font-size: 16px;
|
||||||
.choices:focus {
|
}
|
||||||
outline: none; }
|
|
||||||
.choices:last-child {
|
.choices:focus {
|
||||||
margin-bottom: 0; }
|
outline: none;
|
||||||
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
|
}
|
||||||
background-color: #EAEAEA;
|
|
||||||
cursor: not-allowed;
|
.choices:last-child {
|
||||||
-webkit-user-select: none;
|
margin-bottom: 0;
|
||||||
-moz-user-select: none;
|
}
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none; }
|
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
|
||||||
.choices.is-disabled .choices__item {
|
background-color: #EAEAEA;
|
||||||
cursor: not-allowed; }
|
cursor: not-allowed;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices.is-disabled .choices__item {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
.choices[data-type*="select-one"] {
|
.choices[data-type*="select-one"] {
|
||||||
cursor: pointer; }
|
cursor: pointer;
|
||||||
.choices[data-type*="select-one"] .choices__inner {
|
}
|
||||||
padding-bottom: 7.5px; }
|
|
||||||
.choices[data-type*="select-one"] .choices__input {
|
.choices[data-type*="select-one"] .choices__inner {
|
||||||
display: block;
|
padding-bottom: 7.5px;
|
||||||
width: 100%;
|
}
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px solid #DDDDDD;
|
.choices[data-type*="select-one"] .choices__input {
|
||||||
background-color: #FFFFFF;
|
display: block;
|
||||||
margin: 0; }
|
width: 100%;
|
||||||
.choices[data-type*="select-one"] .choices__button {
|
padding: 10px;
|
||||||
background-image: url("../../icons//cross-inverse.svg");
|
border-bottom: 1px solid #DDDDDD;
|
||||||
padding: 0;
|
background-color: #FFFFFF;
|
||||||
background-size: 8px;
|
margin: 0;
|
||||||
height: 100%;
|
}
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
.choices[data-type*="select-one"] .choices__button {
|
||||||
right: 0;
|
background-image: url("../../icons//cross-inverse.svg");
|
||||||
margin-top: -10px;
|
padding: 0;
|
||||||
margin-right: 25px;
|
background-size: 8px;
|
||||||
height: 20px;
|
height: 100%;
|
||||||
width: 20px;
|
position: absolute;
|
||||||
border-radius: 10em;
|
top: 50%;
|
||||||
opacity: .5; }
|
right: 0;
|
||||||
.choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
|
margin-top: -10px;
|
||||||
opacity: 1; }
|
margin-right: 25px;
|
||||||
.choices[data-type*="select-one"] .choices__button:focus {
|
height: 20px;
|
||||||
box-shadow: 0px 0px 0px 2px #00BCD4; }
|
width: 20px;
|
||||||
.choices[data-type*="select-one"]:after {
|
border-radius: 10em;
|
||||||
content: "";
|
opacity: .5;
|
||||||
height: 0;
|
}
|
||||||
width: 0;
|
|
||||||
border-style: solid;
|
.choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
|
||||||
border-color: #333333 transparent transparent transparent;
|
opacity: 1;
|
||||||
border-width: 5px;
|
}
|
||||||
position: absolute;
|
|
||||||
right: 11.5px;
|
.choices[data-type*="select-one"] .choices__button:focus {
|
||||||
top: 50%;
|
box-shadow: 0px 0px 0px 2px #00BCD4;
|
||||||
margin-top: -2.5px;
|
}
|
||||||
pointer-events: none; }
|
|
||||||
.choices[data-type*="select-one"].is-open:after {
|
.choices[data-type*="select-one"]:after {
|
||||||
border-color: transparent transparent #333333 transparent;
|
content: "";
|
||||||
margin-top: -7.5px; }
|
height: 0;
|
||||||
.choices[data-type*="select-one"][dir="rtl"]:after {
|
width: 0;
|
||||||
left: 11.5px;
|
border-style: solid;
|
||||||
right: auto; }
|
border-color: #333333 transparent transparent transparent;
|
||||||
.choices[data-type*="select-one"][dir="rtl"] .choices__button {
|
border-width: 5px;
|
||||||
right: auto;
|
position: absolute;
|
||||||
left: 0;
|
right: 11.5px;
|
||||||
margin-left: 25px;
|
top: 50%;
|
||||||
margin-right: 0; }
|
margin-top: -2.5px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices[data-type*="select-one"].is-open:after {
|
||||||
|
border-color: transparent transparent #333333 transparent;
|
||||||
|
margin-top: -7.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices[data-type*="select-one"][dir="rtl"]:after {
|
||||||
|
left: 11.5px;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices[data-type*="select-one"][dir="rtl"] .choices__button {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 25px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
|
.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
|
||||||
cursor: text; }
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
|
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -88,9 +117,12 @@
|
||||||
background-size: 8px;
|
background-size: 8px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
opacity: .75; }
|
opacity: .75;
|
||||||
.choices[data-type*="select-multiple"] .choices__button:hover, .choices[data-type*="select-multiple"] .choices__button:focus, .choices[data-type*="text"] .choices__button:hover, .choices[data-type*="text"] .choices__button:focus {
|
}
|
||||||
opacity: 1; }
|
|
||||||
|
.choices[data-type*="select-multiple"] .choices__button:hover, .choices[data-type*="select-multiple"] .choices__button:focus, .choices[data-type*="text"] .choices__button:hover, .choices[data-type*="text"] .choices__button:focus {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__inner {
|
.choices__inner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -102,55 +134,79 @@
|
||||||
border-radius: 2.5px;
|
border-radius: 2.5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
overflow: hidden; }
|
overflow: hidden;
|
||||||
.is-focused .choices__inner, .is-open .choices__inner {
|
}
|
||||||
border-color: #b7b7b7; }
|
|
||||||
.is-open .choices__inner {
|
.is-focused .choices__inner, .is-open .choices__inner {
|
||||||
border-radius: 2.5px 2.5px 0 0; }
|
border-color: #b7b7b7;
|
||||||
.is-flipped.is-open .choices__inner {
|
}
|
||||||
border-radius: 0 0 2.5px 2.5px; }
|
|
||||||
|
.is-open .choices__inner {
|
||||||
|
border-radius: 2.5px 2.5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-flipped.is-open .choices__inner {
|
||||||
|
border-radius: 0 0 2.5px 2.5px;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__list {
|
.choices__list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style-type: none; }
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__list--single {
|
.choices__list--single {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 16px 4px 4px;
|
padding: 4px 16px 4px 4px;
|
||||||
width: 100%; }
|
width: 100%;
|
||||||
[dir="rtl"] .choices__list--single {
|
}
|
||||||
padding-right: 4px;
|
|
||||||
padding-left: 16px; }
|
[dir="rtl"] .choices__list--single {
|
||||||
.choices__list--single .choices__item {
|
padding-right: 4px;
|
||||||
width: 100%; }
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--single .choices__item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__list--multiple {
|
.choices__list--multiple {
|
||||||
display: inline; }
|
display: inline;
|
||||||
.choices__list--multiple .choices__item {
|
}
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
.choices__list--multiple .choices__item {
|
||||||
border-radius: 20px;
|
display: inline-block;
|
||||||
padding: 4px 10px;
|
vertical-align: middle;
|
||||||
font-size: 12px;
|
border-radius: 20px;
|
||||||
font-weight: 500;
|
padding: 4px 10px;
|
||||||
margin-right: 3.75px;
|
font-size: 12px;
|
||||||
margin-bottom: 3.75px;
|
font-weight: 500;
|
||||||
background-color: #00BCD4;
|
margin-right: 3.75px;
|
||||||
border: 1px solid #00a5bb;
|
margin-bottom: 3.75px;
|
||||||
color: #FFFFFF;
|
background-color: #00BCD4;
|
||||||
word-break: break-all; }
|
border: 1px solid #00a5bb;
|
||||||
.choices__list--multiple .choices__item[data-deletable] {
|
color: #FFFFFF;
|
||||||
padding-right: 5px; }
|
word-break: break-all;
|
||||||
[dir="rtl"] .choices__list--multiple .choices__item {
|
}
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 3.75px; }
|
.choices__list--multiple .choices__item[data-deletable] {
|
||||||
.choices__list--multiple .choices__item.is-highlighted {
|
padding-right: 5px;
|
||||||
background-color: #00a5bb;
|
}
|
||||||
border: 1px solid #008fa1; }
|
|
||||||
.is-disabled .choices__list--multiple .choices__item {
|
[dir="rtl"] .choices__list--multiple .choices__item {
|
||||||
background-color: #aaaaaa;
|
margin-right: 0;
|
||||||
border: 1px solid #919191; }
|
margin-left: 3.75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--multiple .choices__item.is-highlighted {
|
||||||
|
background-color: #00a5bb;
|
||||||
|
border: 1px solid #008fa1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-disabled .choices__list--multiple .choices__item {
|
||||||
|
background-color: #aaaaaa;
|
||||||
|
border: 1px solid #919191;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__list--dropdown {
|
.choices__list--dropdown {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -163,58 +219,83 @@
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
border-bottom-left-radius: 2.5px;
|
border-bottom-left-radius: 2.5px;
|
||||||
border-bottom-right-radius: 2.5px;
|
border-bottom-right-radius: 2.5px;
|
||||||
overflow: hidden; }
|
overflow: hidden;
|
||||||
.choices__list--dropdown.is-active {
|
}
|
||||||
display: block; }
|
|
||||||
.is-open .choices__list--dropdown {
|
.choices__list--dropdown.is-active {
|
||||||
border-color: #b7b7b7; }
|
display: block;
|
||||||
.is-flipped .choices__list--dropdown {
|
}
|
||||||
top: auto;
|
|
||||||
bottom: 100%;
|
.is-open .choices__list--dropdown {
|
||||||
margin-top: 0;
|
border-color: #b7b7b7;
|
||||||
margin-bottom: -1px;
|
}
|
||||||
border-radius: .25rem .25rem 0 0; }
|
|
||||||
.choices__list--dropdown .choices__list {
|
.is-flipped .choices__list--dropdown {
|
||||||
position: relative;
|
top: auto;
|
||||||
max-height: 300px;
|
bottom: 100%;
|
||||||
overflow: auto;
|
margin-top: 0;
|
||||||
-webkit-overflow-scrolling: touch;
|
margin-bottom: -1px;
|
||||||
will-change: scroll-position; }
|
border-radius: .25rem .25rem 0 0;
|
||||||
.choices__list--dropdown .choices__item {
|
}
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
.choices__list--dropdown .choices__list {
|
||||||
font-size: 14px; }
|
position: relative;
|
||||||
[dir="rtl"] .choices__list--dropdown .choices__item {
|
max-height: 300px;
|
||||||
text-align: right; }
|
overflow: auto;
|
||||||
@media (min-width: 640px) {
|
-webkit-overflow-scrolling: touch;
|
||||||
.choices__list--dropdown .choices__item--selectable {
|
will-change: scroll-position;
|
||||||
padding-right: 100px; }
|
}
|
||||||
.choices__list--dropdown .choices__item--selectable:after {
|
|
||||||
content: attr(data-select-text);
|
.choices__list--dropdown .choices__item {
|
||||||
font-size: 12px;
|
position: relative;
|
||||||
opacity: 0;
|
padding: 10px;
|
||||||
position: absolute;
|
font-size: 14px;
|
||||||
right: 10px;
|
}
|
||||||
top: 50%;
|
|
||||||
-webkit-transform: translateY(-50%);
|
[dir="rtl"] .choices__list--dropdown .choices__item {
|
||||||
transform: translateY(-50%); }
|
text-align: right;
|
||||||
[dir="rtl"] .choices__list--dropdown .choices__item--selectable {
|
}
|
||||||
text-align: right;
|
|
||||||
padding-left: 100px;
|
@media (min-width: 640px) {
|
||||||
padding-right: 10px; }
|
.choices__list--dropdown .choices__item--selectable {
|
||||||
[dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
|
padding-right: 100px;
|
||||||
right: auto;
|
}
|
||||||
left: 10px; } }
|
.choices__list--dropdown .choices__item--selectable:after {
|
||||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
content: attr(data-select-text);
|
||||||
background-color: #f2f2f2; }
|
font-size: 12px;
|
||||||
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
opacity: 0;
|
||||||
opacity: .5; }
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translateY(-50%);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
[dir="rtl"] .choices__list--dropdown .choices__item--selectable {
|
||||||
|
text-align: right;
|
||||||
|
padding-left: 100px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
[dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
|
||||||
|
right: auto;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__item {
|
.choices__item {
|
||||||
cursor: default; }
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__item--selectable {
|
.choices__item--selectable {
|
||||||
cursor: pointer; }
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__item--disabled {
|
.choices__item--disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
@ -222,14 +303,16 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
opacity: .5; }
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__group .choices__heading {
|
.choices__group .choices__heading {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-bottom: 1px solid #f7f7f7;
|
border-bottom: 1px solid #f7f7f7;
|
||||||
color: gray; }
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__button {
|
.choices__button {
|
||||||
text-indent: -9999px;
|
text-indent: -9999px;
|
||||||
|
|
@ -240,9 +323,12 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
cursor: pointer; }
|
cursor: pointer;
|
||||||
.choices__button:focus {
|
}
|
||||||
outline: none; }
|
|
||||||
|
.choices__button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__input {
|
.choices__input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -253,14 +339,20 @@
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 4px 0 4px 2px; }
|
padding: 4px 0 4px 2px;
|
||||||
.choices__input:focus {
|
}
|
||||||
outline: 0; }
|
|
||||||
[dir="rtl"] .choices__input {
|
.choices__input:focus {
|
||||||
padding-right: 2px;
|
outline: 0;
|
||||||
padding-left: 0; }
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] .choices__input {
|
||||||
|
padding-right: 2px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.choices__placeholder {
|
.choices__placeholder {
|
||||||
opacity: .5; }
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
/*===== End of Choices ======*/
|
/*===== End of Choices ======*/
|
||||||
|
|
|
||||||
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -7,7 +7,7 @@
|
||||||
"start": "node server.js",
|
"start": "node server.js",
|
||||||
"css:watch": "nodemon -e scss -x \"npm run css:build\"",
|
"css:watch": "nodemon -e scss -x \"npm run css:build\"",
|
||||||
"css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s",
|
"css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s",
|
||||||
"css:sass": "node-sass --include-path scss assets/styles/scss/base.scss assets/styles/css/base.css && node-sass --include-path scss assets/styles/scss/choices.scss assets/styles/css/choices.css",
|
"css:sass": "node-sass --output-style expanded --include-path scss assets/styles/scss/base.scss assets/styles/css/base.css && node-sass --output-style expanded --include-path scss assets/styles/scss/choices.scss assets/styles/css/choices.css",
|
||||||
"css:prefix": "postcss --use autoprefixer -b 'last 2 versions' assets/styles/css/*.css -d assets/styles/css/",
|
"css:prefix": "postcss --use autoprefixer -b 'last 2 versions' assets/styles/css/*.css -d assets/styles/css/",
|
||||||
"css:min": "csso assets/styles/css/base.css assets/styles/css/base.min.css && csso assets/styles/css/choices.css assets/styles/css/choices.min.css",
|
"css:min": "csso assets/styles/css/base.css assets/styles/css/base.min.css && csso assets/styles/css/choices.css assets/styles/css/choices.min.css",
|
||||||
"js:build": "webpack --minimize --config webpack.config.prod.js && webpack --config webpack.config.prod.js",
|
"js:build": "webpack --minimize --config webpack.config.prod.js && webpack --config webpack.config.prod.js",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue