markdown-ui 0.1.8 → 0.1.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -226,9 +226,7 @@
226
226
  > > > Left Aligned Ten Wide Column:
227
227
  > > > ##### Markdown Syntax
228
228
  > > > > Inverted Very Padded Segment:
229
- > > > > ```
230
- > > > > __Icon Button|Icon:Cloud__
231
- > > > > ```
229
+ > > > > ``` __Icon Button|Icon:Cloud__ ```
232
230
  > >
233
231
  > > <!-- -->
234
232
  > >
@@ -619,3 +617,511 @@
619
617
  > > > > ``` __Basic Loading Button|Loading__ ``` <br />
620
618
  > > > > ``` __Primary Loading Button|Loading__ ``` <br />
621
619
  > > > > ``` __Secondary Loading Button|Loading__ ```
620
+ >
621
+ > <!-- -->
622
+ >
623
+ > > Basic Segment:
624
+ > > ## Variations:Dividing Left Aligned:variations
625
+ >
626
+ > <!-- -->
627
+ >
628
+ > > Basic Segment:
629
+ > > #### Social::social
630
+ > > "A button can be formatted to link to a social website"
631
+ >
632
+ > <!-- -->
633
+ >
634
+ > > Divided Segment Grid:
635
+ > > > Attached Segment:
636
+ > > > > Top Attached Label:
637
+ > > > > Social
638
+ > >
639
+ > > <!-- -->
640
+ > >
641
+ > > > Center Aligned Six Wide Column:
642
+ > > > ##### Preview
643
+ > > > __Facebook Button|Icon:Facebook, Facebook__
644
+ > > > __Twitter Button|Icon:Twitter, Twitter__
645
+ > > > __Google Plus Button|Icon:Google Plus, Google Plus__
646
+ > > > __VK Button|Icon:VK, VK__
647
+ > > > __LinkedIn Button|Icon:LinkedIn, LinkedIn__
648
+ > > > __Instagram Button|Icon:Instagram, Instagram__
649
+ > > > __YouTube Button|Icon:YouTube, YouTube__
650
+ > >
651
+ > > <!-- -->
652
+ > >
653
+ > > > Left Aligned Ten Wide Column:
654
+ > > > ##### Markdown Syntax
655
+ > > > > Inverted Very Padded Segment:
656
+ > > > > ``` __Facebook Button|Icon:Facebook, Facebook__ ``` <br />
657
+ > > > > ``` __Twitter Button|Icon:Twitter, Twitter__ ``` <br />
658
+ > > > > ``` __Google Plus Button|Icon:Google Plus, Google Plus__ ``` <br />
659
+ > > > > ``` __VK Button|Icon:VK, VK__ ``` <br />
660
+ > > > > ``` __LinkedIn Button|Icon:LinkedIn, LinkedIn__ ``` <br />
661
+ > > > > ``` __Instagram Button|Icon:Instagram, Instagram__ ``` <br />
662
+ > > > > ``` __YouTube Button|Icon:YouTube, YouTube__ ``` <br />
663
+ >
664
+ > <!-- -->
665
+ >
666
+ > > Basic Segment:
667
+ > > #### Size::size
668
+ > > "A button can have different sizes"
669
+ >
670
+ > <!-- -->
671
+ >
672
+ > > Divided Segment Grid:
673
+ > > > Attached Segment:
674
+ > > > > Top Attached Label:
675
+ > > > > Size
676
+ > >
677
+ > > <!-- -->
678
+ > >
679
+ > > > Center Aligned Six Wide Column:
680
+ > > > ##### Preview
681
+ > > > __Mini Button|Mini__
682
+ > > > __Tiny Button|Tiny__
683
+ > > > __Small Button|Small__
684
+ > > > __Medium Button|Medium__
685
+ > > > __Large Button|Large__
686
+ > > > __Big Button|Big__
687
+ > > > __Huge Button|Huge__
688
+ > > > __Massive Button|Massive__
689
+ > >
690
+ > > <!-- -->
691
+ > >
692
+ > > > Left Aligned Ten Wide Column:
693
+ > > > ##### Markdown Syntax
694
+ > > > > Inverted Very Padded Segment:
695
+ > > > > ``` __Mini Button|Mini__ ``` <br />
696
+ > > > > ``` __Tiny Button|Tiny__ ``` <br />
697
+ > > > > ``` __Small Button|Small__ ``` <br />
698
+ > > > > ``` __Medium Button|Medium__ ``` <br />
699
+ > > > > ``` __Large Button|Large__ ``` <br />
700
+ > > > > ``` __Big Button|Big__ ``` <br />
701
+ > > > > ``` __Huge Button|Huge__ ``` <br />
702
+ > > > > ``` __Massive Button|Massive__ ```
703
+ >
704
+ > <!-- -->
705
+ >
706
+ > > Basic Segment:
707
+ > > #### Colored::colored
708
+ > > "A button can have different colors"
709
+ >
710
+ > <!-- -->
711
+ >
712
+ > > Divided Segment Grid:
713
+ > > > Attached Segment:
714
+ > > > > Top Attached Label:
715
+ > > > > Colored
716
+ > >
717
+ > > <!-- -->
718
+ > >
719
+ > > > Center Aligned Six Wide Column:
720
+ > > > ##### Preview
721
+ > > > __Red Button|Red__
722
+ > > > __Orange Button|Orange__
723
+ > > > __Yellow Button|Yellow__
724
+ > > > __Olive Button|Olive__
725
+ > > > __Green Button|Green__
726
+ > > > __Teal Button|Teal__
727
+ > > > __Blue Button|Blue__
728
+ > > > __Violet Button|Violet__
729
+ > > > __Purple Button|Purple__
730
+ > > > __Pink Button|Pink__
731
+ > > > __Brown Button|Brown__
732
+ > > > __Grey Button|Grey__
733
+ > > > __Black Button|Black__
734
+ > >
735
+ > > <!-- -->
736
+ > >
737
+ > > > Left Aligned Ten Wide Column:
738
+ > > > ##### Markdown Syntax
739
+ > > > > Inverted Very Padded Segment:
740
+ > > > > ``` __Red Button|Red__ ``` <br />
741
+ > > > > ``` __Orange Button|Orange__ ``` <br />
742
+ > > > > ``` __Yellow Button|Yellow__ ``` <br />
743
+ > > > > ``` __Olive Button|Olive__ ``` <br />
744
+ > > > > ``` __Green Button|Green__ ``` <br />
745
+ > > > > ``` __Teal Button|Teal__ ``` <br />
746
+ > > > > ``` __Blue Button|Blue__ ``` <br />
747
+ > > > > ``` __Violet Button|Violet__ ``` <br />
748
+ > > > > ``` __Purple Button|Purple__ ``` <br />
749
+ > > > > ``` __Pink Button|Pink__ ``` <br />
750
+ > > > > ``` __Brown Button|Brown__ ``` <br />
751
+ > > > > ``` __Grey Button|Grey__ ``` <br />
752
+ > > > > ``` __Black Button|Black__ ```
753
+ >
754
+ > <!-- -->
755
+ >
756
+ > > Basic Segment:
757
+ > > #### Compact::compact
758
+ > > "A button can reduce its padding to fit into tighter spaces"
759
+ >
760
+ > <!-- -->
761
+ >
762
+ > > Divided Segment Grid:
763
+ > > > Attached Segment:
764
+ > > > > Top Attached Label:
765
+ > > > > Compact
766
+ > >
767
+ > > <!-- -->
768
+ > >
769
+ > > > Center Aligned Six Wide Column:
770
+ > > > ##### Preview
771
+ > > > __Compact Button|Hold__
772
+ > > > __Compact Icon Button|Icon:Pause__
773
+ > > > __Compact Labeled Icon Button|Icon:Pause, Pause__
774
+ > >
775
+ > > <!-- -->
776
+ > >
777
+ > > > Left Aligned Ten Wide Column:
778
+ > > > ##### Markdown Syntax
779
+ > > > > Inverted Very Padded Segment:
780
+ > > > > ``` __Compact Button|Hold__ ``` <br />
781
+ > > > > ``` __Compact Icon Button|Icon:Pause__ ``` <br />
782
+ > > > > ``` __Compact Labeled Icon Button|Icon:Pause, Pause__ ```
783
+ >
784
+ > <!-- -->
785
+ >
786
+ > > Basic Segment:
787
+ > > #### Positive::positive
788
+ > > "A button can hint towards a positive consequence"
789
+ >
790
+ > <!-- -->
791
+ >
792
+ > > Divided Segment Grid:
793
+ > > > Attached Segment:
794
+ > > > > Top Attached Label:
795
+ > > > > Positive
796
+ > >
797
+ > > <!-- -->
798
+ > >
799
+ > > > Center Aligned Six Wide Column:
800
+ > > > ##### Preview
801
+ > > > __Positive Button|Positive Button__
802
+ > > > __Negative Button|Negative Button__
803
+ > >
804
+ > > <!-- -->
805
+ > >
806
+ > > > Left Aligned Ten Wide Column:
807
+ > > > ##### Markdown Syntax
808
+ > > > > Inverted Very Padded Segment:
809
+ > > > > ``` __Positive Button|Positive Button__ ``` <br />
810
+ > > > > ``` __Negative Button|Negative Button__ ``` <br />
811
+ >
812
+ > <!-- -->
813
+ >
814
+ > > Basic Segment:
815
+ > > #### Negative::negative
816
+ > > "A button can hint towards a negative consequence"
817
+ >
818
+ > <!-- -->
819
+ >
820
+ > > Divided Segment Grid:
821
+ > > > Attached Segment:
822
+ > > > > Top Attached Label:
823
+ > > > > Negative
824
+ > >
825
+ > > <!-- -->
826
+ > >
827
+ > > > Center Aligned Six Wide Column:
828
+ > > > ##### Preview
829
+ > > > __Negative Button|Negative Button__
830
+ > >
831
+ > > <!-- -->
832
+ > >
833
+ > > > Left Aligned Ten Wide Column:
834
+ > > > ##### Markdown Syntax
835
+ > > > > Inverted Very Padded Segment:
836
+ > > > > ``` __Negative Button|Negative Button__ ``` <br />
837
+ >
838
+ > <!-- -->
839
+ >
840
+ > > Basic Segment:
841
+ > > #### Fluid::fluid
842
+ > > "A button can take the width of its container"
843
+ >
844
+ > <!-- -->
845
+ >
846
+ > > Divided Segment Grid:
847
+ > > > Attached Segment:
848
+ > > > > Top Attached Label:
849
+ > > > > Fluid
850
+ > >
851
+ > > <!-- -->
852
+ > >
853
+ > > > Center Aligned Six Wide Column:
854
+ > > > ##### Preview
855
+ > > > __Fluid Button|Fluid Button__
856
+ > >
857
+ > > <!-- -->
858
+ > >
859
+ > > > Left Aligned Ten Wide Column:
860
+ > > > ##### Markdown Syntax
861
+ > > > > Inverted Very Padded Segment:
862
+ > > > > ``` __Fluid Button|Fluid Button__ ``` <br />
863
+ >
864
+ > <!-- -->
865
+ >
866
+ > > Basic Segment:
867
+ > > #### Circular::circular
868
+ > > "A button can be circular"
869
+ >
870
+ > <!-- -->
871
+ >
872
+ > > Divided Segment Grid:
873
+ > > > Attached Segment:
874
+ > > > > Top Attached Label:
875
+ > > > > Circular
876
+ > >
877
+ > > <!-- -->
878
+ > >
879
+ > > > Center Aligned Six Wide Column:
880
+ > > > ##### Preview
881
+ > > > __Circular Icon Button|Icon:Settings__
882
+ > >
883
+ > > <!-- -->
884
+ > >
885
+ > > > Left Aligned Ten Wide Column:
886
+ > > > ##### Markdown Syntax
887
+ > > > > Inverted Very Padded Segment:
888
+ > > > > ``` __Circular Icon Button|Icon:Settings__ ``` <br />
889
+ >
890
+ > <!-- -->
891
+ >
892
+ > > Basic Segment:
893
+ > > #### Vertically Attached::vertically-attached
894
+ > > "A button can be attached to the top or bottom of other content"
895
+ >
896
+ > <!-- -->
897
+ >
898
+ > > Divided Segment Grid:
899
+ > > > Attached Segment:
900
+ > > > > Top Attached Label:
901
+ > > > > Vertically Attached
902
+ > >
903
+ > > <!-- -->
904
+ > >
905
+ > > > Center Aligned Six Wide Column:
906
+ > > > ##### Preview
907
+ > > > __Top Attached Focusable Button|Top__
908
+ > > >
909
+ > > > > Attached Segment:
910
+ > > > > " "
911
+ > > >
912
+ > > > __Bottom Attached Focusable Button|Bottom__
913
+ > >
914
+ > > <!-- -->
915
+ > >
916
+ > > > Left Aligned Ten Wide Column:
917
+ > > > ##### Markdown Syntax
918
+ > > > > Inverted Very Padded Segment:
919
+ > > > > ``` __Top Attached Focusable Button|Top__ ``` <br />
920
+ > > > > ``` ``` <br />
921
+ > > > > ``` > Attached Segment: ``` <br />
922
+ > > > > ``` > " " ``` <br />
923
+ > > > > ``` ``` <br />
924
+ > > > > ``` __Bottom Attached Focusable Button|Bottom__ ``` <br />
925
+ > >
926
+ > > <!-- -->
927
+ > >
928
+ > > > Center Aligned Six Wide Column:
929
+ > > > ##### Preview
930
+ > > > > Two Top Attached Buttons:
931
+ > > > > __Button|One__
932
+ > > > > __Button|Two__
933
+ > > >
934
+ > > > <!-- -->
935
+ > > >
936
+ > > > > Attached Segment:
937
+ > > > > " "
938
+ > > >
939
+ > > > <!-- -->
940
+ > > >
941
+ > > > > Two Bottom Attached Buttons:
942
+ > > > > __Button|One__
943
+ > > > > __Button|Two__
944
+ > >
945
+ > > <!-- -->
946
+ > >
947
+ > > > Left Aligned Ten Wide Column:
948
+ > > > ##### Markdown Syntax
949
+ > > > > Inverted Very Padded Segment:
950
+ > > > > ```> Two Top Attached Buttons:``` <br />
951
+ > > > > ```> __Button|One__ ``` <br />
952
+ > > > > ```> __Button|Two__ ``` <br />
953
+ > > > > ``` ``` <br />
954
+ > > > > ``` <!-- --> ``` <br />
955
+ > > > > ``` ``` <br />
956
+ > > > > ```> Two Bottom Attached Buttons:``` <br />
957
+ > > > > ```> __Button|One__ ``` <br />
958
+ > > > > ```> __Button|Two__ ``` <br />
959
+ > >
960
+ > > <!-- -->
961
+ > >
962
+ >
963
+ > <!-- -->
964
+ >
965
+ > > Basic Segment:
966
+ > > #### Horizontally Attached::horizontally-attached
967
+ > > "A button can be attached to the left or right of other content"
968
+ >
969
+ > <!-- -->
970
+ >
971
+ > > Divided Segment Grid:
972
+ > > > Attached Segment:
973
+ > > > > Top Attached Label:
974
+ > > > > Horizontally Attached
975
+ > >
976
+ > > <!-- -->
977
+ > >
978
+ > > > Center Aligned Six Wide Column:
979
+ > > > ##### Preview
980
+ > > > > Buttons:
981
+ > > > > __Left Attached Button|Left__
982
+ > > > > __Right Attached Button|Right__
983
+ > >
984
+ > > <!-- -->
985
+ > >
986
+ > > > Left Aligned Ten Wide Column:
987
+ > > > ##### Markdown Syntax
988
+ > > > > Inverted Very Padded Segment:
989
+ > > > > ``` > Buttons: ``` <br />
990
+ > > > > ``` > __Left Attached Button|Left__ ``` <br />
991
+ > > > > ``` > __Right Attached Button|Right__ ```
992
+ >
993
+ > <!-- -->
994
+ >
995
+ > > Basic Segment:
996
+ > > ## Group Variations:Dividing Left Aligned:group-variations
997
+ >
998
+ > <!-- -->
999
+ >
1000
+ > > Basic Segment:
1001
+ > > #### Vertical Buttons::vertical-buttons
1002
+ > > "Groups can be formatted to appear vertically"
1003
+ >
1004
+ > <!-- -->
1005
+ >
1006
+ > > Divided Segment Grid:
1007
+ > > > Attached Segment:
1008
+ > > > > Top Attached Label:
1009
+ > > > > Vertical Buttons
1010
+ > >
1011
+ > > <!-- -->
1012
+ > >
1013
+ > > > Center Aligned Six Wide Column:
1014
+ > > > ##### Preview
1015
+ > > > > Vertical Buttons:
1016
+ > > > > __Button|Feed__
1017
+ > > > > __Button|Messages__
1018
+ > > > > __Button|Events__
1019
+ > > > > __Button|Photos__
1020
+ > >
1021
+ > > <!-- -->
1022
+ > >
1023
+ > > > Left Aligned Ten Wide Column:
1024
+ > > > ##### Markdown Syntax
1025
+ > > > > Inverted Very Padded Segment:
1026
+ > > > > ``` > Vertical Buttons: ``` <br />
1027
+ > > > > ``` > __Button|Feed__ ``` <br />
1028
+ > > > > ``` > __Button|Messages__ ``` <br />
1029
+ > > > > ``` > __Button|Events__ ``` <br />
1030
+ > > > > ``` > __Button|Photos__ ```
1031
+
1032
+ >
1033
+ > <!-- -->
1034
+ >
1035
+ > > Basic Segment:
1036
+ > > #### Icon Buttons::icon-buttons
1037
+ > > "Groups can be formatted as icons"
1038
+ >
1039
+ > <!-- -->
1040
+ >
1041
+ > > Divided Segment Grid:
1042
+ > > > Attached Segment:
1043
+ > > > > Top Attached Label:
1044
+ > > > > Icon Buttons
1045
+ > >
1046
+ > > <!-- -->
1047
+ > >
1048
+ > > > Center Aligned Six Wide Column:
1049
+ > > > ##### Preview
1050
+ > > > > Icon Buttons:
1051
+ > > > > __Button|Icon:Play__
1052
+ > > > > __Button|Icon:Pause__
1053
+ > > > > __Button|Icon:Shuffle__
1054
+ > >
1055
+ > > <!-- -->
1056
+ > >
1057
+ > > > Left Aligned Ten Wide Column:
1058
+ > > > ##### Markdown Syntax
1059
+ > > > > Inverted Very Padded Segment:
1060
+ > > > > ``` > Icon Buttons: ``` <br />
1061
+ > > > > ``` > __Button|Icon:Play__ ``` <br />
1062
+ > > > > ``` > __Button|Icon:Pause__ ``` <br />
1063
+ > > > > ``` > __Button|Icon:Shuffle__ ```
1064
+
1065
+ > <!-- -->
1066
+ >
1067
+ > > Basic Segment:
1068
+ > > #### Labeled Icon Buttons::labeled-icon-buttons
1069
+ > > "Groups can be formatted as labeled icons"
1070
+ >
1071
+ > <!-- -->
1072
+ >
1073
+ > > Divided Segment Grid:
1074
+ > > > Attached Segment:
1075
+ > > > > Top Attached Label:
1076
+ > > > > Labeled Icon Buttons
1077
+ > >
1078
+ > > <!-- -->
1079
+ > >
1080
+ > > > Center Aligned Six Wide Column:
1081
+ > > > ##### Preview
1082
+ > > > > Vertical Labeled Icon Buttons:
1083
+ > > > > __Button|Icon:Play, Play__
1084
+ > > > > __Button|Icon:Pause, Pause__
1085
+ > > > > __Button|Icon:Shuffle, Shuffle__
1086
+ > >
1087
+ > > <!-- -->
1088
+ > >
1089
+ > > > Left Aligned Ten Wide Column:
1090
+ > > > ##### Markdown Syntax
1091
+ > > > > Inverted Very Padded Segment:
1092
+ > > > > ``` > Vertical Labeled Icon Buttons: ``` <br />
1093
+ > > > > ``` > __Button|Icon:Play, Play__ ``` <br />
1094
+ > > > > ``` > __Button|Icon:Pause, Pause__ ``` <br />
1095
+ > > > > ``` > __Button|Icon:Shuffle, Shuffle__ ```
1096
+
1097
+ > <!-- -->
1098
+ >
1099
+ > > Basic Segment:
1100
+ > > #### Mixed Group::mixed-group
1101
+ > > "Groups can be formatted to use multiple button types together"
1102
+ >
1103
+ > <!-- -->
1104
+ >
1105
+ > > Divided Segment Grid:
1106
+ > > > Attached Segment:
1107
+ > > > > Top Attached Label:
1108
+ > > > > Mixed Group
1109
+ > >
1110
+ > > <!-- -->
1111
+ > >
1112
+ > > > Center Aligned Six Wide Column:
1113
+ > > > ##### Preview
1114
+ > > > > Buttons:
1115
+ > > > > __Labeled Icon Button|Icon:Left Chevron, Back__
1116
+ > > > > __Button|Icon:Stop, Stop__
1117
+ > > > > __Right Labeled Icon Button|Icon:Right Chevron, Forward__
1118
+ > >
1119
+ > > <!-- -->
1120
+ > >
1121
+ > > > Left Aligned Ten Wide Column:
1122
+ > > > ##### Markdown Syntax
1123
+ > > > > Inverted Very Padded Segment:
1124
+ > > > > ``` > Buttons: ``` <br />
1125
+ > > > > ``` > __Labeled Icon Button|Icon:Left Chevron, Back__ ``` <br />
1126
+ > > > > ``` > __Button|Icon:Stop, Stop__ ``` <br />
1127
+ > > > > ``` > __Right Labeled Icon Button|Icon:Right Chevron, Forward__ ```