Front end of the Slack clone application.

select.md.scss 1.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. @import "../../themes/ionic.globals.md";
  2. // Material Design Select
  3. // --------------------------------------------------
  4. /// @prop - Padding top of the select
  5. $select-md-padding-top: $item-md-padding-top !default;
  6. // deprecated
  7. $select-md-padding-right: ($item-md-padding-end / 2) !default;
  8. /// @prop - Padding end of the select
  9. $select-md-padding-end: $select-md-padding-right !default;
  10. /// @prop - Padding bottom of the select
  11. $select-md-padding-bottom: $item-md-padding-bottom !default;
  12. // deprecated
  13. $select-md-padding-left: $item-md-padding-start !default;
  14. /// @prop - Padding start of the select
  15. $select-md-padding-start: $select-md-padding-left !default;
  16. /// @prop - Color of the select icon
  17. $select-md-icon-color: #999 !default;
  18. /// @prop - Color of the select placeholder
  19. $select-md-placeholder-color: $select-md-icon-color !default;
  20. .select-md {
  21. @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
  22. }
  23. .select-md .select-placeholder {
  24. color: $select-md-placeholder-color;
  25. }
  26. .select-md .item-select ion-label {
  27. @include margin-horizontal(0, null);
  28. }
  29. .select-md .select-icon {
  30. position: relative;
  31. width: 12px;
  32. height: 19px;
  33. }
  34. .select-md .select-icon .select-icon-inner {
  35. @include position(50%, null, null, 5px);
  36. @include margin(-3px, null, null, null);
  37. position: absolute;
  38. width: 0;
  39. height: 0;
  40. border-top: 5px solid;
  41. border-right: 5px solid transparent;
  42. border-left: 5px solid transparent;
  43. color: $select-md-icon-color;
  44. pointer-events: none;
  45. }