145 lines
4.7 KiB
CSS
145 lines
4.7 KiB
CSS
/* fontIconPicker Bootstrap Theme {@link https://github.com/micc83/fontIconPicker} */
|
|
/* Main container */
|
|
.fip-bootstrap.icons-selector {
|
|
font-size: 16px;
|
|
}
|
|
/* Icon selector */
|
|
.fip-bootstrap.icons-selector .selector {
|
|
border: 0 none;
|
|
background-color: #fff;
|
|
width: 102px;
|
|
}
|
|
/* Selector open button */
|
|
.fip-bootstrap.icons-selector .selector-button {
|
|
border: 1px solid #ebebeb;
|
|
border-radius: 0 2px 2px 0;
|
|
background-color: #fcfdfe;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 41px;
|
|
background-repeat: repeat-x;
|
|
}
|
|
/* Selector open button hover */
|
|
.fip-bootstrap.icons-selector .selector-button:hover {
|
|
background-color: #f9fafb;
|
|
background-position: 0 -15px;
|
|
}
|
|
.fip-bootstrap.icons-selector .selector-button:active {
|
|
background-color: #f9fafb;
|
|
}
|
|
.fip-bootstrap.icons-selector .selector-button:hover i {
|
|
color: #999;
|
|
}
|
|
/* Selector open button icon */
|
|
.fip-bootstrap.icons-selector .selector-button i {
|
|
color: #aaa;
|
|
text-shadow: 0px 1px 0px #FFF;
|
|
}
|
|
/* Selected icon */
|
|
.fip-bootstrap.icons-selector .selected-icon {
|
|
border: 1px solid #ebebeb;
|
|
border-right: 0 none;
|
|
background-color: #fff;
|
|
border-radius: 2px 0 0 2px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.fip-bootstrap.icons-selector .selected-icon i {
|
|
color: #404040;
|
|
}
|
|
/* IconPicker Popup */
|
|
.fip-bootstrap.icons-selector .selector-popup {
|
|
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.075);
|
|
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.075);
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.075);
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
}
|
|
/* Search input & category selector */
|
|
.fip-bootstrap.icons-selector .selector-search input[type="text"],
|
|
.fip-bootstrap.icons-selector .selector-category select {
|
|
border: 1px solid #ebebeb;
|
|
color: #8b95a5;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
border-radius: 2px;
|
|
}
|
|
.fip-bootstrap.icons-selector .selector-search input[type="text"]:focus,
|
|
.fip-bootstrap.icons-selector .selector-category select:focus {
|
|
border-color: #33cabb;
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
|
|
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
|
|
}
|
|
/* Search input placeholder */
|
|
.fip-bootstrap.icons-selector input::-webkit-input-placeholder { color:#aaa; }
|
|
.fip-bootstrap.icons-selector input:-moz-placeholder { color:#aaa; }
|
|
.fip-bootstrap.icons-selector input::-moz-placeholder { color:#aaa;}
|
|
.fip-bootstrap.icons-selector input:-ms-input-placeholder { color:#aaa !important; }
|
|
/* Search and cancel icon */
|
|
.fip-bootstrap.icons-selector .selector-search i {
|
|
color: #aaa;
|
|
}
|
|
/* Icon Container inside Popup */
|
|
.fip-bootstrap.icons-selector .fip-icons-container {
|
|
background-color: #fff;
|
|
}
|
|
/* Icon container loading */
|
|
.fip-bootstrap.icons-selector .fip-icons-container .loading {
|
|
color:#ddd;
|
|
}
|
|
/* Single icon box */
|
|
.fip-bootstrap.icons-selector .fip-box {
|
|
border: 1px solid #f9fafb;
|
|
border-radius: 2px;
|
|
background-color: #fcfdfe;
|
|
}
|
|
/* Single icon box hover */
|
|
.fip-bootstrap.icons-selector .fip-box:hover {
|
|
background-color: #fff;
|
|
border-color: #33cabb;
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
|
|
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
|
|
font-size: 1.6em;
|
|
text-shadow: 0 0 1px #fff;
|
|
}
|
|
|
|
/* Pagination and footer icons */
|
|
.fip-bootstrap.icons-selector .selector-footer, .fip-bootstrap.icons-selector .selector-footer i {
|
|
color: #33cabb;
|
|
}
|
|
|
|
/* Pagination arrows icons hover */
|
|
.fip-bootstrap.icons-selector .selector-arrows i:hover {
|
|
color: #52d3c7;
|
|
}
|
|
/* Currently selected icon color */
|
|
.fip-bootstrap.icons-selector span.current-icon, .fip-bootstrap.icons-selector span.current-icon:hover {
|
|
background-color: #33cabb;
|
|
color: #fff;
|
|
border: 1px solid #33cabb;
|
|
}
|
|
.fip-bootstrap.icons-selector span.current-icon i, .fip-bootstrap.icons-selector span.current-icon:hover i {
|
|
color: #fff;
|
|
}
|
|
/* No icons found */
|
|
.fip-bootstrap.icons-selector .icons-picker-error i:before {
|
|
color: #52d3c7;
|
|
}
|
|
|
|
/* Transitions */
|
|
.fip-bootstrap.icons-selector .selector-search input[type="text"],
|
|
.fip-bootstrap.icons-selector .selector-category select,
|
|
.fip-bootstrap.icons-selector .fip-box {
|
|
-webkit-transition: all 300ms ease-in-out;
|
|
-moz-transition: all 300ms ease-in-out;
|
|
-ms-transition: all 300ms ease-in-out;
|
|
-o-transition: all 300ms ease-in-out;
|
|
transition: all 300ms ease-in-out;
|
|
}
|