Commit 6633066c65423d94cbae494ccb25d6c515696490
1 parent
66c7b785
Exists in
master
and in
16 other branches
adding block store css
Showing
4 changed files
with
166 additions
and
165 deletions
Show diff stats
public/proposal-app
public/stylesheets/application.scss
public/stylesheets/block-store.css
@@ -1,164 +0,0 @@ | @@ -1,164 +0,0 @@ | ||
1 | -/************************************************ | ||
2 | - * the handles to where you can drag the blocks * | ||
3 | - ************************************************/ | ||
4 | - | ||
5 | -.block-target { | ||
6 | - padding: 2px; | ||
7 | - background: #81FF9B; | ||
8 | - margin-bottom: 5px; | ||
9 | - opacity: 0.8; | ||
10 | - visibility: hidden; | ||
11 | - height: 0; | ||
12 | - font-size: 20px; | ||
13 | - font-weight: bold; | ||
14 | - color: white; | ||
15 | - text-align: center; | ||
16 | -} | ||
17 | -.block-target-hover { | ||
18 | - border: 1px solid #000; | ||
19 | - box-shadow: 0 0 15px #888 inset; | ||
20 | - opacity: 1; | ||
21 | -} | ||
22 | -.shadow .block-target-hover, .shadow .block-target-active { | ||
23 | - visibility: visible; | ||
24 | - height: 30px; | ||
25 | -} | ||
26 | - | ||
27 | -/************************************************ | ||
28 | - * block store styles | ||
29 | - ************************************************/ | ||
30 | -#block-store #block-store-filter { | ||
31 | - float: right; | ||
32 | - margin-bottom: 8px; | ||
33 | -} | ||
34 | -#block-store #block-types { | ||
35 | - clear: both; | ||
36 | -} | ||
37 | -#block-store { | ||
38 | - display: none; | ||
39 | -} | ||
40 | -#content #block-store .block-type { | ||
41 | - position: relative; | ||
42 | - border: 0px solid #AAA; | ||
43 | - margin: 4px 0; | ||
44 | - padding: 0; | ||
45 | - text-align: center; | ||
46 | - height: auto; | ||
47 | - float: none; | ||
48 | - display: inline-block; | ||
49 | - overflow: hidden; | ||
50 | - width: 112px; | ||
51 | - cursor: move; | ||
52 | - vertical-align: top; | ||
53 | -} | ||
54 | -#block-store .block-type:hover { | ||
55 | - box-shadow: 0px 0px 0px 2px #FFF, 0px 0px 0px 2px #FFF, 0px 0px 10px rgba(0,0,0,0.6); | ||
56 | - outline: none; | ||
57 | -} | ||
58 | -#block-store .block-type:hover .button-bar { | ||
59 | - display: inline; | ||
60 | -} | ||
61 | -#block-store .button-bar { | ||
62 | - margin: 0; | ||
63 | - display: none; | ||
64 | - position: absolute; | ||
65 | - right: 0%; | ||
66 | - border: 0px solid #AAA; | ||
67 | - margin: 0px; | ||
68 | - padding: 0px; | ||
69 | -} | ||
70 | -#block-store .button-bar .icon-help { | ||
71 | - font-size: 0; | ||
72 | - width: 0; | ||
73 | -} | ||
74 | - | ||
75 | -#block-store .block-type .block-type-icon { | ||
76 | - margin-right: auto; | ||
77 | - margin-left: auto; | ||
78 | -} | ||
79 | -#block-store-draggables .block-type, #block-store-draggables .block, #block-store-draggables .block-type-icon, #block-store-draggables .ui-draggable-dragging { | ||
80 | - display: inline-block; | ||
81 | - height: auto; | ||
82 | - z-index: 100; | ||
83 | -} | ||
84 | -#block-store-draggables .block-type .button-bar { | ||
85 | - visibility: hidden; | ||
86 | -} | ||
87 | -#box-organizer.shadow .block { | ||
88 | - opacity: 0.2; | ||
89 | -} | ||
90 | -#box-organizer.shadow .ui-draggable-dragging { | ||
91 | - opacity: 1; | ||
92 | - border: 5px solid red; | ||
93 | - box-shadow: 0px 0px 10px 2px red, inset 0px 0px 10px 2px red; | ||
94 | -} | ||
95 | -#box-organizer .block { | ||
96 | - transition: opacity 0.3s ease-in-out; | ||
97 | -} | ||
98 | - | ||
99 | -/************************************************ | ||
100 | - * block info styles | ||
101 | - ************************************************/ | ||
102 | -#block-info-container { | ||
103 | - width: 770px; | ||
104 | - padding: 15px; | ||
105 | - color: #444; | ||
106 | -} | ||
107 | - | ||
108 | -#block-info-container #block-info-icon { | ||
109 | - float: left; | ||
110 | - padding-right: 10px; | ||
111 | -} | ||
112 | - | ||
113 | -#block-info-container #block-info-header { | ||
114 | - float: left; | ||
115 | -} | ||
116 | - | ||
117 | -#block-info-container #block-info-header .block-type-icon{ | ||
118 | - float: left; | ||
119 | -} | ||
120 | - | ||
121 | -#block-info-container #block-info-header h1 { | ||
122 | - margin: 0; | ||
123 | - font-weight: normal; | ||
124 | - font-family: "Arial Black", Liberation Sans, Arial, sans-serif; | ||
125 | - margin-left: 5px; | ||
126 | - white-space: nowrap; | ||
127 | -} | ||
128 | - | ||
129 | -#block-info-container #block-info-header p{ | ||
130 | - margin-left: 55px; | ||
131 | -} | ||
132 | - | ||
133 | - | ||
134 | -#block-info-container h2 { | ||
135 | - margin: 0; | ||
136 | - margin-top: 10px; | ||
137 | - font-weight: normal; | ||
138 | - font-family: "Arial Black", Liberation Sans, Arial, sans-serif; | ||
139 | -} | ||
140 | - | ||
141 | -#block-info-container p { | ||
142 | - margin: 0; | ||
143 | -} | ||
144 | - | ||
145 | -#block-info-images { | ||
146 | - clear: both; | ||
147 | - overflow-x: auto; | ||
148 | - padding-top: 15px; | ||
149 | -} | ||
150 | - | ||
151 | -#block-info-images ul{ | ||
152 | - margin: 0px; | ||
153 | - padding: 0px; | ||
154 | -} | ||
155 | -#block-info-images li{ | ||
156 | - list-style: none; | ||
157 | - display: inline; | ||
158 | - | ||
159 | -} | ||
160 | - | ||
161 | - | ||
162 | -#block-info-description { | ||
163 | - margin-top: 20px; | ||
164 | -} |
@@ -0,0 +1,164 @@ | @@ -0,0 +1,164 @@ | ||
1 | +/************************************************ | ||
2 | + * the handles to where you can drag the blocks * | ||
3 | + ************************************************/ | ||
4 | + | ||
5 | +.block-target { | ||
6 | + padding: 2px; | ||
7 | + background: #81FF9B; | ||
8 | + margin-bottom: 5px; | ||
9 | + opacity: 0.8; | ||
10 | + visibility: hidden; | ||
11 | + height: 0; | ||
12 | + font-size: 20px; | ||
13 | + font-weight: bold; | ||
14 | + color: white; | ||
15 | + text-align: center; | ||
16 | +} | ||
17 | +.block-target-hover { | ||
18 | + border: 1px solid #000; | ||
19 | + box-shadow: 0 0 15px #888 inset; | ||
20 | + opacity: 1; | ||
21 | +} | ||
22 | +.shadow .block-target-hover, .shadow .block-target-active { | ||
23 | + visibility: visible; | ||
24 | + height: 30px; | ||
25 | +} | ||
26 | + | ||
27 | +/************************************************ | ||
28 | + * block store styles | ||
29 | + ************************************************/ | ||
30 | +#block-store #block-store-filter { | ||
31 | + float: right; | ||
32 | + margin-bottom: 8px; | ||
33 | +} | ||
34 | +#block-store #block-types { | ||
35 | + clear: both; | ||
36 | +} | ||
37 | +#block-store { | ||
38 | + display: none; | ||
39 | +} | ||
40 | +#content #block-store .block-type { | ||
41 | + position: relative; | ||
42 | + border: 0px solid #AAA; | ||
43 | + margin: 4px 0; | ||
44 | + padding: 0; | ||
45 | + text-align: center; | ||
46 | + height: auto; | ||
47 | + float: none; | ||
48 | + display: inline-block; | ||
49 | + overflow: hidden; | ||
50 | + width: 112px; | ||
51 | + cursor: move; | ||
52 | + vertical-align: top; | ||
53 | +} | ||
54 | +#block-store .block-type:hover { | ||
55 | + box-shadow: 0px 0px 0px 2px #FFF, 0px 0px 0px 2px #FFF, 0px 0px 10px rgba(0,0,0,0.6); | ||
56 | + outline: none; | ||
57 | +} | ||
58 | +#block-store .block-type:hover .button-bar { | ||
59 | + display: inline; | ||
60 | +} | ||
61 | +#block-store .button-bar { | ||
62 | + margin: 0; | ||
63 | + display: none; | ||
64 | + position: absolute; | ||
65 | + right: 0%; | ||
66 | + border: 0px solid #AAA; | ||
67 | + margin: 0px; | ||
68 | + padding: 0px; | ||
69 | +} | ||
70 | +#block-store .button-bar .icon-help { | ||
71 | + font-size: 0; | ||
72 | + width: 0; | ||
73 | +} | ||
74 | + | ||
75 | +#block-store .block-type .block-type-icon { | ||
76 | + margin-right: auto; | ||
77 | + margin-left: auto; | ||
78 | +} | ||
79 | +#block-store-draggables .block-type, #block-store-draggables .block, #block-store-draggables .block-type-icon, #block-store-draggables .ui-draggable-dragging { | ||
80 | + display: inline-block; | ||
81 | + height: auto; | ||
82 | + z-index: 100; | ||
83 | +} | ||
84 | +#block-store-draggables .block-type .button-bar { | ||
85 | + visibility: hidden; | ||
86 | +} | ||
87 | +#box-organizer.shadow .block { | ||
88 | + opacity: 0.2; | ||
89 | +} | ||
90 | +#box-organizer.shadow .ui-draggable-dragging { | ||
91 | + opacity: 1; | ||
92 | + border: 5px solid red; | ||
93 | + box-shadow: 0px 0px 10px 2px red, inset 0px 0px 10px 2px red; | ||
94 | +} | ||
95 | +#box-organizer .block { | ||
96 | + transition: opacity 0.3s ease-in-out; | ||
97 | +} | ||
98 | + | ||
99 | +/************************************************ | ||
100 | + * block info styles | ||
101 | + ************************************************/ | ||
102 | +#block-info-container { | ||
103 | + width: 770px; | ||
104 | + padding: 15px; | ||
105 | + color: #444; | ||
106 | +} | ||
107 | + | ||
108 | +#block-info-container #block-info-icon { | ||
109 | + float: left; | ||
110 | + padding-right: 10px; | ||
111 | +} | ||
112 | + | ||
113 | +#block-info-container #block-info-header { | ||
114 | + float: left; | ||
115 | +} | ||
116 | + | ||
117 | +#block-info-container #block-info-header .block-type-icon{ | ||
118 | + float: left; | ||
119 | +} | ||
120 | + | ||
121 | +#block-info-container #block-info-header h1 { | ||
122 | + margin: 0; | ||
123 | + font-weight: normal; | ||
124 | + font-family: "Arial Black", Liberation Sans, Arial, sans-serif; | ||
125 | + margin-left: 5px; | ||
126 | + white-space: nowrap; | ||
127 | +} | ||
128 | + | ||
129 | +#block-info-container #block-info-header p{ | ||
130 | + margin-left: 55px; | ||
131 | +} | ||
132 | + | ||
133 | + | ||
134 | +#block-info-container h2 { | ||
135 | + margin: 0; | ||
136 | + margin-top: 10px; | ||
137 | + font-weight: normal; | ||
138 | + font-family: "Arial Black", Liberation Sans, Arial, sans-serif; | ||
139 | +} | ||
140 | + | ||
141 | +#block-info-container p { | ||
142 | + margin: 0; | ||
143 | +} | ||
144 | + | ||
145 | +#block-info-images { | ||
146 | + clear: both; | ||
147 | + overflow-x: auto; | ||
148 | + padding-top: 15px; | ||
149 | +} | ||
150 | + | ||
151 | +#block-info-images ul{ | ||
152 | + margin: 0px; | ||
153 | + padding: 0px; | ||
154 | +} | ||
155 | +#block-info-images li{ | ||
156 | + list-style: none; | ||
157 | + display: inline; | ||
158 | + | ||
159 | +} | ||
160 | + | ||
161 | + | ||
162 | +#block-info-description { | ||
163 | + margin-top: 20px; | ||
164 | +} |