UNPKG

tablefilter/static/style/filters.styl

Version:

3.73 kBtext/stylusView Raw

1/**
* Filters' default style
*/
4
5@import 'config'
6@import 'mixins/arrow'
7@import 'mixins/box-shadow'
8
9// Filters row style
fltrow
  height                      1em
  background-color            $filter-row-bg-color
13
  td
      border-bottom:          1px solid #CCC !important
      border-top:             1px solid #f4f4f4
      border-left             1px solid #CCC
      border-right            1px solid #f4f4f4
      padding                 0.2em !important
      &:last-child
          border-right        1px solid #CCC
22
23// button appearance
btnflt
  height                      $filter-height
  font-family                 inherit
  font-size                   inherit
  vertical-align              middle
  margin                      0 2px 0 2px
  padding                     0 1px 0 1px
31
32// button appearance when displayIcons is true
btnflt_icon
  font-family                 inherit
  font-size                   inherit
  width                       $min-width
  height                      $filter-height
  cursor                      pointer !important
  border                      0 !important
  vertical-align              middle
  background                  transparent url(themes/btn_filter.png) center center no-repeat !important
42
43// input and select filter type
flt
  font-family                 inherit
  font-size                   inherit
  display                     block
  color                       $filter-font-color
  background-color            $filter-bg-color
  border                      1px inset $filter-border-color
  margin                      0
  padding                     0 0 0 0.2em
  width                       100%
  height                      $filter-height
  vertical-align              middle
  border-radius               2px
  box-sizing                  border-box
58
  &:focus
      border-color            #66AFE9
      outline                 0 none
      box-shadow              0 1px 1px rgba(0, 0, 0, 0.075) inset,
                              0 0 8px rgba(102, 175, 233, 0.6)
64
65// multiple select type filter
66select.flt_multi
  font-family                 inherit
  font-size                   inherit
  color                       $filter-font-color
  background-color            $filter-bg-color
  border                      1px solid $filter-border-color
  margin                      0
  padding                     0.2em
  width                       100%
  height                      90px
  vertical-align              middle
  box-sizing                  border-box
78
  option
      padding-top             5px
      padding-bottom          5px
82
83// tiny input type filter
flt_s
  @extend                     .flt
  width                       60%
  box-sizing                  initial
  display                     initial
89
90// single filter type
single_flt
  @extend                     .flt
  width                       70%
  box-sizing                  initial
  display                     initial
96
97// pop-up filters elements
98div.popUpFilter
  arrow(top, 10px white, 2px $th-bg-color)
  box-shadow(3px 3px 2px #888)
  margin                      30px auto 0 0
  position                    absolute
  display                     none
  width                       100px
  background-color            $th-bg-color
  border                      1px solid $filter-row-bg-color
  padding                     0
108
109// pop-up container
popUpPlaceholder
  position                    relative

1	`/**`
2	`* Filters' default style`
3	`*/`
4
5	`@import 'config'`
6	`@import 'mixins/arrow'`
7	`@import 'mixins/box-shadow'`
8
9	`// Filters row style`
10	`.fltrow`
11	`height 1em`
12	`background-color $filter-row-bg-color`
13
14	`td`
15	`border-bottom: 1px solid #CCC !important`
16	`border-top: 1px solid #f4f4f4`
17	`border-left 1px solid #CCC`
18	`border-right 1px solid #f4f4f4`
19	`padding 0.2em !important`
20	`&:last-child`
21	`border-right 1px solid #CCC`
22
23	`// button appearance`
24	`.btnflt`
25	`height $filter-height`
26	`font-family inherit`
27	`font-size inherit`
28	`vertical-align middle`
29	`margin 0 2px 0 2px`
30	`padding 0 1px 0 1px`
31
32	`// button appearance when displayIcons is true`
33	`.btnflt_icon`
34	`font-family inherit`
35	`font-size inherit`
36	`width $min-width`
37	`height $filter-height`
38	`cursor pointer !important`
39	`border 0 !important`
40	`vertical-align middle`
41	`background transparent url(themes/btn_filter.png) center center no-repeat !important`
42
43	`// input and select filter type`
44	`.flt`
45	`font-family inherit`
46	`font-size inherit`
47	`display block`
48	`color $filter-font-color`
49	`background-color $filter-bg-color`
50	`border 1px inset $filter-border-color`
51	`margin 0`
52	`padding 0 0 0 0.2em`
53	`width 100%`
54	`height $filter-height`
55	`vertical-align middle`
56	`border-radius 2px`
57	`box-sizing border-box`
58
59	`&:focus`
60	`border-color #66AFE9`
61	`outline 0 none`
62	`box-shadow 0 1px 1px rgba(0, 0, 0, 0.075) inset,`
63	`0 0 8px rgba(102, 175, 233, 0.6)`
64
65	`// multiple select type filter`
66	`select.flt_multi`
67	`font-family inherit`
68	`font-size inherit`
69	`color $filter-font-color`
70	`background-color $filter-bg-color`
71	`border 1px solid $filter-border-color`
72	`margin 0`
73	`padding 0.2em`
74	`width 100%`
75	`height 90px`
76	`vertical-align middle`
77	`box-sizing border-box`
78
79	`option`
80	`padding-top 5px`
81	`padding-bottom 5px`
82
83	`// tiny input type filter`
84	`.flt_s`
85	`@extend .flt`
86	`width 60%`
87	`box-sizing initial`
88	`display initial`
89
90	`// single filter type`
91	`.single_flt`
92	`@extend .flt`
93	`width 70%`
94	`box-sizing initial`
95	`display initial`
96
97	`// pop-up filters elements`
98	`div.popUpFilter`
99	`arrow(top, 10px white, 2px $th-bg-color)`
100	`box-shadow(3px 3px 2px #888)`
101	`margin 30px auto 0 0`
102	`position absolute`
103	`display none`
104	`width 100px`
105	`background-color $th-bg-color`
106	`border 1px solid $filter-row-bg-color`
107	`padding 0`
108
109	`// pop-up container`
110	`.popUpPlaceholder`
111	`position relative`