@@ -548,10 +548,16 @@ footer {
548
548
margin-bottom : 0 ; }
549
549
550
550
hr {
551
+ border : 0 ;
551
552
border-top : 1px solid rgba (0 , 0 , 0 , 0.12 );
552
553
display : block;
554
+ margin-top : 16px ;
553
555
margin-bottom : 16px ;
554
- width : 100% ; }
556
+ width : 100% ;
557
+ -webkit-box-sizing : content-box;
558
+ box-sizing : content-box;
559
+ height : 0 ;
560
+ overflow : visible; }
555
561
556
562
img {
557
563
height : auto;
@@ -568,11 +574,16 @@ img {
568
574
img {
569
575
margin-right : 16px ; } }
570
576
577
+ embed ,
578
+ iframe ,
579
+ video {
580
+ border : 0 ; }
581
+
571
582
body {
572
583
color : rgba (0 , 0 , 0 , 0.8 );
573
- font-family : "Helvetica Neue ", Helvetica , "Lucida Grande " , sans-serif;
584
+ font-family : -apple-system , BlinkMacSystemFont , "Segoe UI ", Roboto , "Helvetica Neue " , Arial , sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" ;
574
585
font-size : 16px ;
575
- line-height : 1.4 ; }
586
+ line-height : 1.5 ; }
576
587
577
588
p {
578
589
margin : 0 ;
@@ -586,46 +597,39 @@ h5,
586
597
h6 {
587
598
color : inherit;
588
599
font-family : inherit;
589
- line-height : inherit; }
600
+ line-height : 1.2 ;
601
+ font-weight : 500 ; }
590
602
591
603
h1 {
592
- border-bottom : 1px solid rgba (0 , 0 , 0 , 0.12 );
593
- font-size : 36px ;
594
- font-weight : 500 ;
604
+ font-size : 40px ;
595
605
margin : 20px 0 16px ; }
596
606
597
607
h2 {
598
- font-size : 30px ;
599
- font-weight : 500 ;
608
+ font-size : 32px ;
600
609
margin : 20px 0 16px ; }
601
610
602
611
h3 {
603
- font-size : 24px ;
604
- font-weight : 500 ;
612
+ font-size : 28px ;
605
613
margin : 16px 0 4px ; }
606
614
607
615
h4 {
608
- font-size : 18px ;
609
- font-weight : 600 ;
616
+ font-size : 24px ;
610
617
margin : 16px 0 4px ; }
611
618
612
619
h5 {
613
- font-size : 16px ;
614
- font-weight : 600 ;
620
+ font-size : 20px ;
615
621
margin : 16px 0 4px ; }
616
622
617
623
h6 {
618
- color : rgba (0 , 0 , 0 , 0.54 );
619
- font-size : 14px ;
620
- font-weight : 600 ;
624
+ font-size : 16px ;
621
625
margin : 16px 0 4px ; }
622
626
623
627
small {
624
628
color : rgba (0 , 0 , 0 , 0.54 );
625
629
vertical-align : bottom; }
626
630
627
631
pre {
628
- background : # efefef ;
632
+ background : # f7f7f9 ;
629
633
color : rgba (0 , 0 , 0 , 0.8 );
630
634
display : block;
631
635
font-family : Menlo, Monaco, Consolas, "Courier New" , monospace;
@@ -647,9 +651,11 @@ code {
647
651
word-wrap : break-word; }
648
652
649
653
a {
650
- color : # 2196f3 ; }
654
+ color : # 007bff ;
655
+ text-decoration : none;
656
+ background-color : transparent; }
651
657
a : hover , a : focus {
652
- color : # 2196f3 ;
658
+ color : # 0062cc ;
653
659
text-decoration : underline; }
654
660
655
661
dl {
665
671
vertical-align : baseline; }
666
672
667
673
blockquote {
668
- border-left : 2px solid # 2196f3 ;
674
+ border-left : 2px solid rgba ( 0 , 0 , 0 , 0.8 ) ;
669
675
font-family : Georgia, Times, "Times New Roman" , serif;
670
676
font-style : italic;
671
677
margin : 16px 0 ;
@@ -704,14 +710,22 @@ input[type="week"],
704
710
input [type = "number" ],
705
711
input [type = "search" ],
706
712
input [type = "tel" ],
707
- select {
713
+ select ,
714
+ textarea {
708
715
background : # fff ;
716
+ background-clip : padding-box;
709
717
border : 1px solid rgba (0 , 0 , 0 , 0.12 );
710
718
border-radius : 4px ;
711
719
color : rgba (0 , 0 , 0 , 0.8 );
712
- display : inline-block;
713
- padding : 4px ;
714
- vertical-align : middle; }
720
+ display : block;
721
+ width : 100% ;
722
+ padding : 8px 16px ;
723
+ line-height : 1.5 ;
724
+ -webkit-transition : border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
725
+ transition : border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
726
+ transition : border-color .15s ease-in-out, box-shadow .15s ease-in-out;
727
+ transition : border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
728
+ font-family : -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, "Helvetica Neue" , Arial, sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" ; }
715
729
716
730
input [type = "color" ] {
717
731
background : # fff ;
@@ -722,11 +736,19 @@ input[type="color"] {
722
736
723
737
input : not ([type ]) {
724
738
-webkit-appearance : none;
739
+ background : # fff ;
725
740
background-clip : padding-box;
726
741
border : 1px solid rgba (0 , 0 , 0 , 0.12 );
727
742
border-radius : 4px ;
728
- display : inline-block;
729
- padding : 8px ;
743
+ color : rgba (0 , 0 , 0 , 0.8 );
744
+ display : block;
745
+ width : 100% ;
746
+ padding : 8px 16px ;
747
+ line-height : 1.5 ;
748
+ -webkit-transition : border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
749
+ transition : border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
750
+ transition : border-color .15s ease-in-out, box-shadow .15s ease-in-out;
751
+ transition : border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
730
752
text-align : left; }
731
753
732
754
input [type = "text" ]: focus ,
@@ -745,10 +767,18 @@ input[type="tel"]:focus,
745
767
input [type = "color" ]: focus ,
746
768
select : focus ,
747
769
textarea : focus {
748
- border-color : # 2196f3 ; }
770
+ background-color : # fff ;
771
+ border-color : # 80bdff ;
772
+ outline : 0 ;
773
+ -webkit-box-shadow : 0 0 0 0.2rem rgba (0 , 123 , 255 , 0.25 );
774
+ box-shadow : 0 0 0 0.2rem rgba (0 , 123 , 255 , 0.25 ); }
749
775
750
776
input : not ([type ]): focus {
751
- border-color : # 2196f3 ; }
777
+ background-color : # fff ;
778
+ border-color : # 80bdff ;
779
+ outline : 0 ;
780
+ -webkit-box-shadow : 0 0 0 0.2rem rgba (0 , 123 , 255 , 0.25 );
781
+ box-shadow : 0 0 0 0.2rem rgba (0 , 123 , 255 , 0.25 ); }
752
782
753
783
input [type = "file" ]: focus ,
754
784
input [type = "radio" ]: focus ,
@@ -773,12 +803,14 @@ select[disabled],
773
803
textarea [disabled ] {
774
804
background-color : rgba (0 , 0 , 0 , 0.12 );
775
805
color : rgba (0 , 0 , 0 , 0.54 );
776
- cursor : not-allowed; }
806
+ cursor : not-allowed;
807
+ opacity : 1 ; }
777
808
778
809
input : not ([type ])[disabled ] {
779
810
background-color : rgba (0 , 0 , 0 , 0.12 );
780
811
color : rgba (0 , 0 , 0 , 0.54 );
781
- cursor : not-allowed; }
812
+ cursor : not-allowed;
813
+ opacity : 1 ; }
782
814
783
815
input [readonly ],
784
816
select [readonly ],
@@ -802,10 +834,15 @@ select {
802
834
border : 1px solid rgba (0 , 0 , 0 , 0.12 );
803
835
vertical-align : sub; }
804
836
837
+ select : not ([size ]): not ([multiple ]) {
838
+ height : -webkit-calc (2.25rem + 2px );
839
+ height : calc (2.25rem + 2px ); }
840
+
805
841
select [multiple ] {
806
842
height : auto; }
807
843
808
844
label {
845
+ display : inline-block;
809
846
line-height : 2 ; }
810
847
811
848
fieldset {
@@ -822,30 +859,43 @@ legend {
822
859
width : 100% ; }
823
860
824
861
textarea {
825
- background : # fff ;
826
- border : 1px solid rgba (0 , 0 , 0 , 0.12 );
827
- border-radius : 4px ;
828
- display : block;
829
- margin-bottom : 8px ;
830
- max-width : 100% ;
831
- padding : 8px ;
832
- vertical-align : middle; }
862
+ overflow : auto;
863
+ resize : vertical; }
864
+
865
+ input [type = checkbox ],
866
+ input [type = radio ] {
867
+ -webkit-box-sizing : border-box;
868
+ box-sizing : border-box;
869
+ padding : 0 ;
870
+ position : absolute;
871
+ margin-top : .25rem ;
872
+ margin-left : -1.25rem ; }
833
873
834
874
input [type = submit ],
835
875
input [type = reset ],
836
876
input [type = button ],
837
877
button {
838
- background : # 2196f3 ;
839
- border : 1 px solid rgba ( 0 , 0 , 0 , 0.12 ) ;
878
+ background-color : # 007bff ;
879
+ border : # 007bff ;
840
880
border-radius : 4px ;
841
881
color : # fff ;
842
- cursor : pointer;
843
- display : inline-block;
844
- margin : 0 ;
845
882
padding : 8px 16px ;
883
+ display : inline-block;
884
+ font-weight : 400 ;
846
885
text-align : center;
886
+ white-space : nowrap;
847
887
vertical-align : middle;
848
- white-space : nowrap; }
888
+ -webkit-user-select : none;
889
+ -moz-user-select : none;
890
+ -ms-user-select : none;
891
+ user-select : none;
892
+ border : 1px solid transparent;
893
+ font-size : 1rem ;
894
+ line-height : 1.5 ;
895
+ -webkit-transition : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
896
+ transition : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
897
+ transition : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
898
+ transition : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; }
849
899
850
900
input [type = submit ]::-moz-focus-inner ,
851
901
input [type = reset ]::-moz-focus-inner ,
@@ -857,36 +907,35 @@ input[type=submit]:hover,
857
907
input [type = reset ]: hover ,
858
908
input [type = button ]: hover ,
859
909
button : hover {
860
- background : # 0c7cd5 ;
861
- border-color : rgba (0 , 0 , 0 , 0.54 ); }
862
-
863
- input [type = submit ]: active ,
864
- input [type = reset ]: active ,
865
- input [type = button ]: active ,
866
- button : active {
867
- background : # 0c7cd5 ;
868
- border-color : rgba (0 , 0 , 0 , 0.54 );
869
- -webkit-box-shadow : inset 0 0 4px 0 rgba (0 , 0 , 0 , 0.2 );
870
- box-shadow : inset 0 0 4px 0 rgba (0 , 0 , 0 , 0.2 );
871
- outline-offset : -2px ; }
910
+ background-color : # 0069d9 ;
911
+ border-color : # 0062cc ;
912
+ color : # fff ; }
913
+
914
+ input [type = submit ]: not (: disabled ): active ,
915
+ input [type = reset ]: not (: disabled ): active ,
916
+ input [type = button ]: not (: disabled ): active ,
917
+ button : not (: disabled ): active {
918
+ background-color : # 0062cc ;
919
+ border-color : # 005cbf ;
920
+ color : # fff ; }
872
921
873
922
input [type = submit ]: focus ,
874
923
input [type = reset ]: focus ,
875
924
input [type = button ]: focus ,
876
925
button : focus {
877
- background : # 0c7cd5 ;
878
- border-color : rgba (0 , 0 , 0 , 0.54 );
879
- -webkit-box-shadow : inset 0 0 4px 0 rgba (0 , 0 , 0 , 0.2 );
880
- box-shadow : inset 0 0 4px 0 rgba (0 , 0 , 0 , 0.2 );
881
- outline : 0 ; }
926
+ outline : 0 ;
927
+ -webkit-box-shadow : 0 0 0 0.2rem rgba (0 , 123 , 255 , 0.5 );
928
+ box-shadow : 0 0 0 0.2rem rgba (0 , 123 , 255 , 0.5 ); }
882
929
883
930
input [type = submit ]: disabled ,
884
931
input [type = reset ]: disabled ,
885
932
input [type = button ]: disabled ,
886
933
button : disabled {
887
- background : rgba (0 , 0 , 0 , 0.12 );
888
- color : rgba (0 , 0 , 0 , 0.38 );
889
- cursor : not-allowed; }
934
+ opacity : .65 ;
935
+ cursor : not-allowed;
936
+ background-color : # 007bff ;
937
+ border-color : # 007bff ;
938
+ color : # fff ; }
890
939
891
940
table {
892
941
border-top : 1px solid rgba (0 , 0 , 0 , 0.12 );
0 commit comments