summaryrefslogtreecommitdiff
path: root/gstudio/static/gstudio/css/src/slider.sass
blob: 7172745b9aba162ffdd1f958323e6568295de7c4 (plain)
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
@import base

$max_width: 630px
$number_of_items: 5

$slider_width: 400px
$slider_height: 250px
$slider_color: $link_color + #444444

$nav_padding: 3px
$info_padding: 5px

$tab_nav_width: $max_width - $slider_width
$tab_nav_height: $slider_height / $number_of_items - 1
$tab_nav_img_height: $tab_nav_height - $nav_padding * 2
$tab_nav_img_width: $tab_nav_height * $slider_width / $slider_height

#slider
  width: $slider_width
  padding-right: $tab_nav_width
  position: relative
  height: $slider_height
  overflow: hidden
  margin-bottom: 5px
  ul.ui-tabs-nav
    list-style: none
    padding: 0
    margin: 0
    top: 0
    left: $slider_width
    width: $tab_nav_width
    position: absolute
    overflow: hidden
    li
      a
        display: block
        height: $tab_nav_height
        border-bottom: 1px solid $box_color
        img
          float: left
          border: 0
          padding: $nav_padding
          width: $tab_nav_img_width
          height: $tab_nav_img_height
      a:hover
        text-decoration: none
        background: $box_color
      &.ui-tabs-selected
        a
          background: $slider_color
          color: white
  div.ui-tabs-panel
    position: relative
    width: $slider_width
    height: $slider_height
    .panel_info
      left: 0
      bottom: 0
      position: absolute
      height: 70px
      padding: $info_padding
      color: white
      background: url(../img/trans.png)
      width: $slider_width - $info_padding * 2
    a
      color: $slider_color
    h2
      margin: 0
      overflow: hidden
    img
      width: $slider_width
      height: $slider_height
  .ui-tabs-hide
    display: none