_images.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. // Responsive images (ensure images don't scale beyond their parents)
  2. //
  3. // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
  4. // We previously tried the "images are responsive by default" approach in Bootstrap v2,
  5. // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
  6. // which weren't expecting the images within themselves to be involuntarily resized.
  7. // See also https://github.com/twbs/bootstrap/issues/18178
  8. .img-fluid {
  9. @include img-fluid();
  10. }
  11. // Image thumbnails
  12. .img-thumbnail {
  13. padding: $thumbnail-padding;
  14. background-color: $thumbnail-bg;
  15. border: $thumbnail-border-width solid $thumbnail-border-color;
  16. @include border-radius($thumbnail-border-radius);
  17. @include box-shadow($thumbnail-box-shadow);
  18. // Keep them at most 100% wide
  19. @include img-fluid();
  20. }
  21. //
  22. // Figures
  23. //
  24. .figure {
  25. // Ensures the caption's text aligns with the image.
  26. display: inline-block;
  27. }
  28. .figure-img {
  29. margin-bottom: $spacer / 2;
  30. line-height: 1;
  31. }
  32. .figure-caption {
  33. @include font-size($figure-caption-font-size);
  34. color: $figure-caption-color;
  35. }
  36. .icon-pemantauan {
  37. width: 35px;
  38. height: 35px;
  39. margin-right: -20px;
  40. }
  41. .icon-buatlaporan {
  42. width: 35px;
  43. height: 35px;
  44. margin-right: -20px;
  45. }
  46. .img-text-vputih {
  47. width: 55px;
  48. height: 20px;
  49. margin-left: 10px;
  50. }
  51. .icon-triangle {
  52. width: 20px;
  53. margin-right: 15px;
  54. margin-left: 15px;
  55. border-radius: 5px;
  56. }
  57. .identitas-pelapor {
  58. width: 830px;
  59. height: 50px;
  60. }
  61. .icon-pemantauan {
  62. width: 30px;
  63. height: 30px;
  64. // margin-right: -20px;
  65. }
  66. .icon-buatlaporan {
  67. width: 30px;
  68. height: 30px;
  69. // margin-right: -20px;
  70. }
  71. .img-text-vputih {
  72. width: 55px;
  73. height: 20px;
  74. margin-left: 10px;
  75. }
  76. .icon-triangle {
  77. width: 20px;
  78. margin-right: 10px;
  79. margin-left: 15px;
  80. }
  81. .identitas-pelapor {
  82. width: 830px;
  83. height: 50px;
  84. }
  85. // .img-fluid {
  86. // position: relative;
  87. // max-width: 100%;
  88. // height: auto;
  89. // width: 72px;
  90. // height: 37px; }
  91. .ditbaga-logo {
  92. margin-top: 55%;
  93. }
  94. .logo-nav {
  95. width: 60%;
  96. }
  97. .img-login-1 {
  98. width: 97%;
  99. margin-left: auto;
  100. margin-right: auto;
  101. }
  102. .icon-next {
  103. margin-right: 15px;
  104. margin-top: 5px;
  105. }
  106. .float-rigt {
  107. float: right;
  108. }
  109. .float-left {
  110. float: left;
  111. }
  112. .icon-eksport {
  113. margin-top: 5px;
  114. }
  115. .width-133 {
  116. width: 133px;
  117. height: auto;
  118. }
  119. .width-50 {
  120. width: 60px;
  121. }
  122. // .responsive-1{
  123. // min-height: 500px;
  124. // width: 100%;
  125. // }
  126. @media screen and (max-width: 1320px) {
  127. .responsive-1 {
  128. width: 170%
  129. }
  130. @media screen and (max-width: 991px) {
  131. .responsive-1 {
  132. width: 100%
  133. }
  134. }
  135. }
  136. @media screen and (max-width: 1320px) {
  137. .responsive-2 {
  138. width: 170%
  139. }
  140. @media screen and (max-width: 991px) {
  141. .responsive-2 {
  142. width: 100%
  143. }
  144. }
  145. }