src/cobalt/demos/content/hybrid-navigation/hybrid-navigation-grid-rtl.html - cobalt - Git at Google

 <!DOCTYPE html>
 <!--
  | This demo demonstrates how scroll container should behave in RTL mode.
  -->
 <html>
   <head>
     <style>
       body {
         background-color: rgb(25,25,25);
         color: rgb(200,200,200);
         width: 1920px;
         height: 720px;
       }

       .vscroll {
         overflow: auto;
         position: absolute;
         transform: translate(100px,100px);
         background-color: rgb(50,50,50);
         width: 1080px;
         height: 520px;
       }

       .hscroll {
         overflow: auto;
         position: relative;
         background-color: rgb(75, 75, 75);
         width: 1080px;
         height: 320px;
       }

       /*
        * focusItem is used as the actual focusable item. Its dimensions are
        * static so that the underlying SbUiNavigation system knows how much to
        * scroll to ensure it is fully visible. The scroll animation is usually
        * calculated to bring the to-be-focused item into view, but if that item
        * is resized after the animation starts, then the animation may no
        * longer end with the larger item in full view.
        */
       .focusItem {
         overflow: hidden;
         position: absolute;
         width: 300px;
         height: 300px;
         outline: none;
       }

       /*
        * focusContent will react to focus changes. Its size will grow when
        * its parent receives focus.
        */
       .focusContent {
         overflow: hidden;
         margin: 20px;
         border: 5px solid rgb(0,0,0);
         width: 250px;
         height: 250px;
         line-height: 250px;
         text-align: center;
         vertical-align: middle;
         font-size: 100px;

         /*
          * The user may be scrolling through items quickly. Use a transition
          * delay so that the transition is shown once the user settles on a
          * focus item.
          */
         transition: transform 0.5s;
         transition-delay: 0.1s;
       }

       /*
        * Update focusContent when the parent is focused.
        */
       .focusItem:focus .focusContent {
         background-color: rgb(240,240,240);
         color: rgb(0,0,0);
         transform: -cobalt-ui-nav-focus-transform() scale(1.1);
       }

       /*
        * Add a spotlight to focusContent when the parent is focused.
        */
       .focusItem:focus .focusContent::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 30%);
         transform: -cobalt-ui-nav-spotlight-transform();
       }
     </style>
   </head>

   <body class="body">
     <div class="vscroll">
       <div class="hscroll" dir="rtl">
         <!--
          | translateX() should be honored when computing items' position in rtl mode.
          | The right edge of A0 should be 50px from the right edge of the container when the
          | page is rendered.
          | User should be able to scroll items using the entire width of the container,
          | meaning A0 should be visibly translated from the initial position to the right edge
          | of the container.
          | A0 should stop 50px from the right edge of the container when scrolling back to
          | A0.
          -->
         <div id="start" class="focusItem" tabindex="-2" style="transform: translateX(-50px)">
           <div class="focusContent">A0</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-350px)">
           <div class="focusContent">A1</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-650px)">
           <div class="focusContent">A2</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-950px)">
           <div class="focusContent">A3</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-1250px)">
           <div class="focusContent">A4</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-1550px)">
           <div class="focusContent">A5</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-1850px)">
           <div class="focusContent">A6</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-2150px)">
           <div class="focusContent">A7</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-2450px)">
           <div class="focusContent">A8</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-2750px)">
           <div class="focusContent">A9</div>
         </div>
       </div>
       <div class="hscroll" dir="rtl">
         <div class="focusItem" tabindex="-2" style="transform: translateX(-50px)">
           <div class="focusContent">B0</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-350px)">
           <div class="focusContent">B1</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-650px)">
           <div class="focusContent">B2</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-950px)">
           <div class="focusContent">B3</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-1250px)">
           <div class="focusContent">B4</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-1550px)">
           <div class="focusContent">B5</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-1850px)">
           <div class="focusContent">B6</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-2150px)">
           <div class="focusContent">B7</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-2450px)">
           <div class="focusContent">B8</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(-2750px)">
           <div class="focusContent">B9</div>
         </div>
       </div>
     </div>
   </body>
   <script>
     window.onload = function() {
       document.getElementById("start").focus();
     }
   </script>
 </html>
	<!DOCTYPE html>
	<!--
	\| This demo demonstrates how scroll container should behave in RTL mode.
	-->
	<html>
	<head>
	<style>
	body {
	background-color: rgb(25,25,25);
	color: rgb(200,200,200);
	width: 1920px;
	height: 720px;
	}

	.vscroll {
	overflow: auto;
	position: absolute;
	transform: translate(100px,100px);
	background-color: rgb(50,50,50);
	width: 1080px;
	height: 520px;
	}

	.hscroll {
	overflow: auto;
	position: relative;
	background-color: rgb(75, 75, 75);
	width: 1080px;
	height: 320px;
	}

	/*
	* focusItem is used as the actual focusable item. Its dimensions are
	* static so that the underlying SbUiNavigation system knows how much to
	* scroll to ensure it is fully visible. The scroll animation is usually
	* calculated to bring the to-be-focused item into view, but if that item
	* is resized after the animation starts, then the animation may no
	* longer end with the larger item in full view.
	*/
	.focusItem {
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 300px;
	outline: none;
	}

	/*
	* focusContent will react to focus changes. Its size will grow when
	* its parent receives focus.
	*/
	.focusContent {
	overflow: hidden;
	margin: 20px;
	border: 5px solid rgb(0,0,0);
	width: 250px;
	height: 250px;
	line-height: 250px;
	text-align: center;
	vertical-align: middle;
	font-size: 100px;

	/*
	* The user may be scrolling through items quickly. Use a transition
	* delay so that the transition is shown once the user settles on a
	* focus item.
	*/
	transition: transform 0.5s;
	transition-delay: 0.1s;
	}

	/*
	* Update focusContent when the parent is focused.
	*/
	.focusItem:focus .focusContent {
	background-color: rgb(240,240,240);
	color: rgb(0,0,0);
	transform: -cobalt-ui-nav-focus-transform() scale(1.1);
	}

	/*
	* Add a spotlight to focusContent when the parent is focused.
	*/
	.focusItem:focus .focusContent::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 30%);
	transform: -cobalt-ui-nav-spotlight-transform();
	}
	</style>
	</head>

	<body class="body">
	<div class="vscroll">
	<div class="hscroll" dir="rtl">
	<!--
	\| translateX() should be honored when computing items' position in rtl mode.
	\| The right edge of A0 should be 50px from the right edge of the container when the
	\| page is rendered.
	\| User should be able to scroll items using the entire width of the container,
	\| meaning A0 should be visibly translated from the initial position to the right edge
	\| of the container.
	\| A0 should stop 50px from the right edge of the container when scrolling back to
	\| A0.
	-->
	<div id="start" class="focusItem" tabindex="-2" style="transform: translateX(-50px)">
	<div class="focusContent">A0</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-350px)">
	<div class="focusContent">A1</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-650px)">
	<div class="focusContent">A2</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-950px)">
	<div class="focusContent">A3</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-1250px)">
	<div class="focusContent">A4</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-1550px)">
	<div class="focusContent">A5</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-1850px)">
	<div class="focusContent">A6</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-2150px)">
	<div class="focusContent">A7</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-2450px)">
	<div class="focusContent">A8</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-2750px)">
	<div class="focusContent">A9</div>
	</div>
	</div>
	<div class="hscroll" dir="rtl">
	<div class="focusItem" tabindex="-2" style="transform: translateX(-50px)">
	<div class="focusContent">B0</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-350px)">
	<div class="focusContent">B1</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-650px)">
	<div class="focusContent">B2</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-950px)">
	<div class="focusContent">B3</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-1250px)">
	<div class="focusContent">B4</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-1550px)">
	<div class="focusContent">B5</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-1850px)">
	<div class="focusContent">B6</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-2150px)">
	<div class="focusContent">B7</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-2450px)">
	<div class="focusContent">B8</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(-2750px)">
	<div class="focusContent">B9</div>
	</div>
	</div>
	</div>
	</body>
	<script>
	window.onload = function() {
	document.getElementById("start").focus();
	}
	</script>
	</html>