socialnetworknews-web

A open-source Paper.li clone
git clone git://archive.git.mtrnord.blog/SocialNetworkNews/socialnetworknews-web.git
Log | Files | Refs | README | LICENSE

login.component.scss (2384B)

      1 main {
      2   background: #4688F1;
      3   padding: 0;
      4   margin: 0;
      5   height: 100%;
      6   width: 100%;
      7   position: absolute;
      8   top: 0;
      9   left: 0;
     10 }
     11 
     12 .login-box {
     13   background: #fff;
     14   padding: 20px;
     15   max-width: 480px;
     16   margin: 25vh auto;
     17   text-align: center;
     18   letter-spacing: 1px;
     19   position: relative;
     20   border-radius: 5px;
     21 }
     22 
     23 .login-box:hover {
     24   box-shadow: 0 5px 15px rgba(0,0,0,0.3);
     25   transition: box-shadow 0.3s ease-in-out;
     26 }
     27 
     28 .login-box h2 {
     29   margin: 20px 0 20px;
     30   padding: 0;
     31   text-transform: uppercase;
     32   color: #4688F1;
     33 }
     34 
     35 .social-button {
     36   background-position: 25px 0;
     37   box-sizing: border-box;
     38   color: rgb(255, 255, 255);
     39   cursor: pointer;
     40   display: inline-block;
     41   height: 50px;
     42   line-height: 50px;
     43   text-align: left;
     44   text-decoration: none;
     45   text-transform: uppercase;
     46   vertical-align: middle;
     47   width: 100%;
     48   border-radius: 3px;
     49   margin: 10px auto;
     50   outline: rgb(255, 255, 255) none 0;
     51   padding-left: 20%;
     52   transition: all 0.2s cubic-bezier(0.72, 0.01, 0.56, 1) 0s;
     53 }
     54 
     55 #google-connect {
     56   background-color: rgb(255, 255, 255);
     57   border: 1px solid rgb(220, 74, 61);
     58 }
     59 
     60 #google-connect:hover {
     61   background-color: rgb(220, 74, 61);
     62   border-color: rgb(220, 74, 61);
     63   transition: all .3s ease-out;
     64 }
     65 
     66 #google-connect span {
     67   box-sizing: border-box;
     68   color: rgb(220, 74, 61);
     69   cursor: pointer;
     70   text-align: center;
     71   text-transform: uppercase;
     72   border: 0 none rgb(220, 74, 61);
     73   outline: rgb(255, 255, 255) none 0;
     74   transition: box-shadow .3s ease;
     75 }
     76 
     77 #google-connect:hover span {
     78   color: #FFF;
     79   transition: color .3s ease-out;
     80 }
     81 
     82 #google-connect:hover span .gpred {
     83   color: #FFF;
     84   transition: color .3s ease-out;
     85 }
     86 
     87 #twitter-connect {
     88   background-color: rgb(255, 255, 255);
     89   border: 1px solid rgb(85, 172, 238);
     90 }
     91 
     92 #twitter-connect:hover {
     93   background-color: rgb(85, 172, 238);
     94   border-color: rgb(85, 172, 238);
     95   transition: all .3s ease-out;
     96 }
     97 
     98 #twitter-connect span {
     99   box-sizing: border-box;
    100   color: rgb(85, 172, 238);
    101   cursor: pointer;
    102   text-align: center;
    103   text-transform: uppercase;
    104   border: 0 none rgb(220, 74, 61);
    105   outline: rgb(255, 255, 255) none 0;
    106   transition: all .3s ease;
    107 }
    108 
    109 #twitter-connect:hover span {
    110   color: #FFF;
    111   transition: color .3s ease-out;
    112 }
    113 
    114 #twitter-connect:hover span .tblue {
    115   color: #FFF;
    116   transition: color .3s ease-out;
    117 }
    118 
    119 .tblue {
    120   color: rgb(85, 172, 238);
    121 }
    122 
    123 .gpred {
    124   color: rgb(220, 74, 61);
    125 }