You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_side_toolbar_container.scss 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /**
  2. * Toolbar side panel main container element.
  3. */
  4. #sideToolbarContainer {
  5. position: absolute;
  6. top: 0;
  7. left: $defaultToolbarSize;
  8. width: 0;
  9. background-color: rgba(0,0,0,0.8);
  10. height: 100%;
  11. max-width: $sidebarWidth;
  12. z-index: 800;
  13. overflow: hidden;
  14. /**
  15. * Labels inside the side panel.
  16. */
  17. label {
  18. color: $defaultColor;
  19. }
  20. /**
  21. * Form elements and blocks.
  22. */
  23. input, select, a,
  24. .sideToolbarBlock, .input-control, .button-control {
  25. display: inline-block;
  26. margin-top: 15px;
  27. margin-left: 10%;
  28. width: 80%;
  29. }
  30. /**
  31. * Specify colors for edit elements.
  32. */
  33. select, input[type="button"], input[type="text"],
  34. input[type="reset"], input[type="submit"] {
  35. color: $inputColor;
  36. background: $inputBackground;
  37. border: none;
  38. }
  39. /**
  40. * Specify styling of elements inside a block.
  41. */
  42. .sideToolbarBlock {
  43. input, button, a, select {
  44. margin-top: 5px;
  45. margin-left: 0;
  46. width: 100%;
  47. }
  48. input[type='checkbox'] {
  49. width: auto !important;
  50. display: inline;
  51. > label {
  52. margin-top: 5px;
  53. width: 80%;
  54. }
  55. }
  56. }
  57. /**
  58. * Inner container, for example contact list, settings or profile.
  59. */
  60. .sideToolbarContainer__inner {
  61. display: none;
  62. height: 100%;
  63. width: $sidebarWidth;
  64. position: absolute;
  65. box-sizing: border-box;
  66. color: #FFF;
  67. /**
  68. * Titles and subtitles of inner containers.
  69. */
  70. div.title,
  71. div.subTitle {
  72. text-align: left;
  73. margin: 10px 0;
  74. }
  75. /**
  76. * Main title size.
  77. */
  78. div.title {
  79. color: $defaultColor !important;
  80. text-align: center;
  81. font-size: 16px;
  82. }
  83. /**
  84. * Subtitle specific properties.
  85. */
  86. div.subTitle {
  87. font-size: 11px;
  88. font-weight: 500;
  89. color: $defaultSideBarFontColor !important;
  90. margin-left: 10%;
  91. }
  92. /**
  93. * First element after a title.
  94. */
  95. .first {
  96. margin-top: 0 !important;
  97. }
  98. /**
  99. * Buttons in the side toolbar container.
  100. */
  101. .button-control {
  102. margin: 9px 0;
  103. width: 100%;
  104. }
  105. }
  106. }
  107. #device_settings {
  108. width : auto !important;
  109. text-align: center;
  110. }