Commit eecbf11e39aa3031778c3339c124e8ff68b4cf85

Authored by Victor Costa
1 parent 8cc3285a

Fix circlepop location

app/views/box_organizer/index.html.erb
1   -<%= stylesheet_link_tag '/designs/themes/default/circlepop.css' %>
  1 +<%= stylesheet_link_tag 'circlepop.css' %>
2 2  
3 3 <h1><%= _('Editing sideboxes')%></h1>
4 4  
... ...
public/designs/themes/noosfero/circlepop.css
... ... @@ -1,118 +0,0 @@
1   -nav a {
2   - position: absolute;
3   - top: 215px;
4   - display: block;
5   - outline: none;
6   - text-align: left;
7   - z-index: 1000;
8   - -webkit-transform: translateY(-50%);
9   - transform: translateY(-50%);
10   -}
11   -
12   -nav a.prev {
13   - left: 0;
14   -}
15   -
16   -nav a.next {
17   - right: 0;
18   -}
19   -
20   -nav a svg {
21   - display: block;
22   - margin: 0 auto;
23   - padding: 0;
24   -}
25   -
26   -/* Individual styles */
27   -
28   -/*--------------------*/
29   -/* Circle pop */
30   -/*--------------------*/
31   -.color-3 { background: transparent; }
32   -
33   -.nav-circlepop a {
34   - margin: 0 15px;
35   - width: 50px;
36   - height: 50px;
37   -}
38   -
39   -.nav-circlepop a::before {
40   - position: absolute;
41   - top: 0;
42   - left: 0;
43   - width: 100%;
44   - height: 100%;
45   - border-radius: 50%;
46   - background: #fff;
47   - content: '';
48   - opacity: 0;
49   - -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
50   - transition: transform 0.3s, opacity 0.3s;
51   - -webkit-transform: scale(0.9);
52   - transform: scale(0.9);
53   -}
54   -
55   -.nav-circlepop .icon-wrap {
56   - position: relative;
57   - display: block;
58   - margin: 10% 0 0 10%;
59   - width: 80%;
60   - height: 80%;
61   -}
62   -
63   -.nav-circlepop a.next .icon-wrap {
64   - -webkit-transform: rotate(180deg);
65   - transform: rotate(180deg);
66   -}
67   -
68   -.nav-circlepop .icon-wrap::before,
69   -.nav-circlepop .icon-wrap::after {
70   - position: absolute;
71   - left: 25%;
72   - width: 3px;
73   - height: 50%;
74   - background: #ccc;
75   - content: '';
76   - -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
77   - transition: transform 0.3s, background-color 0.3s;
78   - -webkit-backface-visibility: hidden;
79   - backface-visibility: hidden;
80   -}
81   -
82   -.nav-circlepop .icon-wrap::before {
83   - -webkit-transform: translateX(-50%) rotate(30deg);
84   - transform: translateX(-50%) rotate(30deg);
85   - -webkit-transform-origin: 0 100%;
86   - transform-origin: 0 100%;
87   -}
88   -
89   -.nav-circlepop .icon-wrap::after {
90   - top: 50%;
91   - -webkit-transform: translateX(-50%) rotate(-30deg);
92   - transform: translateX(-50%) rotate(-30deg);
93   - -webkit-transform-origin: 0 0;
94   - transform-origin: 0 0;
95   -}
96   -
97   -.nav-circlepop a:hover::before {
98   - opacity: 1;
99   - -webkit-transform: scale(1);
100   - transform: scale(1);
101   -}
102   -
103   -.nav-circlepop a:hover .icon-wrap::before,
104   -.nav-circlepop a:hover .icon-wrap::after {
105   - background: #999;
106   -}
107   -
108   -.nav-circlepop a:hover .icon-wrap::before {
109   - -webkit-transform: translateX(-50%) rotate(45deg);
110   - transform: translateX(-50%) rotate(45deg);
111   -}
112   -
113   -.nav-circlepop a:hover .icon-wrap::after {
114   - -webkit-transform: translateX(-50%) rotate(-45deg);
115   - transform: translateX(-50%) rotate(-45deg);
116   -}
117   -
118   -
public/stylesheets/circlepop.css 0 → 100644
... ... @@ -0,0 +1,118 @@
  1 +nav a {
  2 + position: absolute;
  3 + top: 215px;
  4 + display: block;
  5 + outline: none;
  6 + text-align: left;
  7 + z-index: 1000;
  8 + -webkit-transform: translateY(-50%);
  9 + transform: translateY(-50%);
  10 +}
  11 +
  12 +nav a.prev {
  13 + left: 0;
  14 +}
  15 +
  16 +nav a.next {
  17 + right: 0;
  18 +}
  19 +
  20 +nav a svg {
  21 + display: block;
  22 + margin: 0 auto;
  23 + padding: 0;
  24 +}
  25 +
  26 +/* Individual styles */
  27 +
  28 +/*--------------------*/
  29 +/* Circle pop */
  30 +/*--------------------*/
  31 +.color-3 { background: transparent; }
  32 +
  33 +.nav-circlepop a {
  34 + margin: 0 15px;
  35 + width: 50px;
  36 + height: 50px;
  37 +}
  38 +
  39 +.nav-circlepop a::before {
  40 + position: absolute;
  41 + top: 0;
  42 + left: 0;
  43 + width: 100%;
  44 + height: 100%;
  45 + border-radius: 50%;
  46 + background: #fff;
  47 + content: '';
  48 + opacity: 0;
  49 + -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  50 + transition: transform 0.3s, opacity 0.3s;
  51 + -webkit-transform: scale(0.9);
  52 + transform: scale(0.9);
  53 +}
  54 +
  55 +.nav-circlepop .icon-wrap {
  56 + position: relative;
  57 + display: block;
  58 + margin: 10% 0 0 10%;
  59 + width: 80%;
  60 + height: 80%;
  61 +}
  62 +
  63 +.nav-circlepop a.next .icon-wrap {
  64 + -webkit-transform: rotate(180deg);
  65 + transform: rotate(180deg);
  66 +}
  67 +
  68 +.nav-circlepop .icon-wrap::before,
  69 +.nav-circlepop .icon-wrap::after {
  70 + position: absolute;
  71 + left: 25%;
  72 + width: 3px;
  73 + height: 50%;
  74 + background: #ccc;
  75 + content: '';
  76 + -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
  77 + transition: transform 0.3s, background-color 0.3s;
  78 + -webkit-backface-visibility: hidden;
  79 + backface-visibility: hidden;
  80 +}
  81 +
  82 +.nav-circlepop .icon-wrap::before {
  83 + -webkit-transform: translateX(-50%) rotate(30deg);
  84 + transform: translateX(-50%) rotate(30deg);
  85 + -webkit-transform-origin: 0 100%;
  86 + transform-origin: 0 100%;
  87 +}
  88 +
  89 +.nav-circlepop .icon-wrap::after {
  90 + top: 50%;
  91 + -webkit-transform: translateX(-50%) rotate(-30deg);
  92 + transform: translateX(-50%) rotate(-30deg);
  93 + -webkit-transform-origin: 0 0;
  94 + transform-origin: 0 0;
  95 +}
  96 +
  97 +.nav-circlepop a:hover::before {
  98 + opacity: 1;
  99 + -webkit-transform: scale(1);
  100 + transform: scale(1);
  101 +}
  102 +
  103 +.nav-circlepop a:hover .icon-wrap::before,
  104 +.nav-circlepop a:hover .icon-wrap::after {
  105 + background: #999;
  106 +}
  107 +
  108 +.nav-circlepop a:hover .icon-wrap::before {
  109 + -webkit-transform: translateX(-50%) rotate(45deg);
  110 + transform: translateX(-50%) rotate(45deg);
  111 +}
  112 +
  113 +.nav-circlepop a:hover .icon-wrap::after {
  114 + -webkit-transform: translateX(-50%) rotate(-45deg);
  115 + transform: translateX(-50%) rotate(-45deg);
  116 +}
  117 +
  118 +
... ...