_login.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. html,
  2. body {
  3. height: 100%;
  4. .bg-chamilo {
  5. display: -ms-flexbox;
  6. display: flex;
  7. -ms-flex-align: center;
  8. align-items: center;
  9. padding-top: 40px;
  10. padding-bottom: 40px;
  11. background: #0068d8;
  12. }
  13. .login-box {
  14. width: 100%;
  15. max-width: 350px;
  16. padding: 50px 40px;
  17. margin: auto;
  18. background-color: $default-white;
  19. border-radius: 10px;
  20. overflow: hidden;
  21. box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  22. .login-logo{
  23. margin-bottom: 2em;
  24. }
  25. input.form-control{
  26. border: none;
  27. border-radius: 0;
  28. transition: none;
  29. &:focus{
  30. background-color: transparent;
  31. border-color: transparent;
  32. outline: 0;
  33. box-shadow: none;
  34. }
  35. }
  36. .focus-input {
  37. position: absolute;
  38. display: block;
  39. width: 100%;
  40. height: 100%;
  41. top: 0;
  42. left: 0;
  43. pointer-events: none;
  44. &:before{
  45. display: flex;
  46. align-items: center;
  47. justify-content: center;
  48. position: absolute;
  49. height: calc(100% - 20px);
  50. bottom: 0;
  51. left: 0;
  52. padding-left: 13px;
  53. padding-top: 3px;
  54. }
  55. }
  56. }
  57. }
  58. input {
  59. outline: none;
  60. border: none;
  61. }
  62. input:focus::-webkit-input-placeholder { color:transparent; }
  63. input:focus:-moz-placeholder { color:transparent; }
  64. input:focus::-moz-placeholder { color:transparent; }
  65. input:focus:-ms-input-placeholder { color:transparent; }
  66. input::-webkit-input-placeholder { color: #cccccc;}
  67. input:-moz-placeholder { color: #cccccc;}
  68. input::-moz-placeholder { color: #cccccc;}
  69. input:-ms-input-placeholder { color: #cccccc;}
  70. .wrap-login {
  71. width: 500px;
  72. background: #fff;
  73. border-radius: 10px;
  74. overflow: hidden;
  75. }
  76. .validate-input {
  77. position: relative;
  78. margin-bottom: 23px;
  79. }
  80. .wrap-input {
  81. width: 100%;
  82. position: relative;
  83. border-bottom: 2px solid #d9d9d9;
  84. }
  85. .label-input {
  86. font-size: 12px;
  87. color: #979797;
  88. line-height: 1.5;
  89. padding-left: 0;
  90. }
  91. .input-login {
  92. font-size: 16px;
  93. color: #333333;
  94. line-height: 1.2;
  95. display: block;
  96. width: 100%;
  97. height: 55px;
  98. background: transparent;
  99. padding: 0 7px 0 43px;
  100. }