WebSVN - LCARS - Diff - Rev 179 and 198 - /branches/live/styles/lcars-responsive.css


/* Responsive Web Design  */

<?php use de\pointedears\css\least\Mixins; ?>

/* Desktops with medium-size browser viewport (SVGA resolution) */

body {
  <?php
    Mixins::transition('',
        'margin-top   0.25s 0.75s linear,'
      . ' margin-left 0.25s 0.5s linear');
  ?>
}

.multi-display,
#content.fixed
{
  <?php
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . ' left  0.25s 0.5s linear');
  ?>
}

.menu .bow
{
  <?php
    Mixins::transition('',
        'width            0.5s 1s    linear,'
      . 'background-color 0s   0.75s linear'
    );
  ?>
}

.multi-display .lower .bg
{
  <?php
    /* Wait 1s for bow to become shallower */
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . 'bottom 2.5s 0.5s ease');
  ?>
}
 
#bow-top {
  <?php
    Mixins::transition('',
        'left                        0.5s 1.0s linear,'
      . ' min-width                  0s   1.5s linear,'
      . ' border-top-left-radius     0.5s 1.0s linear,'
      . ' border-top-right-radius    0.5s 1.0s linear,'
      . ' border-bottom-right-radius 0.5s 1.0s linear,'
      . ' opacity                    0s   1.0s linear');
  ?>
}

#bow-top .text {
  <?php
    Mixins::transition('-property', 'opacity');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

#bow-top-left {
  <?php
    Mixins::transition('-property', 'height');
    Mixins::transition('-duration', '0.125s');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

.menu-container
{
  <?php
    Mixins::transition('',
        'top      0.5s 1s linear,'
      . ' width   0.5s 1s linear,'
      . ' bottom  0.5s 1s linear,'
      . ' z-index 0s   1s linear');
  ?>
}  

.menu {
  <?php
    Mixins::transition('', 'height 0.5s 1s linear');
  ?>
}

.menu ul:first-child {
  <?php
    Mixins::transition('', 'padding-top 0.5s 1s linear');
  ?>
}

.menu .button
{
  <?php
    Mixins::transition('', 'width 0.5s 1s linear');
  ?>
}  

#bow #bottom {
  <?php
    Mixins::transition('', 'visibility 0s 1.625s linear');
  ?>
}

#bow-bottom {
  <?php
    Mixins::transition('',
        'border-bottom-left-radius   0.5s    0.5s   ease,'
      . ' border-bottom-right-radius 0.5s    0.5s   ease,'
      . ' width                      0.5s    0.5s   ease,'
      . ' bottom                     0.0225s 1.625s linear,'
      . ' height                     0.0225s 1.625s linear');
  ?>
}

#bow-bottom .concave {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#connectors {
  <?php
    Mixins::transition('', 'opacity 0s 1.6475s linear');
  ?>
}  

#connectors .right {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
@media all and (min-width: 1024px) and (min-height: 364px) {
  body {
    margin-left: 22em;
  <?php
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
  ?>
  }

  #bow #bottom
  {
    width: 20.8em;
  <?php
    /* Wait 0.5s for multi-display to be reduced in height */
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }
   
  #bow-bottom {
    border-bottom-left-radius: 2.4em;
    border-bottom-right-radius: 2em;
    width: 20.6em;
  <?php
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
    Mixins::transition('-delay', '1.0s');
    Mixins::transition('-duration', '0.5s');
    Mixins::transition('-timing-function', 'ease');
  ?>
  }
 
  #bow-bottom .concave {
    width: 7.6em;
  <?php
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }

  #connectors .right {
    width: 5em;
    <?php
      /* Wait 1.0s for multi-display to be moved to right */
      Mixins::transition('', 'width 1.0s 0.5s ease');
    ?>
  }
 
  .multi-display
  {
    left: 15.8em;
  <?php
    Mixins::transition('',
        'left 0.5s 0.5s ease,'
      . 'top  0.5s 0.5s linear');
  ?>
  }

  #content.fixed {
    left: 22em;
  }
 
  .multi-display .lower .bg
  {
    bottom: 2.8em;
    <?php
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
    ?>
  }  
}

