Front end of the Slack clone application.

select.wp.scss 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. @import "../../themes/ionic.globals.wp";
  2. // Windows Select
  3. // --------------------------------------------------
  4. /// @prop - Padding top and bottom of the select
  5. $select-wp-padding-vertical: 0 !default;
  6. /// @prop - Padding start/end of the select
  7. $select-wp-padding-horizontal: ($item-wp-padding-end / 2) !default;
  8. /// @prop - Margin top of the select
  9. $select-wp-margin-top: $item-wp-padding-top !default;
  10. // deprecated
  11. $select-wp-margin-right: ($item-wp-padding-end / 2) !default;
  12. /// @prop - Margin end of the select
  13. $select-wp-margin-end: $select-wp-margin-right !default;
  14. /// @prop - Margin bottom of the select
  15. $select-wp-margin-bottom: $item-wp-padding-bottom !default;
  16. // deprecated
  17. $select-wp-margin-left: ($item-wp-padding-start / 2) !default;
  18. /// @prop - Margin start of the select
  19. $select-wp-margin-start: $select-wp-margin-left !default;
  20. /// @prop - Border width of the select
  21. $select-wp-border-width: 2px !default;
  22. /// @prop - Border color of the select
  23. $select-wp-border-color: $input-wp-border-color !default;
  24. /// @prop - Width of the select icon
  25. $select-wp-icon-width: 18px !default;
  26. /// @prop - Width of the select icon arrow
  27. $select-wp-icon-arrow-width: 2px !default;
  28. /// @prop - Color of the select icon
  29. $select-wp-icon-color: $select-wp-border-color !default;
  30. /// @prop - Color of the select placeholder
  31. $select-wp-placeholder-color: $select-wp-icon-color !default;
  32. .select-wp {
  33. @include margin($select-wp-margin-top, $select-wp-margin-end, $select-wp-margin-bottom, $select-wp-margin-start);
  34. @include padding($select-wp-padding-vertical, $select-wp-padding-horizontal);
  35. flex: 1;
  36. max-width: 100%;
  37. border: $select-wp-border-width solid $select-wp-border-color;
  38. line-height: 3rem;
  39. }
  40. .select-wp .select-placeholder {
  41. color: $select-wp-placeholder-color;
  42. }
  43. .item-wp.item-select ion-label {
  44. @include margin-horizontal(0, null);
  45. }
  46. .select-wp .select-icon {
  47. position: relative;
  48. align-self: center;
  49. width: $select-wp-icon-width;
  50. height: $select-wp-icon-width;
  51. }
  52. .select-wp .select-icon .select-icon-inner {
  53. @include position(3px, null, null, 5px);
  54. position: absolute;
  55. display: block;
  56. width: ($select-wp-icon-width / 2);
  57. height: ($select-wp-icon-width / 2);
  58. border-top: $select-wp-icon-arrow-width solid $select-wp-icon-color;
  59. border-right: $select-wp-icon-arrow-width solid $select-wp-icon-color;
  60. transform: rotate(135deg);
  61. pointer-events: none;
  62. }
  63. .select-wp .select-text {
  64. min-height: 3rem;
  65. }