SHARE
TWEET

Untitled

a guest Feb 27th, 2020 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.   === DESIGN SYSTEM SITEW ===
  3.   -- Last update : 20/02/2020
  4.   -- Zeplin link : https: //app.zeplin.io/project/5d839c30e66b9b8a0dbdfd9a/styleguide/components
  5. */
  6.  
  7. /*
  8.  
  9.   == COLORS ==
  10.  
  11. */
  12. $azure : #12a3eb;
  13. $blueLow: #0e5285;
  14. $warmPink : #ee5a73;
  15. $brownGrey: #aeaeae;
  16. $greyishBrown: #414141;
  17. $darkIndigo: #091e2f;
  18. $black: #000000;
  19.  
  20.  
  21. /*
  22.  
  23.   == GENERAL ==
  24.  
  25. */
  26. a,
  27. a:visited {
  28.   color: $azure;
  29.   text-decoration: none;
  30.  
  31.   &:hover {
  32.     color: $blueLow; //TODO: confirmer
  33.   }
  34. }
  35.  
  36.  
  37. /*
  38.  
  39.   == FONTS ==
  40.  
  41.   .-font1=>48px
  42.   .-font2=>37px
  43.   .-font3=>28px
  44.   .-font4=>21px
  45.   .-font4=>16px bold
  46.   .-font5=>16px bold
  47.   .-font6=>16px semi-bold
  48.   .-font7=>16px normal
  49.   .-font8=>14px normal
  50.   .-font9=>14px light
  51.  
  52. */
  53. .-font1 {
  54.   font-size: 48px;
  55.   font-weight: 600;
  56.   font-stretch: normal;
  57.   font-style: normal;
  58.   line-height: normal;
  59.   letter-spacing: 0.75px;
  60.   color: $blueLow;
  61. }
  62.  
  63. .-font2 {
  64.   font-size: 37px;
  65.   font-weight: 600;
  66.   font-stretch: normal;
  67.   font-style: normal;
  68.   line-height: normal;
  69.   letter-spacing: normal;
  70.   text-align: center;
  71.   color: $black;
  72. }
  73.  
  74. .-font3 {
  75.   font-size: 28px;
  76.   font-weight: normal;
  77.   font-stretch: normal;
  78.   font-style: normal;
  79.   line-height: normal;
  80.   color: $black;
  81. }
  82.  
  83. .-font4 {
  84.   font-size: 21px;
  85.   font-weight: normal;
  86.   font-stretch: normal;
  87.   font-style: normal;
  88.   line-height: normal;
  89.   color: $black;
  90. }
  91.  
  92. .-font5 {
  93.   font-size: 16px;
  94.   font-weight: bold;
  95.   font-stretch: normal;
  96.   font-style: normal;
  97.   line-height: normal;
  98.   letter-spacing: 0.25px;
  99.   color: $black;
  100. }
  101.  
  102. .-font6 {
  103.   font-size: 16px;
  104.   font-weight: 600;
  105.   font-stretch: normal;
  106.   font-style: normal;
  107.   line-height: normal;
  108.   color: $black;
  109. }
  110.  
  111. .-font7 {
  112.   font-size: 16px;
  113.   font-weight: normal;
  114.   font-stretch: normal;
  115.   font-style: normal;
  116.   line-height: normal;
  117.   color: $black;
  118. }
  119.  
  120. .-font8 {
  121.   font-size: 14px;
  122.   font-weight: normal;
  123.   font-stretch: normal;
  124.   font-style: normal;
  125.   line-height: normal;
  126.   color: $black;
  127. }
  128.  
  129. .-font9 {
  130.   font-size: 14px;
  131.   font-weight: 300;
  132.   font-stretch: normal;
  133.   font-style: normal;
  134.   line-height: normal;
  135.   text-align: center;
  136.   color: $black;
  137. }
  138.  
  139. .-defaultFont{ // Use on body
  140.   font-size: 14px;
  141. }
  142. /*
  143.  
  144.   == BUTTONS ==
  145.  
  146. */
  147. .-whiteButton {
  148.   border-radius: 10px;
  149.   box-shadow: 0 10px 20px 0 rgba(9, 30, 47, 0.1);
  150.   background-color: #ffffff;
  151.   font-weight: normal;
  152.   font-stretch: normal;
  153.   font-style: normal;
  154.   line-height: normal;
  155.   padding: 8px;
  156.   color: $greyishBrown;
  157.   font-size: 16px;
  158.   @include transition(box-shadow .25s ease-in-out);
  159.  
  160.   &:hover {
  161.     box-shadow: 0 15px 30px 0 rgba(9, 30, 47, 0.15);
  162.     color: $greyishBrown;
  163.   }
  164. }
  165.  
  166.  
  167. /*
  168.  
  169.   == TEXTBOXES ==
  170.  
  171. */
  172.  
  173. .-textBox {
  174.   border: 1px solid #cdcdcd;
  175.   background-color: #fcfdfd;
  176.   border-radius: 5px;
  177.   font-size: 16px;
  178.   padding: 5px 5px;
  179.   &:focus,
  180.   &:active {
  181.     outline: none;
  182.  
  183.   }
  184.   &:focus, &:active, &.-notEmpty {
  185.     ~.__dynamicLabel {
  186.       @include transform(translate(-40px, -30px));
  187.     }
  188.   }
  189. }
  190.  
  191. .-withIcon {
  192.   padding-left: 40px;
  193. }
  194. .-block {
  195.   display: block;
  196.   width: 100%;
  197. }
  198. .-dynamicLabel {
  199.   margin-top: 30px !important;
  200. }
  201. .__dynamicLabel {
  202.   position: absolute;
  203.   top: 0;
  204.   left: 40px;
  205.   bottom: 0;
  206.   display: flex;
  207.   align-items: center;
  208.   pointer-events: none;
  209.   @include transition(transform .2s ease-in-out);
  210.   @include transform(translate(0, 0));
  211. }
  212.  
  213. /*
  214.  
  215.   == ERRORS ==
  216.  
  217. */
  218.  
  219. .-hasError{
  220.   .-textBox{
  221.     border-color: $warmPink;
  222.     ~svg * {
  223.       stroke: $warmPink;
  224.     }
  225.   }
  226.   .__dynamicLabel{
  227.     color: $warmPink;
  228.   }
  229. }
  230.  
  231. .__error {
  232.   text-align: left;
  233.   color: $warmPink;
  234. }
  235. .-hasSuccess {
  236.   .-textBox {
  237.     border-color: $azure;
  238.  
  239.     ~svg {
  240.       * {
  241.         stroke: $azure;
  242.       }
  243.     }
  244.   }
  245.  
  246.   .__dynamicLabel {
  247.     color: $azure;
  248.   }
  249.  
  250. }
  251.  
  252. /*
  253.  
  254.   == COLORS MODIFIERS ==
  255.  
  256. */
  257.  
  258. .-blueLow {
  259.   color: $blueLow;
  260. }
  261.  
  262. .-ligthBlueBackground {
  263.   background-color: #f6faff;
  264. }
  265.  
  266.  
  267. // TODO: Pas sûr !
  268. .control-group {
  269.   padding: 10px 0;
  270. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top