/* Desktops with small viewport (VGA resolution and less, or toolbars) */
@media all and (max-width: 584px) {
  <?php require 'lcars-responsive-small.css'; ?>
}

/* Mobile devices: HTC Sensation & friends */
@media screen and (max-device-width: 540px) {
/*
  html,
  #LCARS,
  .multi-display
  {
    max-width: 540px;
  }
*/
  <?php require 'lcars-responsive-small.css'; ?>  
}

Rev 179	Rev 198
1	/* Responsive Web Design */	1	/* Responsive Web Design */
2		2
3	<?php use de\pointedears\css\least\Mixins; ?>	3	<?php use de\pointedears\css\least\Mixins; ?>
4		4
5	/* Desktops with medium-size browser viewport (SVGA resolution) */	5	/* Desktops with medium-size browser viewport (SVGA resolution) */
6		6
7	body {	7	body {
8	<?php	8	<?php
9	Mixins::transition('',	9	Mixins::transition('',
10	'margin-top 0.25s 0.75s linear,'	10	'margin-top 0.25s 0.75s linear,'
11	. ' margin-left 0.25s 0.5s linear');	11	. ' margin-left 0.25s 0.5s linear');
12	?>	12	?>
13	}	13	}
14		14
15	.multi-display,	15	.multi-display,
16	#content.fixed	16	#content.fixed
17	{	17	{
18	<?php	18	<?php
19	Mixins::transition('',	19	Mixins::transition('',
20	'top 0.25s 0.75s linear,'	20	'top 0.25s 0.75s linear,'
21	. ' left 0.25s 0.5s linear');	21	. ' left 0.25s 0.5s linear');
22	?>	22	?>
23	}	23	}
24		24
25	.menu .bow	25	.menu .bow
26	{	26	{
27	<?php	27	<?php
28	Mixins::transition('',	28	Mixins::transition('',
29	'width 0.5s 1s linear,'	29	'width 0.5s 1s linear,'
30	. 'background-color 0s 0.75s linear'	30	. 'background-color 0s 0.75s linear'
31	);	31	);
32	?>	32	?>
33	}	33	}
34		34
35	.multi-display .lower .bg	35	.multi-display .lower .bg
36	{	36	{
37	<?php	37	<?php
38	/* Wait 1s for bow to become shallower */	38	/* Wait 1s for bow to become shallower */
39	Mixins::transition('',	39	Mixins::transition('',
40	'top 0.25s 0.75s linear,'	40	'top 0.25s 0.75s linear,'
41	. 'bottom 2.5s 0.5s ease');	41	. 'bottom 2.5s 0.5s ease');
42	?>	42	?>
43	}	43	}
44		44
45	#bow-top {	45	#bow-top {
46	<?php	46	<?php
47	Mixins::transition('',	47	Mixins::transition('',
48	'left 0.5s 1.0s linear,'	48	'left 0.5s 1.0s linear,'
49	. ' min-width 0s 1.5s linear,'	49	. ' min-width 0s 1.5s linear,'
50	. ' border-top-left-radius 0.5s 1.0s linear,'	50	. ' border-top-left-radius 0.5s 1.0s linear,'
51	. ' border-top-right-radius 0.5s 1.0s linear,'	51	. ' border-top-right-radius 0.5s 1.0s linear,'
52	. ' border-bottom-right-radius 0.5s 1.0s linear,'	52	. ' border-bottom-right-radius 0.5s 1.0s linear,'
53	. ' opacity 0s 1.0s linear');	53	. ' opacity 0s 1.0s linear');
54	?>	54	?>
55	}	55	}
56		56
57	#bow-top .text {	57	#bow-top .text {
58	<?php	58	<?php
59	Mixins::transition('-property', 'opacity');	59	Mixins::transition('-property', 'opacity');
60	Mixins::transition('-delay', '1.5s');	60	Mixins::transition('-delay', '1.5s');
61	Mixins::transition('-timing-function', 'linear');	61	Mixins::transition('-timing-function', 'linear');
62	?>	62	?>
63	}	63	}
64		64
65	#bow-top-left {	65	#bow-top-left {
66	<?php	66	<?php
67	Mixins::transition('-property', 'height');	67	Mixins::transition('-property', 'height');
68	Mixins::transition('-duration', '0.125s');	68	Mixins::transition('-duration', '0.125s');
69	Mixins::transition('-delay', '1.5s');	69	Mixins::transition('-delay', '1.5s');
70	Mixins::transition('-timing-function', 'linear');	70	Mixins::transition('-timing-function', 'linear');
71	?>	71	?>
72	}	72	}
73		73
74	.menu-container	74	.menu-container
75	{	75	{
76	<?php	76	<?php
77	Mixins::transition('',	77	Mixins::transition('',
78	'top 0.5s 1s linear,'	78	'top 0.5s 1s linear,'
79	. ' width 0.5s 1s linear,'	79	. ' width 0.5s 1s linear,'
80	. ' bottom 0.5s 1s linear,'	80	. ' bottom 0.5s 1s linear,'
81	. ' z-index 0s 1s linear');	81	. ' z-index 0s 1s linear');
82	?>	82	?>
83	}	83	}
84		84
85	.menu {	85	.menu {
86	<?php	86	<?php
87	Mixins::transition('', 'height 0.5s 1s linear');	87	Mixins::transition('', 'height 0.5s 1s linear');
88	?>	88	?>
89	}	89	}
90		90
91	.menu ul:first-child {	91	.menu ul:first-child {
92	<?php	92	<?php
93	Mixins::transition('', 'padding-top 0.5s 1s linear');	93	Mixins::transition('', 'padding-top 0.5s 1s linear');
94	?>	94	?>
95	}	95	}
96		96
97	.menu .button	97	.menu .button
98	{	98	{
99	<?php	99	<?php
100	Mixins::transition('', 'width 0.5s 1s linear');	100	Mixins::transition('', 'width 0.5s 1s linear');
101	?>	101	?>
102	}	102	}
103		103
104	#bow #bottom {	104	#bow #bottom {
105	<?php	105	<?php
106	Mixins::transition('', 'visibility 0s 1.625s linear');	106	Mixins::transition('', 'visibility 0s 1.625s linear');
107	?>	107	?>
108	}	108	}
109		109
110	#bow-bottom {	110	#bow-bottom {
111	<?php	111	<?php
112	Mixins::transition('',	112	Mixins::transition('',
113	'border-bottom-left-radius 0.5s 0.5s ease,'	113	'border-bottom-left-radius 0.5s 0.5s ease,'
114	. ' border-bottom-right-radius 0.5s 0.5s ease,'	114	. ' border-bottom-right-radius 0.5s 0.5s ease,'
115	. ' width 0.5s 0.5s ease,'	115	. ' width 0.5s 0.5s ease,'
116	. ' bottom 0.0225s 1.625s linear,'	116	. ' bottom 0.0225s 1.625s linear,'
117	. ' height 0.0225s 1.625s linear');	117	. ' height 0.0225s 1.625s linear');
118	?>	118	?>
119	}	119	}
120		120
121	#bow-bottom .concave {	121	#bow-bottom .concave {
122	<?php	122	<?php
123	Mixins::transition('', 'width 0.5s 0.5s ease');	123	Mixins::transition('', 'width 0.5s 0.5s ease');
124	?>	124	?>
125	}	125	}
126		126
127	#connectors {	127	#connectors {
128	<?php	128	<?php
129	Mixins::transition('', 'opacity 0s 1.6475s linear');	129	Mixins::transition('', 'opacity 0s 1.6475s linear');
130	?>	130	?>
131	}	131	}
132		132
133	#connectors .right {	133	#connectors .right {
134	<?php	134	<?php
135	Mixins::transition('', 'width 0.5s 0.5s ease');	135	Mixins::transition('', 'width 0.5s 0.5s ease');
136	?>	136	?>
137	}	137	}
138		138
139	/* Desktops with large viewport (XGA resolution and more, or no toolbars) */	139	/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
140	@media all and (min-width: 1024px) and (min-height: 364px) {	140	@media all and (min-width: 1024px) and (min-height: 364px) {
141	body {	141	body {
142	margin-left: 22em;	142	margin-left: 22em;
143	<?php	143	<?php
144	Mixins::transition('', 'margin-left 0.5s 0.5s ease');	144	Mixins::transition('', 'margin-left 0.5s 0.5s ease');
145	?>	145	?>
146	}	146	}
147		147
148	#bow #bottom	148	#bow #bottom
149	{	149	{
150	width: 20.8em;	150	width: 20.8em;
151	<?php	151	<?php
152	/* Wait 0.5s for multi-display to be reduced in height */	152	/* Wait 0.5s for multi-display to be reduced in height */
153	Mixins::transition('', 'width 1.0s 0.5s ease');	153	Mixins::transition('', 'width 1.0s 0.5s ease');
154	?>	154	?>
155	}	155	}
156		156
157	#bow-bottom {	157	#bow-bottom {
158	border-bottom-left-radius: 2.4em;	158	border-bottom-left-radius: 2.4em;
159	border-bottom-right-radius: 2em;	159	border-bottom-right-radius: 2em;
160	width: 20.6em;	160	width: 20.6em;
161	<?php	161	<?php
162	Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');	162	Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
163	Mixins::transition('-delay', '1.0s');	163	Mixins::transition('-delay', '1.0s');
164	Mixins::transition('-duration', '0.5s');	164	Mixins::transition('-duration', '0.5s');
165	Mixins::transition('-timing-function', 'ease');	165	Mixins::transition('-timing-function', 'ease');
166	?>	166	?>
167	}	167	}
168		168
169	#bow-bottom .concave {	169	#bow-bottom .concave {
170	width: 7.6em;	170	width: 7.6em;
171	<?php	171	<?php
172	Mixins::transition('', 'width 1.0s 0.5s ease');	172	Mixins::transition('', 'width 1.0s 0.5s ease');
173	?>	173	?>
174	}	174	}
175		175
176	#connectors .right {	176	#connectors .right {
177	width: 5em;	177	width: 5em;
178	<?php	178	<?php
179	/* Wait 1.0s for multi-display to be moved to right */	179	/* Wait 1.0s for multi-display to be moved to right */
180	Mixins::transition('', 'width 1.0s 0.5s ease');	180	Mixins::transition('', 'width 1.0s 0.5s ease');
181	?>	181	?>
182	}	182	}
183		183
184	.multi-display	184	.multi-display
185	{	185	{
186	left: 15.8em;	186	left: 15.8em;
187	<?php	187	<?php
188	Mixins::transition('',	188	Mixins::transition('',
189	'left 0.5s 0.5s ease,'	189	'left 0.5s 0.5s ease,'
190	. 'top 0.5s 0.5s linear');	190	. 'top 0.5s 0.5s linear');
191	?>	191	?>
192	}	192	}
193		193
194	#content.fixed {	194	#content.fixed {
195	left: 22em;	195	left: 22em;
196	}	196	}
197		197
198	.multi-display .lower .bg	198	.multi-display .lower .bg
199	{	199	{
200	bottom: 2.8em;	200	bottom: 2.8em;
201	<?php	201	<?php
202	Mixins::transition('', 'bottom 0.5s 0.5s ease');	202	Mixins::transition('', 'bottom 0.5s 0.5s ease');
203	?>	203	?>
204	}	204	}
205	}	205	}
206		206
207	/* Desktops with small viewport (VGA resolution and less, or toolbars) */	207	/* Desktops with small viewport (VGA resolution and less, or toolbars) */
208	@media all and (max-width: 584px) {	208	@media all and (max-width: 584px) {
209	<?php require 'lcars-responsive-small.css'; ?>	209	<?php require 'lcars-responsive-small.css'; ?>
210	}	210	}
211		211
212	/* Mobile devices: HTC Sensation & friends */	212	/* Mobile devices: HTC Sensation & friends */
213	@media screen and (max-device-width: 540px) {	213	@media screen and (max-device-width: 540px) {
214	/*	214	/*
215	html,	215	html,
216	#LCARS,	216	#LCARS,
217	.multi-display	217	.multi-display
218	{	218	{
219	max-width: 540px;	219	max-width: 540px;
220	}	220	}
221	*/	221	*/
222	<?php require 'lcars-responsive-small.css'; ?>	222	<?php require 'lcars-responsive-small.css'; ?>
223	}	223	}

Subversion Repositories LCARS

(root)/branches/live/styles/lcars-responsive.css @ 235 - Rev 179 → 198