weather-card.component.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. div.widget
  2. {
  3. position: relative;
  4. width: 100%;
  5. //margin: 150px auto;
  6. margin-top: 0;
  7. background-color: #fff;
  8. border-radius: 9px;
  9. padding: 15px 20px;
  10. }
  11. div.date
  12. {
  13. font-size: .9em;
  14. @media screen and (max-width: 680px) {
  15. font-size: .75em;
  16. }
  17. font-weight: bold;
  18. color: rgba(0,0,0,0.5);
  19. }
  20. div.city
  21. {
  22. font-size: 1.3em;
  23. @media screen and (max-width: 680px) {
  24. font-size: 1em;
  25. }
  26. font-weight: bold;
  27. text-transform: uppercase;
  28. padding-top: 5px;
  29. color: #000;
  30. margin: 5px 0 10px;
  31. }
  32. div.temp
  33. {
  34. color: rgba(0,0,0,0.9);
  35. font-weight: 400;
  36. display: inline-block;
  37. span,
  38. img {
  39. display: inline-block;
  40. margin-right: 10px;
  41. padding-left: 0;
  42. vertical-align: middle;
  43. text-align: right;
  44. margin-bottom: 20px;
  45. font-size: 3em;
  46. @media screen and (max-width: 800px) {
  47. font-size: 2.5em;
  48. margin-right: 5px;
  49. }
  50. font-weight: 400;
  51. }
  52. }
  53. div.panel
  54. {
  55. display: inline-block;
  56. }
  57. div.right-panel
  58. {
  59. position: absolute;
  60. float: right;
  61. top: 0;
  62. margin-top: 35px;
  63. padding-left: 10px;
  64. }