Advertisement
ZAILBRECK

login_main.css

Jan 28th, 2020
131
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.24 KB | None | 0 0
  1. :root {
  2.   --input-padding-x: 1.5rem;
  3.   --input-padding-y: .75rem;
  4. }
  5.  
  6. body {
  7.   background: #9CECFB;
  8.   /* fallback for old browsers */
  9.   background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
  10.   /* Chrome 10-25, Safari 5.1-6 */
  11.   background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
  12.   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  13. }
  14. .card{
  15.     margin-top: 100px;
  16. }
  17.  
  18. .card-signin {
  19.   border: 0;
  20.   border-radius: 1rem;
  21.   box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
  22.   margin-top: 100px;
  23. }
  24.  
  25. .card-signin .card-title {
  26.   margin-bottom: 2rem;
  27.   font-weight: 300;
  28.   font-size: 1.5rem;
  29. }
  30.  
  31. .card-signin .card-body {
  32.   padding: 2rem;
  33. }
  34.  
  35. .form-signin {
  36.   width: 100%;
  37. }
  38.  
  39. .form-signin .btn {
  40.   font-size: 80%;
  41.   border-radius: 5rem;
  42.   letter-spacing: .1rem;
  43.   font-weight: bold;
  44.   padding: 1rem;
  45.   transition: all 0.2s;
  46. }
  47.  
  48. .form-label-group {
  49.   position: relative;
  50.   margin-bottom: 1rem;
  51. }
  52.  
  53. .form-label-group input {
  54.   height: auto;
  55.   border-radius: 2rem;
  56. }
  57.  
  58. .form-label-group>input,
  59. .form-label-group>label {
  60.   padding: var(--input-padding-y) var(--input-padding-x);
  61. }
  62.  
  63. .form-label-group>label {
  64.   position: absolute;
  65.   top: 0;
  66.   left: 0;
  67.   display: block;
  68.   width: 100%;
  69.   margin-bottom: 0;
  70.   /* Override default `<label>` margin */
  71.   line-height: 1.5;
  72.   color: #495057;
  73.   border: 1px solid transparent;
  74.   border-radius: .25rem;
  75.   transition: all .1s ease-in-out;
  76. }
  77.  
  78. .form-label-group input::-webkit-input-placeholder {
  79.   color: transparent;
  80. }
  81.  
  82. .form-label-group input:-ms-input-placeholder {
  83.   color: transparent;
  84. }
  85.  
  86. .form-label-group input::-ms-input-placeholder {
  87.   color: transparent;
  88. }
  89.  
  90. .form-label-group input::-moz-placeholder {
  91.   color: transparent;
  92. }
  93.  
  94. .form-label-group input::placeholder {
  95.   color: transparent;
  96. }
  97.  
  98. .form-label-group input:not(:placeholder-shown) {
  99.   padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  100.   padding-bottom: calc(var(--input-padding-y) / 3);
  101. }
  102.  
  103. .form-label-group input:not(:placeholder-shown)~label {
  104.   padding-top: calc(var(--input-padding-y) / 3);
  105.   padding-bottom: calc(var(--input-padding-y) / 3);
  106.   font-size: 12px;
  107.   color: #777;
  108. }
  109.  
  110. .icon{
  111.  
  112.   margin: 0px 120px;
  113. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement