Login.styl 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. .loginpage
  2. padding-top 85px // 85 = header height
  3. min-height 100%
  4. background-image url('../img/tracimLogoAsBg.png')
  5. background-repeat no-repeat
  6. background-size contain
  7. background-position center
  8. width 100%
  9. &__logo
  10. margin 0 auto
  11. padding 50px 0
  12. width 170px
  13. &__connection
  14. margin-bottom 50px
  15. border none
  16. box-shadow shadow-right
  17. .connection__header
  18. background-color thirdColor
  19. color #FFF
  20. font-size 25px
  21. .connection__form
  22. margin 0 auto
  23. width 70%
  24. &__rememberme
  25. &__label
  26. font-size 13px
  27. &__groupemail
  28. position relative
  29. &__icon
  30. position absolute
  31. top 6px
  32. left 10px
  33. width 20px
  34. &__input
  35. padding-left 45px
  36. &__groupepw
  37. position relative
  38. &__icon
  39. position absolute
  40. top 5px
  41. left 8px
  42. width 20px
  43. font-size 20px
  44. &__input
  45. padding-left 45px
  46. &__btnsubmit
  47. display block
  48. margin 0 auto
  49. border none
  50. width 150px
  51. background-color green
  52. cursor pointer
  53. &:hover
  54. background-color btnCallAction-hover
  55. &:focus
  56. box-shadow shadow-all-side-green
  57. &__pwforgot
  58. margin-top 3px
  59. cursor pointer
  60. font-size 13px
  61. &:hover::after
  62. position absolute
  63. top 20px
  64. right 15px
  65. border-bottom 1px solid darkGrey
  66. padding-bottom 2px
  67. content ' '
  68. width 130px
  69. &__footer
  70. text-align center
  71. &__text
  72. font-size 17px
  73. @media (min-width: min-lg) and (max-width: max-lg)
  74. .loginpage
  75. .connection__form
  76. width 100%
  77. @media (min-width: min-md) and (max-width: max-md)
  78. .loginpage
  79. .connection__form
  80. width 95%
  81. @media (min-width: min-sm) and (max-width: max-sm)
  82. .loginpage
  83. padding-top 69px
  84. display block
  85. .connection__form
  86. width 90%
  87. @media (max-width: max-xs)
  88. .loginpage
  89. padding-top 69px
  90. background-size cover
  91. display block
  92. &__connection
  93. margin-top 90px
  94. &__logo
  95. display none
  96. .connection__form
  97. width 95%
  98. .connection__form__pwforgot:hover::after
  99. content normal