@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/utils.css

@@ -0,0 +1,683 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+[data-iui-icon-size=s]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
+}
+
+[data-iui-icon-size=m]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+}
+
+[data-iui-icon-size=l]{
+  display:flex;
+  flex-shrink:0;
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+}
+
+[data-iui-icon-size=xl]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-xl);
+  height:var(--iui-size-xl);
+}
+
+[data-iui-icon-size="2xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:calc(3 * var(--iui-size-m));
+  height:calc(3 * var(--iui-size-m));
+}
+
+[data-iui-icon-size="3xl"]{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+}
+
+[data-iui-icon-color=default]{
+  fill:var(--iui-color-foreground-4);
+}
+@media (forced-colors: active){
+  [data-iui-icon-color=default]{
+    fill:CanvasText;
+  }
+}
+
+[data-iui-icon-color=informational]{
+  fill:var(--iui-color-foreground-primary);
+}
+
+[data-iui-icon-color=positive]{
+  fill:var(--iui-color-foreground-positive);
+}
+
+[data-iui-icon-color=warning]{
+  fill:var(--iui-color-foreground-warning);
+}
+
+[data-iui-icon-color=negative]{
+  fill:var(--iui-color-foreground-negative);
+}
+
+.iui-input-container{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:grid;
+  grid-template:"label label" "inputs inputs"/auto 1fr;
+  cursor:default;
+}
+.iui-input-container.iui-inline-icon > .iui-input{
+  padding-right:var(--iui-component-height);
+}
+.iui-input-container.iui-inline-icon > .iui-input:last-child{
+  padding-right:var(--iui-size-s);
+}
+.iui-input-container.iui-with-message{
+  grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
+}
+.iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
+  margin-top:var(--iui-size-2xs);
+}
+.iui-input-container .iui-input,
+.iui-input-container .iui-input-with-icon,
+.iui-input-container .iui-input-group{
+  grid-area:inputs;
+}
+.iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
+  padding:calc(var(--iui-size-s) * 0.5) 0;
+}
+label.iui-input-container{
+  cursor:pointer;
+}
+label.iui-input-container.iui-disabled{
+  cursor:not-allowed;
+}
+
+.iui-input-container.iui-disabled label{
+  cursor:not-allowed;
+}
+.iui-input-container .iui-checkbox-wrapper,
+.iui-input-container .iui-radio-wrapper{
+  min-height:var(--iui-size-l);
+}
+.iui-input-container.iui-inline-label{
+  grid-template:"label inputs icon"/auto 1fr auto;
+}
+.iui-input-container.iui-inline-label.iui-with-message{
+  grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
+}
+.iui-input-container.iui-inline-label > .iui-input-group{
+  display:flex;
+  gap:var(--iui-size-m);
+}
+.iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
+  margin-right:var(--iui-size-m);
+}
+.iui-input-container > .iui-label{
+  font-weight:var(--iui-font-weight-semibold);
+  margin-bottom:var(--iui-size-2xs);
+  grid-area:label;
+  align-self:center;
+}
+.iui-input-container > .iui-label.iui-required::after{
+  content:"*";
+  margin-left:var(--iui-size-2xs);
+  color:var(--iui-color-foreground-negative);
+}
+.iui-input-container .iui-input-icon{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  fill:var(--iui-color-foreground-4);
+  grid-area:icon;
+  align-self:center;
+}
+@media (forced-colors: active){
+  .iui-input-container .iui-input-icon{
+    fill:CanvasText;
+  }
+}
+.iui-input-container .iui-input-icon:not(:last-child){
+  margin-right:var(--iui-size-2xs);
+}
+.iui-input-container .iui-message{
+  font-size:var(--iui-font-size-0);
+  grid-area:message;
+  margin-top:var(--iui-size-2xs);
+  color:var(--iui-color-foreground-4);
+}
+.iui-input-container .iui-message a{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon{
+  grid-area:inputs;
+  justify-self:end;
+  margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
+  position:relative;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon svg{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
+  height:100%;
+  width:-webkit-fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+  margin-right:0;
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
+  border-top-right-radius:inherit;
+  border-bottom-right-radius:inherit;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
+  align-items:center;
+  height:calc(100% - 4px);
+  margin-right:1px;
+  padding-inline:calc(var(--iui-size-xs) + 1px);
+  cursor:pointer;
+  box-sizing:content-box;
+  background-position:center;
+  transition:background var(--iui-duration-2) ease-out;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
+  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
+  background-color:var(--iui-color-background-2);
+  background-size:100%;
+  transition:background var(--iui-duration-0);
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
+  fill:var(--iui-color-foreground-2);
+  transition:transform var(--iui-duration-1) ease-out;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
+  transform:rotate(180deg);
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
+  cursor:not-allowed;
+}
+.iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
+  fill:var(--iui-color-foreground-5);
+}
+.iui-input-container.iui-inline-label > .iui-label{
+  margin:0 var(--iui-size-m) 0 0;
+}
+.iui-input-container.iui-inline-label > .iui-label.iui-required{
+  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
+}
+.iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
+}
+.iui-input-container.iui-positive::selection,
+.iui-input-container.iui-positive *::selection{
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
+}
+.iui-input-container.iui-positive .iui-input-icon{
+  fill:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-message{
+  color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-message a{
+  text-decoration:underline;
+  color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-message a:hover{
+  text-decoration:none;
+  color:var(--iui-color-foreground-positive-hover);
+}
+.iui-input-container.iui-positive .iui-input{
+  padding-bottom:calc(var(--iui-size-2xs) - 1px);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-input[data-iui-size=small]{
+  padding-bottom:0;
+}
+.iui-input-container.iui-positive .iui-input[data-iui-size=large]{
+  padding-bottom:calc(var(--iui-size-xs) - 1px);
+}
+.iui-input-container.iui-positive .iui-input:focus{
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-positive);
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-2px;
+}
+.iui-input-container.iui-positive .iui-input-with-icon{
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-positive);
+  --_focus-color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-positive .iui-select-button{
+  border-bottom:transparent;
+}
+.iui-input-container.iui-positive .iui-select-button::after{
+  content:"";
+  width:100%;
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:var(--iui-size-3xs);
+  background-color:var(--iui-color-foreground-positive);
+}
+.iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+}
+.iui-input-container.iui-negative::selection,
+.iui-input-container.iui-negative *::selection{
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
+}
+.iui-input-container.iui-negative .iui-input-icon{
+  fill:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-message{
+  color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-message a{
+  text-decoration:underline;
+  color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-message a:hover{
+  text-decoration:none;
+  color:var(--iui-color-foreground-negative-hover);
+}
+.iui-input-container.iui-negative .iui-input{
+  padding-bottom:calc(var(--iui-size-2xs) - 1px);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-input[data-iui-size=small]{
+  padding-bottom:0;
+}
+.iui-input-container.iui-negative .iui-input[data-iui-size=large]{
+  padding-bottom:calc(var(--iui-size-xs) - 1px);
+}
+.iui-input-container.iui-negative .iui-input:focus{
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-negative);
+  outline:2px solid var(--iui-color-foreground-negative);
+  outline-offset:-2px;
+}
+.iui-input-container.iui-negative .iui-input-with-icon{
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-negative);
+  --_focus-color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-negative .iui-select-button{
+  border-bottom:transparent;
+}
+.iui-input-container.iui-negative .iui-select-button::after{
+  content:"";
+  width:100%;
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:var(--iui-size-3xs);
+  background-color:var(--iui-color-foreground-negative);
+}
+.iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
+}
+.iui-input-container.iui-warning::selection,
+.iui-input-container.iui-warning *::selection{
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
+}
+.iui-input-container.iui-warning .iui-input-icon{
+  fill:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-message{
+  color:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-message a{
+  text-decoration:underline;
+  color:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-message a:hover{
+  text-decoration:none;
+  color:var(--iui-color-foreground-warning-hover);
+}
+.iui-input-container.iui-warning .iui-input{
+  padding-bottom:calc(var(--iui-size-2xs) - 1px);
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-input[data-iui-size=small]{
+  padding-bottom:0;
+}
+.iui-input-container.iui-warning .iui-input[data-iui-size=large]{
+  padding-bottom:calc(var(--iui-size-xs) - 1px);
+}
+.iui-input-container.iui-warning .iui-input:focus{
+  border-bottom:var(--iui-size-3xs) solid var(--iui-color-foreground-warning);
+  outline:2px solid var(--iui-color-foreground-warning);
+  outline-offset:-2px;
+}
+.iui-input-container.iui-warning .iui-input-with-icon{
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-foreground-warning);
+  --_focus-color:var(--iui-color-foreground-warning);
+}
+.iui-input-container.iui-warning .iui-select-button{
+  border-bottom:transparent;
+}
+.iui-input-container.iui-warning .iui-select-button::after{
+  content:"";
+  width:100%;
+  position:absolute;
+  bottom:0;
+  left:0;
+  height:var(--iui-size-3xs);
+  background-color:var(--iui-color-foreground-warning);
+}
+
+.iui-input-label{
+  font-weight:var(--iui-font-weight-semibold);
+  margin-bottom:var(--iui-size-2xs);
+  cursor:default;
+  display:block;
+}
+.iui-input-label.iui-required::after{
+  content:"*";
+  margin-left:var(--iui-size-2xs);
+  color:var(--iui-color-foreground-negative);
+}
+label.iui-input-label{
+  cursor:pointer;
+}
+label.iui-input-label.iui-disabled{
+  cursor:not-allowed;
+}
+
+.iui-input-label.iui-inline{
+  margin:0 var(--iui-size-m) 0 0;
+  display:inline-flex;
+  align-items:center;
+}
+.iui-input-label.iui-inline.iui-required{
+  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
+}
+
+.iui-notification-primary{
+  position:relative;
+}
+.iui-notification-primary::before{
+  content:"";
+  position:absolute;
+  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  top:calc(var(--iui-size-s) * -0.5);
+  right:calc(var(--iui-size-s) * -0.5);
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-primary);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-primary::before{
+    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-primary.iui-urgent::before{
+    -webkit-animation:pulse-primary 2s infinite;
+            animation:pulse-primary 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-primary{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+  @keyframes pulse-primary{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
+
+.iui-notification-positive{
+  position:relative;
+}
+.iui-notification-positive::before{
+  content:"";
+  position:absolute;
+  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  top:calc(var(--iui-size-s) * -0.5);
+  right:calc(var(--iui-size-s) * -0.5);
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-positive);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-positive::before{
+    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-positive.iui-urgent::before{
+    -webkit-animation:pulse-positive 2s infinite;
+            animation:pulse-positive 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-positive{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+  @keyframes pulse-positive{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
+
+.iui-notification-warning{
+  position:relative;
+}
+.iui-notification-warning::before{
+  content:"";
+  position:absolute;
+  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  top:calc(var(--iui-size-s) * -0.5);
+  right:calc(var(--iui-size-s) * -0.5);
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-warning);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-warning::before{
+    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-warning.iui-urgent::before{
+    -webkit-animation:pulse-warning 2s infinite;
+            animation:pulse-warning 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-warning{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+  @keyframes pulse-warning{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
+
+.iui-notification-negative{
+  position:relative;
+}
+.iui-notification-negative::before{
+  content:"";
+  position:absolute;
+  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  top:calc(var(--iui-size-s) * -0.5);
+  right:calc(var(--iui-size-s) * -0.5);
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-negative);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-negative::before{
+    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-negative.iui-urgent::before{
+    -webkit-animation:pulse-negative 2s infinite;
+            animation:pulse-negative 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-negative{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+  @keyframes pulse-negative{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
+
+.iui-notification-accessory{
+  position:relative;
+}
+.iui-notification-accessory::before{
+  content:"";
+  position:absolute;
+  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
+  top:calc(var(--iui-size-s) * -0.5);
+  right:calc(var(--iui-size-s) * -0.5);
+  border-radius:100%;
+  background-color:var(--iui-color-foreground-accessory);
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-accessory::before{
+    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-notification-accessory.iui-urgent::before{
+    -webkit-animation:pulse-accessory 2s infinite;
+            animation:pulse-accessory 2s infinite;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  @-webkit-keyframes pulse-accessory{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+  @keyframes pulse-accessory{
+    0%{
+      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
+    }
+    70%{
+      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
+    }
+    100%{
+      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
+    }
+  }
+}
+.iui-popover.tippy-box{
+  all:revert;
+}
+.iui-popover.tippy-box[data-reference-hidden]{
+  visibility:hidden;
+  pointer-events:none;
+}
+.iui-popover .tippy-content{
+  all:revert;
+}
+
+.iui-visually-hidden{
+  -webkit-clip-path:inset(50%);
+          clip-path:inset(50%);
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  height:1px;
+  width:1px;
+  padding:0;
+  margin:-1px;
+  border-width:0;
+}