styleguide/lib/buttons/demo.jade at notifications · fluidcss/styleguide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
.row
  .col-sm-3
    p
      .btn.btn-default Default
    p
      .btn.btn-default.btn-sm Default
    p
      .btn.btn-default.btn-md Default
    p
      .btn.btn-default.btn-lg Default

    p
      .btn.btn-default
        span.btn-icon.btn-icon-custom
          img(src="https://cloudup.com/cOp71nLDoFX+" alt="sample")
        | Icon as img tag

    p
      .btn.btn-default
        span.btn-icon.btn-icon-custom
          svg(viewbox='0 0 121 119', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
            g#Page-1(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd')
              g#GitHub-Mark(transform='translate(-290.000000, -282.000000)', fill='#000000')
                path#Fill-51(d='M350.609,282.446 C317.262,282.446 290.221,309.481 290.221,342.833 C290.221,369.514 307.524,392.15 331.518,400.135 C334.536,400.694 335.644,398.825 335.644,397.23 C335.644,395.79 335.588,391.033 335.562,385.987 C318.762,389.64 315.217,378.862 315.217,378.862 C312.47,371.882 308.512,370.026 308.512,370.026 C303.033,366.278 308.925,366.355 308.925,366.355 C314.989,366.78 318.182,372.578 318.182,372.578 C323.568,381.81 332.309,379.141 335.755,377.598 C336.297,373.696 337.862,371.03 339.589,369.523 C326.176,367.996 312.076,362.818 312.076,339.679 C312.076,333.086 314.435,327.699 318.298,323.47 C317.671,321.948 315.604,315.807 318.883,307.489 C318.883,307.489 323.954,305.866 335.494,313.679 C340.311,312.341 345.477,311.67 350.609,311.647 C355.741,311.67 360.911,312.341 365.737,313.679 C377.263,305.866 382.327,307.489 382.327,307.489 C385.614,315.807 383.546,321.948 382.919,323.47 C386.791,327.699 389.134,333.086 389.134,339.679 C389.134,362.873 375.007,367.98 361.56,369.475 C363.726,371.349 365.656,375.024 365.656,380.658 C365.656,388.737 365.586,395.24 365.586,397.23 C365.586,398.837 366.673,400.72 369.734,400.127 C393.715,392.133 410.996,369.505 410.996,342.833 C410.996,309.481 383.959,282.446 350.609,282.446')
        | Icon as svg

    p
      .btn.btn-default
        span.btn-icon.icon-budicon-493
        | Default with icon

  .col-sm-3
    p
      .btn.btn-success Success
    p
      .btn.btn-success.btn-sm Success
    p
      .btn.btn-success.btn-md Success
    p
      .btn.btn-success.btn-lg Success
    p
      .btn.btn-success
        span.btn-icon.icon-budicon-120
        | Success with icon

  .col-sm-3
    p
      .btn.btn-primary Primary
    p
      .btn.btn-primary.btn-sm Primary
    p
      .btn.btn-primary.btn-md Primary
    p
      .btn.btn-primary.btn-lg Primary
    p
      .btn.btn-primary
        span.btn-icon.icon-budicon-120
        | Primary with icon

  .col-sm-3
    p
      .btn.btn-warning Warning
    p
      .btn.btn-warning.btn-sm Warning
    p
      .btn.btn-warning.btn-md Warning
    p
      .btn.btn-warning.btn-lg Warning
    p
      .btn.btn-warning
        span.btn-icon.icon-budicon-493
        | Warning with icon


.row
  .col-sm-3
    p
      .btn.btn-danger Warning
    p
      .btn.btn-danger.btn-sm Warning
    p
      .btn.btn-danger.btn-md Warning
    p
      .btn.btn-danger.btn-lg
        span.btn-icon.icon-budicon-493
        | Warning
    p
      .btn.btn-danger
        span.btn-icon.icon-budicon-493
        | Warning with icon

  .col-sm-3
    p
      .btn.btn-transparent Transparent
    p
      .btn.btn-transparent.btn-sm Transparent
    p
      .btn.btn-transparent.btn-md Transparent
    p
      .btn.btn-transparent.btn-lg
        span.btn-icon.icon-budicon-493
        | Transparent
    p
      .btn.btn-transparent
        span.btn-icon.icon-budicon-493
        | Transparent with icon