API tools faq
paste
Guest User

_material-select.scss

a guest
Sep 9th, 2017
209
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.73 KB | None | 0 0
raw download clone embed print report
  1. /*ng-select*/
  2. mdb-ng-select {
  3.   display: inline-block;
  4.   margin: 0;
  5.   position: relative;
  6.   vertical-align: middle;
  7.   width: 100%;
  8.   * {
  9.     box-sizing: border-box;
  10.     font-family: Roboto, sans-serif;
  11.     outline: none;
  12.   }
  13.   > div {
  14.     border: transparent;
  15.     box-sizing: border-box;
  16.     cursor: pointer;
  17.     user-select: none;
  18.     width: 100%;
  19.     &.disabled {
  20.       background-color: #eee;
  21.       color: #aaa;
  22.       cursor: default;
  23.       pointer-events: none;
  24.       background-color: transparent;
  25.       > div.single > div {
  26.         &.placeholder, &.clear, &.toggle {
  27.           color: rgba(0, 0, 0, 0.3);
  28.         }
  29.       }
  30.     }
  31.     > div {
  32.       &.single {
  33.         position: relative;
  34.         cursor: pointer;
  35.         background-color: transparent;
  36.         border: none;
  37.         border-bottom: 1px solid #ccc;
  38.         outline: 0;
  39.         line-height: 2rem;
  40.         width: 100%;
  41.         font-size: 1rem;
  42.         margin: 0 0;
  43.         padding: 5px 0;
  44.         display: block;
  45.         user-select: none;
  46.         > div {
  47.           &.value {
  48.             flex: 1;
  49.             line-height: 2rem;
  50.             overflow: hidden;
  51.             white-space: nowrap;
  52.             color: #292b2c;
  53.             padding: 0;
  54.             padding-bottom: 5px;
  55.           }
  56.           &.placeholder {
  57.             flex: 1;
  58.             line-height: 2rem;
  59.             overflow: hidden;
  60.             white-space: nowrap;
  61.             color: #292b2c;
  62.             padding: 0;
  63.             color: black;
  64.             padding-bottom: 5px;
  65.           }
  66.           &.clear, &.toggle {
  67.             float: right;
  68.             color: black;
  69.             line-height: 2rem;
  70.             text-align: center;
  71.             width: 30px;
  72.             position: absolute;
  73.             right: 0;
  74.             top: 50%;
  75.             transform: translateY(-50%);
  76.             font-size: 10px;
  77.           }
  78.           &.clear:hover, &.toggle:hover {
  79.             background-color: #ececec;
  80.           }
  81.           &.clear, &.toggle:hover {
  82.             background-color: transparent;
  83.           }
  84.           &.clear {
  85.             font-size: 18px;
  86.           }
  87.           &.toggle {
  88.             font-size: 14px;
  89.             z-index: -1;
  90.           }
  91.         }
  92.       }
  93.       &.multiple {
  94.         display: flex;
  95.         flex-flow: row wrap;
  96.         position: relative;
  97.         cursor: pointer;
  98.         background-color: transparent;
  99.         border: none;
  100.         border-bottom: 1px solid #ccc;
  101.         outline: 0;
  102.         line-height: 2rem;
  103.         width: 100%;
  104.         font-size: 1rem;
  105.         margin: 0 0;
  106.         padding: 5px 0 7px 0;
  107.         display: block;
  108.         user-select: none;
  109.         min-height: 30px;
  110.         > div.toggle {
  111.           float: right;
  112.           color: black;
  113.           // line-height: 30px;
  114.           text-align: center;
  115.           width: 30px;
  116.           position: absolute;
  117.           right: 0;
  118.           top: 0px;
  119.           font-size: 14px;
  120.         }
  121.         > div.option {
  122.           cursor: default;
  123.           display: inline-block;
  124.           flex-shrink: 0;
  125.           line-height: 2rem;
  126.           span.deselect-option {
  127.             color: #aaa;
  128.             cursor: pointer;
  129.             height: 20px;
  130.             line-height: 2rem;
  131.             background-color: transparent;
  132.             border: 0;
  133.             border-radius: 0;
  134.             color: #292b2c;
  135.             font-size: 1rem;
  136.             margin: 0;
  137.             padding: 0;
  138.             &:hover {
  139.               color: #555;
  140.             }
  141.           }
  142.           &:first-child span {
  143.             display: none;
  144.           }
  145.         }
  146.         // display: flex;
  147.         input {
  148.           background-color: transparent;
  149.           border: none;
  150.           height: 30px;
  151.           line-height: 2rem;
  152.           padding: 0;
  153.           &:focus {
  154.             outline: none;
  155.           }
  156.         }
  157.       }
  158.     }
  159.   }
  160.   label {
  161.     color: rgba(0, 0, 0, 0.38);
  162.     display: block;
  163.     font-size: .8rem;
  164.     padding: 4px 0;
  165.   }
  166.   mdb-select-dropdown {
  167.     box-sizing: border-box;
  168.     font-family: Sans-Serif;
  169.     color: #4285f4;
  170.     font-size: 19.2px;
  171.     * {
  172.       box-sizing: border-box;
  173.       font-family: Sans-Serif;
  174.     }
  175.     > div {
  176.       background-color: #fff;
  177.       outline: transparent;
  178.       border: 0;
  179.       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  180.       border-top: none;
  181.       box-sizing: border-box;
  182.       position: absolute;
  183.       z-index: 1;
  184.       .filter {
  185.         padding: 3px;
  186.         width: 100%;
  187.         border-bottom: 1px solid #ccc;
  188.         input {
  189.           outline: 1px solid transparent;
  190.           border: 1px solid transparent;
  191.           box-sizing: border-box;
  192.           padding: 4px;
  193.           width: 100%;
  194.           &:focus {
  195.             outline: 1px solid transparent;
  196.             border: 1px solid transparent;
  197.           }
  198.         }
  199.       }
  200.       .options {
  201.         max-height: 185px;
  202.         overflow-y: auto;
  203.         ul {
  204.           list-style: none;
  205.           margin: 0;
  206.           padding: 0;
  207.           li {
  208.             padding: 4px 8px;
  209.             cursor: pointer;
  210.             user-select: none;
  211.           }
  212.           .selected {
  213.             background-color: #eee;
  214.           }
  215.           .highlighted {
  216.             background-color: #eee;
  217.             color: #4285F4;
  218.           }
  219.           .disabled {
  220.             background-color: #fff;
  221.             color: #9e9e9e;
  222.             cursor: default;
  223.             pointer-events: none;
  224.           }
  225.         }
  226.         &::-webkit-scrollbar {
  227.           width: 4px;
  228.           height: 4px;
  229.         }
  230.         &::-webkit-scrollbar-button {
  231.           &:start:decrement, &:end:increment {
  232.             display: block;
  233.             height: 0;
  234.             background-color: transparent;
  235.           }
  236.         }
  237.         &::-webkit-scrollbar-track-piece {
  238.           background-color: transparent;
  239.           border-radius: 0;
  240.           border-bottom-right-radius: 4px;
  241.           border-bottom-left-radius: 4px;
  242.         }
  243.         &::-webkit-scrollbar-thumb:vertical {
  244.           height: 50px;
  245.           background-color: #999;
  246.           border-radius: 4px;
  247.         }
  248.       }
  249.     }
  250.     .dropdown-content {
  251.       background-color: #fff;
  252.       margin: 0;
  253.       width: 100%;
  254.       display: block;
  255.       min-width: 100px;
  256.       max-height: 650px;
  257.       overflow-y: hidden;
  258.       opacity: 1;
  259.       position: absolute;
  260.       z-index: 999;
  261.       will-change: width,height;
  262.       li > {
  263.         a, span {
  264.           color: #4285F4;
  265.         }
  266.       }
  267.       li {
  268.         &.disabled {
  269.           color: rgba(0, 0, 0, 0.3);
  270.           background-color: transparent !important;
  271.           > span {
  272.             color: rgba(0, 0, 0, 0.3);
  273.             background-color: transparent !important;
  274.           }
  275.         }
  276.         &.optgroup {
  277.           color: rgba(0, 0, 0, 0.3);
  278.           background-color: transparent !important;
  279.           border-top: 1px solid #eee;
  280.           &:first-child {
  281.             border-top: 0;
  282.           }
  283.           > span {
  284.             color: rgba(0, 0, 0, 0.4) !important;
  285.           }
  286.         }
  287.       }
  288.     }
  289.   }
  290. }
  291.  
  292. .dropdown-content li > a, .dropdown-content li > span {
  293.     font-size: 0.9rem;
  294. }
  295.  
  296.  
  297. .dropdown-primary.colorful-select .dropdown-content li {
  298.     &.active, &.selected {
  299.         background-color: transparent;
  300.     }
  301.     &.active span, &.selected span {
  302.         background-color: $primary-color;
  303.         color: #fff;
  304.     }
  305. }
  306.  
  307. .dropdown-danger.colorful-select .dropdown-content li {
  308.     &.active, &.selected {
  309.         background-color: transparent;
  310.     }
  311.     &.active span, &.selected span {
  312.         background-color: $danger-color-dark;
  313.         color: #fff;
  314.     }
  315. }
  316. .dropdown-default.colorful-select .dropdown-content li {
  317.     &.active, &.selected {
  318.         background-color: transparent;
  319.     }
  320.     &.active span, &.selected span {
  321.         background-color: $default-color;
  322.         color: #fff;
  323.     }
  324. }
  325. .dropdown-secondary.colorful-select .dropdown-content li {
  326.     &.active, &.selected {
  327.         background-color: transparent;
  328.     }
  329.     &.active span, &.selected span {
  330.         background-color: $secondary-color;
  331.         color: #fff;
  332.     }
  333. }
  334. .dropdown-success.colorful-select .dropdown-content li {
  335.     &.active, &.selected {
  336.         background-color: transparent;
  337.     }
  338.     &.active span, &.selected span {
  339.         background-color: $success-color;
  340.         color: #fff;
  341.     }
  342. }
  343. .dropdown-info.colorful-select .dropdown-content li {
  344.     &.active, &.selected {
  345.         background-color: transparent;
  346.     }
  347.     &.active span, &.selected span {
  348.         background-color: $info-color;
  349.         color: #fff;
  350.     }
  351. }
  352. .dropdown-warning.colorful-select .dropdown-content li {
  353.     &.active, &.selected {
  354.         background-color: transparent;
  355.     }
  356.     &.active span, &.selected span {
  357.         background-color: $warning-color;
  358.         color: #fff;
  359.     }
  360. }
  361. .dropdown-ins.colorful-select .dropdown-content li {
  362.     &.active, &.selected {
  363.         background-color: transparent;
  364.     }
  365.     &.active span, &.selected span {
  366.         background-color: $unique-color;
  367.         color: #fff;
  368.     }
  369. }
  370. .dropdown-dark.colorful-select .dropdown-content li {
  371.     &.active, &.selected {
  372.         background-color: transparent;
  373.     }
  374.     &.active span, &.selected span {
  375.         background-color: $elegant-color;
  376.         color: #fff;
  377.     }
  378. }
  379.  
  380. mdb-ng-select+label {
  381.     position: absolute;
  382.     top: -14px;
  383.     font-size: .8rem;
  384. }
  385.  
  386. //select animation
  387. mdb-ng-select {
  388.   mdb-select-dropdown .dropdown-content {
  389.     display: block;
  390.     transition: 0.55s;
  391.     opacity: 0;
  392.     will-change: width, height, opacity;
  393.   }
  394.  
  395.   mdb-select-dropdown.fadeInSelect .dropdown-content {
  396.       opacity: 1;
  397.   }
  398. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!