--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>\r
+<classpath>\r
+ <classpathentry including="**/*.java" kind="src" output="target/classes" path="src">\r
+ <attributes>\r
+ <attribute name="optional" value="true"/>\r
+ <attribute name="maven.pomderived" value="true"/>\r
+ </attributes>\r
+ </classpathentry>\r
+ <classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/J2SE-1.5">\r
+ <attributes>\r
+ <attribute name="maven.pomderived" value="true"/>\r
+ </attributes>\r
+ </classpathentry>\r
+ <classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">\r
+ <attributes>\r
+ <attribute name="maven.pomderived" value="true"/>\r
+ </attributes>\r
+ </classpathentry>\r
+ <classpathentry kind="output" path="target/classes"/>\r
+</classpath>\r
--- /dev/null
+# enforce linux line endings for script files
+*.sh text eol=lf
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>\r
+<projectDescription>\r
+ <name>hu.user.theme.userdark</name>\r
+ <comment></comment>\r
+ <projects>\r
+ </projects>\r
+ <buildSpec>\r
+ <buildCommand>\r
+ <name>org.eclipse.jdt.core.javabuilder</name>\r
+ <arguments>\r
+ </arguments>\r
+ </buildCommand>\r
+ <buildCommand>\r
+ <name>org.eclipse.m2e.core.maven2Builder</name>\r
+ <arguments>\r
+ </arguments>\r
+ </buildCommand>\r
+ </buildSpec>\r
+ <natures>\r
+ <nature>org.eclipse.jdt.core.javanature</nature>\r
+ <nature>org.eclipse.m2e.core.maven2Nature</nature>\r
+ </natures>\r
+</projectDescription>\r
--- /dev/null
+* Fordítés előtt telepíteni kell a nodejs appot és globálisan a lessjs library korábbi verzióját: "npm install less@2.7.2 -g" \r
+* A projekt a -dependencies/libs alá fordul\r
+* Az érvényesítéshez futtatni kell a -dependencies projekten az "mvn clean package p2:site" parancsot \r
+* Deploy előtt target platform frissítés szükséges
\ No newline at end of file
--- /dev/null
+<assembly xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0"\r
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\r
+ xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0 http://maven.apache.org/xsd/assembly-1.1.0.xsd">\r
+ <id>bundle</id>\r
+ <formats>\r
+ <format>jar</format>\r
+ </formats>\r
+ <includeBaseDirectory>false</includeBaseDirectory>\r
+ <files>\r
+ <file>\r
+ <source>pom.xml</source>\r
+ <outputDirectory>/</outputDirectory>\r
+ </file>\r
+ <file>\r
+ <source>${project.build.directory}/${artifactId}-${version}.jar</source>\r
+ <outputDirectory>/</outputDirectory>\r
+ </file>\r
+ </files>\r
+</assembly>\r
--- /dev/null
+<assembly xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0"\r
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\r
+ xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0 http://maven.apache.org/xsd/assembly-1.1.0.xsd">\r
+ <id>bin</id>\r
+ <formats>\r
+ <format>zip</format>\r
+ </formats>\r
+ <includeBaseDirectory>false</includeBaseDirectory>\r
+ <files>\r
+ <file>\r
+ <source>${project.build.directory}/${artifactId}-${version}.jar</source>\r
+ <destName>${artifactId}.jar</destName>\r
+ <outputDirectory>/</outputDirectory>\r
+ </file>\r
+ </files>\r
+</assembly>\r
--- /dev/null
+source.. = src/\r
+bin.includes = META-INF/,\\r
+ .\r
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+ <groupId>user.theme</groupId>
+ <artifactId>userdark</artifactId>
+ <packaging>jar</packaging>
+ <version>1.0.0</version>
+ <name>ZK User Dark</name>
+ <description>ZK User Dark Theme</description>
+ <properties>
+ <zk.version>8.0.3</zk.version>
+ </properties>
+ <pluginRepositories>
+ <pluginRepository>
+ <id>zkmaven</id>
+ <name>ZK Maven Plugin Repository</name>
+ <url>http://mavensync.zkoss.org/maven2</url>
+ </pluginRepository>
+ <pluginRepository>
+ <id>maven-bundle-plugin</id>
+ <name>bnd maven plugin</name>
+ <url>http://repo1.maven.org/maven2</url>
+ </pluginRepository>
+ </pluginRepositories>
+ <dependencies>
+ <dependency>
+ <groupId>org.zkoss.zk</groupId>
+ <artifactId>zk</artifactId>
+ <version>${zk.version}</version>
+ </dependency>
+ <dependency>
+ <groupId>org.zkoss.zk</groupId>
+ <artifactId>zul</artifactId>
+ <version>${zk.version}</version>
+ </dependency>
+ <dependency>
+ <groupId>org.zkoss.zk</groupId>
+ <artifactId>zkmax</artifactId>
+ <version>${zk.version}</version>
+ </dependency>
+ </dependencies>
+
+ <build>
+ <sourceDirectory>${project.basedir}/src/</sourceDirectory>
+ <resources>
+ <resource>
+ <directory>${project.basedir}/src/archive</directory>
+ </resource>
+ </resources>
+ <plugins>
+ <plugin>
+ <groupId>org.zkoss.maven</groupId>
+ <artifactId>zkless-engine-maven-plugin</artifactId>
+ <version>1.0.0</version>
+ <executions>
+ <execution>
+ <id>compile-less</id>
+ <goals>
+ <goal>lessc</goal>
+ </goals>
+ <configuration>
+ <sourceDirectory>${project.basedir}/src/archive</sourceDirectory>
+ <outputDirectory>${project.basedir}/target/classes</outputDirectory>
+ </configuration>
+ </execution>
+ </executions>
+ </plugin>
+ <plugin>
+ <groupId>org.apache.maven.plugins</groupId>
+ <artifactId>maven-compiler-plugin</artifactId>
+ <version>2.3.2</version>
+ <configuration>
+ <source>1.5</source>
+ <target>1.5</target>
+ </configuration>
+ </plugin>
+ <plugin>
+ <groupId>org.apache.felix</groupId>
+ <artifactId>maven-bundle-plugin</artifactId>
+ <version>2.3.7</version>
+ <extensions>true</extensions>
+ <configuration>
+ <excludeDependencies>*;scope=provided|compile|runtime</excludeDependencies>
+ <instructions>
+ <_include>${project.basedir}/src/archive/META-INF/MANIFEST.MF</_include>
+ <Bundle-Version>${project.version}</Bundle-Version>
+ <Bundle-Name>${project.groupId}.${project.artifactId}</Bundle-Name>
+ <Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
+ <Export-Package>*</Export-Package>
+ <Import-Package>*</Import-Package>
+ </instructions>
+ </configuration>
+ </plugin>
+ <plugin>
+ <groupId>org.apache.maven.plugins</groupId>
+ <artifactId>maven-jar-plugin</artifactId>
+ <version>2.3.1</version>
+ <configuration>
+ <outputDirectory>../-dependencies/libs</outputDirectory>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+</project>
--- /dev/null
+Manifest-Version: 1.0
+
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+
+<config>
+ <config-name>userdark</config-name><!-- used to resolve dependency -->
+ <depends>zul</depends>
+ <version>
+ <version-class>org.zkoss.theme.userdark.Version</version-class>
+ <version-uid>8.0.3</version-uid>
+ </version>
+
+ <listener>
+ <listener-class>org.zkoss.theme.userdark.UserdarkThemeWebAppInit</listener-class>
+ </listener>
+</config>
--- /dev/null
+<language-addon>
+ <addon-name>userdark</addon-name>
+ <depends>zul</depends>
+ <language-name>xul/html</language-name>
+
+ <version>
+ <version-class>org.zkoss.theme.userdark.Version</version-class>
+ <version-uid>8.0.3</version-uid>
+ </version>
+
+</language-addon>
--- /dev/null
+@import "~./zul/less/_header.less";
+
+.z-row {
+ .z-detail-outer {
+ min-width: 40px;
+ border-top: 1px solid @meshTitleBorderColor;
+ padding: 18px 6px;
+ line-height: normal;
+ .horGradient(@baseGradientStart, @baseGradientEnd);
+ vertical-align: top;
+ }
+
+ &:first-child .z-detail-outer {
+ border-top: none;
+ }
+
+ .z-detail-outer + td,
+ .z-detail-inner:first-child {
+ border-left: 1px solid @meshTitleBorderColor;
+ }
+}
+
+.z-detail {
+ font-size: @baseFontSize;
+ .size(@baseIconWidth, @baseIconHeight);
+ border: 1px solid @meshTitleBorderColor;
+ padding: 0;
+ line-height: @baseLineHeight;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ text-align: center;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: pointer;
+
+ &-icon {
+ .iconFontStyle(@fontSizeLarge, @iconColor);
+ position: relative;
+ left: 1px;
+ }
+ &-open .z-detail-icon {
+ line-height: @baseLineHeight + 2;
+ left: 0;
+ }
+}
+
+// IE 8
+.ie8 {
+ .z-row {
+ .z-detail-outer{
+ background: @meshBackgroundColor;
+ }
+ }
+ .z-detail {
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);
+ }
+}
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-colorbox {\r
+ .displaySize(inline-block, @baseWidth * 5, @baseButtonHeight);\r
+ border: 1px solid @colorboxBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ margin: 0 2px;\r
+ padding: 3px;\r
+ background: @baseBackgroundColor;\r
+ vertical-align: middle;\r
+ position: relative;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ \r
+ &-current {\r
+ .displaySize(inline-block, 100%, 100%);\r
+ position: relative;\r
+ }\r
+ \r
+ &-button {\r
+ font-size: 11px;\r
+ .displaySize(inline-block, 13px, 7px);\r
+ line-height: normal;\r
+ background: @baseBackgroundColor;\r
+ position: absolute;\r
+ bottom: 1px;\r
+ right: 0;\r
+ overflow: hidden;\r
+ }\r
+ \r
+ &-icon {\r
+ .iconFontStyle(@baseFontSize, @iconColor);\r
+ position: relative;\r
+ top: -3px;\r
+ left: 3px;\r
+ }\r
+ \r
+ &-disabled,\r
+ &-disabled * {\r
+ color: @disabledColor !important;\r
+ .opacity(@disabledOpacity);\r
+ cursor: default !important;\r
+ }\r
+}\r
+// Popup shadow\r
+.z-colorbox-popup,\r
+.z-menu-popup {\r
+ display: none;\r
+ position: absolute;\r
+ overflow: auto;\r
+ z-index: @basePopupZIndex;\r
+ .boxShadow('1px 1px 3px rgba(0, 0, 0, 0.5)');\r
+}\r
+// Colorpicker\r
+.z-colorpicker {\r
+ .size(384px, 332px);\r
+ border: 1px solid @colorboxBorderColor;\r
+ background: @baseBackgroundColor;\r
+ position: relative;\r
+ overflow: hidden;\r
+ \r
+ &-gradient {\r
+ .size(256px, 256px);\r
+ border: 1px solid @colorboxBorderColor;\r
+ position: absolute;\r
+ left: 7px;\r
+ top: 31px;\r
+ cursor: crosshair;\r
+ }\r
+ \r
+ &-overlay {\r
+ .size(256px, 256px);\r
+ .encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_gradient.png');\r
+ }\r
+ \r
+ &-bar {\r
+ .size(12px, 256px);\r
+ border: 1px solid @colorboxBorderColor;\r
+ .encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_hue.png');\r
+ position: absolute;\r
+ left: 7px;\r
+ overflow: hidden;\r
+ cursor: n-resize;\r
+ }\r
+ \r
+ &-circle {\r
+ .size(11px, 11px);\r
+ margin: -5px 0 0 -5px;\r
+ .encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_select.gif');\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ overflow: hidden;\r
+ }\r
+ \r
+ &-hue {\r
+ .size(27px, 256px);\r
+ position: absolute;\r
+ top: 31px;\r
+ left: 272px;\r
+ }\r
+ \r
+ &-arrows {\r
+ .size(27px, 9px);\r
+ margin: -4px 0 0 0;\r
+ .encodeURL(background-image, '~./zkex/img/colorbox/colorpicker_arrows.gif');\r
+ position: absolute;\r
+ left: 0;\r
+ overflow: hidden;\r
+ cursor: n-resize;\r
+ }\r
+ \r
+ &-color {\r
+ border: double;\r
+ background: transparent;\r
+ position: absolute;\r
+ top: 34px;\r
+ left: 315px;\r
+ }\r
+ \r
+ &-newcolor {\r
+ .size(48px, 32px);\r
+ border-bottom: 1px solid;\r
+ position: relative;\r
+ }\r
+ \r
+ &-current {\r
+ .size(48px, 32px);\r
+ border-top: 1px solid;\r
+ position: relative;\r
+ }\r
+ \r
+ &-r, &-g, &-b, &-h, &-s, &-v {\r
+ width: 55px;\r
+ position: absolute;\r
+ left: 310px;\r
+ }\r
+ \r
+ &-r {top: 122px;}\r
+ &-g {top: 147px;}\r
+ &-b {top: 172px;}\r
+ &-h {top: 212px;}\r
+ &-s {top: 237px;}\r
+ &-v {top: 262px;}\r
+ \r
+ &-text,\r
+ &-input {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ }\r
+ \r
+ &-input {\r
+ .size(@baseWidth * 5, @baseButtonHeight);\r
+ border: 1px solid @baseBorderColor;\r
+ padding: 2px;\r
+ background: @baseBackgroundColor;\r
+ float: right;\r
+ }\r
+ \r
+ &-hex {\r
+ position: absolute;\r
+ top: 300px;\r
+ left: 10px;\r
+ \r
+ .z-colorpicker-input {\r
+ margin-left: 5px;\r
+ width: @baseWidth * 8;\r
+ }\r
+ }\r
+ \r
+ &-button {\r
+ width: 42px;\r
+ position: absolute;\r
+ top: 300px;\r
+ left: 328px;\r
+ cursor: pointer;\r
+ }\r
+ \r
+ &-icon {\r
+ color: @textColorGreen;\r
+ }\r
+}\r
+// Color Palette\r
+.z-colorpalette {\r
+ .size(262px, 222px);\r
+ border: 1px solid @colorboxBorderColor;\r
+ padding-left: 4px;\r
+ background: @baseBackgroundColor;\r
+ \r
+ &-newcolor {\r
+ .size(50px, 24px);\r
+ border: 1px solid @colorboxBorderColor;\r
+ margin: 4px 2px;\r
+ position: relative;\r
+ left: 123px;\r
+ }\r
+ \r
+ &-input,\r
+ &-button {\r
+ position: absolute;\r
+ top: 5px;\r
+ left: 185px;\r
+ }\r
+ \r
+ &-input {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ .size(65px, @baseButtonHeight);\r
+ border: 1px solid @baseBorderColor;\r
+ padding: 2px;\r
+ background: @baseBackgroundColor;\r
+ }\r
+ \r
+ &-color {\r
+ .displaySize(inline-block, 14px, 14px);\r
+ border: 1px solid #FFFFFF;\r
+ cursor: pointer;\r
+ float: left; \r
+ \r
+ &:hover {\r
+ border: 1px solid #000000;\r
+ }\r
+ }\r
+ \r
+ &-selected {\r
+ border: 1px solid #000000;\r
+ }\r
+}\r
+.z-colorbox-paletteicon,\r
+.z-menu-paletteicon,\r
+.z-colorbox-pickericon,\r
+.z-menu-pickericon {\r
+ .size(22px, 22px);\r
+ .encodeURL(background, '~./zkex/img/colorbox/cb-buttons.gif');\r
+ position: absolute;\r
+ cursor: pointer;\r
+ z-index: 10;\r
+}\r
+.z-colorbox-paletteicon,\r
+.z-menu-paletteicon {\r
+ background-position: 0 0;\r
+ top: 5px;\r
+ left: 6px;\r
+}\r
+.z-colorbox-pickericon,\r
+.z-menu-pickericon {\r
+ background-position: 0 -44px;\r
+ top: 5px;\r
+ left: 31px;\r
+}\r
+.z-colorpalette-popup .z-colorbox-paletteicon,\r
+.z-colorpalette-popup .z-menu-paletteicon {\r
+ background-position: 0 -22px;\r
+ left: 6px;\r
+}\r
+.z-colorpalette-popup .z-colorbox-pickericon,\r
+.z-colorpalette-popup .z-menu-pickericon {\r
+ left: 31px;\r
+}\r
+.z-colorpicker-popup .z-colorbox-pickericon,\r
+.z-colorpicker-popup .z-menu-pickericon {\r
+ background-position: 0 -66px;\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-columnlayout,\r
+.z-columnchildren,\r
+.z-columnchildren-content {\r
+ overflow: hidden;\r
+}\r
+.z-columnchildren {\r
+ height: 100%;\r
+ float: left;\r
+ \r
+ &-content {\r
+ .size(100%, 100%);\r
+ }\r
+}\r
+.z-columnlayout,\r
+.z-columnchildren {\r
+ -ms-zoom: 1;\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-fisheye,\r
+.z-fisheye-text,\r
+.z-fisheye-image {\r
+ position: absolute;\r
+ cursor: pointer;\r
+}\r
+.z-fisheye {\r
+ z-index: 2;\r
+}\r
+.z-fisheye-image {\r
+ .size(100%, 100%);\r
+ border: 0;\r
+}\r
+.z-fisheye-text {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ display: none;\r
+ border: 1px solid @baseBorderColor;\r
+ padding: 2px 5px;\r
+ background: @baseBackgroundColor; \r
+ text-align: center;\r
+}\r
+.z-fisheyebar-inner {\r
+ position: relative;\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.resetTable() {\r
+ table {\r
+ border-spacing: 0;\r
+ th, td {\r
+ background-clip: padding-box;\r
+ }\r
+ }\r
+}\r
+.z-biglistbox {\r
+ border: 1px solid @baseBorderColor;\r
+ background: @biglistboxBackgroundColor;\r
+ position: relative;\r
+ overflow: hidden;\r
+ zoom: 1;\r
+ \r
+ &-outer {\r
+ border: 1px solid @baseBorderColor;\r
+ border-top: none;\r
+ border-left: none;\r
+ margin: 0 15px 15px 0;\r
+ background: @baseBackgroundColor;\r
+ position: relative;\r
+ }\r
+ &-faker th {\r
+ font-size: 0;\r
+ .size(45px, 0);\r
+ border: 0;\r
+ margin: 0;\r
+ padding: 0;\r
+ line-height: 0;\r
+ overflow: hidden;\r
+ }\r
+ //head\r
+ &-head-outer {\r
+ overflow: hidden;\r
+ }\r
+ &-head {\r
+ width: 100%;\r
+ border: 0;\r
+ overflow: hidden;\r
+ float: left;\r
+ .resetTable();\r
+ }\r
+ &-header {\r
+ border: 1px solid @meshTitleBorderColor;\r
+ border-left-color: #FFFFFF;\r
+ border-top: 0;\r
+ padding: 0;\r
+ text-align: left;\r
+ position: relative;\r
+ overflow: hidden;\r
+ cursor: default;\r
+ white-space: nowrap;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ \r
+ &-content {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeMedium, bold, @textColorGrayLight);\r
+ padding: 4px 5px;\r
+ line-height: @baseButtonHeight - 1;\r
+ position: relative;\r
+ white-space: nowrap;\r
+ }\r
+ }\r
+ //body\r
+ &-body-outer {\r
+ overflow: hidden;\r
+ }\r
+ &-body {\r
+ width: 100%;\r
+ border: 0;\r
+ background: @baseBackgroundColor;\r
+ position: relative;\r
+ overflow: hidden;\r
+ float: left;\r
+ .resetTable();\r
+ \r
+ //body content\r
+ td {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayLight);\r
+ border-left: 1px solid @meshContentBorderColor;\r
+ padding: 4px 5px;\r
+ line-height: @baseButtonHeight;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ white-space: nowrap;\r
+ }\r
+ }\r
+ &-row {\r
+ &:hover td {\r
+ color: @hoverColor;\r
+ border-color: @meshContentHoverStart;\r
+ .verGradient(@meshContentHoverStart, @meshContentHoverEnd);\r
+ background-clip: padding-box;\r
+ position: relative;\r
+ }\r
+ &.z-biglistbox-selected {\r
+ td {\r
+ color: @selectedColor;\r
+ border-color: @selectedGradientStart;\r
+ .verGradient(@selectedGradientStart, @selectedGradientEnd);\r
+ background-clip: padding-box;\r
+ position: relative;\r
+ }\r
+ &:hover td {\r
+ color: @selectedHoverColor;\r
+ border-color: @selectedHoverBackgroundColor;\r
+ .resetGradient();\r
+ background: @selectedHoverBackgroundColor;\r
+ position: relative;\r
+ }\r
+ }\r
+ }\r
+ //odd rows\r
+ &-odd {\r
+ background: @meshStripeBackgroundColor;\r
+ }\r
+ //sort\r
+ &-sort {\r
+ cursor: pointer;\r
+ }\r
+ &-sorticon {\r
+ color: @iconColor;\r
+ position: absolute;\r
+ top: -7px;\r
+ left: 50%;\r
+ }\r
+ &-hover { //sortable header hover status\r
+ .verGradient(@meshTitleHoverStart, @meshTitleHoverEnd);\r
+ background-clip: padding-box;\r
+ position: relative;\r
+ }\r
+ //frozen\r
+ &-head-shim,\r
+ &-body-shim {\r
+ .size(3px, 1px);\r
+ overflow: hidden;\r
+ float: left;\r
+ }\r
+ &-verticalbar-frozen {\r
+ .size(3px, 100%);\r
+ border: 1px solid @baseBorderColor;\r
+ background: @biglistboxFrozenBackground;\r
+ position: absolute;\r
+ top: -3px;\r
+ }\r
+ &-verticalbar-tick {\r
+ .size(8px, 16px);\r
+ .encodeURL(background, '~./zkmax/img/big/vbar-tick.png', -0px -0px no-repeat);\r
+ position: absolute;\r
+ bottom: 1px;\r
+ overflow: hidden;\r
+ cursor: w-resize;\r
+ z-index: 20;\r
+ }\r
+ //WScroll bar\r
+ &-wscroll {\r
+ // vertical\r
+ &-vertical {\r
+ .size(15px, 100%);\r
+ position: absolute;\r
+ top: 0;\r
+ right: -16px;\r
+ z-index: 10;\r
+ \r
+ .z-biglistbox-wscroll-drag {\r
+ .size(15px, 115px);\r
+ .encodeURL(background, '~./zkmax/img/big/drag-v.png', no-repeat scroll 0 0 transparent);\r
+ position: absolute;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ z-index: 15;\r
+ \r
+ .z-biglistbox-wscroll-home,\r
+ .z-biglistbox-wscroll-up,\r
+ .z-biglistbox-wscroll-down,\r
+ .z-biglistbox-wscroll-end {\r
+ .size(15px, 15px);\r
+ position: absolute;\r
+ }\r
+ .z-biglistbox-wscroll-home {\r
+ top: 0;\r
+ }\r
+ .z-biglistbox-wscroll-up {\r
+ top: 15px;\r
+ }\r
+ .z-biglistbox-wscroll-down {\r
+ bottom: 15px;\r
+ }\r
+ .z-biglistbox-wscroll-end {\r
+ bottom: 0;\r
+ }\r
+ }\r
+ .z-biglistbox-wscroll-pos {\r
+ visibility: visible;\r
+ .size(15px, 115px);\r
+ .borderRadius(2px);\r
+ background: contrast(@baseBackgroundColor);\r
+ .opacity(0.25);\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ z-index: 10;\r
+ }\r
+ .z-biglistbox-wscroll-endbar {\r
+ .size(15px, 7px);\r
+ border: 1px solid @baseBorderColor;\r
+ .horGradient(@baseGradientStart, @baseGradientEnd);\r
+ overflow: hidden;\r
+ position: absolute;\r
+ right: 0;\r
+ z-index: 20;\r
+ }\r
+ }\r
+ // horizontal\r
+ &-horizontal {\r
+ .size(100%, 15px);\r
+ position: absolute;\r
+ left: 0;\r
+ bottom: -16px;\r
+ z-index: 10;\r
+ \r
+ .z-biglistbox-wscroll-drag {\r
+ .size(115px, 15px);\r
+ .encodeURL(background, '~./zkmax/img/big/drag-h.png', no-repeat scroll 0 0 transparent);\r
+ position: absolute;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ z-index: 15;\r
+ \r
+ .z-biglistbox-wscroll-home,\r
+ .z-biglistbox-wscroll-up,\r
+ .z-biglistbox-wscroll-down,\r
+ .z-biglistbox-wscroll-end {\r
+ .size(15px, 15px);\r
+ position: absolute;\r
+ }\r
+ .z-biglistbox-wscroll-home {\r
+ left: 0;\r
+ }\r
+ .z-biglistbox-wscroll-up {\r
+ left: 15px;\r
+ }\r
+ .z-biglistbox-wscroll-down {\r
+ right: 15px;\r
+ }\r
+ .z-biglistbox-wscroll-end {\r
+ right: 0;\r
+ }\r
+ }\r
+ .z-biglistbox-wscroll-pos {\r
+ visibility: visible;\r
+ .size(115px, 15px);\r
+ .borderRadius(2px);\r
+ background: contrast(@baseBackgroundColor);\r
+ .opacity(0.25);\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ z-index: 10;\r
+ }\r
+ .z-biglistbox-wscroll-endbar {\r
+ .size(7px, 15px);\r
+ border: 1px solid @baseBorderColor;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ position: absolute;\r
+ right: -12px;\r
+ overflow: hidden;\r
+ z-index: 20;\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-biglistbox-row {\r
+ &:hover td {\r
+ background: @meshHoverBackgroundColorIE8;\r
+ }\r
+\r
+ &.z-biglistbox-selected {\r
+ td {\r
+ position: static;\r
+ background: @meshSelectedBackgroundColorIE8;\r
+ }\r
+ &:hover td {\r
+ position: static;\r
+ background: @meshSelectedHoverBackgroundColorIE8;\r
+ }\r
+ }\r
+ }\r
+ .z-biglistbox {\r
+ &-header {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ &-hover { //sortable header hover status\r
+ .gradientFallback(@meshTitleHoverStart, @meshTitleHoverEnd);\r
+ }\r
+ &-wscroll {\r
+ &-vertical {\r
+ .z-biglistbox-wscroll-endbar {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+ &-horizontal {\r
+ .z-biglistbox-wscroll-endbar {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-chosenbox {\r
+ display: inline-block;\r
+ border: 1px solid @inputBorderColor;\r
+ line-height: normal;\r
+ background: @inputBackgroundColor;\r
+ overflow: hidden;\r
+ min-height: @baseButtonHeight;\r
+\r
+ &-focus {\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75)');\r
+ }\r
+\r
+ &-item {\r
+ display: inline-block;\r
+ height: 18px;\r
+ border: 1px solid @chosenboxItemBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ margin: -1px 1px 1px 1px;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ vertical-align: middle;\r
+ position: relative;\r
+ white-space: nowrap;\r
+ cursor: pointer;\r
+\r
+ &-content {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayDark);\r
+ display: inline-block;\r
+ height: 16px;\r
+ padding: 0px 15px 0px 3px;\r
+ line-height: 18px;\r
+ float: left;\r
+ }\r
+\r
+ &-focus {\r
+ border-color: @hoverBorderColor;\r
+ background: @hoverBackgroundColor;\r
+ }\r
+ }\r
+\r
+ &-button {\r
+ .iconFontStyle(11px, @iconColor);\r
+ .size(11px, 11px);\r
+ line-height: 11px;\r
+ text-align: center;\r
+ position: absolute;\r
+ right: 2px;\r
+ top: 3px;\r
+\r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ }\r
+ }\r
+\r
+ &-input {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayDark);\r
+ .displaySize(inline-block, 30px, 15px);\r
+ border: 0 !important;\r
+ height: 17px;\r
+ padding: 1px 2px 2px 2px;\r
+ background: transparent !important;\r
+ outline: 0;\r
+ .boxShadow('none');\r
+ margin: 2px;\r
+ }\r
+\r
+ &-disabled {\r
+ background: @disabledBackgroundColor;\r
+ .opacity(@disabledOpacity);\r
+\r
+ .z-chosenbox-item {\r
+ cursor: default !important;\r
+ }\r
+\r
+ .z-chosenbox-item-content {\r
+ padding-right: 3px !important;\r
+ }\r
+\r
+ .z-chosenbox-button {\r
+ display: none !important;\r
+ }\r
+ }\r
+\r
+ &-textcontent {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ display: none;\r
+ white-space: nowrap;\r
+ }\r
+\r
+ &-popup {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayDark);\r
+ display: block;\r
+ border: 1px solid @popupBorderColor;\r
+ padding: 2px;\r
+ background: @popupBackgroundColor;\r
+ position: absolute;\r
+ overflow: auto;\r
+\r
+ &-hidden {\r
+ display: none;\r
+ }\r
+ }\r
+\r
+ &-shadow {\r
+ .borderRadius(@borderRadiusSmall);\r
+ .boxShadow('0 0 15px rgba(0, 0, 0, 0.35)');\r
+ }\r
+\r
+ &-option {\r
+ cursor: pointer;\r
+ padding: 1px 5px;\r
+ &:hover, &-hover {\r
+ background: @hoverBackgroundColor;\r
+ }\r
+ }\r
+\r
+ &-empty {\r
+ font-style: italic;\r
+ color: @disabledColor;\r
+ padding: 1px 5px;\r
+\r
+ &-creatable {\r
+ color: @textColorGrayDark;\r
+ padding-top: 2px;\r
+ cursor: pointer;\r
+ }\r
+ }\r
+\r
+ &-create {\r
+ .iconFontStyle(@baseFontSize, @chosenboxCreateIconColor);\r
+ .size(14px, 14px);\r
+ margin-right: 2px;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-chosenbox {\r
+ &-item {\r
+ &-content {\r
+ line-height: @baseIconHeight;\r
+ }\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+}\r
+\r
+.ie8, .ie9, .ie10 {\r
+ .z-chosenbox {\r
+ &-button {\r
+ .size(12px, 12px);\r
+ line-height: 12px;\r
+ top: 2px;\r
+ }\r
+ }\r
+}\r
--- /dev/null
+/**\r
+ * @{zprefix} v2.0.0-beta.3 - A lightweight WYSIWYG editor\r
+ * Default stylesheet for @{zprefix} editor\r
+ * ------------------------\r
+ * @link http://alex-d.github.io/@{zprefix}\r
+ * @license MIT\r
+ * @author Alexandre Demode (Alex-D)\r
+ * Twitter : @AlexandreDemode\r
+ * Website : alex-d.fr\r
+ */\r
+ \r
+@import "~./zul/less/_header.less";\r
+@zprefix: z-tbeditor;\r
+@url: "~./js/zkmax/inp/ext";\r
+\r
+.@{zprefix}-box, .@{zprefix}-editor {\r
+ display: block;\r
+ position: relative;\r
+ border: 1px solid #DDD;\r
+ width: 96%;\r
+ min-height: 300px;\r
+ margin: 0px auto; }\r
+\r
+.@{zprefix}-box .@{zprefix}-editor {\r
+ margin: 0 auto; }\r
+\r
+.@{zprefix}-box.@{zprefix}-fullscreen {\r
+ background: #FEFEFE; }\r
+\r
+.@{zprefix}-editor, .@{zprefix}-textarea {\r
+ position: relative;\r
+ -webkit-box-sizing: border-box;\r
+ -moz-box-sizing: border-box;\r
+ box-sizing: border-box;\r
+ padding: 1% 2%;\r
+ min-height: 300px;\r
+ width: 100%;\r
+ border-style: none;\r
+ resize: none;\r
+ outline: none; }\r
+\r
+.@{zprefix}-box-blur .@{zprefix}-editor * {\r
+ color: transparent !important;\r
+ text-shadow: 0 0 7px #333; }\r
+.@{zprefix}-box-blur .@{zprefix}-editor img {\r
+ opacity: 0.2; }\r
+\r
+.@{zprefix}-textarea {\r
+ position: relative;\r
+ display: block;\r
+ overflow: auto;\r
+ border: none;\r
+ white-space: normal; }\r
+\r
+.@{zprefix}-box.@{zprefix}-editor-visible .@{zprefix}-textarea {\r
+ position: absolute;\r
+ top: 37px;\r
+ height: 1px !important;\r
+ width: 25%;\r
+ min-height: 0 !important;\r
+ padding: 0 !important;\r
+ background: none;\r
+ opacity: 0; }\r
+\r
+.@{zprefix}-box.@{zprefix}-editor-hidden .@{zprefix}-textarea {\r
+ display: block; }\r
+.@{zprefix}-box.@{zprefix}-editor-hidden .@{zprefix}-editor {\r
+ display: none; }\r
+\r
+.@{zprefix}-editor[contenteditable=true]:empty:before {\r
+ content: attr(placeholder);\r
+ color: #999; }\r
+\r
+.@{zprefix}-button-pane {\r
+ position: relative;\r
+ width: 100%;\r
+ background: #ecf0f1;\r
+ border-bottom: 1px solid #d7e0e2;\r
+ margin: 0;\r
+ padding: 0;\r
+ list-style-type: none;\r
+ line-height: 10px;\r
+ -webkit-backface-visibility: hidden;\r
+ backface-visibility: hidden; }\r
+ .@{zprefix}-button-pane li {\r
+ display: inline-block;\r
+ text-align: center;\r
+ overflow: hidden;\r
+ padding: 0 !important; }\r
+ .@{zprefix}-button-pane li.@{zprefix}-separator {\r
+ width: 1px;\r
+ background: #d7e0e2;\r
+ margin: 0 5px;\r
+ height: 35px; }\r
+ .@{zprefix}-button-pane.@{zprefix}-disable li:not(.@{zprefix}-not-disable) button:not(.@{zprefix}-active) {\r
+ opacity: 0.2;\r
+ cursor: default; }\r
+ .@{zprefix}-button-pane.@{zprefix}-disable li.@{zprefix}-separator {\r
+ background: #e3e9eb; }\r
+ .@{zprefix}-button-pane li button {\r
+ padding: 1px 6px !important; }\r
+ .@{zprefix}-button-pane:not(.@{zprefix}-disable) li button:hover, .@{zprefix}-button-pane:not(.@{zprefix}-disable) li button:focus, .@{zprefix}-button-pane li button.@{zprefix}-active, .@{zprefix}-button-pane li.@{zprefix}-not-disable button:hover, .@{zprefix}-button-pane li.@{zprefix}-not-disable button:focus {\r
+ background-color: #FFF;\r
+ outline: none; }\r
+ .@{zprefix}-button-pane li .@{zprefix}-open-dropdown:after {\r
+ display: block;\r
+ content: " ";\r
+ position: absolute;\r
+ top: 25px;\r
+ right: 3px;\r
+ height: 0;\r
+ width: 0;\r
+ border: 3px solid transparent;\r
+ border-top-color: #555; }\r
+ .@{zprefix}-button-pane .@{zprefix}-buttons-right {\r
+ float: right;\r
+ width: auto; }\r
+ .@{zprefix}-button-pane .@{zprefix}-buttons-right button {\r
+ float: left; }\r
+\r
+.@{zprefix}-dropdown {\r
+ width: 200px;\r
+ border: 1px solid #ecf0f1;\r
+ padding: 5px 0;\r
+ border-top: none;\r
+ background: #FFF;\r
+ margin-left: -1px;\r
+ -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;\r
+ box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px; }\r
+ .@{zprefix}-dropdown button {\r
+ display: block;\r
+ width: 100%;\r
+ height: 35px;\r
+ line-height: 35px;\r
+ text-decoration: none;\r
+ background: #FFF;\r
+ padding: 0 14px;\r
+ color: #333 !important;\r
+ border: none;\r
+ cursor: pointer;\r
+ text-align: left;\r
+ font-size: 15px;\r
+ -webkit-transition: all 0.15s;\r
+ transition: all 0.15s; }\r
+ .@{zprefix}-dropdown button:hover, .@{zprefix}-dropdown button:focus {\r
+ background: #ecf0f1; }\r
+\r
+/* Modal box */\r
+.@{zprefix}-modal {\r
+ position: absolute;\r
+ top: 0;\r
+ left: 50%;\r
+ margin-left: -260px;\r
+ width: 520px;\r
+ height: 350px;\r
+ overflow: hidden;\r
+ -webkit-backface-visibility: hidden;\r
+ backface-visibility: hidden; }\r
+\r
+.@{zprefix}-modal-box {\r
+ position: absolute;\r
+ top: 0;\r
+ left: 50%;\r
+ margin-left: -250px;\r
+ width: 500px;\r
+ padding-bottom: 45px;\r
+ z-index: 1;\r
+ background-color: #FFF;\r
+ text-align: center;\r
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;\r
+ box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;\r
+ -webkit-backface-visibility: hidden;\r
+ backface-visibility: hidden; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-title {\r
+ font-size: 24px;\r
+ font-weight: bold;\r
+ margin: 0 0 20px;\r
+ padding: 15px 0 13px;\r
+ display: block;\r
+ border-bottom: 1px solid #EEE;\r
+ color: #333;\r
+ background: #fbfcfc; }\r
+ .@{zprefix}-modal-box .@{zprefix}-progress {\r
+ width: 100%;\r
+ background: #F00;\r
+ height: 3px;\r
+ position: absolute;\r
+ top: 58px; }\r
+ .@{zprefix}-modal-box .@{zprefix}-progress .@{zprefix}-progress-bar {\r
+ background: #2BC06A;\r
+ height: 100%;\r
+ -webkit-transition: width 0.15s linear;\r
+ transition: width 0.15s linear; }\r
+ .@{zprefix}-modal-box label {\r
+ display: block;\r
+ position: relative;\r
+ margin: 15px 12px;\r
+ height: 27px;\r
+ line-height: 27px;\r
+ overflow: hidden; }\r
+ .@{zprefix}-modal-box label .@{zprefix}-input-infos {\r
+ display: block;\r
+ text-align: left;\r
+ height: 25px;\r
+ line-height: 25px;\r
+ -webkit-transition: all 0.15;\r
+ transition: all 0.15; }\r
+ .@{zprefix}-modal-box label .@{zprefix}-input-infos span {\r
+ display: block;\r
+ color: #859fa5;\r
+ background-color: #fbfcfc;\r
+ border: 1px solid #DEDEDE;\r
+ padding: 0 2%;\r
+ width: 19.5%; }\r
+ .@{zprefix}-modal-box label .@{zprefix}-input-infos span.@{zprefix}-msg-error {\r
+ color: #e74c3c; }\r
+ .@{zprefix}-modal-box label.@{zprefix}-input-error input, .@{zprefix}-modal-box label.@{zprefix}-input-error textarea {\r
+ border: 1px solid #e74c3c; }\r
+ .@{zprefix}-modal-box label.@{zprefix}-input-error .@{zprefix}-input-infos {\r
+ margin-top: -27px; }\r
+ .@{zprefix}-modal-box label input {\r
+ position: absolute;\r
+ top: 0;\r
+ right: 0;\r
+ height: 25px;\r
+ line-height: 25px;\r
+ border: 1px solid #DEDEDE;\r
+ background: transparent;\r
+ width: 72%;\r
+ padding: 0 2%;\r
+ margin: 0 0 0 23%;\r
+ -webkit-transition: all 0.15s;\r
+ transition: all 0.15s; }\r
+ .@{zprefix}-modal-box label input:hover, .@{zprefix}-modal-box label input:focus {\r
+ outline: none;\r
+ border: 1px solid #95a5a6; }\r
+ .@{zprefix}-modal-box label input:focus {\r
+ background: rgba(230, 230, 255, 0.1); }\r
+ .@{zprefix}-modal-box .error {\r
+ margin-top: 25px;\r
+ display: block;\r
+ color: red; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button {\r
+ position: absolute;\r
+ bottom: 10px;\r
+ right: 0;\r
+ text-decoration: none;\r
+ color: #FFF;\r
+ display: block;\r
+ width: 100px;\r
+ height: 35px;\r
+ line-height: 33px;\r
+ margin: 0 10px;\r
+ background-color: #333;\r
+ border: none;\r
+ border-top: none;\r
+ cursor: pointer;\r
+ font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;\r
+ font-size: 16px;\r
+ -webkit-transition: all 0.15s;\r
+ transition: all 0.15s; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-submit {\r
+ right: 110px;\r
+ background: #2bc069; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-submit:hover, .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-submit:focus {\r
+ background: #40d47d;\r
+ outline: none; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-submit:active {\r
+ background: #25a259; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-reset {\r
+ color: #555;\r
+ background: #e6e6e6; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-reset:hover, .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-reset:focus {\r
+ background: #fbfbfb;\r
+ outline: none; }\r
+ .@{zprefix}-modal-box .@{zprefix}-modal-button.@{zprefix}-modal-reset:active {\r
+ background: #d4d4d4; }\r
+\r
+.@{zprefix}-overlay {\r
+ position: absolute;\r
+ background-color: rgba(255, 255, 255, 0.5);\r
+ width: 100%;\r
+ left: 0;\r
+ display: none; }\r
+\r
+/**\r
+ * Fullscreen\r
+ */\r
+body.@{zprefix}-body-fullscreen {\r
+ overflow: hidden; }\r
+\r
+.@{zprefix}-fullscreen {\r
+ position: fixed;\r
+ top: 0;\r
+ left: 0;\r
+ width: 100%;\r
+ height: 100%;\r
+ margin: 0;\r
+ padding: 0;\r
+ z-index: 99999; }\r
+ .@{zprefix}-fullscreen.@{zprefix}-box, .@{zprefix}-fullscreen .@{zprefix}-editor {\r
+ border: none; }\r
+ .@{zprefix}-fullscreen .@{zprefix}-overlay {\r
+ height: 100% !important; }\r
+\r
+/*\r
+ * Reset for resetCss option\r
+ */\r
+.@{zprefix}-editor object, .@{zprefix}-editor embed, .@{zprefix}-editor video, .@{zprefix}-editor img {\r
+ width: auto;\r
+ max-width: 100%; }\r
+.@{zprefix}-editor video, .@{zprefix}-editor img {\r
+ height: auto; }\r
+.@{zprefix}-editor img {\r
+ cursor: move; }\r
+.@{zprefix}-editor.@{zprefix}-reset-css {\r
+ background: #FEFEFE !important;\r
+ font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;\r
+ font-size: 14px !important;\r
+ line-height: 1.45em !important;\r
+ white-space: normal !important;\r
+ color: #333; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css a {\r
+ color: #15c !important;\r
+ text-decoration: underline !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css div, .@{zprefix}-editor.@{zprefix}-reset-css p, .@{zprefix}-editor.@{zprefix}-reset-css ul, .@{zprefix}-editor.@{zprefix}-reset-css ol, .@{zprefix}-editor.@{zprefix}-reset-css blockquote {\r
+ -webkit-box-shadow: none !important;\r
+ box-shadow: none !important;\r
+ background: none !important;\r
+ margin: 0 !important;\r
+ margin-bottom: 15px !important;\r
+ line-height: 1.4em !important;\r
+ font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;\r
+ font-size: 14px !important;\r
+ border: none; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css iframe, .@{zprefix}-editor.@{zprefix}-reset-css object, .@{zprefix}-editor.@{zprefix}-reset-css hr {\r
+ margin-bottom: 15px !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css blockquote {\r
+ margin-left: 32px !important;\r
+ font-style: italic !important;\r
+ color: #555; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css ul, .@{zprefix}-editor.@{zprefix}-reset-css ol {\r
+ padding-left: 20px !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css ul ul, .@{zprefix}-editor.@{zprefix}-reset-css ol ol, .@{zprefix}-editor.@{zprefix}-reset-css ul ol, .@{zprefix}-editor.@{zprefix}-reset-css ol ul {\r
+ border: none;\r
+ margin: 2px !important;\r
+ padding: 0 !important;\r
+ padding-left: 24px !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css hr {\r
+ display: block;\r
+ height: 1px;\r
+ border: none;\r
+ border-top: 1px solid #CCC; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css h1, .@{zprefix}-editor.@{zprefix}-reset-css h2, .@{zprefix}-editor.@{zprefix}-reset-css h3, .@{zprefix}-editor.@{zprefix}-reset-css h4 {\r
+ color: #111;\r
+ background: none;\r
+ margin: 0 !important;\r
+ padding: 0 !important;\r
+ font-weight: bold; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css h1 {\r
+ font-size: 32px !important;\r
+ line-height: 38px !important;\r
+ margin-bottom: 20px !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css h2 {\r
+ font-size: 26px !important;\r
+ line-height: 34px !important;\r
+ margin-bottom: 15px !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css h3 {\r
+ font-size: 22px !important;\r
+ line-height: 28px !important;\r
+ margin-bottom: 7px !important; }\r
+ .@{zprefix}-editor.@{zprefix}-reset-css h4 {\r
+ font-size: 16px !important;\r
+ line-height: 22px !important;\r
+ margin-bottom: 7px !important; }\r
+\r
+/*\r
+ * Black theme\r
+ */\r
+.@{zprefix}-black .@{zprefix}-button-pane {\r
+ background-color: #222;\r
+ border-bottom-color: #343434; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li.@{zprefix}-separator {\r
+ background-color: #343434; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane.@{zprefix}-disable li.@{zprefix}-separator {\r
+ background-color: #2a2a2a; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane:not(.@{zprefix}-disable) li button:hover, .@{zprefix}-black .@{zprefix}-button-pane:not(.@{zprefix}-disable) li button:focus, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-active, .@{zprefix}-black .@{zprefix}-button-pane li.@{zprefix}-not-disable button:hover, .@{zprefix}-black .@{zprefix}-button-pane li.@{zprefix}-not-disable button:focus {\r
+ background-color: #555; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li .@{zprefix}-open-dropdown:after {\r
+ border-top-color: #fff; }\r
+.@{zprefix}-black .@{zprefix}-dropdown {\r
+ border-color: #222;\r
+ background: #222; }\r
+ .@{zprefix}-black .@{zprefix}-dropdown button {\r
+ background: #222;\r
+ color: #fff; }\r
+ .@{zprefix}-black .@{zprefix}-dropdown button:hover, .@{zprefix}-black .@{zprefix}-dropdown button:focus {\r
+ background: #555; }\r
+.@{zprefix}-black .@{zprefix}-modal-box {\r
+ background-color: #222; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box .@{zprefix}-modal-title {\r
+ border-bottom: 1px solid #555;\r
+ color: #fff;\r
+ background: #3c3c3c; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label {\r
+ display: block;\r
+ position: relative;\r
+ margin: 15px 12px;\r
+ height: 27px;\r
+ line-height: 27px;\r
+ overflow: hidden; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label .@{zprefix}-input-infos span {\r
+ color: #eee;\r
+ background-color: #2f2f2f;\r
+ border-color: #222; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label .@{zprefix}-input-infos span.@{zprefix}-msg-error {\r
+ color: #e74c3c; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label.@{zprefix}-input-error input, .@{zprefix}-black .@{zprefix}-modal-box label.@{zprefix}-input-error textarea {\r
+ border-color: #e74c3c; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label input {\r
+ border-color: #222;\r
+ color: #eee;\r
+ background: #333; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label input:hover, .@{zprefix}-black .@{zprefix}-modal-box label input:focus {\r
+ border-color: #95a5a6; }\r
+ .@{zprefix}-black .@{zprefix}-modal-box label input:focus {\r
+ background-color: rgba(230, 230, 255, 0.1); }\r
+.@{zprefix}-black .@{zprefix}-overlay {\r
+ background-color: rgba(0, 0, 0, 0.5); }\r
+\r
+/*\r
+ * Buttons icons\r
+ */\r
+.@{zprefix}-button-pane li button {\r
+ display: block;\r
+ position: relative;\r
+ text-indent: -9999px;\r
+ width: 35px;\r
+ height: 35px;\r
+ overflow: hidden;\r
+ background: transparent url(${c:encodeURL('@{url}/icons-black.png')}) no-repeat;\r
+ border: none;\r
+ cursor: pointer;\r
+ -webkit-transition: background-color 0.15s, background-image 0.15s, opacity 0.15s;\r
+ transition: background-color 0.15s, background-image 0.15s, opacity 0.15s;\r
+ /* English and others */ }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-viewHTML-button {\r
+ background-position: 5px -570px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-formatting-button {\r
+ background-position: 5px -120px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -45px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-italic-button, .@{zprefix}-button-pane li button.@{zprefix}-em-button {\r
+ background-position: 5px -270px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -495px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -470px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-link-button {\r
+ background-position: 5px -345px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-insertImage-button {\r
+ background-position: 5px -245px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyLeft-button {\r
+ background-position: 5px -320px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyCenter-button {\r
+ background-position: 5px -70px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyRight-button {\r
+ background-position: 5px -420px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyFull-button {\r
+ background-position: 5px 5px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-unorderedList-button {\r
+ background-position: 5px -520px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-orderedList-button {\r
+ background-position: 5px -370px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-horizontalRule-button {\r
+ background-position: 5px -220px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-removeformat-button {\r
+ background-position: 5px -395px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -170px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-close-button {\r
+ background-position: 5px -95px; }\r
+\r
+.@{zprefix}-fullscreen .@{zprefix}-button-pane li button.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -145px; }\r
+\r
+.@{zprefix}-button-pane li:first-child button {\r
+ margin-left: 6px; }\r
+.@{zprefix}-button-pane li:last-child button {\r
+ margin-right: 6px; }\r
+\r
+/* French */\r
+.@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -195px; }\r
+.@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -445px; }\r
+.@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -295px; }\r
+\r
+.@{zprefix}-black {\r
+ /* French */ }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button {\r
+ background-image: url(${c:encodeURL('@{url}/icons-white.png')});\r
+ /* English and others */ }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-viewHTML-button {\r
+ background-position: 5px -570px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-formatting-button {\r
+ background-position: 5px -120px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -45px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-italic-button, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-em-button {\r
+ background-position: 5px -270px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -495px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -470px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-link-button {\r
+ background-position: 5px -345px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-insertImage-button {\r
+ background-position: 5px -245px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyLeft-button {\r
+ background-position: 5px -320px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyCenter-button {\r
+ background-position: 5px -70px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyRight-button {\r
+ background-position: 5px -420px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyFull-button {\r
+ background-position: 5px 5px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-unorderedList-button {\r
+ background-position: 5px -520px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-orderedList-button {\r
+ background-position: 5px -370px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-horizontalRule-button {\r
+ background-position: 5px -220px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-removeformat-button {\r
+ background-position: 5px -395px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -170px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-close-button {\r
+ background-position: 5px -95px; }\r
+ .@{zprefix}-black .@{zprefix}-fullscreen .@{zprefix}-button-pane li button.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -145px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li:first-child button {\r
+ margin-left: 6px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li:last-child button {\r
+ margin-right: 6px; }\r
+ .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -195px; }\r
+ .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -445px; }\r
+ .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -295px; }\r
+\r
+@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {\r
+ /* French */\r
+ /* Black theme */\r
+ .@{zprefix}-button-pane li button {\r
+ -webkit-background-size: 25px 600px !important;\r
+ background-size: 25px 600px !important;\r
+ background-image: url(${c:encodeURL('@{url}/icons-black-2x.png')}) !important;\r
+ /* English and others */ }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-viewHTML-button {\r
+ background-position: 5px -570px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-formatting-button {\r
+ background-position: 5px -120px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -45px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-italic-button, .@{zprefix}-button-pane li button.@{zprefix}-em-button {\r
+ background-position: 5px -270px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -495px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -470px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-link-button {\r
+ background-position: 5px -345px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-insertImage-button {\r
+ background-position: 5px -245px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyLeft-button {\r
+ background-position: 5px -320px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyCenter-button {\r
+ background-position: 5px -70px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyRight-button {\r
+ background-position: 5px -420px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-justifyFull-button {\r
+ background-position: 5px 5px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-unorderedList-button {\r
+ background-position: 5px -520px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-orderedList-button {\r
+ background-position: 5px -370px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-horizontalRule-button {\r
+ background-position: 5px -220px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-removeformat-button {\r
+ background-position: 5px -395px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -170px; }\r
+ .@{zprefix}-button-pane li button.@{zprefix}-close-button {\r
+ background-position: 5px -95px; }\r
+ .@{zprefix}-fullscreen .@{zprefix}-button-pane li a.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -145px; }\r
+ .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -195px; }\r
+ .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -445px; }\r
+ .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -295px; }\r
+ .@{zprefix}-black {\r
+ /* French */ }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button {\r
+ -webkit-background-size: 25px 600px !important;\r
+ background-size: 25px 600px !important;\r
+ background-image: url(${c:encodeURL('@{url}/icons-white-2x.png')}) !important;\r
+ /* English and others */ }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-viewHTML-button {\r
+ background-position: 5px -570px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-formatting-button {\r
+ background-position: 5px -120px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -45px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-italic-button, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-em-button {\r
+ background-position: 5px -270px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -495px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -470px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-link-button {\r
+ background-position: 5px -345px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-insertImage-button {\r
+ background-position: 5px -245px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyLeft-button {\r
+ background-position: 5px -320px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyCenter-button {\r
+ background-position: 5px -70px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyRight-button {\r
+ background-position: 5px -420px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-justifyFull-button {\r
+ background-position: 5px 5px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-unorderedList-button {\r
+ background-position: 5px -520px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-orderedList-button {\r
+ background-position: 5px -370px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-horizontalRule-button {\r
+ background-position: 5px -220px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-removeformat-button {\r
+ background-position: 5px -395px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -170px; }\r
+ .@{zprefix}-black .@{zprefix}-button-pane li button.@{zprefix}-close-button {\r
+ background-position: 5px -95px; }\r
+ .@{zprefix}-black .@{zprefix}-fullscreen .@{zprefix}-button-pane li a.@{zprefix}-fullscreen-button {\r
+ background-position: 5px -145px; }\r
+ .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-bold-button, .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strong-button {\r
+ background-position: 5px -195px; }\r
+ .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-underline-button {\r
+ background-position: 5px -445px; }\r
+ .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-strikethrough-button, .@{zprefix}-black .@{zprefix}-fr .@{zprefix}-button-pane li button.@{zprefix}-del-button {\r
+ background-position: 5px -295px; } }\r
+\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-timepicker {\r
+ display: inline-block;\r
+ min-height: @baseButtonHeight;\r
+ white-space: nowrap;\r
+\r
+ &-input {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ height: @baseButtonHeight;\r
+ border: 1px solid @inputBorderColor;\r
+ border-right: 0;\r
+ .leftBorderRadius(@borderRadiusSmall);\r
+ margin: 0;\r
+ padding: 4px 5px;\r
+ line-height: @baseLineHeight;\r
+ background: @inputBackgroundColor;\r
+\r
+ &:focus {\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75)');\r
+ }\r
+ &[readonly] {\r
+ border-color: @readonlyBorderColor;\r
+ background: @readonlyBackgroundColor;\r
+ }\r
+ &[readonly]:focus {\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+\r
+ &-button {\r
+ .iconFontStyle(@baseFontSize, @iconColor);\r
+ display: inline-block;\r
+ min-width: @baseButtonWidth;\r
+ height: @baseButtonHeight;\r
+ border: 1px solid @inputBorderColor;\r
+ .rightBorderRadius(@borderRadiusSmall);\r
+ padding: 4px;\r
+ line-height: @baseLineHeight;\r
+ background: @inputBackgroundColor;\r
+ text-align: left;\r
+ vertical-align: middle;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ border-color: @activeBorderColor;\r
+ .verGradient(@activeGradientStart, @activeGradientEnd);\r
+ .boxShadow('inset 1px 1px 1px #91AAB7');\r
+ }\r
+ input[disabled] + & {\r
+ &:hover,\r
+ &:active {\r
+ border-color: @inputBorderColor;\r
+ .resetGradient();\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+ }\r
+\r
+ &-disabled {\r
+ .opacity(@disabledOpacity);\r
+ & * {\r
+ color: @disabledColor !important;\r
+ background: @disabledBackgroundColor !important;\r
+ cursor: default !important;\r
+ }\r
+ }\r
+\r
+ &-invalid {\r
+ border: 1px solid @invalidBorderColor !important;\r
+ margin-right: -1px;\r
+ background: @baseBackgroundColor;\r
+ .boxShadow(inset -1px 0 0 @invalidBorderColor);\r
+ }\r
+\r
+ &-readonly:focus {\r
+ border-color: @readonlyBorderColor;\r
+ border-right-width: 0;\r
+ background: transparent repeat-x 0 0;\r
+ cursor: default;\r
+ .boxShadow(none);\r
+ }\r
+\r
+ &-rightedge {\r
+ border-right: 1px solid @inputBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ }\r
+}\r
+\r
+.z-timepicker-input {\r
+ &[readonly] {\r
+ cursor: pointer;\r
+ }\r
+}\r
+\r
+.z-timepicker-button.z-timepicker-disabled {\r
+ display: none;\r
+}\r
+\r
+.z-timepicker-button {\r
+ text-align: center;\r
+}\r
+\r
+.z-timepicker-inplace .z-timepicker-input {\r
+ border: 0;\r
+ padding: 3px;\r
+ background: none;\r
+\r
+ &:focus {\r
+ .resetGradient();\r
+ .boxShadow('none');\r
+ }\r
+}\r
+.z-timepicker-inplace .z-timepicker-button {\r
+ visibility: hidden;\r
+}\r
+\r
+.z-timepicker-popup {\r
+ max-height: 200px;\r
+}\r
+\r
+.z-timepicker-option {\r
+ display: block;\r
+ padding: 3px 2px;\r
+ position: relative;\r
+ text-shadow: 0 1px #FFFFFF;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+ color: @baseTextColor;\r
+ text-decoration: none;\r
+}\r
+\r
+.z-timepicker-option:hover {\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+}\r
+\r
+.z-timepicker-option-selected {\r
+ .verGradient(@selectedGradientStart, @selectedGradientEnd);\r
+ .z-comboitem-text {\r
+ color: @selectedColor;\r
+ }\r
+}\r
+\r
+.z-timepicker-option-selected:hover {\r
+ .verGradient(@selectedHoverGradientStart, @selectedHoverGradientEnd);\r
+ .z-timepicker-text {\r
+ color: @selectedHoverColor;\r
+ }\r
+}\r
+\r
+.z-timepicker-popup {\r
+ font-family: @baseContentFontFamily;\r
+ font-weight: normal;\r
+ font-size: @fontSizeMedium;\r
+ display: block;\r
+ border: 1px solid @popupBorderColor;\r
+ padding: 2px;\r
+ background: @popupBackgroundColor;\r
+ position: absolute;\r
+ overflow: auto;\r
+}\r
+\r
+.z-timepicker-content {\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ background: transparent none repeat 0 0;\r
+ position: relative;\r
+ list-style-image: none;\r
+ list-style-position: outside;\r
+ list-style-type: none;\r
+}\r
+\r
+//Shadow\r
+.z-timepicker-shadow {\r
+ .borderRadius(@borderRadiusSmall);\r
+ .boxShadow('0 0 15px rgba(0, 0, 0, 0.35)');\r
+}\r
+\r
+.ie8 {\r
+ .z-timepicker {\r
+ &-button {\r
+ min-width: @baseButtonWidth - 10;\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ .gradientFallback(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ }\r
+ }\r
+\r
+ .z-timepicker-option {\r
+ &-selected {\r
+ .gradientFallback(@selectedGradientStart, @selectedGradientEnd);\r
+ }\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &-selected:hover {\r
+ .gradientFallback(@selectedHoverGradientStart, @selectedHoverGradientEnd);\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-cardlayout {\r
+ position: relative;\r
+ overflow: hidden;\r
+\r
+ &-inner {\r
+ position: absolute;\r
+ overflow: hidden;\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-portallayout,\r
+.z-portalchildren,\r
+.z-portalchildren-content {\r
+ overflow: hidden;\r
+}\r
+.z-portallayout-vertical { \r
+ > .z-portalchildren {\r
+ height: 100%;\r
+ float: left;\r
+ }\r
+}\r
+.z-portalchildren-content {\r
+ .size(100%, 100%);\r
+}\r
+.z-portallayout-horizontal { \r
+ > .z-portalchildren {\r
+ height: 100%;\r
+ }\r
+}\r
+\r
+ \r
+.z-portallayout-horizontal .z-portalchildren-content {\r
+ > .z-panel,\r
+ > .z-panel-move-block {\r
+ float: left;\r
+ } \r
+}\r
+.z-portallayout,\r
+.z-portalchildren {\r
+ -ms-zoom: 1;\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-rowlayout {\r
+ width: 100%;\r
+ *zoom: 1;\r
+ &:before, &:after {\r
+ display: table;\r
+ line-height: 0;\r
+ content: "";\r
+ clear: both;\r
+ }\r
+}\r
+\r
+.z-rowchildren[class*="colspan"] {\r
+ display: block;\r
+ float: left;\r
+ .applyCSS3('box-sizing', 'border-box');\r
+ @media (max-width: 767px) {\r
+ float: none;\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-scrollview {\r
+ position: relative;\r
+ overflow: hidden;\r
+ white-space: nowrap;\r
+ \r
+ &-horizontal {\r
+ .z-scrollview-content {\r
+ height: 100%;\r
+ }\r
+ .z-scrollview-inner {\r
+ display: inline-block;\r
+ vertical-align: top;\r
+ }\r
+ .z-scrollview-scrollbar {\r
+ height: 7px;\r
+ bottom: 1px;\r
+ left: 2px;\r
+ right: 2px;\r
+ \r
+ &-indicator {\r
+ height: 100%;\r
+ }\r
+ }\r
+ }\r
+ &-vertical {\r
+ .z-scrollview-content {\r
+ width: 100%;\r
+ }\r
+ .z-scrollview-scrollbar {\r
+ width: 7px;\r
+ bottom: 2px;\r
+ top: 2px;\r
+ right: 1px;\r
+ \r
+ &-indicator {\r
+ width: 100%;\r
+ }\r
+ }\r
+ }\r
+ //content and child\r
+ &-content {\r
+ .applyCSS3('transition-duration', '0');\r
+ .applyCSS3('transform-origin', '0 0');\r
+ .applyCSS3('transition-timing-function', 'cubic-bezier(0.33, 0.66, 0.66, 1)');\r
+ .applyCSS3('transition-delay', '0');\r
+ .transform('translate3d(0, 0, 0)');\r
+ }\r
+ &-inner {\r
+ position: relative;\r
+ zoom: 1;\r
+ }\r
+ //scrollbar\r
+ &-scrollbar {\r
+ position: absolute;\r
+ z-index: 100;\r
+ pointer-events: none;\r
+ opacity: 0;\r
+ overflow: hidden;\r
+ .applyCSS3('transition-property', 'opacity');\r
+ .applyCSS3('transition-duration', '0');\r
+ \r
+ &-indicator {\r
+ border: 1px solid rgba(255, 255, 255, 0.9);\r
+ .borderRadius(3px);\r
+ background: rgba(0, 0, 0, 0.5);\r
+ background-clip: padding-box;\r
+ position: absolute;\r
+ z-index: 100;\r
+ pointer-events: none;\r
+ .applyCSS3('box-sizing', 'border-box');\r
+ .applyCSS3('transition-timing-function', 'cubic-bezier(0.33, 0.66, 0.66, 1)');\r
+ .applyCSS3('transition-duration', '0');\r
+ .transform('translate3d(0, 0, 0)');\r
+ }\r
+ }\r
+ //loading image\r
+ &-load {\r
+ .displaySize(none, 100%, 100%);\r
+ text-align: center;\r
+ vertical-align : middle;\r
+ position: absolute;\r
+ \r
+ &-up, &-down,\r
+ &-left, &-right {\r
+ .size(32px, 32px);\r
+ position: absolute;\r
+ z-index: 999;\r
+ }\r
+ &-up {\r
+ .encodeThemeURL(background-image, '~./zkmax/img/tablet/layout/load-up.png');\r
+ }\r
+ &-down {\r
+ .encodeThemeURL(background-image, '~./zkmax/img/tablet/layout/load-down.png');\r
+ }\r
+ &-left {\r
+ .encodeThemeURL(background-image, '~./zkmax/img/tablet/layout/load-left.png');\r
+ }\r
+ &-right {\r
+ .encodeThemeURL(background-image, '~./zkmax/img/tablet/layout/load-right.png');\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";
+
+.z-tablechildren {
+ vertical-align: top;
+}
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.restUl() {\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ list-style: none;\r
+}\r
+.itemSelected() {\r
+ .z-navitem-selected .z-navitem-content {\r
+ color: @navSelectedColor;\r
+ background: @navSelectedBackgroundColor;\r
+ \r
+ &:hover {\r
+ background: lighten(@navSelectedBackgroundColor, 5%);\r
+ }\r
+ }\r
+}\r
+.navLevel(@level) {\r
+ .z-nav-content,\r
+ .z-navitem-content {\r
+ &:hover {\r
+ background: @navHoverBackgroundColor;\r
+ }\r
+ &[disabled]:hover {\r
+ color: @navColor;\r
+ background: darken(@navBackgroundColor, (@level - 1) * 3);\r
+ }\r
+ }\r
+ .z-nav-content,\r
+ .z-navitem-content,\r
+ .z-navseparator {\r
+ background: darken(@navBackgroundColor, (@level - 1) * 3);\r
+ }\r
+}\r
+// Navbar\r
+.z-navbar {\r
+ display: block;\r
+ position: relative;\r
+ white-space: nowrap;\r
+ ul {\r
+ .restUl();\r
+ }\r
+ // overall style\r
+ > ul { //first level\r
+ .navLevel(1);\r
+ \r
+ ul { //second level\r
+ display: none;\r
+ width: auto;\r
+ .navLevel(2);\r
+ \r
+ ul { //third level\r
+ .navLevel(3);\r
+ }\r
+ }\r
+ }\r
+ .itemSelected();\r
+ // horizontal style\r
+ &-horizontal {\r
+ li {\r
+ display: inline-block;\r
+ min-width: 180px;\r
+ }\r
+ > ul { //topmost level\r
+ .z-nav-content,\r
+ .z-navitem-content {\r
+ border-left-width: 0;\r
+ }\r
+ .navLevel(1);\r
+ > li:first-child a,\r
+ > .z-navseparator + .z-nav > .z-nav-content,\r
+ > .z-navseparator + .z-navitem > .z-navitem-content {\r
+ border-left-width: 1px;\r
+ }\r
+ ul { //second level\r
+ position: absolute;\r
+ left: 0;\r
+ \r
+ .z-nav-content,\r
+ .z-navitem-content {\r
+ border-width: 0 1px 1px 0;\r
+ }\r
+ > li:first-child a,\r
+ > .z-navseparator + .z-nav > .z-nav-content,\r
+ > .z-navseparator + .z-navitem > .z-navitem-content {\r
+ border-left-width: 1px;\r
+ }\r
+ ul { //third level\r
+ > li:first-child a {\r
+ border-left-width: 1px;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ .z-nav-content:before {\r
+ .size(100%, 4px);\r
+ background: @navSelectedBackgroundColor;\r
+ position: absolute;\r
+ bottom: 0;\r
+ left: 0;\r
+ }\r
+ .z-navseparator {\r
+ min-width: @baseWidth + 1; //plus 1 for center line\r
+ line-height: @baseBarHeight;\r
+ vertical-align: top; //for collapsed navbar\r
+ position: relative;\r
+ \r
+ &:before {\r
+ .size(1px, @baseBarHeight);\r
+ position: absolute;\r
+ top: 0;\r
+ left: @baseWidth / 2;\r
+ }\r
+ }\r
+ }\r
+ // vertical style\r
+ &-vertical {\r
+ > ul { //topmost level\r
+ > li:first-child a {\r
+ border-top-width: 1px;\r
+ }\r
+ .navLevel(1);\r
+ }\r
+ }\r
+}\r
+\r
+// Nav and Navitem\r
+.z-nav,\r
+.z-navitem {\r
+ &-content {\r
+ color: @navColor;\r
+ display: block;\r
+ height: @baseBarHeight;\r
+ border: 1px solid @navBorderColor;\r
+ padding: 0 8px;\r
+ position: relative;\r
+ overflow: hidden;\r
+ text-decoration: none;\r
+ line-height: @baseBarHeight;\r
+ }\r
+ &-image {\r
+ min-width: @navImageSize;\r
+ margin-bottom: 4px;\r
+ }\r
+ &-image,\r
+ i {\r
+ font-size: @baseFontSize;\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ margin-right: 12px;\r
+ }\r
+ &-text {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+ display: inline-block;\r
+ }\r
+}\r
+\r
+.z-nav-info {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeSmall, bold, @navSelectedColor);\r
+ display: inline-block;\r
+ height: 14px;\r
+ .borderRadius(@baseBorderRadius);\r
+ margin-left: 8px;\r
+ padding: 0 4px;\r
+ line-height: 14px;\r
+ background: lighten(@navSelectedBackgroundColor, 10%);\r
+ text-align: center;\r
+ .boxShadow('0 1px 2px rgba(0,0,0,0.5) inset, 0 1px 0 rgba(255,255,255,0.2)');\r
+}\r
+\r
+.z-navitem-content[disabled],\r
+.z-navitem-content[disabled]:hover {\r
+ cursor: default;\r
+ \r
+ i, img, .z-navitem-text {\r
+ .opacity(0.5);\r
+ }\r
+}\r
+\r
+// NavSeparetor\r
+.z-navseparator:before {\r
+ content: '';\r
+ display: block;\r
+ background: @navSeparatorColor;\r
+}\r
+\r
+// Collapsed\r
+.z-navbar-collapsed {\r
+ > ul { //topmost level\r
+ > .z-nav > .z-nav-content ,\r
+ > .z-navitem > .z-navitem-content {\r
+ border-width: 0;\r
+ \r
+ > i {\r
+ margin-right: 0;\r
+ text-align: center;\r
+ }\r
+ &:hover {\r
+ color: @navColor;\r
+ background: @navBackgroundColor;\r
+ }\r
+ }\r
+ > .z-navseparator + .z-nav > .z-nav-content,\r
+ > .z-navseparator + .z-navitem > .z-navitem-content {\r
+ border-width: 0;\r
+ }\r
+ > .z-nav > .z-nav-content > .z-nav-text ,\r
+ > .z-navitem > .z-navitem-content > .z-navitem-text {\r
+ display: none;\r
+ }\r
+ > .z-navitem-selected:hover > .z-navitem-content {\r
+ color: @navSelectedColor;\r
+ background: lighten(@navSelectedBackgroundColor, 5%);\r
+ }\r
+ > .z-nav > .z-nav-content > .z-nav-info {\r
+ margin-left: 8px;\r
+ }\r
+ }\r
+}\r
+.z-navbar-horizontal.z-navbar-collapsed {\r
+ > ul { //topmost level\r
+ > .z-nav,\r
+ > .z-navitem {\r
+ min-width: @navCollapsedWidth;\r
+ }\r
+ }\r
+}\r
+.z-navbar-vertical.z-navbar-collapsed {\r
+ > ul { //topmost level\r
+ min-width: @navCollapsedWidth;\r
+ display: inline-block;\r
+ }\r
+}\r
+\r
+.z-nav-text-popup,\r
+.z-navitem-text-popup {\r
+ color: @navColor;\r
+ min-width: 180px;\r
+ height: @baseBarHeight;\r
+ border: 1px solid @navBorderColor;\r
+ padding: 0 32px;\r
+ line-height: @baseBarHeight;\r
+ background: @navBackgroundColor;\r
+ cursor: pointer;\r
+ white-space: nowrap;\r
+ z-index: @basePopupZIndex;\r
+ \r
+ &[disabled] {\r
+ cursor: default;\r
+ .boxShadow('none');\r
+ \r
+ &:hover {\r
+ cursor: default;\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+}\r
+.z-navbar-vertical,\r
+.z-nav-popup {\r
+ li {\r
+ display: block;\r
+ }\r
+ .z-nav-content:before {\r
+ content: '';\r
+ .displaySize(none, 4px, @baseBarHeight);\r
+ background: @navSelectedBackgroundColor;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ }\r
+ .z-navseparator {\r
+ height: @baseHeight + 1; //plus 1 for center line\r
+ position: relative;\r
+ \r
+ &:before {\r
+ .size(100%, 1px);\r
+ position: absolute;\r
+ top: @baseHeight / 2;\r
+ }\r
+ }\r
+ .z-nav-content,\r
+ .z-navitem-content {\r
+ border-top-width: 0;\r
+ }\r
+ .z-navseparator + .z-nav > .z-nav-content,\r
+ .z-navseparator + .z-navitem > .z-navitem-content {\r
+ border-top-width: 1px;\r
+ }\r
+}\r
+.z-nav-popup {\r
+ border-top-width: 0;\r
+ overflow: hidden;\r
+ z-index: @basePopupZIndex;\r
+ .navLevel(2);\r
+ .restUl();\r
+ \r
+ ul { //third level\r
+ display: none;\r
+ position: relative;\r
+ .restUl();\r
+ .navLevel(3);\r
+ }\r
+ .itemSelected();\r
+}\r
+.z-nav-content:before {\r
+ content: '';\r
+ display: none;\r
+}\r
+.z-nav-selected > .z-nav-content:before {\r
+ display: block;\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-dropupload {\r
+ .size(100px, 100px);\r
+ .borderRadius(10px);\r
+ padding: 2px;\r
+ background: #E6E6E6;\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+//reset table\r
+.resetTable() {\r
+ border-spacing: 0;\r
+ th, td {\r
+ padding: 0;\r
+ background-clip: padding-box;\r
+ }\r
+ th {\r
+ text-align: inherit;\r
+ }\r
+}\r
+\r
+.z-hbox,\r
+.z-vbox {\r
+ .resetTable();\r
+ \r
+ &-separator {\r
+ margin: 0;\r
+ padding: 0;\r
+ }\r
+}\r
+.z-hbox-separator {\r
+ width: 0.3em;\r
+}\r
+.z-vbox-separator {\r
+ height: 0.3em;\r
+ td {\r
+ line-height: 0;\r
+ }\r
+}\r
+\r
+// Splitter\r
+tr.z-splitter-outer > td {\r
+ height: @splitterSize;\r
+ max-height: @splitterSize;\r
+}\r
+td.z-splitter-outer {\r
+ width: @splitterSize;\r
+ max-width: @splitterSize;\r
+ padding: 0;\r
+}\r
+.z-splitter {\r
+ border: 1px solid @baseBorderColor;\r
+ \r
+ &-horizontal {\r
+ width: @splitterSize;\r
+ border-width: 0 1px;\r
+ .horGradient(@splitterGradientStart, @splitterGradientEnd);\r
+ overflow: hidden;\r
+ cursor: e-resize;\r
+ \r
+ > .z-splitter-button {\r
+ .size(@splitterSize, 30px);\r
+ border-width: 1px 0;\r
+ }\r
+ .z-splitter-icon {\r
+ font-size: @fontSizeXSmall + 1; // add 1px more for .z-icon-caret\r
+ position: absolute;\r
+ top: 9px;\r
+ left: 1px;\r
+ \r
+ &.z-icon-ellipsis-v {\r
+ font-size: @fontSizeXSmall;\r
+ top: -21px;\r
+ left: 2px;\r
+ cursor: e-resize;\r
+ }\r
+ &.z-icon-ellipsis-v ~ .z-splitter-icon.z-icon-ellipsis-v {\r
+ top: 39px;\r
+ }\r
+ }\r
+ }\r
+ &-vertical {\r
+ height: @splitterSize;\r
+ border-width: 1px 0;\r
+ .verGradient(@splitterGradientStart, @splitterGradientEnd);\r
+ overflow: hidden;\r
+ cursor: s-resize;\r
+ \r
+ > .z-splitter-button {\r
+ .size(30px, @splitterSize);\r
+ border-width: 0 1px;\r
+ }\r
+ .z-splitter-icon {\r
+ font-size: @fontSizeXSmall;\r
+ line-height: normal;\r
+ position: absolute;\r
+ top: -3px;\r
+ left: 11px;\r
+ \r
+ &.z-icon-ellipsis-h {\r
+ top: -2px;\r
+ left: -16px;\r
+ cursor: s-resize;\r
+ }\r
+ &.z-icon-ellipsis-h ~ .z-splitter-icon.z-icon-ellipsis-h {\r
+ left: 36px;\r
+ }\r
+ }\r
+ }\r
+ &-button {\r
+ color: @iconColor;\r
+ display: inline-block;\r
+ border: 1px solid @baseBorderColor;\r
+ position: relative;\r
+ vertical-align: top; //vertical-align: make it looks same in diff browsers\r
+ cursor: pointer;\r
+ \r
+ &-disabled {\r
+ border: 0;\r
+ \r
+ .z-splitter-vertical & {\r
+ cursor: s-resize;\r
+ }\r
+ .z-splitter-horizontal & {\r
+ cursor: e-resize;\r
+ }\r
+ }\r
+ }\r
+ &-icon {\r
+ .opacity(0.5);\r
+ }\r
+ &-nosplitter {\r
+ cursor: default;\r
+ }\r
+}\r
+.z-icon-caret-up,\r
+.z-icon-caret-down,\r
+.z-icon-caret-right,\r
+.z-icon-caret-left {\r
+ .z-splitter-button:hover & {\r
+ .opacity(1);\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-splitter {\r
+ &-horizontal {\r
+ .gradientFallback(@splitterGradientStart, @splitterGradientEnd);\r
+ .z-splitter-icon {\r
+ &.z-icon-ellipsis-v {\r
+ font-size: @baseFontSize;\r
+ }\r
+ &.z-icon-ellipsis-v ~ .z-splitter-icon.z-icon-ellipsis-v {\r
+ top: 37px;\r
+ }\r
+ }\r
+ }\r
+ &-vertical {\r
+ .gradientFallback(@splitterGradientStart, @splitterGradientEnd);\r
+ .z-splitter-icon {\r
+ &.z-icon-ellipsis-h {\r
+ font-size: @baseFontSize;\r
+ top: -3px;\r
+ }\r
+ &.z-icon-ellipsis-h ~ .z-splitter-icon.z-icon-ellipsis-h {\r
+ left: 38px;\r
+ }\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-hlayout, .z-vlayout {\r
+ overflow: hidden;\r
+}\r
+.z-hlayout {\r
+ white-space: nowrap;\r
+}\r
+.z-hlayout-inner {\r
+ display: inline-block;\r
+ position: relative;\r
+ vertical-align: top;\r
+ white-space: normal;\r
+ .z-valign-bottom > & {\r
+ vertical-align: bottom;\r
+ }\r
+ .z-valign-top > & {\r
+ vertical-align: top;\r
+ }\r
+ .z-valign-middle > & {\r
+ vertical-align: middle;\r
+ }\r
+}\r
+.z-vlayout-inner {\r
+ position: relative;\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-calendar {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayLight);\r
+ border: 1px solid @baseBorderColor;\r
+ min-width: 230px;\r
+ padding: 2px;\r
+\r
+ a {\r
+ text-decoration: none;\r
+ }\r
+ th {\r
+ font-family: @baseTitleFontFamily;\r
+ font-weight: bold;\r
+ padding: 12px 3px;\r
+ }\r
+\r
+ table {\r
+ width: 100%;\r
+ }\r
+\r
+ &-title {\r
+ font-family: @baseTitleFontFamily;\r
+ font-weight: bold;\r
+ color: @calendarTitleColor;\r
+ width: 100%;\r
+ padding: 5px 24px;\r
+ line-height: @baseLineHeight;\r
+ text-align: center;\r
+\r
+ &:hover {\r
+ color: @calendarTitleHoverColor;\r
+ }\r
+ }\r
+\r
+ &-header {\r
+ position: relative;\r
+\r
+ & > a {\r
+ display: inline-block;\r
+ line-height: normal;\r
+ }\r
+ }\r
+\r
+ &-body {\r
+ height: 100%;\r
+ }\r
+\r
+ &-decade {\r
+ min-height: 162px;\r
+ }\r
+ &-month,\r
+ &-year {\r
+ min-height: 162px;\r
+\r
+ .z-calendar-cell {\r
+ min-height: 48px;\r
+ line-height: @baseLineHeight * 3;\r
+ }\r
+ }\r
+ &-cell {\r
+ font-size: @fontSizeSmall;\r
+ color: @calendarCellColor;\r
+ min-width: @baseButtonWidth;\r
+ min-height: @baseButtonHeight;\r
+ padding: 3px 0;\r
+ line-height: @baseLineHeight + 3;\r
+ background: @baseBackgroundColor;\r
+ text-align: center;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ .borderRadius(@baseBorderRadius);\r
+ background: @hoverBackgroundColor;\r
+ }\r
+ }\r
+ &-weekend {\r
+ color: @weekendColor;\r
+ background: @weekendBackgroundColor;\r
+ }\r
+ &-weekday {\r
+ color: @weekColor;\r
+ background: @baseBackgroundColor;\r
+ }\r
+ &-outrange {\r
+ color: @disabledColor;\r
+ text-shadow: none;\r
+ }\r
+ &-weekofyear {\r
+ font-style: italic;\r
+ color: @weekofyearColor;\r
+ background: @weekofyearBackgroundColor;\r
+ cursor: default;\r
+ \r
+ &:hover {\r
+ color: @weekofyearColor;\r
+ .borderRadius(0);\r
+ background: @weekofyearBackgroundColor;\r
+ }\r
+ }\r
+\r
+ // for transition's animation use only\r
+ &-anima {\r
+ overflow: hidden;\r
+ position: relative;\r
+ }\r
+ &-anima-inner {\r
+ width: 200%;\r
+ position: absolute;\r
+\r
+ table {\r
+ width: 50%;\r
+ float: left;\r
+ }\r
+ }\r
+ &-selected {\r
+ color: @calendarSelectedColor;\r
+ .borderRadius(@baseBorderRadius);\r
+ background: @selectedGradientEnd;\r
+ \r
+ &:hover {\r
+ color: @calendarSelectedHoverColor;\r
+ background: @selectedHoverGradientEnd;\r
+ }\r
+ }\r
+ &-outside {\r
+ color: @disabledColor;\r
+ text-shadow: none;\r
+ }\r
+ &-icon {\r
+ .iconFontStyle(20px, @iconColor);\r
+ .size(@baseButtonWidth, @baseButtonHeight);\r
+ padding: 0 8px;\r
+ position: absolute;\r
+\r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ }\r
+ }\r
+ &-right {\r
+ right: 0px;\r
+ }\r
+ &-left {\r
+ left: 0px;\r
+ }\r
+\r
+ &-left[disabled],\r
+ &-right[disabled],\r
+ &-disabled {\r
+ color: @disabledColor !important;\r
+ .opacity(0.4);\r
+ text-shadow: none !important;\r
+ cursor: default !important;\r
+\r
+ &:hover {\r
+ background: @baseBackgroundColor;\r
+ }\r
+ }\r
+}\r
+\r
+.z-datebox-popup {\r
+ position: absolute;\r
+\r
+ .z-calendar {\r
+ border: 0;\r
+ & + .z-timebox {\r
+ margin: 5px;\r
+ }\r
+ & ~ .z-datebox-timezone {\r
+ margin: 0 5px 5px;\r
+ }\r
+ }\r
+\r
+}\r
+\r
+// Calendar and Datebox\r
+.z-datebox-timezone {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+}\r
+\r
+.ie8 {\r
+ .z-calendar {\r
+ min-width: 224px;\r
+ &-cell {\r
+ min-height: @baseButtonHeight - 6;\r
+ }\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";
+
+//reset table
+.resetTable() {
+ table {
+ border-spacing: 0;
+ th, td {
+ background-clip: padding-box;
+ padding: 0;
+ }
+ th {
+ text-align: inherit;
+ }
+ }
+}
+
+//grid
+.z-grid {
+ border: 1px solid @baseBorderColor;
+ overflow: hidden;
+ zoom: 1;
+ //grid header
+ &-header {
+ width: 100%;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ position: relative;
+ overflow: hidden;
+ .resetTable();
+ }
+ &-header-border {
+ border-bottom: 1px solid @meshTitleBorderColor;
+ margin-top: -1px;
+ position: relative;
+ }
+ //grid body
+ &-body {
+ margin-top: auto;
+ position: relative;
+ overflow: hidden;
+ .resetTable();
+ }
+ &-emptybody td {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @disabledColor);
+ font-style: italic;
+ text-align: center;
+ height: 1px;
+ }
+ //grid footer
+ &-footer {
+ border-top: 1px solid @baseBorderColor;
+ background: @meshFootBackgroundColor;
+ overflow: hidden;
+ .resetTable();
+
+ .z-footer {
+ overflow: hidden;
+ }
+ }
+ &-odd > .z-row-inner,
+ &-odd > .z-cell {
+ background: @meshStripeBackgroundColor;
+ }
+}
+//column
+.z-columns {
+ th:first-child {
+ border-left: none;
+
+ // B50-3306729: the first header should have border-left when the first column is covered with other header
+ &.z-columns-border {
+ border-left: 1px solid @meshTitleBorderColor;
+ }
+ }
+ &-bar {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ }
+}
+.z-column {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ padding: 0;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &-hover {
+ .verGradient(@meshTitleHoverStart, @meshTitleHoverEnd);
+ .z-column-button {
+ display: block;
+ }
+ }
+ .z-column-content {
+ position: relative;
+ }
+ &-sort {
+ .z-column-content {
+ cursor: pointer;
+ }
+ .z-column-sorticon {
+ color: @iconColor;
+ position: absolute;
+ top: -7px;
+ left: 50%;
+ }
+ }
+ &-button {
+ color: @iconColor;
+ display: none;
+ .size(@baseButtonWidth - 1, @baseBarHeight);
+ border-left: 1px solid darken(@meshTitleHoverStart, 15%);
+ line-height: @baseBarHeight;
+ text-align: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 15;
+ cursor: pointer;
+ text-decoration: none;
+ .boxShadow('inset 1px 0 #FFFFFF');
+
+ &:hover {
+ .verGradient(darken(@meshTitleHoverStart, 5%), darken(@meshTitleHoverEnd, 10%));
+ }
+ }
+ &-sizing,
+ &-sizing .z-column-button,
+ &-sizing.z-column-sort .z-column-content {
+ cursor: e-resize;
+ }
+}
+//row and cell
+.z-row {
+ td:first-child {
+ border-left: none;
+ }
+ .z-row-inner,
+ .z-cell {
+ border-left: 1px solid @meshContentBorderColor;
+ overflow: hidden;
+ }
+ &:hover {
+ > .z-row-inner,
+ > .z-cell {
+ .verGradient(@meshContentHoverStart, @meshContentHoverEnd);
+ background-clip: padding-box;
+ }
+ > .z-row-inner > .z-row-content { //for nest issue
+ color: @hoverColor;
+ }
+ }
+}
+
+body:not(.gecko) {
+ .z-row {
+ &:hover {
+ > .z-row-inner,
+ > .z-cell {
+ position: relative;
+ }
+ }
+ }
+}
+
+.ie8 { //IE8 does not support :not() pseudo class
+ .z-row {
+ &:hover {
+ > .z-row-inner,
+ > .z-cell {
+ position: relative;
+ }
+ }
+ }
+}
+
+//Group
+.z-group {
+ &-inner {
+ border-top: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ .verGradient(@groupGradientStart, @groupGradientEnd);
+ position: relative;
+ overflow: hidden;
+
+ .z-group-content,
+ .z-cell {
+ padding: 3px 5px;
+ }
+ }
+ &-icon {
+ .iconFontStyle(@baseFontSize, @iconColor);
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ line-height: @baseIconHeight;
+ text-align: center;
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ color: @iconHoverColor;
+ }
+ }
+}
+.z-groupfoot-inner {
+ .verGradient(@groupGradientEnd, @groupGradientStart);
+ overflow: hidden;
+}
+//content
+.z-column-content,
+.z-row-content,
+.z-group-content,
+.z-groupfoot-content,
+.z-footer-content {
+ font-family: @baseContentFontFamily;
+ font-size: @fontSizeMedium;
+ color: @textColorGrayLight;
+ padding: 4px 5px;
+ line-height: @baseButtonHeight;
+ overflow: hidden;
+}
+.z-column-content {
+ font-weight: bold;
+ padding: 4px 5px 3px;
+}
+.z-group-content,
+.z-groupfoot-content {
+ .z-label {
+ font-weight: bold;
+ }
+}
+//Cell Content
+.z-grid-body .z-cell {
+ font-family: @baseContentFontFamily;
+ font-size: @fontSizeMedium;
+ padding: 4px 5px;
+ line-height: @baseButtonHeight;
+ overflow: hidden;
+}
+//paging
+.z-grid-paging {
+ &-top {
+ width: 100%;
+ border-bottom: 1px solid @pagingBorderColor;
+ overflow: hidden;
+ }
+ &-bottom {
+ width: 100%;
+ border-top: 1px solid @pagingBorderColor;
+ overflow: hidden;
+ }
+}
+.z-grid-autopaging {
+ .z-row-content,
+ .z-groupfoot-content {
+ height: @meshAutoPagingRowHeight;
+ overflow: hidden;
+ }
+ .z-group-content {
+ height: @meshAutoPagingRowHeight - 2;
+ overflow: hidden;
+ }
+}
+//column menu
+.z-columns-menugrouping .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-group.png');
+}
+.z-columns-menuungrouping .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-ungroup.png');
+}
+.z-columns-menuascending .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-arrowup.png');
+}
+.z-columns-menudescending .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-arrowdown.png');
+}
+// IE 8
+.ie8 {
+ .z-grid-header {
+ background: @meshBackgroundColorIE8;
+ }
+ .z-column {
+ position: static;
+ background: @meshBackgroundColorIE8;
+ &-hover {
+ background: @meshHoverBackgroundColorIE8;
+ }
+
+ &-button:hover {
+ background: darken(@meshHoverBackgroundColorIE8, 3%);
+ }
+ }
+ .z-row:hover {
+ > .z-row-inner,
+ > .z-cell {
+ position: static;
+ background: @meshHoverBackgroundColorIE8;
+ }
+ }
+ .z-group-inner {
+ background: @meshGroupBackgroundColorIE8;
+ }
+ .z-groupfoot-inner {
+ background: @meshGroupFooterBackgroundColorIE8;
+ }
+}
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-combobox,\r
+.z-bandbox,\r
+.z-datebox,\r
+.z-timebox,\r
+.z-spinner,\r
+.z-doublespinner {\r
+ display: inline-block;\r
+ min-height: @baseButtonHeight;\r
+ white-space: nowrap;\r
+\r
+ &-input {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ height: @baseButtonHeight;\r
+ border: 1px solid @inputBorderColor;\r
+ border-right: 0;\r
+ .leftBorderRadius(@borderRadiusSmall);\r
+ margin: 0;\r
+ padding: 4px 5px;\r
+ line-height: @baseLineHeight;\r
+ background: @inputBackgroundColor;\r
+\r
+ &:focus {\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75)');\r
+ }\r
+ &[readonly] {\r
+ border-color: @readonlyBorderColor;\r
+ background: @readonlyBackgroundColor;\r
+ }\r
+ &[readonly]:focus {\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+\r
+ &-button {\r
+ .iconFontStyle(@baseFontSize, @iconColor);\r
+ display: inline-block;\r
+ min-width: @baseButtonWidth;\r
+ height: @baseButtonHeight;\r
+ border: 1px solid @inputBorderColor;\r
+ .rightBorderRadius(@borderRadiusSmall);\r
+ padding: 4px;\r
+ line-height: @baseLineHeight;\r
+ background: @inputBackgroundColor;\r
+ text-align: left;\r
+ vertical-align: middle;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ border-color: @activeBorderColor;\r
+ .verGradient(@activeGradientStart, @activeGradientEnd);\r
+ .boxShadow('inset 1px 1px 1px #91AAB7');\r
+ }\r
+ input[disabled] + & {\r
+ &:hover,\r
+ &:active {\r
+ border-color: @inputBorderColor;\r
+ .resetGradient();\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+ }\r
+\r
+ &-disabled {\r
+ .opacity(@disabledOpacity);\r
+ & * {\r
+ color: @disabledColor !important;\r
+ background: @disabledBackgroundColor !important;\r
+ cursor: default !important;\r
+ }\r
+ }\r
+\r
+ &-invalid {\r
+ border: 1px solid @invalidBorderColor !important;\r
+ margin-right: -1px;\r
+ background: @baseBackgroundColor;\r
+ .boxShadow(inset -1px 0 0 @invalidBorderColor);\r
+ }\r
+\r
+ &-readonly:focus {\r
+ border-color: @readonlyBorderColor;\r
+ border-right-width: 0;\r
+ background: transparent repeat-x 0 0;\r
+ cursor: default;\r
+ .boxShadow(none);\r
+ }\r
+\r
+ &-rightedge {\r
+ border-right: 1px solid @inputBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ }\r
+}\r
+\r
+.z-combobox-input,\r
+.z-bandbox-input,\r
+.z-datebox-input {\r
+ &[readonly] {\r
+ cursor: pointer;\r
+ }\r
+}\r
+\r
+.z-combobox-button.z-combobox-disabled,\r
+.z-bandbox-button.z-bandbox-disabled,\r
+.z-datebox-button.z-datebox-disabled,\r
+.z-timebox-button.z-timebox-disabled,\r
+.z-spinner-button.z-spinner-disabled,\r
+.z-doublespinner-button.z-doublespinner-disabled {\r
+ display: none;\r
+}\r
+\r
+.z-combobox-button {\r
+ font-size: @fontSizeLarge;\r
+ min-height: @baseButtonHeight;\r
+ padding-left: 7px;\r
+ padding-top: 5px;\r
+}\r
+\r
+.z-datebox-button,\r
+.z-bandbox-button {\r
+ text-align: center;\r
+ /*remove input background*/\r
+ background: @baseBackgroundColor;\r
+}\r
+\r
+.z-timebox-button,\r
+.z-spinner-button,\r
+.z-doublespinner-button {\r
+ padding: 0;\r
+ position: relative;\r
+\r
+ &:hover,\r
+ &:active {\r
+ .resetGradient();\r
+ .boxShadow(none);\r
+ }\r
+\r
+ & > a {\r
+ color: @iconColor;\r
+ .size(@baseButtonWidth, @baseButtonHeight / 2);\r
+ padding: 0 7px;\r
+ background: @baseBackgroundColor;\r
+ position: absolute;\r
+ left: 0;\r
+ overflow: hidden;\r
+ text-decoration: none;\r
+\r
+ &:first-child {// up icon\r
+ top: -1px;\r
+\r
+ &:active {\r
+ top: 0;\r
+ }\r
+ }\r
+ &:hover {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ border-color: @activeBorderColor;\r
+ .verGradient(@activeGradientStart, @activeGradientEnd);\r
+ .boxShadow('inset 1px 1px 1px #91AAB7');\r
+ }\r
+ }\r
+ // separator\r
+ & > i {\r
+ z-index: 2; // greater than arrow icon\r
+ }\r
+ &:hover > i {\r
+ .size(@baseButtonWidth, 1px);\r
+ border-top: 1px solid @hoverBorderColor;\r
+ position: absolute;\r
+ top: 11px;\r
+ left: 0;\r
+ }\r
+ & > a ~ a {// bottom icon\r
+ bottom: -1px;\r
+\r
+ & > i { // fix 1px alignment\r
+ position: relative;\r
+ top: -2px;\r
+ }\r
+ &:active {\r
+ bottom: -2px;\r
+ }\r
+ }\r
+}\r
+\r
+.z-timebox-disabled a,\r
+.z-spinner-disabled a,\r
+.z-doublespinner-disabled a {\r
+ &:active,\r
+ &:hover {\r
+ .resetGradient();\r
+ .boxShadow('none');\r
+ }\r
+ &:first-child:active { // up icon\r
+ top: -1px; // same as default one\r
+ }\r
+ & ~ a:active { // bottom icon\r
+ bottom: -1px; // same as default one\r
+ }\r
+\r
+ // separator\r
+ & + i[class*='-separator'] {\r
+ display: none;\r
+ }\r
+}\r
+\r
+// Inplace editing\r
+.z-combobox-inplace .z-combobox-input,\r
+.z-bandbox-inplace .z-bandbox-input,\r
+.z-datebox-inplace .z-datebox-input,\r
+.z-timebox-inplace .z-timebox-input,\r
+.z-spinner-inplace .z-spinner-input,\r
+.z-doublespinner-inplace .z-doublespinner-input {\r
+ border: 0;\r
+ padding: 3px;\r
+ background: none;\r
+\r
+ &:focus {\r
+ .resetGradient();\r
+ .boxShadow('none');\r
+ }\r
+}\r
+.z-combobox-inplace .z-combobox-button,\r
+.z-bandbox-inplace .z-bandbox-button,\r
+.z-datebox-inplace .z-datebox-button,\r
+.z-timebox-inplace .z-timebox-button,\r
+.z-spinner-inplace .z-spinner-button,\r
+.z-doublespinner-inplace .z-doublespinner-button {\r
+ visibility: hidden; // Bug ZK-2216: Performance issue of Listbox and Combobox with inplace="true"\r
+}\r
+\r
+// Comboitem\r
+.z-comboitem,\r
+.z-comboitem-button {\r
+ font-size: @fontSizeMedium;\r
+ white-space: nowrap;\r
+ cursor: pointer;\r
+}\r
+.z-comboitem {\r
+ display: block;\r
+ padding: 3px 2px;\r
+ position: relative;\r
+ text-shadow: 0 1px #FFFFFF;\r
+ min-height: 20px; //ZK-2783: give default height to empty item\r
+}\r
+.z-comboitem-inner,\r
+.z-comboitem-content {//description\r
+ .iconFontStyle(@fontSizeXSmall, @textColorGray);\r
+}\r
+.z-comboitem,\r
+.z-comboitem a,\r
+.z-comboitem a:visited {\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+ color: @baseTextColor;\r
+ text-decoration: none;\r
+}\r
+.z-comboitem:hover {\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+}\r
+.z-comboitem-selected {\r
+ .verGradient(@selectedGradientStart, @selectedGradientEnd);\r
+ .z-comboitem-text {\r
+ color: @selectedColor;\r
+ }\r
+}\r
+.z-comboitem-selected:hover {\r
+ .verGradient(@selectedHoverGradientStart, @selectedHoverGradientEnd);\r
+ .z-comboitem-text {\r
+ color: @selectedHoverColor;\r
+ }\r
+}\r
+.z-comboitem-image {\r
+ margin-top: -4px;\r
+ margin-right: 3px;\r
+ float: left;\r
+ \r
+ &:empty {\r
+ margin-right: 0px;\r
+ }\r
+}\r
+.z-comboitem-icon {\r
+ padding: 0 4px 0 3px;\r
+}\r
+.z-combobox-popup,\r
+.z-bandbox-popup,\r
+.z-datebox-popup,\r
+.z-timebox-popup {\r
+ font-family: @baseContentFontFamily;\r
+ font-weight: normal;\r
+ font-size: @fontSizeMedium;\r
+ display: block;\r
+ border: 1px solid @popupBorderColor;\r
+ padding: 2px;\r
+ background: @popupBackgroundColor;\r
+ position: absolute;\r
+ overflow: hidden;\r
+}\r
+\r
+.z-combobox-popup {\r
+ overflow: auto;\r
+}\r
+\r
+.z-bandbox-popup {\r
+ overflow: auto;\r
+ .boxShadow('0 0 15px rgba(0, 0, 0, 0.35)');\r
+}\r
+\r
+.z-combobox-content {\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ background: transparent none repeat 0 0;\r
+ position: relative;\r
+ list-style-image: none;\r
+ list-style-position: outside;\r
+ list-style-type: none;\r
+}\r
+\r
+//Shadow\r
+.z-combobox-shadow,\r
+.z-bandbox-shadow,\r
+.z-datebox-shadow {\r
+ .borderRadius(@borderRadiusSmall);\r
+ .boxShadow('0 0 15px rgba(0, 0, 0, 0.35)');\r
+}\r
+\r
+.ie8 {\r
+ .z-combobox,\r
+ .z-bandbox,\r
+ .z-datebox,\r
+ .z-timebox,\r
+ .z-spinner,\r
+ .z-doublespinner {\r
+ &-button {\r
+ min-width: @baseButtonWidth - 10;\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ .gradientFallback(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ }\r
+ }\r
+\r
+ .z-timebox,\r
+ .z-spinner,\r
+ .z-doublespinner {\r
+ &-button {\r
+ min-width: @baseButtonWidth - 2;\r
+ & > a {\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ .gradientFallback(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ .z-combobox-button {\r
+ min-width: @baseButtonHeight - 13;\r
+ min-height: @baseButtonWidth - 11;\r
+ }\r
+\r
+ .z-comboitem {\r
+ &-selected {\r
+ .gradientFallback(@selectedGradientStart, @selectedGradientEnd);\r
+ }\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &-selected:hover {\r
+ .gradientFallback(@selectedHoverGradientStart, @selectedHoverGradientEnd);\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-textbox,\r
+.z-decimalbox,\r
+.z-intbox,\r
+.z-longbox,\r
+.z-doublebox {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ min-height: @baseButtonHeight;\r
+ border: 1px solid @inputBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ margin: 0;\r
+ padding: 4px 5px 3px;\r
+ line-height: @baseLineHeight;\r
+ background: @inputBackgroundColor;\r
+\r
+ &:focus {\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75)');\r
+ }\r
+ &[readonly] {\r
+ border-color: @readonlyBorderColor;\r
+ background: @readonlyBackgroundColor;\r
+ }\r
+ &[readonly]:focus {\r
+ .boxShadow('none');\r
+ }\r
+ &-invalid {\r
+ border-color: @invalidBorderColor;\r
+ background: @baseBackgroundColor;\r
+ }\r
+ &[disabled] {\r
+ color: @disabledColor !important;\r
+ background: @disabledBackgroundColor !important;\r
+ .opacity(@disabledOpacity);\r
+ cursor: default !important;\r
+ }\r
+\r
+ // Inplace editing\r
+ &-inplace {\r
+ border: 0;\r
+ padding: 3px;\r
+ background: none;\r
+ resize: none;\r
+ }\r
+}\r
+\r
+// error box\r
+.z-errorbox {\r
+ color: @errorboxColor;\r
+ width: 260px;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ \r
+ & > .z-errorbox-icon {\r
+ .iconFontStyle(14px, @errorboxColor);\r
+ position: absolute;\r
+ top: 7px;\r
+ left: 7px;\r
+ z-index: 2;\r
+ }\r
+}\r
+.z-errorbox-left + .z-errorbox-icon {\r
+ left: 15px;\r
+}\r
+.z-errorbox-up + .z-errorbox-icon {\r
+ top: 15px;\r
+}\r
+.z-errorbox-content {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeSmall, normal, @errorboxColor);\r
+ width: 100%;\r
+ border: 1px solid @errorboxBorderColor;\r
+ padding: 5px 20px 5px 26px;\r
+ background: @errorboxBackgroundColor;\r
+ vertical-align: middle;\r
+ position: relative;\r
+ overflow: hidden;\r
+ cursor: move;\r
+ .boxShadow('1px 1px 3px rgba(0, 0, 0, 0.35)');\r
+}\r
+\r
+.z-errorbox-pointer {\r
+ .displaySize(none, 0, 0);\r
+ border: 6px solid transparent;\r
+ position: absolute;\r
+ z-index: 100;\r
+}\r
+// errorbox arrows: base style\r
+.z-errorbox-left,\r
+.z-errorbox-right,\r
+.z-errorbox-up,\r
+.z-errorbox-down {\r
+ border: 6px solid transparent;\r
+}\r
+.z-errorbox-left {\r
+ border-right-color: @errorboxBorderColor;\r
+}\r
+.z-errorbox-right {\r
+ border-left-color: @errorboxBorderColor;\r
+}\r
+.z-errorbox-up {\r
+ border-bottom-color: @errorboxBorderColor;\r
+}\r
+.z-errorbox-down {\r
+ border-top-color: @errorboxBorderColor;\r
+}\r
+.z-errorbox-close {\r
+ font-size: @fontSizeXSmall;\r
+ .size(@baseIconWidth - 4, @baseIconHeight - 4);\r
+ border: 1px solid transparent;\r
+ padding: 0 1px;\r
+ position: absolute;\r
+ top: 8px;\r
+ right: 8px;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ border: 1px solid @errorboxBorderColor;\r
+ .borderRadius(@borderRadiusSmall - 1);\r
+ }\r
+}\r
+.z-errorbox-icon {\r
+ position: absolute;\r
+ top: -1px;\r
+}\r
+.z-errorbox-pointer ~ .z-errorbox-close {\r
+ top: 7px;\r
+ right: 7px;\r
+}\r
+\r
+.z-errorbox-right ~ .z-errorbox-close {\r
+ top: 7px;\r
+ right: 14px;\r
+}\r
+\r
+.z-errorbox-up ~ .z-errorbox-close,\r
+.z-errorbox-down ~ .z-errorbox-close {\r
+ right: 7px;\r
+}\r
+.z-errorbox-up ~ .z-errorbox-close {\r
+ top: 15px;\r
+}\r
+\r
+.ie8 {\r
+ .z-textbox,\r
+ .z-decimalbox,\r
+ .z-intbox,\r
+ .z-longbox,\r
+ .z-doublebox {\r
+ min-height: @baseButtonHeight - 10 + 1;\r
+ // Inplace editing\r
+ &-inplace {\r
+ min-height: @baseButtonHeight - 6;\r
+ line-height: @baseIconHeight;\r
+ }\r
+ }\r
+}\r
+\r
+body:not(.ie8) {\r
+ .z-errorbox-close {\r
+ .opacity(0.6);\r
+ &:hover {\r
+ .opacity(1);\r
+ }\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-slider {\r
+ background-image: none;\r
+\r
+ &-center {\r
+ .borderRadius(5px);\r
+ cursor: pointer;\r
+ }\r
+\r
+ &-button {\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ border: 1px solid @sliderBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ .gradient('ver', '#FFFFFF 0%; #FEFEFE 50%; #EFEFEF 100%');\r
+ position: relative;\r
+ cursor: pointer;\r
+\r
+ &:active {\r
+ border-top-color: @sliderActiveBorderColor;\r
+ border-left-color: @sliderActiveBorderColor;\r
+ .verGradient(@baseGradientEnd, @baseGradientStart);\r
+ }\r
+\r
+ &:hover {\r
+ .resetGradient();\r
+ background: @hoverBackgroundColor;\r
+ }\r
+ }\r
+\r
+ &-horizontal {\r
+ height: @baseBarHeight;\r
+\r
+ .z-slider-center {\r
+ .size(100%, @baseHeight - 2);\r
+ margin-top: -3px;\r
+ .gradient('ver', 'rgba(157, 157, 157, 0.5) 0%; rgba(130, 140, 149, 0.5) 13%; rgba(215, 215, 215, 0.5) 100%');\r
+ position: relative;\r
+ top: 50%;\r
+ }\r
+\r
+ .z-slider-button {\r
+ top: -5px;\r
+ left: 0;\r
+ }\r
+ }\r
+\r
+ &-vertical {\r
+ font-size: 0;\r
+ width: @baseBarWidth;\r
+ margin-right: 0px;\r
+ line-height: 0;\r
+\r
+ .z-slider-button {\r
+ left: -5px;\r
+ }\r
+\r
+ .z-slider-center {\r
+ .size(@baseWidth - 2, 100%);\r
+ margin: auto;\r
+ .gradient('hor', 'rgba(157, 157, 157, 0.5) 0%; rgba(130, 140, 149, 0.5) 13%; rgba(215, 215, 215, 0.5) 100%');\r
+ }\r
+ }\r
+\r
+ &-popup {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+ padding: 2px;\r
+ text-shadow: 0 1px #FFFFFF;\r
+ .boxShadow('0 0 10px rgba(0, 0, 0, 0.35)');\r
+ }\r
+\r
+ &-sphere {\r
+ .z-slider-vertical .z-slider-button {\r
+ bottom: 0;\r
+ }\r
+ }\r
+\r
+ &-sphere,\r
+ &-scale {\r
+ .z-slider-button {\r
+ .borderRadius(15px);\r
+ }\r
+ }\r
+\r
+ &-scale {\r
+ .encodeThemeURL(background-image, '~./zul/img/slider/ticks.gif');\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-slider {\r
+ &-button {\r
+ .gradientFallback(#FFFFFF, #EFEFEF);\r
+ &:active {\r
+ .gradientFallback(@baseGradientEnd, @baseGradientStart);\r
+ }\r
+ }\r
+\r
+ &-vertical .z-slider-center, \r
+ &-horizontal .z-slider-center {\r
+ .gradientFallback(rgb(157,157,157), rgb(215,215,215));\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-absolutelayout {\r
+ height: 100%;\r
+ position: relative;\r
+ overflow: hidden;\r
+}\r
+.z-absolutechildren {\r
+ position: absolute;\r
+ overflow: auto;\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-anchorlayout,\r
+.z-anchorlayout-body,\r
+.z-anchorchildren {\r
+ overflow: hidden;\r
+}\r
+\r
+.z-anchorchildren {\r
+ margin: 0;\r
+ padding: 0;\r
+ float: left;\r
+}\r
+\r
+.z-anchorlayout,\r
+.z-anchorchildren {\r
+ -ms-zoom: 1;\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+@media print {\r
+ .safari {//Bug 2949287\r
+ .z-borderlayout {\r
+ position: static;\r
+ }\r
+ }\r
+}\r
+\r
+@media screen {\r
+ .z-borderlayout {\r
+ position: relative;\r
+ }\r
+}\r
+\r
+.z-borderlayout {\r
+ .size(100%, 100%);\r
+ border: 0;\r
+ background: @baseBackgroundColor;\r
+ overflow: hidden;\r
+\r
+ &-icon {\r
+ .iconFontStyle(@baseFontSize, @iconColor);\r
+ .displaySize(block, @baseButtonWidth, @baseButtonHeight);\r
+ line-height: @baseButtonHeight;\r
+ .opacity(0.5);\r
+ text-align: center;\r
+ position: absolute;\r
+ right: 3px;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ \r
+ &:hover {\r
+ .opacity(1);\r
+ }\r
+ }\r
+}\r
+\r
+.z-north,\r
+.z-south,\r
+.z-west,\r
+.z-center,\r
+.z-east {\r
+ border: 1px solid @baseBorderColor;\r
+ background: @baseBackgroundColor;\r
+ position: absolute;\r
+ overflow: hidden;\r
+\r
+ &-noborder {\r
+ border: 0;\r
+ }\r
+ &-header {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeMedium, bold, @textColorGray);\r
+ height: @baseBarHeight;\r
+ border-bottom: 1px solid @baseBorderColor;\r
+ padding: 4px 4px 3px;\r
+ line-height: @baseBarHeight - 8; // 24px = 32 - (padding + border)\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ overflow: hidden;\r
+ cursor: default;\r
+ white-space: nowrap;\r
+ }\r
+\r
+ &-body {\r
+ line-height: @baseLineHeight;\r
+ }\r
+\r
+ &-collapsed {\r
+ .size(@baseBarWidth, @baseBarHeight);\r
+ border: 1px solid @collapsedBorderColor;\r
+ padding: 5px;\r
+ background: @collapsedBackgroundColor;\r
+ position: absolute;\r
+ overflow: hidden;\r
+ cursor: pointer; // ios issue\r
+ }\r
+\r
+ &-caption {\r
+ // ZK-969: should show correct in borderlayout\r
+ height: @baseButtonHeight;\r
+ }\r
+}\r
+.z-north,\r
+.z-south,\r
+.z-center {\r
+ width: 100%; // Fixed for B30-1902533.zul\r
+}\r
+.z-west,\r
+.z-east {\r
+ height: 100%; // Fixed for B30-1902533.zul\r
+}\r
+\r
+.z-west,\r
+.z-west-collapsed,\r
+.z-west-splitter {\r
+ z-index: 12;\r
+}\r
+.z-center {\r
+ z-index: 8;\r
+}\r
+.z-east,\r
+.z-east-collapsed,\r
+.z-east-splitter {\r
+ z-index: 10;\r
+}\r
+.z-north,\r
+.z-north-collapsed,\r
+.z-north-splitter {\r
+ z-index: 16;\r
+}\r
+.z-south,\r
+.z-south-collapsed,\r
+.z-south-splitter {\r
+ z-index: 14;\r
+}\r
+\r
+.z-east,\r
+.z-west,\r
+.z-north,\r
+.z-south {\r
+ &-splitter {\r
+ .size(@baseWidth, @baseHeight);\r
+ .horGradient(@splitterGradientStart, @splitterGradientEnd);\r
+ position: absolute;\r
+ overflow: hidden;\r
+ cursor: e-resize;\r
+\r
+ // splitter-button\r
+ &-button {\r
+ color: @iconColor;\r
+ display: inline-block;\r
+ border: 1px solid @baseBorderColor;\r
+ vertical-align: top;// vertical-align: make it looks same in diff browsers\r
+ position: relative;\r
+ cursor: pointer;\r
+ }\r
+ &-button-disabled {\r
+ border: 0;\r
+ }\r
+ }\r
+\r
+ &-icon {\r
+ font-size: @fontSizeXSmall;\r
+ line-height: @baseLineHeight;\r
+ .opacity(0.5);\r
+ position: absolute;\r
+ }\r
+}\r
+.z-north-splitter,\r
+.z-south-splitter {\r
+ border-left: 1px solid @baseBorderColor;\r
+ border-right: 1px solid @baseBorderColor;\r
+ .verGradient(@splitterGradientStart, @splitterGradientEnd);\r
+ cursor: s-resize;\r
+}\r
+\r
+.ie8 {\r
+ .z-west-icon.z-icon-caret-left,\r
+ .z-south-icon.z-icon-caret-down,\r
+ .z-east-icon.z-icon-caret-right,\r
+ .z-north-icon.z-icon-caret-up {\r
+ font-size: @fontSizeMedium;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-south-icon.z-icon-caret-down {\r
+ top: -2px;\r
+ }\r
+}\r
+\r
+.z-north-splitter-button:hover .z-icon-caret-up,\r
+.z-south-splitter-button:hover .z-icon-caret-down,\r
+.z-west-splitter-button:hover .z-icon-caret-left,\r
+.z-east-splitter-button:hover .z-icon-caret-right {\r
+ opacity: 1;\r
+}\r
+.z-north-splitter-button-disabled .z-icon-caret-up,\r
+.z-south-splitter-button-disabled .z-icon-caret-down,\r
+.z-west-splitter-button-disabled .z-icon-caret-left,\r
+.z-east-splitter-button-disabled .z-icon-caret-right {\r
+ display: none;\r
+}\r
+.z-north-splitter-button-disabled,\r
+.z-south-splitter-button-disabled {\r
+ cursor: s-resize;\r
+}\r
+.z-west-splitter-button-disabled,\r
+.z-east-splitter-button-disabled {\r
+ cursor: e-resize;\r
+}\r
+.z-west-icon,\r
+.z-east-icon {\r
+ font-size: @fontSizeXSmall + 1; // add 1px more\r
+ top: 8px;\r
+ left: 2px;\r
+}\r
+\r
+.z-west-icon.z-icon-ellipsis-v,\r
+.z-east-icon.z-icon-ellipsis-v {\r
+ font-size: @fontSizeXSmall;\r
+ top: -21px;\r
+ left: 3px;\r
+ cursor: e-resize;\r
+}\r
+.ie8 {\r
+ .z-west-icon.z-icon-ellipsis-v,\r
+ .z-east-icon.z-icon-ellipsis-v {\r
+ font-size: @baseFontSize;\r
+ }\r
+}\r
+.z-north-icon,\r
+.z-south-icon {\r
+ left: 11px;\r
+ top: -3px;\r
+}\r
+.z-west-icon.z-icon-ellipsis-v ~ .z-west-icon.z-icon-ellipsis-v,\r
+.z-east-icon.z-icon-ellipsis-v ~ .z-east-icon.z-icon-ellipsis-v {\r
+ top: 39px;\r
+}\r
+\r
+.z-north-icon.z-icon-ellipsis-h,\r
+.z-south-icon.z-icon-ellipsis-h {\r
+ top: -2px;\r
+ left: -20px;\r
+ cursor: s-resize;\r
+}\r
+\r
+.ie8 {\r
+ .z-north-icon.z-icon-ellipsis-h,\r
+ .z-south-icon.z-icon-ellipsis-h {\r
+ font-size: @baseFontSize;\r
+ }\r
+}\r
+\r
+.z-north-icon.z-icon-ellipsis-h ~ .z-north-icon.z-icon-ellipsis-h,\r
+.z-south-icon.z-icon-ellipsis-h ~ .z-south-icon.z-icon-ellipsis-h {\r
+ left: 40px;\r
+}\r
+\r
+.z-west-splitter-button,\r
+.z-east-splitter-button {\r
+ .size(8px, 30px);\r
+ border-width: 1px 0;\r
+}\r
+.z-north-splitter-button,\r
+.z-south-splitter-button {\r
+ .size(30px, 8px);\r
+ border-width: 0 1px;\r
+}\r
+\r
+.ie8 {\r
+ .z-borderlayout > div {\r
+ border: 0;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-north,\r
+ .z-south,\r
+ .z-west,\r
+ .z-center,\r
+ .z-east {\r
+ &-header {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+ .z-east,\r
+ .z-west,\r
+ .z-north,\r
+ .z-south {\r
+ &-splitter {\r
+ .gradientFallback(@splitterGradientStart, @splitterGradientEnd);\r
+ }\r
+ }\r
+ .z-north-splitter,\r
+ .z-south-splitter {\r
+ .gradientFallback(@splitterGradientStart, @splitterGradientEnd);\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.hoverStyle() {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+}\r
+.activeStyle() {\r
+ border-color: @menuActiveBorderColorTR @menuActiveBorderColorBL @menuActiveBorderColorBL @menuActiveBorderColorTR;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75)');\r
+}\r
+.restUl() {\r
+ background: transparent none repeat 0 0;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ position: relative;\r
+ list-style-image: none;\r
+ list-style-position: outside;\r
+ list-style-type: none;\r
+}\r
+\r
+// define common font property\r
+.z-menubar {\r
+ display: block;\r
+ border-top: 1px solid @baseBorderColor;\r
+ border-bottom: 1px solid @baseBorderColor;\r
+ padding: 3px 0;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ position: relative;\r
+\r
+ ul {\r
+ overflow: hidden;\r
+ .restUl();\r
+ }\r
+ li {\r
+ display: block;\r
+ padding: 0;\r
+ position: relative;\r
+ }\r
+\r
+ &-horizontal {\r
+ li {\r
+ margin: 0 2px;\r
+ float: left;\r
+ }\r
+ .z-menuseparator {\r
+ display: block;\r
+ width: 1px;\r
+ border-left: 1px solid @menuSeparatorBorderColor;\r
+ line-height: @baseButtonHeight;\r
+ }\r
+ }\r
+ &-vertical {\r
+ ul {\r
+ display: inline-table;\r
+ }\r
+ li {\r
+ margin: 3px 2px 4px;\r
+ &:first-child {\r
+ margin: 2px;\r
+ }\r
+ }\r
+ .z-menuseparator {\r
+ height: 0;\r
+ min-height: 0;\r
+ border-top: 1px solid @menuSeparatorBorderColor;\r
+ line-height: 0;\r
+ }\r
+ .z-menu {\r
+ &-icon {\r
+ position: absolute;\r
+ right: 5px;\r
+ top: 5px;\r
+ }\r
+ }\r
+ }\r
+}\r
+.z-menu-hover > .z-menu-content,\r
+.z-menuitem-hover > .z-menuitem-content {\r
+ .hoverStyle();\r
+}\r
+\r
+.z-menu,\r
+.z-menuitem {\r
+ .restUl(); //avoid using none default zclass\r
+ &-text {\r
+ font-family: @baseTitleFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+ display: inline-block;\r
+ line-height: @baseIconHeight;\r
+ text-shadow: 0 1px #FFFFFF;\r
+ \r
+ // align for img + text\r
+ img ~ & {\r
+ vertical-align: middle;\r
+ }\r
+ &:empty {\r
+ display: none;\r
+ }\r
+ }\r
+ &-image {\r
+ max-width: @menuImageSize;\r
+ margin-right: 3px;\r
+ }\r
+ &-content {\r
+ color: @textColorGray;\r
+ display: block;\r
+ border: 1px solid transparent;\r
+ .borderRadius(@baseBorderRadius);\r
+ padding: 3px 6px 3px;\r
+ line-height: @baseLineHeight - 2;\r
+ position: relative;\r
+ cursor: pointer;\r
+ text-decoration: none;\r
+ white-space: nowrap;\r
+ z-index: 20; // the 20 is greater than menupopup-separator's z-index\r
+\r
+ &:hover {\r
+ .hoverStyle();\r
+ }\r
+ &:focus {\r
+ .hoverStyle();\r
+ }\r
+ &:active {\r
+ .activeStyle();\r
+ }\r
+ &[disabled] {\r
+ .opacity(@disabledOpacity);\r
+ border: 1px solid transparent;\r
+ .resetGradient();\r
+ cursor: default;\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+\r
+ // icon sclass\r
+ &-content i {\r
+ vertical-align: text-bottom;\r
+ }\r
+}\r
+.z-menu {\r
+ &-separator {\r
+ display: none;\r
+ }\r
+ &-clickable {\r
+ .z-menu-separator {\r
+ .size(1px, 100%);\r
+ background: @hoverBorderColor;\r
+ position: absolute;\r
+ top: 0;\r
+ right: 18px;\r
+ }\r
+ &.z-menu:hover .z-menu-separator {\r
+ display: block;\r
+ }\r
+ &.z-menu:active,\r
+ &.z-menu-selected {\r
+ .z-menu-separator {\r
+ background: @menuSeparatorBackgroundColor;\r
+ }\r
+ }\r
+ .z-menu-text {\r
+ margin-right: 3px;\r
+ }\r
+ }\r
+ &-content {\r
+ padding-right: 18px;\r
+ }\r
+\r
+ &-icon {\r
+ position: absolute;\r
+ top: 5px;\r
+ right: 5px;\r
+\r
+ &.z-icon-caret-down {\r
+ font-size: @fontSizeLarge;\r
+ }\r
+\r
+ &.z-icon-caret-right {\r
+ font-size: 15px;\r
+ }\r
+ }\r
+ &-icon,\r
+ &-icon:hover,\r
+ &-icon:active {\r
+ color: @iconColor;\r
+ vertical-align: text-bottom;\r
+ }\r
+ &-selected > &-content {\r
+ .activeStyle();\r
+ }\r
+}\r
+.z-menuitem {\r
+ &-selected > &-content {\r
+ .activeStyle();\r
+ }\r
+}\r
+\r
+// menupopup\r
+.z-menupopup-shadow,\r
+.z-menu-palette-popup,\r
+.z-menu-picker-popup,\r
+.z-menu-content-popup {\r
+ .boxShadow('1px 1px 2px rgba(0, 0, 0, 0.2)');\r
+}\r
+\r
+.z-menu-content-popup {\r
+ .displaySize(none, auto, auto);\r
+ position: absolute;\r
+ overflow: auto;\r
+ z-index: @basePopupZIndex;\r
+}\r
+.z-menupopup {\r
+ border: 1px solid @baseBorderColor;\r
+ padding: 3px;\r
+ background: @menuPopupBackground;\r
+ left: 0;\r
+ top: 0;\r
+ white-space: nowrap;\r
+ z-index: @basePopupZIndex;\r
+\r
+ ul {\r
+ .restUl();\r
+ }\r
+ &-separator {\r
+ .size(2px, 100%);\r
+ border-width: 3px 1px 3px 0;\r
+ border-style: solid;\r
+ border-color: @menuPopupSeparatorBorder;\r
+ background: @menuPopupSeparatorBackground;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 31px;\r
+ z-index: 10;\r
+ }\r
+ .z-menu-image,\r
+ .z-menuitem-image {\r
+ min-width: @menuImageSize;\r
+ min-height: @menuImageSize;\r
+ margin-right: 9px;\r
+ }\r
+ .z-menuitem-icon {\r
+ .iconFontStyle(14px, @checkedColor);\r
+ display: none;\r
+ position: absolute;\r
+ top: 5px;\r
+ left: 7px;\r
+ }\r
+ .z-menu-content {\r
+ padding-right: 16px;\r
+ }\r
+ .z-menu-icon {\r
+ position: absolute;\r
+ top: 5px;\r
+ right: 5px;\r
+ }\r
+ .z-menuseparator {\r
+ font-size: 1px;\r
+ display: block;\r
+ width: auto;\r
+ min-height: 2px;\r
+ border-bottom: 1px solid @menuPopupSeparatorBorder;\r
+ padding: 0px;\r
+ line-height: 1px;\r
+ background: @menuPopupSeparatorBackground;\r
+ position: relative;\r
+ }\r
+ [class^="z-icon"] {\r
+ text-align: center;\r
+ display: inline-block;\r
+ min-width: @menuImageSize;\r
+ margin-right: 9px;\r
+ }\r
+}\r
+//define checked menuitem effect in menupopup\r
+.z-menuitem-checkable .z-menuitem-image {\r
+ border: 1px solid @checkedBorderColor;\r
+ background: @checkedBackgroundColor;\r
+}\r
+.z-menuitem-checked.z-menuitem-checkable .z-menuitem-icon {\r
+ display: block;\r
+}\r
+\r
+//define menubar hor scroll\r
+.z-menubar {\r
+ &-scroll {\r
+ overflow: hidden;\r
+ }\r
+ &-body {\r
+ width: 100%;\r
+ margin-left: 32px;\r
+ margin-right: 32px;\r
+ position: relative;\r
+ overflow: hidden;\r
+ }\r
+ &-content {\r
+ width: 5000px;\r
+ }\r
+ &-icon {\r
+ .iconFontStyle(@fontSizeMedium, @iconColor);\r
+ .opacity(0.7);\r
+ margin-top: -@fontSizeMedium/2;\r
+ margin-left: -@fontSizeMedium/2 + 2;\r
+ position: absolute;\r
+ top: 50%;\r
+ left: 50%;\r
+ }\r
+ &-left,\r
+ &-right {\r
+ &:active {\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75)');\r
+ }\r
+ &:hover {\r
+ > .z-menubar-icon {\r
+ color: @iconHoverColor;\r
+ opacity: 1;\r
+ text-shadow: 1px 0 #C2E0F9;\r
+ }\r
+ }\r
+ }\r
+ &-left {\r
+ left: 0;\r
+ }\r
+ &-scrollable {\r
+ .size(@baseBarWidth, 100%);\r
+ border: 1px solid @baseBorderColor;\r
+ border-width: 0 1px;\r
+ line-height: normal;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ position: absolute;\r
+ top: 0;\r
+ right: 0;\r
+ cursor: pointer;\r
+ z-index: 25;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-menu-hover > .z-menu-content, \r
+ .z-menuitem-hover > .z-menuitem-content {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+\r
+ .z-menu, .z-menuitem { \r
+ &-content {\r
+ &:hover, &:focus {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+\r
+ &-selected > &-content {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+\r
+ .z-menupopup {\r
+ .z-menuitem-icon {\r
+ top: 6px;\r
+ left: 8px;\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";
+
+.z-auxhead {
+ th:first-child {
+ border-left: none;
+
+ // B50-3306729: the first header should have border-left when the first column is covered with other header
+ &.z-auxhead-border {
+ border-left: 1px solid @meshTitleBorderColor;
+ }
+ }
+
+ &-bar {
+ border-left: 1px solid @meshTitleBorderColor;
+ }
+}
+
+.z-auxheader {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ padding: 0;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &-content {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, bold, @textColorGrayLight);
+ padding: 4px 5px 3px;
+ line-height: @baseButtonHeight;
+ overflow: hidden;
+ }
+}
+
+.ie8 {
+ .z-auxheader {
+ position: static;
+ background: @meshBackgroundColorIE8;
+ }
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-frozen {\r
+ .encodeThemeURL(background-image, '~./zul/img/common/bar-bg.png');\r
+ overflow: hidden;\r
+\r
+ &-body {\r
+ overflow: hidden;\r
+ float: left;\r
+ }\r
+\r
+ &-inner {\r
+ overflow-x: scroll;\r
+ overflow-y: hidden;\r
+ float: right;\r
+\r
+ div {\r
+ height: 100%;\r
+ }\r
+ }\r
+}\r
+\r
+.ie8, .ie9, .ie10 {\r
+ .z-frozen {\r
+ &-inner {\r
+ padding-top: 1px;\r
+ margin-top: -1px;\r
+ }\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";
+
+.z-paging {
+ height: @baseBarHeight;
+ border-bottom: 1px solid @pagingBorderColor;
+ padding: 4px 10px 3px;
+ background: @pagingBackgroundColor;
+ position: relative;
+
+ &-os {
+ border-bottom: none;
+ padding-bottom: 4px;
+ }
+ ul {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+
+ > li {
+ display: inline;
+ }
+ }
+ &-button {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @pagingColor);
+ display: inline-block;
+ min-width: @baseButtonWidth;
+ height: @baseButtonHeight;
+ border: 1px solid @pagingBorderColor;
+ .borderRadius(@borderRadiusSmall);
+ margin-right: 6px;
+ padding: 4px 0px;
+ line-height: @baseLineHeight;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ text-align: center;
+ vertical-align: top;
+ cursor: pointer;
+ text-decoration: none;
+ white-space: nowrap;
+
+ &:hover {
+ border-color: @pagingActiveBorderColor;
+ .boxShadow('0 0 2px rgba(0, 0, 0, 0.34)');
+ }
+ &:active {
+ border-color: @pagingActiveBorderColor @pagingBorderColor;
+ .verGradient(@baseGradientEnd, @baseGradientStart);
+ }
+ &[disabled] {
+ color: @disabledColor;
+ .opacity(@disabledOpacity);
+ cursor: default;
+
+ &:hover {
+ border-color: @pagingBorderColor;
+ .boxShadow('0 0 0 rgba(0, 0, 0, 0)');
+ }
+ &:active {
+ border-color: @pagingBorderColor;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ }
+ .z-paging-icon,
+ .z-paging-icon:hover {
+ color: @disabledColor;
+ }
+ }
+ }
+ .z-paging-icon {
+ .iconFontStyle(@fontSizeXLarge, @pagingColor);
+ line-height: @baseLineHeight;
+ }
+ &-noborder {
+ border-color: transparent;
+ .resetGradient();
+ &:hover {
+ border-color: transparent;
+ .boxShadow('0 0 0 rgba(0, 0, 0, 0)');
+ text-decoration: underline;
+ }
+ &:active {
+ border-color: transparent;
+ .resetGradient();
+ }
+ }
+ &-selected {
+ color: @pagingSelectedColor;
+ border-color: @pagingActiveBorderColor;
+ .resetGradient();
+ background: @pagingSelectedBackgroundColor;
+ &:hover {
+ border-color: @pagingActiveBorderColor;
+ .boxShadow('0 0 0 rgba(0, 0, 0, 0)');
+ }
+ &:active {
+ border-color: @pagingActiveBorderColor;
+ .resetGradient();
+ background: @pagingSelectedBackgroundColor;
+ }
+ }
+ &-input {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayDark);
+ height: @baseButtonHeight;
+ border: 1px solid @pagingBorderColor;
+ margin-left: 6px;
+ padding: 3px 0;
+ line-height: 20px;
+ vertical-align: baseline;
+ &[disabled] {
+ color: @disabledColor;
+ .opacity(@disabledOpacity);
+ cursor: default;
+ }
+ }
+ &-text {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayDark);
+ margin-right: 12px;
+ &-disabled {
+ color: @disabledColor;
+ }
+ }
+ &-info {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayDark);
+ padding: 4px 0;
+ position: absolute;
+ top: 4px;
+ right: 10px;
+ }
+}
+
+.ie8 {
+ .z-paging {
+ &-input {
+ vertical-align: middle;
+ }
+ &-button {
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);
+ &:active {
+ .gradientFallback(@baseGradientEnd, @baseGradientStart);
+ }
+ &[disabled] {
+ &:active {
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);
+ }
+ }
+ }
+ }
+}
--- /dev/null
+@import "~./zul/less/_header.less";
+
+//reset table
+.resetTable() {
+ table {
+ border-spacing: 0;
+ th, td {
+ background-clip: padding-box;
+ padding: 0;
+ }
+ th {
+ text-align: inherit;
+ }
+ }
+}
+
+//listbox
+.z-listbox {
+ border: 1px solid @baseBorderColor;
+ overflow: hidden;
+ zoom: 1;
+ //listbox header
+ &-header {
+ width: 100%;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ position: relative;
+ overflow: hidden;
+ .resetTable();
+ }
+ &-header-border {
+ border-bottom: 1px solid @meshTitleBorderColor;
+ margin-top: -1px;
+ position: relative;
+ }
+ //listbox body
+ &-body {
+ position: relative;
+ overflow: hidden;
+ .resetTable();
+ }
+ &-emptybody td {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @disabledColor);
+ font-style: italic;
+ text-align: center;
+ height: 1px;
+ }
+ //listbox footer
+ &-footer {
+ border-top: 1px solid @baseBorderColor;
+ background: @meshFootBackgroundColor;
+ overflow: hidden;
+ .resetTable();
+ }
+
+ &-odd.z-listitem {
+ background: @meshStripeBackgroundColor;
+ }
+}
+//listhead
+.z-listhead {
+ th:first-child {
+ border-left: none;
+
+ // B50-3306729: the first header should have border-left when the first column is covered with other header
+ &.z-listhead-border {
+ border-left: 1px solid @meshTitleBorderColor;
+ }
+ }
+ &-bar {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ }
+}
+.z-listheader {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ padding: 0;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &-hover {
+ .verGradient(@meshTitleHoverStart, @meshTitleHoverEnd);
+ }
+ &-sort {
+ .z-listheader-content {
+ cursor: pointer;
+ }
+ .z-listheader-sorticon {
+ color: @iconColor;
+ position: absolute;
+ top: -7px;
+ left: 50%;
+ }
+ }
+ &-hover .z-listheader-button {
+ display: block;
+ }
+ &-checkable {
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ border: 1px solid @checkedBorderColor;
+ background: @checkedBackgroundColor;
+ vertical-align: text-top;
+
+ .z-listheader-icon {
+ display: none;
+ cursor: default;
+ }
+ &.z-listheader-checked .z-listheader-icon {
+ color: @checkedColor;
+ display: block;
+ padding-left: 1px;
+ line-height: @baseLineHeight;
+ }
+ }
+ &-button {
+ color: @iconColor;
+ .displaySize(none, @baseButtonWidth - 1, @baseBarHeight);
+ border-left: 1px solid darken(@meshTitleHoverStart, 15%);
+ line-height: @baseBarHeight;
+ text-align: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-decoration: none;
+ cursor: pointer;
+ z-index: 15;
+ .boxShadow('inset 1px 0 #FFFFFF');
+
+ &:hover {
+ .verGradient(darken(@meshTitleHoverStart, 5%), darken(@meshTitleHoverEnd, 10%));
+ }
+ }
+ &-sizing,
+ &-sizing .z-listheader-button,
+ &-sizing.z-listheader-sort .z-listheader-content {
+ cursor: e-resize;
+ }
+}
+// ZK-2151: use strict selector to prevent nest problem
+//list item and cell
+.z-listitem {
+ background: @meshBackgroundColor;
+
+ td:first-child {
+ border-left: none;
+ }
+ //list cell
+ .z-listcell {
+ border-left: 1px solid @meshContentBorderColor;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ &:hover {
+ > .z-listcell {
+ .verGradient(@meshContentHoverStart, @meshContentHoverEnd);
+ background-clip: padding-box;
+
+ > .z-listcell-content {
+ color: @hoverColor;
+ }
+ }
+ }
+ //check mark
+ &-checkable {
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ border: 1px solid @checkedBorderColor;
+ background: @checkedBackgroundColor;
+ vertical-align: text-top;
+
+ &.z-listitem-radio {
+ .borderRadius(@baseIconWidth / 2);
+ }
+ .z-listitem-icon {
+ display: none;
+ cursor: default;
+ }
+ }
+ //selected list cell
+ &.z-listitem-selected {
+ > .z-listcell {
+ border-color: @selectedGradientStart;
+ .verGradient(@selectedGradientStart, @selectedGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+
+ > .z-listcell-content {
+ color: @selectedColor;
+ }
+ }
+ &:hover {
+ > .z-listcell {
+ border-color: @selectedHoverGradientStart;
+ .verGradient(@selectedHoverGradientStart, @selectedHoverGradientEnd);
+ position: relative;
+ }
+ .z-listcell-content {
+ color: @selectedHoverColor;
+ }
+ }
+ }
+ &.z-listitem-selected.z-listitem-focus {
+ > .z-listcell {
+ border-color: @selectedGradientStart;
+ .verGradient(@selectedFocusGradientStart, @selectedFocusGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+
+ > .z-listcell-content {
+ color: @selectedFocusColor;
+ }
+ }
+ &:hover {
+ > .z-listcell {
+ border-color: @selectedHoverGradientStart;
+ .verGradient(@selectedHoverGradientStart, @selectedHoverGradientEnd);
+ position: relative;
+ }
+ .z-listcell-content {
+ color: @selectedHoverColor;
+ }
+ }
+ }
+ &-focus {
+ > .z-listcell {
+ .verGradient(@meshContentFocusStart, @meshContentFocusEnd);
+ background-clip: padding-box;
+ position: relative;
+ }
+ .z-listcell-content {
+ color: @hoverColor;
+ }
+ }
+ //selected check mark
+ &-selected {
+ > .z-listcell > .z-listcell-content
+ > .z-listitem-checkable .z-listitem-icon {
+ color: @checkedColor;
+ display: block;
+ padding-left: 1px;
+ line-height: @baseLineHeight;
+ cursor: pointer;
+
+ &.z-icon-check {} //for checkbox, use font-awesome
+ &.z-icon-radio { //for radio
+ .size(@baseIconWidth / 2, @baseIconWidth / 2);
+ .borderRadius(@baseIconWidth / 4);
+ margin: 3px;
+ padding: 0;
+ background: @checkedColor;
+ }
+ }
+ }
+ //disabled
+ &.z-listitem-disabled {
+ * {
+ color: @disabledColor !important;
+ cursor: default !important;
+ }
+ &:hover > .z-listcell {
+ .resetGradient();
+ position: relative;
+ }
+ a, a:visited, a:hover {
+ text-decoration: none;
+ }
+ }
+ a, a:visited, a:hover {
+ text-decoration: none;
+ }
+}
+
+body:not(.gecko) {
+ .z-listitem {
+ &:hover {
+ > .z-listitem {
+ position: relative;
+ }
+ }
+ }
+}
+
+//Group
+.z-listgroup {
+ &-inner {
+ border: 1px solid @meshTitleBorderColor;
+ border-left: none;
+ border-right: none;
+ .verGradient(@groupGradientStart, @groupGradientEnd);
+ position: relative;
+ overflow: hidden;
+
+ .z-listcell-content,
+ .z-listgroup-content {
+ padding: 3px 5px;
+ }
+ }
+ //check mark
+ &-checkable {
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ border: 1px solid @checkedBorderColor;
+ margin-right: 2px;
+ background: @checkedBackgroundColor;
+ vertical-align: text-top;
+
+ .z-listgroup-icon {
+ display: none;
+ cursor: default;
+ }
+ }
+ //selected check mark
+ &-selected &-checkable {
+ .z-listgroup-icon {
+ .iconFontStyle(@fontSizeMedium, @checkedColor);
+ display: block;
+ padding-right: 2px;
+ line-height: @baseLineHeight;
+ cursor: pointer;
+
+ &:hover {
+ color: @checkedColor;
+ }
+ }
+ }
+ &-icon {
+ .iconFontStyle(@baseFontSize, @iconColor);
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ line-height: @baseIconHeight;
+ text-align: center;
+ vertical-align: text-top;
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ color: @iconHoverColor;
+ }
+ }
+}
+.z-listgroupfoot-inner {
+ .verGradient(@groupGradientEnd, @groupGradientStart);
+ overflow: hidden;
+}
+//content
+.z-listheader-content,
+.z-listcell-content,
+.z-listgroup-content,
+.z-listgroupfoot-content,
+.z-listfooter-content {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayLight);
+ padding: 4px 5px;
+ line-height: @baseButtonHeight;
+ overflow: hidden;
+}
+.z-listheader-content {
+ font-weight: bold;
+ padding: 4px 5px 3px;
+ position: relative;
+}
+.z-listgroup-content,
+.z-listgroupfoot-content {
+ .z-label {
+ font-weight: bold;
+ }
+}
+//paging
+.z-listbox-paging {
+ &-top {
+ border-bottom: 1px solid @pagingBorderColor;
+ overflow: hidden;
+ width: 100%;
+ }
+ &-bottom {
+ border-top: 1px solid @pagingBorderColor;
+ overflow: hidden;
+ width: 100%;
+ }
+}
+.z-listbox-autopaging .z-listcell-content {
+ height: @meshAutoPagingRowHeight;
+ overflow: hidden;
+}
+//column menu
+.z-listhead-menugrouping .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-group.png');
+}
+.z-listhead-menuungrouping .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-ungroup.png');
+}
+.z-listhead-menuascending .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-arrowup.png');
+}
+.z-listhead-menudescending .z-menuitem-image {
+ .encodeThemeURL(background-image, '~./zul/img/grid/menu-arrowdown.png');
+}
+//select mold
+.z-select {
+ font-family: @baseContentFontFamily;
+ font-size: @fontSizeMedium;
+}
+
+// ZK-2151: use strict selector to prevent nest problem
+// IE8
+.ie8 {
+ .z-listbox-header {
+ background: @meshBackgroundColorIE8;
+ }
+ .z-listheader {
+ position: static;
+ background: @meshBackgroundColorIE8;
+ &-hover {
+ background: @meshHoverBackgroundColorIE8;
+ }
+
+ &-button:hover {
+ background: darken(@meshHoverBackgroundColorIE8, 3%);
+ }
+ }
+ .z-listitem {
+ &:hover > .z-listcell {
+ background: @meshHoverBackgroundColorIE8;
+ }
+ &.z-listitem-selected {
+ > .z-listcell {
+ position: static;
+ background: @meshSelectedBackgroundColorIE8;
+ }
+ &:hover > .z-listcell {
+ position: static;
+ background: @meshSelectedHoverBackgroundColorIE8;
+ }
+ }
+ }
+ // check icon fallback
+ .ie8-checkable-icon(z-listheader);
+ .ie8-checkable-icon(z-listgroup);
+ .ie8-checkable-icon(z-listitem);
+ .z-listheader > .z-listheader-content > .z-listheader-checkable.z-listheader-checked,
+ .z-listgroup-selected > .z-listcell
+ > .z-listcell-content > .z-listgroup-checkable,
+ .z-listitem-selected > .z-listcell
+ > .z-listcell-content > .z-listitem-checkable {
+ .z-icon-check {
+ margin: 0;
+ background-position: -26px 0px;
+ }
+ }
+ // radio icon fallback
+ .z-listitem > .z-listcell > .z-listcell-content
+ > .z-listitem-checkable .z-icon-radio {
+
+ background-position: 0 -13px;
+ }
+ .z-listitem-selected > .z-listcell > .z-listcell-content
+ > .z-listitem-checkable .z-icon-radio {
+ .displaySize(block, 13px, 13px);
+ margin: 0;
+ background-position: -26px -13px;
+ }
+ .z-listgroup-inner {
+ background: @meshGroupBackgroundColorIE8;
+ }
+ .z-listgroupfoot-inner {
+ background: @meshGroupFooterBackgroundColorIE8;
+ }
+}
+.ie8-checkable-icon(@comp) {
+ .@{comp} > .z-listcell
+ > .z-listcell-content > .@{comp}-checkable,
+ .@{comp} > .@{comp}-content > .@{comp}-checkable {
+
+ border-width: 0;
+ background: transparent;
+ .@{comp}-icon {
+ .displaySize(block, 13px, 13px);
+ .encodeThemeURL(background, '~./zul/img/common/check-sprite.gif', no-repeat);
+ position: relative;
+ top: 2px;
+ left: 2px;
+ }
+ .z-icon-check {
+ background-position: 0 0;
+ &:before {
+ display: none;
+ }
+ }
+ }
+}
--- /dev/null
+@import "~./zul/less/_header.less";
+
+//reset table
+.resetTable() {
+ table {
+ border-spacing: 0;
+ th, td {
+ background-clip: padding-box;
+ padding: 0;
+ }
+ th {
+ text-align: inherit;
+ }
+ }
+}
+
+//tree
+.z-tree {
+ border: 1px solid @baseBorderColor;
+ overflow: hidden;
+ zoom: 1;
+ //tree header div
+ &-header {
+ width: 100%;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ position: relative;
+ overflow: hidden;
+ .resetTable();
+ }
+ &-header-border {
+ border-bottom: 1px solid @meshTitleBorderColor;
+ margin-top: -1px;
+ position: relative;
+ }
+ //tree body div
+ &-body {
+ position: relative;
+ overflow: hidden;
+ .resetTable();
+ }
+ &-emptybody td {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @disabledColor);
+ font-style: italic;
+ text-align: center;
+ height: 1px;
+ }
+ //tree footer div
+ &-footer {
+ border-top: 1px solid @baseBorderColor;
+ background: @meshFootBackgroundColor;
+ overflow: hidden;
+ .resetTable();
+ }
+}
+//tree open icon and indent space
+.z-tree {
+ &-icon,
+ &-line {
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ line-height: @baseIconHeight;
+ vertical-align: middle;
+ }
+ &-icon {
+ .iconFontStyle(@baseFontSize, @iconColor);
+ text-align: center;
+ cursor: pointer;
+
+ &:hover {
+ color: @iconHoverColor;
+ }
+ }
+}
+//treecols
+.z-treecols {
+ th:first-child {
+ border-left: none;
+
+ // B50-3306729: the first header should have border-left when the first column is covered with other header
+ &.z-treecols-border {
+ border-left: 1px solid @meshTitleBorderColor;
+ }
+ }
+ &-bar {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ }
+}
+.z-treecol {
+ border-left: 1px solid @meshTitleBorderColor;
+ border-bottom: 1px solid @meshTitleBorderColor;
+ padding: 0;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &-sort {
+ cursor: pointer;
+
+ &:hover {
+ .verGradient(@meshTitleHoverStart, @meshTitleHoverEnd);
+ }
+ .z-treecol-sorticon {
+ color: @iconColor;
+ position: absolute;
+ top: -7px;
+ left: 50%;
+ }
+ }
+ &-sizing,
+ &-sizing .z-treecol-content {
+ cursor: e-resize;
+ }
+}
+// ZK-2151: use strict selector to prevent nest problem
+//tree row and cell
+.z-treerow {
+ background: @meshBackgroundColor;
+ //tree cell
+ .z-treecell {
+ overflow: hidden;
+ cursor: pointer;
+ }
+ &:hover {
+ > .z-treecell {
+ .verGradient(@meshContentHoverStart, @meshContentHoverEnd);
+ background-clip: padding-box;
+
+ > .z-treecell-content {
+ color: @hoverColor;
+ }
+ }
+ }
+ //check mark
+ &-checkable {
+ .displaySize(inline-block, @baseIconWidth, @baseIconHeight);
+ border: 1px solid @checkedBorderColor;
+ background: @checkedBackgroundColor;
+ vertical-align: middle;
+
+ &.z-treerow-radio {
+ .borderRadius(@baseIconWidth / 2);
+ }
+ .z-treerow-icon {
+ display: none;
+ cursor: default;
+ }
+ }
+ //selected tree cell
+ &.z-treerow-selected {
+ > .z-treecell {
+ .verGradient(@selectedGradientStart, @selectedGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+
+ > .z-treecell-content {
+ color: @selectedColor;
+ }
+ }
+
+ &:hover {
+ > .z-treecell {
+ .verGradient(@selectedHoverGradientStart, @selectedHoverGradientEnd);
+ > .z-treecell-content {
+ color: @selectedHoverColor;
+ }
+ }
+ }
+ }
+ &.z-treerow-selected.z-treerow-focus {
+ > .z-treecell {
+ .verGradient(@selectedFocusGradientStart, @selectedFocusGradientEnd);
+ background-clip: padding-box;
+ position: relative;
+
+ > .z-treecell-content {
+ color: @selectedFocusColor;
+ }
+ }
+ &:hover {
+ > .z-treecell {
+ .verGradient(@selectedHoverGradientStart, @selectedHoverGradientEnd);
+ > .z-treecell-content {
+ color: @selectedHoverColor;
+ }
+ }
+ }
+ }
+ &-focus {
+ > .z-treecell {
+ .verGradient(@meshContentFocusStart, @meshContentFocusEnd);
+ position: relative;
+ > .z-treecell-content {
+ color: @hoverColor;
+ }
+ }
+ }
+ //selected check mark
+ &-selected {
+ > .z-treecell > .z-treecell-content
+ > .z-treerow-checkable .z-treerow-icon {
+ color: @checkedColor;
+ display: block;
+ padding-left: 1px;
+ line-height: @baseLineHeight;
+
+ &.z-icon-check {} //for checkbox, use font-awesome
+ &.z-icon-radio { //for radio
+ .size(@baseIconWidth / 2, @baseIconWidth / 2);
+ .borderRadius(@baseIconWidth / 4);
+ margin: 3px;
+ padding: 0;
+ background: @checkedColor;
+ }
+ }
+ }
+ //disabled
+ &.z-treerow-disabled {
+ * {
+ color: @disabledColor !important;
+ cursor: default !important;
+ }
+ &:hover > .z-treecell {
+ .resetGradient();
+ position: relative;
+ }
+ }
+}
+
+body:not(.gecko) {
+ .z-treerow {
+ &:hover {
+ > .z-treecell {
+ position: relative;
+ }
+ }
+ }
+}
+
+//content
+.z-treecol-content,
+.z-treecell-content,
+.z-treefooter-content {
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGrayLight);
+ padding: 4px 5px;
+ line-height: @baseButtonHeight;
+ overflow: hidden;
+}
+.z-treecol-content {
+ font-weight: bold;
+ padding: 4px 5px 3px;
+ position: relative;
+}
+.z-treecell-content {
+ padding: 4px 2px;
+ line-height: @baseLineHeight;
+}
+.z-treecell-text {
+ vertical-align: middle;
+}
+//paging
+.z-tree-paging {
+ &-top {
+ border-bottom: 1px solid @pagingBorderColor;
+ overflow: hidden;
+ width: 100%;
+ }
+ &-bottom {
+ border-top: 1px solid @pagingBorderColor;
+ overflow: hidden;
+ width: 100%;
+ }
+}
+.z-tree-autopaging .z-treecell-content {
+ height: @baseButtonHeight;
+ overflow: hidden;
+}
+// ZK-2151: use strict selector to prevent nest problem
+// IE8
+.ie8 {
+ .z-tree-header {
+ background: @meshBackgroundColorIE8;
+ }
+ .z-treecol {
+ position: static;
+ background: @meshBackgroundColorIE8;
+ &-hover, &-sort:hover {
+ background: @meshHoverBackgroundColorIE8;
+ }
+ }
+ .z-treerow {
+ &:hover > .z-treecell {
+ background: @meshHoverBackgroundColorIE8;
+ }
+ &.z-treerow-selected {
+ > .z-treecell {
+ position: static;
+ background: @meshSelectedBackgroundColorIE8;
+ }
+ &:hover > .z-treecell {
+ position: static;
+ background: @meshSelectedHoverBackgroundColorIE8;
+ }
+ }
+ }
+ // check and radio icon fallback
+ .z-treerow > .z-treecell
+ > .z-treecell-content > .z-treerow-checkable {
+ border-width: 0;
+ background: transparent;
+ .z-treerow-icon {
+ .displaySize(block, 13px, 13px);
+ .encodeThemeURL(background, '~./zul/img/common/check-sprite.gif', no-repeat);
+ position: relative;
+ top: 2px;
+ left: 2px;
+ }
+ .z-icon-check {
+ background-position: 0 0;
+ &:before {
+ display: none;
+ }
+ }
+ .z-icon-radio {
+ background-position: 0 -13px;
+ }
+ }
+ .z-treerow-selected > .z-treecell
+ > .z-treecell-content > .z-treerow-checkable {
+
+ .z-treerow-icon {
+ .displaySize(block, 13px, 13px);
+ }
+
+ .z-icon-check {
+ background-position: -26px 0px;
+ }
+ .z-icon-radio {
+ margin: 0;
+ background-position: -26px -13px;
+ }
+ }
+}
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.userSelect() {\r
+ -webkit-touch-callout: none;\r
+ -webkit-user-select: none;\r
+ -khtml-user-select: none;\r
+ -moz-user-select: none;\r
+ -ms-user-select: none;\r
+ user-select: none;\r
+}\r
+\r
+// ZK-2100: use strict selector to prevent nest problem\r
+.verticalStyle() {\r
+ > .z-tabs {\r
+ float: left;\r
+ \r
+ .z-tabs-content {\r
+ display: block;\r
+ height: 4096px;\r
+ border-right: 1px solid @baseBorderColor;\r
+ }\r
+ .z-tabs-space {\r
+ width: 0;\r
+ position: relative;\r
+ float: left;\r
+ }\r
+\r
+ .z-tab {\r
+ border-width: 1px 0px 1px 1px;\r
+ border-top: 1px solid @baseBorderColor;\r
+ .leftBorderRadius(@baseBorderRadius);\r
+ padding-top: 0px;\r
+ float: none;\r
+ \r
+ &-selected {\r
+ border-bottom: 1px solid @baseBorderColor;\r
+ .boxShadow('1px 0px 0 #FFFFFF');\r
+\r
+ .z-tab-button {\r
+ .opacity(1.0);\r
+ }\r
+\r
+ .z-tab-text {\r
+ font-weight: bold;\r
+ cursor: default;\r
+ white-space: nowrap;\r
+ }\r
+ }\r
+\r
+ &.z-tab-disabled .z-tab-text {\r
+ color: gray;\r
+ .opacity(@disabledOpacity);\r
+ cursor: default;\r
+ }\r
+ }\r
+ }\r
+\r
+ &.z-tabbox-scroll {\r
+ > .z-tabs {\r
+ margin: 24px 0px 24px 0px;\r
+ }\r
+ } \r
+\r
+ > .z-tabpanels {\r
+ border: 1px solid @baseBorderColor;\r
+ border-left: 0px;\r
+\r
+ > .z-tabpanel {\r
+ border: 0;\r
+ padding: 5px;\r
+ }\r
+ }\r
+}\r
+\r
+.z-toolbar.z-toolbar-tabs {\r
+ border-bottom: 1px solid @baseBorderColor;\r
+ padding: 4px 4px;\r
+ .resetGradient();\r
+ position: absolute;\r
+ right: 0;\r
+ top: 0;\r
+ overflow: hidden;\r
+ z-index: 1;\r
+}\r
+// remove selected tab bottom border\r
+.z-tabbox-top > .z-tabs .z-tab:first-child {\r
+ &.z-tab-selected {\r
+ .boxShadow(1px 1px 0 #FFFFFF);\r
+ }\r
+ &.z-tab-selected + .z-tab {\r
+ .boxShadow(0 1px 0 #CFCFCF);\r
+ }\r
+}\r
+// remove selected tab top border\r
+.z-tabbox-bottom > .z-tabs .z-tab:first-child {\r
+ &.z-tab-selected {\r
+ .boxShadow(1px -1px 0 #FFFFFF);\r
+ }\r
+ &.z-tab-selected + .z-tab {\r
+ .boxShadow(0px -1px 0 #CFCFCF);\r
+ }\r
+}\r
+// remove selected tab right border\r
+.z-tabbox-left > .z-tabs .z-tab:first-child {\r
+ &.z-tab-selected {\r
+ .boxShadow(1px 1px 0 #FFFFFF);\r
+ }\r
+\r
+ &.z-tab-selected + .z-tab {\r
+ .boxShadow(0 1px 0 #CFCFCF);\r
+ }\r
+}\r
+// remove selected tab left border\r
+.z-tabbox-right > .z-tabs .z-tab:first-child {\r
+ border-left: 0px;\r
+ &.z-tab-selected {\r
+ .boxShadow(-1px 1px 0 #FFFFFF);\r
+ }\r
+ &.z-tab-selected + .z-tab {\r
+ .boxShadow(-1px 0px 0 #CFCFCF);\r
+ }\r
+}\r
+\r
+.z-tabbox {\r
+ position: relative;\r
+ overflow: hidden;\r
+ // horizontal (default)\r
+ &-icon {\r
+ .iconFontStyle(@fontSizeMedium, @iconColor);\r
+ display: none;\r
+ border: 1px solid @baseBorderColor;\r
+ .topBorderRadius(@baseBorderRadius);\r
+ padding-top: 5px;\r
+ padding-bottom: 2px;\r
+ line-height: @baseButtonHeight;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ text-align: center;\r
+ position: absolute;\r
+ top: 0;\r
+ cursor: pointer;\r
+ z-index: 25;\r
+ .userSelect();\r
+ \r
+ > i {\r
+ .opacity(0.7);\r
+ }\r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ > i {\r
+ .opacity(1);\r
+ }\r
+ }\r
+ }\r
+ &-left-scroll,\r
+ &-right-scroll {\r
+ width: @baseButtonWidth;\r
+ }\r
+ &-right-scroll {\r
+ padding-left: 1px;\r
+ right: 0;\r
+ }\r
+ &-up-scroll,\r
+ &-down-scroll {\r
+ height: @baseButtonHeight;\r
+ }\r
+ &-down-scroll {\r
+ top: auto;\r
+ bottom: 0;\r
+ }\r
+ // bottom\r
+ &-bottom {\r
+ > .z-tabbox-icon {\r
+ .bottomBorderRadius(@baseBorderRadius);\r
+ top: auto;\r
+ bottom: 0;\r
+ }\r
+ > .z-tabs {\r
+ .z-tabs-content {\r
+ border-top: 1px solid @baseBorderColor;\r
+ border-bottom: 0;\r
+ }\r
+\r
+ .z-tab {\r
+ border-width: 0px 1px 1px 1px;\r
+ .bottomBorderRadius(@baseBorderRadius);\r
+ \r
+ &.z-tab-selected {\r
+ .boxShadow('0px -1px 0 #FFFFFF');\r
+ }\r
+ }\r
+ }\r
+ \r
+ > .z-tabpanels > .z-tabpanel {\r
+ border: 1px solid @baseBorderColor;\r
+ border-bottom: 0;\r
+ }\r
+ .z-toolbar-tabs {\r
+ border-top: 1px solid @baseBorderColor;\r
+ border-bottom: 0;\r
+ top: auto;\r
+ bottom: 0;\r
+ }\r
+ }\r
+ // left\r
+ &-left {\r
+ > .z-tabbox-icon {\r
+ .leftBorderRadius(@baseBorderRadius);\r
+ padding-top: 0;\r
+ }\r
+ .verticalStyle();\r
+\r
+ > .z-tab-icon {\r
+ left: 10px;\r
+ right: auto;\r
+ }\r
+ > .z-tabs .z-tab-button {\r
+ top: 0;\r
+ left: 0px;\r
+ & + .z-tab-text {\r
+ margin-left: 14px;\r
+ margin-right: 0px;\r
+ }\r
+ }\r
+ }\r
+\r
+ // right\r
+ &-right {\r
+ > .z-tabbox-icon {\r
+ .rightBorderRadius(@baseBorderRadius);\r
+ padding-top: 0;\r
+ right: 0;\r
+ }\r
+ .verticalStyle();\r
+\r
+ > .z-tabs {\r
+ float: right;\r
+ \r
+ .z-tabs-content {\r
+ border-left: 1px solid @baseBorderColor;\r
+ border-right: 0;\r
+ }\r
+ .z-tabs-space {\r
+ float: right;\r
+ }\r
+\r
+ .z-tab {\r
+ border-width: 1px 1px 1px 0px;\r
+ .rightBorderRadius(@baseBorderRadius);\r
+ \r
+ &.z-tab-selected {\r
+ .boxShadow('-1px 0px 0 #FFFFFF');\r
+ border-left: 0px;\r
+ }\r
+ } \r
+ }\r
+ \r
+ > .z-tabpanels { \r
+ border: 1px solid @baseBorderColor;\r
+ border-right: 0;\r
+ }\r
+ }\r
+\r
+ // accordion\r
+ &-accordion {\r
+ > .z-tabpanels {\r
+ border-top: 1px solid @baseBorderColor;\r
+ \r
+ > .z-tabpanel {\r
+ border: 0;\r
+ padding: 0;\r
+ }\r
+ }\r
+ .z-tabpanel > .z-tabpanel-content {\r
+ border: 1px solid @baseBorderColor;\r
+ border-top: 0;\r
+ padding: 5px;\r
+ zoom: 1;\r
+ }\r
+ .z-tabpanel > .z-tab {\r
+ border-width: 0 1px 1px 1px;\r
+ .borderRadius(0);\r
+ padding-top: 1px;\r
+ text-align: left;\r
+ float: none;\r
+ zoom: 1;\r
+\r
+ &-selected {\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ .boxShadow('none');\r
+ cursor: default;\r
+ }\r
+ }\r
+ .z-tab-button {\r
+ .opacity(0.7);\r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ }\r
+\r
+ + .z-tab-text {\r
+ margin-right: @baseButtonWidth;\r
+ }\r
+ }\r
+ .z-tab-text {\r
+ padding: 3px 5px 3px 8px;\r
+ }\r
+ }\r
+\r
+ // .z-tabbox-scroll\r
+ &-scroll {\r
+ > .z-tabs {\r
+ border: 0;\r
+ margin: 0px 24px 0px 24px;\r
+ padding-bottom: 0;\r
+ zoom: 1;\r
+ }\r
+ > .z-tabbox-icon {\r
+ display: block;\r
+ }\r
+ }\r
+}\r
+\r
+.z-tabs {\r
+ border: 0;\r
+ margin: 0;\r
+ padding: 0;\r
+ line-height: @baseButtonHeight;\r
+ overflow: hidden;\r
+ position: relative;\r
+\r
+ &-content {\r
+ display: table;\r
+ width: 100%;\r
+ border-collapse: separate;\r
+ border-spacing: 0;\r
+ border-bottom: 1px solid @baseBorderColor;\r
+ margin: 0;\r
+ padding-left: 0;\r
+ padding-top: 0;\r
+ list-style-image: none;\r
+ list-style-position: outside;\r
+ list-style-type: none;\r
+ zoom: 1;\r
+ clear: both;\r
+ }\r
+}\r
+\r
+.z-tab {\r
+ font-family: @baseTitleFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ display: block;\r
+ border: 1px solid @baseBorderColor;\r
+ border-width: 1px 1px 0px 1px;\r
+ .topBorderRadius(@baseBorderRadius);\r
+ margin: 0;\r
+ padding-top: 1px;\r
+ line-height: @baseButtonHeight + 6;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ text-align: center;\r
+ position: relative;\r
+ cursor: pointer;\r
+ float: left;\r
+ \r
+\r
+ &-content {\r
+ display: block;\r
+ }\r
+\r
+ &:hover {\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+\r
+ &-icon {\r
+ display: block;\r
+ margin-top: -6px;\r
+ line-height: normal;\r
+ position: absolute;\r
+ top: 50%;\r
+ left: 5px;\r
+ cursor: pointer;\r
+ }\r
+\r
+ &-text {\r
+ font-style: normal;\r
+ color: @textColorGray;\r
+ display: block;\r
+ padding: 4px 12px 2px;\r
+ line-height: @baseButtonHeight;\r
+ overflow: hidden;\r
+ text-overflow: ellipsis;\r
+ white-space: nowrap;\r
+ }\r
+\r
+ &-image {\r
+ vertical-align: middle;\r
+ }\r
+\r
+ &-button {\r
+ .iconFontStyle(@fontSizeMedium, @iconColor);\r
+ .displaySize(block, @baseButtonHeight, 100%);\r
+ line-height: normal;\r
+ .opacity(0.7);\r
+ text-align: center;\r
+ position: absolute;\r
+ right: 0;\r
+ top: 0;\r
+ z-index: 15;\r
+ zoom: 1;\r
+ .userSelect();\r
+ \r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ }\r
+ & + .z-tab-text {\r
+ margin-right: 14px;\r
+ }\r
+ }\r
+ .z-caption {\r
+ margin: auto;\r
+ }\r
+ &-selected {\r
+ .resetGradient();\r
+ background: @tabSelectedBackgroundColor;\r
+ .boxShadow('0 1px 0 #FFFFFF');\r
+ &:hover {\r
+ .resetGradient();\r
+ background: @tabSelectedBackgroundColor;\r
+ }\r
+ .z-tab-button {\r
+ .opacity(1);\r
+ }\r
+ .z-tab-text {\r
+ cursor: default;\r
+ font-weight: bold;\r
+ }\r
+ }\r
+ &-disabled {\r
+ color: @disabledColor;\r
+ .opacity(@disabledOpacity);\r
+ cursor: default;\r
+ \r
+ &:hover {\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ .z-tab-button:hover {\r
+ .opacity(@disabledOpacity);\r
+ }\r
+ .z-tab-text {\r
+ font-style: normal;\r
+ .opacity(@disabledOpacity);\r
+ cursor: default;\r
+ white-space: nowrap;\r
+ }\r
+ }\r
+}\r
+\r
+.z-tabpanels {\r
+ zoom: 1;\r
+ overflow: hidden;\r
+ position: relative;\r
+}\r
+\r
+.z-tabpanel {\r
+ border: 1px solid @baseBorderColor;\r
+ border-top: 0px;\r
+ padding: 5px;\r
+ zoom: 1;\r
+}\r
+\r
+// ZK-2158: Tab should not be click on blank area next to last tab\r
+.ie9 {\r
+ .z-tabs {\r
+ line-height: 1px;\r
+ > .z-tabs-content {\r
+ display: inline-block;\r
+ }\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-tab {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &-icon {\r
+ margin-top: -7px;\r
+ font-size: 14px;\r
+ }\r
+ &-disabled {\r
+ &:hover {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ .z-tabbox {\r
+ &-icon {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ &-accordion {\r
+ .z-tabpanel > .z-tab {\r
+ &-selected {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-a {\r
+ font-family: @baseTitleFontFamily;\r
+ font-size: @fontSizeMedium;\r
+\r
+ &[disabled] {\r
+ color: @disabledColor; \r
+ cursor: default;\r
+ text-decoration: none;\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-button {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ min-height: @baseButtonHeight;\r
+ border: 1px solid @buttonBorderColor;\r
+ .borderRadius(@baseBorderRadius);\r
+ padding: 3px 12px;\r
+ line-height: @baseLineHeight;\r
+ .verGradient(@buttonGradientStart, @buttonGradientEnd);\r
+ text-shadow: 0 1px #FFFFFF;\r
+ cursor: pointer;\r
+ white-space: nowrap;\r
+\r
+ &:hover {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:focus {\r
+ color: @focusColor;\r
+ border-color: @focusBorderColor;\r
+ .verGradient(@focusGradientStart, @focusGradientEnd);\r
+ .boxShadow('inset 0 0 2px #0CBCFF');\r
+ }\r
+ &:active {\r
+ border-color: @activeBorderColor;\r
+ .verGradient(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ &[disabled] {\r
+ border-color: @buttonBorderColor;\r
+ .verGradient(@buttonGradientStart, @buttonGradientEnd);\r
+ .opacity(@disabledOpacity);\r
+ .boxShadow('none');\r
+ cursor: default;\r
+ }\r
+ img {\r
+ vertical-align: middle;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-button {\r
+ min-height: @baseButtonHeight - 8; //minus padding border height\r
+ .gradientFallback(@buttonGradientStart, @buttonGradientEnd);\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:focus {\r
+ .gradientFallback(@focusGradientStart, @focusGradientEnd);\r
+ }\r
+ &:active {\r
+ .gradientFallback(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ &[disabled] {\r
+ .gradientFallback(@buttonGradientStart, @buttonGradientEnd);\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-caption {\r
+ font-size: @fontSizeMedium;\r
+ .size(100%, auto);\r
+ min-height: @baseButtonHeight;\r
+ line-height: @baseLineHeight;\r
+\r
+ & > * {\r
+ margin-left: 4px;\r
+\r
+ &:first-child {\r
+ margin-left: 0px;\r
+ } \r
+ }\r
+\r
+ &-content,\r
+ .z-label {\r
+ display: inline-block;\r
+ // ZK-2209: fix style\r
+ padding: 0px;\r
+ line-height: @baseButtonHeight;\r
+ }\r
+\r
+ &-image {\r
+ vertical-align: middle;\r
+ }\r
+\r
+ input {\r
+ font-size: @fontSizeSmall;\r
+ }\r
+\r
+ .z-toolbar {\r
+ .z-a,\r
+ .z-a:visited,\r
+ .z-a:hover {\r
+ color: #FFFFFF;\r
+ border: 0;\r
+ background: none;\r
+ }\r
+ }\r
+\r
+ .z-a,\r
+ .z-a:visited {\r
+ font-size: @fontSizeSmall; \r
+ font-weight: normal; \r
+ color: @baseTextColor; \r
+ background: none;\r
+ text-decoration: none;\r
+ }\r
+\r
+ .z-a:hover {\r
+ text-decoration: underline;\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-combobutton {\r
+ display: inline-block;\r
+ min-height: @baseButtonHeight;\r
+ cursor: pointer;\r
+\r
+ &-content {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @baseTextColor);\r
+ display: inline-block;\r
+ min-height: @baseButtonHeight;\r
+ border: 1px solid @buttonBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ padding: 4px 30px 4px 5px;\r
+ line-height: @baseLineHeight;\r
+ .verGradient(@buttonGradientStart, @buttonGradientEnd);\r
+ vertical-align: middle;\r
+ position: relative;\r
+ white-space: nowrap;\r
+ }\r
+ &-image {\r
+ vertical-align: middle;\r
+ }\r
+ &-button {\r
+ font-weight: normal;\r
+ .displaySize(block, @baseButtonWidth, 100%);\r
+ border-left: 1px solid @buttonBorderColor;\r
+ line-height: normal;\r
+ position: absolute;\r
+ top: 0;\r
+ right: 0;\r
+ }\r
+ &-icon {\r
+ .iconFontStyle(@fontSizeLarge, @iconColor);\r
+ \r
+ &.z-icon-caret-down {\r
+ display: block;\r
+ margin-top: -8px;\r
+ position: absolute;\r
+ top: 50%;\r
+ left: 7px;\r
+ }\r
+ }\r
+ &:hover {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ }\r
+ &:focus {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ color: @focusColor;\r
+ border-color: @focusBorderColor;\r
+ .verGradient(@focusGradientStart, @focusGradientEnd);\r
+ .boxShadow('inset 0 0 2px #0CBCFF');\r
+ }\r
+ .z-combobutton-button {\r
+ border-left-color: @baseBorderColor;\r
+ }\r
+ }\r
+ &:active {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: @activeBorderColor;\r
+ .verGradient(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ }\r
+ &[disabled] {\r
+ cursor: default;\r
+\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: @buttonBorderColor;\r
+ .resetGradient();\r
+ .boxShadow('none');\r
+ .opacity(@disabledOpacity);\r
+ }\r
+ }\r
+\r
+ //toolbar mold\r
+ &-toolbar {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: transparent;\r
+ .borderRadius(0);\r
+ .resetGradient();\r
+ }\r
+ &:focus {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: transparent;\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+ &:active {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ }\r
+ &[disabled] {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ border-color: transparent;\r
+ .resetGradient();\r
+ .opacity(@disabledOpacity);\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-combobutton {\r
+ min-height: @baseButtonHeight - 10;\r
+\r
+ &-content {\r
+ .gradientFallback(@baseGradientEnd, @baseGradientStart);\r
+ min-height: @baseButtonHeight - 10;\r
+ }\r
+ &-toolbar {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ background: transparent;\r
+ }\r
+ &:active {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ &:hover {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ background: @hoverGradientEnd;\r
+ }\r
+ }\r
+ &:focus {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ .gradientFallback(@focusGradientStart, @focusGradientEnd);\r
+ }\r
+ }\r
+ &:active {\r
+ .z-combobutton-content,\r
+ .z-combobutton-button {\r
+ .gradientFallback(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-groupbox {\r
+ padding-top: 16px;\r
+\r
+ > .z-groupbox-header {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, @textColorGrayDark);\r
+ .size(100%, @baseIconHeight);\r
+ border: 1px solid @baseBorderColor;\r
+ border-bottom: 0;\r
+ padding-left: 10px;\r
+ line-height: @baseLineHeight;\r
+ zoom: 1;\r
+\r
+ .z-groupbox-title {\r
+ font-size: 12px;\r
+ height: auto;\r
+ min-height: 24px;\r
+ white-space: nowrap;\r
+ }\r
+\r
+ .z-groupbox-title-content {\r
+ display: inline-block;\r
+ padding: 4px 0;\r
+ line-height: 16px;\r
+ }\r
+\r
+ .z-caption, .z-groupbox-title {\r
+ display: inline;\r
+ width: auto;\r
+ padding: 0px 4px;\r
+ line-height: @baseIconHeight;\r
+ background: @baseBackgroundColor;\r
+ position: relative;\r
+ cursor: pointer;\r
+\r
+ &-readonly {\r
+ cursor: default;\r
+ }\r
+ }\r
+\r
+ .z-caption-content, .z-label {\r
+ float: none;\r
+ }\r
+ }\r
+ \r
+ > .z-groupbox-readonly .z-groupbox-title {\r
+ cursor: default;\r
+ }\r
+ \r
+ &-content {\r
+ display: block;\r
+ height: inherit; // Firefox bug: content cant be collapsed when scrolling\r
+ border: 1px solid @baseBorderColor;\r
+ border-top: 0;\r
+ padding: 5px;\r
+ overflow: hidden;\r
+ zoom: 1;\r
+ }\r
+\r
+ &-notitle {\r
+ padding: 0;\r
+\r
+ .z-groupbox-content {\r
+ border-top: 1px solid @baseBorderColor;\r
+ }\r
+ }\r
+\r
+ &-collapsed .z-groupbox-header {\r
+ border-left: 1px solid transparent;\r
+ border-right: 1px solid transparent;\r
+ }\r
+\r
+ &-3d {\r
+ padding: 0;\r
+\r
+ > .z-groupbox-header {\r
+ font-weight: bold;\r
+ height: auto;\r
+ min-height: @baseBarHeight;\r
+ border-bottom: 1px solid @baseBorderColor;\r
+ padding: 3px 4px;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+\r
+ .z-caption, .z-groupbox-title {\r
+ display: inline-block;\r
+ width: 100%;\r
+ margin: 0;\r
+ padding: 0;\r
+ line-height: @baseButtonHeight;\r
+ background: none;\r
+ top: 0px;\r
+ }\r
+\r
+ .z-caption-content {\r
+ padding: 4px 0px 4px 0px;\r
+ line-height: @baseIconHeight;\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-groupbox {\r
+ &-3d {\r
+ > .z-groupbox-header {\r
+ min-height: @baseBarHeight - 8;\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-popup {\r
+ border: 1px solid @popupBorderColor;\r
+ .borderRadius(1px);\r
+ .verGradient(@popupGradientStart, @popupGradientEnd);\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ overflow: hidden;\r
+ .boxShadow('0 0 15px rgba(0, 0, 0, 0.35)');\r
+\r
+ &-content {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @textColorGray);\r
+ height: 100%;\r
+ padding: 10px;\r
+ line-height: @baseLineHeight;\r
+ }\r
+}\r
+\r
+// notification\r
+.z-notification {\r
+ color: #FFFFFF;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+}\r
+\r
+.z-notification-icon {\r
+ position: absolute;\r
+ top: 50%; \r
+ left: 2px;\r
+ z-index: 1;\r
+\r
+ &.z-icon-times {\r
+ margin-top: -5px;\r
+ }\r
+\r
+ &.z-icon-times-circle, \r
+ &.z-icon-exclamation-circle,\r
+ &.z-icon-info-circle {\r
+ font-size: 24px;\r
+ margin-top: -12px;\r
+ left: 12px;\r
+ }\r
+}\r
+\r
+.z-notification-pointer + .z-notification-icon {\r
+ left: 14px;\r
+}\r
+\r
+.z-notification-left + .z-notification-icon {\r
+ left: 24px;\r
+}\r
+\r
+.z-notification-up + .z-notification-icon {\r
+ margin-top: -6px;\r
+}\r
+\r
+.z-notification-down + .z-notification-icon {\r
+ margin-top: -18px;\r
+}\r
+\r
+.z-notification-content {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeSmall;\r
+ font-weight: normal;\r
+ width: 250px;\r
+ min-height: 130px;\r
+ .borderRadius(10px);\r
+ padding: 15px 18px 15px 45px;\r
+ position: relative;\r
+ overflow: hidden;\r
+ .boxShadow('1px 1px 3px rgba(0, 0, 0, 0.35)');\r
+}\r
+\r
+.z-notification-pointer ~ .z-notification-content {\r
+ .displaySize(table-cell, 125px, 60px);\r
+ min-height: 60px; // fix for IE9\r
+ .borderRadius(5px);\r
+ padding: 5px 18px 5px 45px;\r
+ vertical-align: middle;\r
+}\r
+\r
+.z-notification-pointer {\r
+ .displaySize(none, 0, 0);\r
+ border: 10px solid transparent;\r
+ position: absolute;\r
+ z-index: 100;\r
+}\r
+\r
+// notification arrow: base style\r
+.z-notification-left,\r
+.z-notification-right,\r
+.z-notification-up,\r
+.z-notification-down {\r
+ border: 10px solid transparent;\r
+}\r
+.z-notification-left {\r
+ border-right-color: @notificationArrowColor;\r
+}\r
+.z-notification-right {\r
+ border-left-color: @notificationArrowColor;\r
+}\r
+.z-notification-up {\r
+ border-bottom-color: @notificationArrowColor;\r
+}\r
+.z-notification-down {\r
+ border-top-color: @notificationArrowColor;\r
+}\r
+\r
+// notification arrow: info\r
+.z-notification-info .z-notification-content {\r
+ background: @notificationInfoColor;\r
+}\r
+.z-notification-info .z-notification-left {\r
+ border-right-color: @notificationInfoColor;\r
+}\r
+.z-notification-info .z-notification-right {\r
+ border-left-color: @notificationInfoColor;\r
+}\r
+.z-notification-info .z-notification-up {\r
+ border-bottom-color: @notificationInfoColor;\r
+}\r
+.z-notification-info .z-notification-down {\r
+ border-top-color: @notificationInfoColor;\r
+}\r
+\r
+// notification arrow: warning\r
+.z-notification-warning .z-notification-content {\r
+ background: @notificationWarningColor;\r
+}\r
+.z-notification-warning .z-notification-left {\r
+ border-right-color: @notificationWarningColor;\r
+}\r
+.z-notification-warning .z-notification-right {\r
+ border-left-color: @notificationWarningColor;\r
+}\r
+.z-notification-warning .z-notification-up {\r
+ border-bottom-color: @notificationWarningColor;\r
+}\r
+.z-notification-warning .z-notification-down {\r
+ border-top-color: @notificationWarningColor;\r
+}\r
+\r
+// notification arrow: error\r
+.z-notification-error .z-notification-content {\r
+ background: @notificationErrorColor;\r
+}\r
+.z-notification-error .z-notification-left {\r
+ border-right-color: @notificationErrorColor;\r
+}\r
+.z-notification-error .z-notification-right {\r
+ border-left-color: @notificationErrorColor;\r
+}\r
+.z-notification-error .z-notification-up {\r
+ border-bottom-color: @notificationErrorColor;\r
+}\r
+.z-notification-error .z-notification-down {\r
+ border-top-color: @notificationErrorColor;\r
+}\r
+\r
+.z-notification-close {\r
+ font-size: 10px;\r
+ .size(12px, 12px);\r
+ padding: 0 2px;\r
+ line-height: 11px;\r
+ .opacity(0.6);\r
+ text-align: center;\r
+ position: absolute;\r
+ top: 8px;\r
+ right: 8px;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ .borderRadius(@borderRadiusSmall - 1);\r
+ background: @baseBackgroundColor;\r
+ opacity: 1;\r
+ }\r
+}\r
+\r
+.z-notification-pointer ~ .z-notification-close {\r
+ top: 5px;\r
+ right: 5px;\r
+}\r
+.z-notification-right ~ .z-notification-close {\r
+ top: 5px;\r
+ right: 17px;\r
+}\r
+.z-notification-up ~ .z-notification-close {\r
+ top: 17px;\r
+}\r
+\r
+.z-notification-info .z-notification-close:hover {\r
+ color: @notificationInfoColor;\r
+}\r
+.z-notification-warning .z-notification-close:hover {\r
+ color: @notificationWarningColor;\r
+}\r
+.z-notification-error .z-notification-close:hover {\r
+ color: @notificationErrorColor;\r
+}\r
+\r
+.ie8 {\r
+ .z-popup {\r
+ .gradientFallback(@popupGradientStart, @popupGradientEnd);\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-notification-left {\r
+ border-right-color: @notificationArrowColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-right {\r
+ border-left-color: @notificationArrowColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-up {\r
+ border-bottom-color: @notificationArrowColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-down {\r
+ border-top-color: @notificationArrowColorIE8;\r
+ }\r
+}\r
+\r
+// notification arrow: info\r
+.ie8 {\r
+ .z-notification-info .z-notification-content {\r
+ background: @notificationInfoColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-info .z-notification-left {\r
+ border-right-color: @notificationInfoColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-info .z-notification-right {\r
+ border-left-color: @notificationInfoColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-info .z-notification-up {\r
+ border-bottom-color: @notificationInfoColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-info .z-notification-down {\r
+ border-top-color: @notificationInfoColorIE8;\r
+ }\r
+}\r
+\r
+// notification arrow: warning\r
+.ie8 {\r
+ .z-notification-warning .z-notification-content {\r
+ background: @notificationWarningColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-warning .z-notification-left {\r
+ border-right-color: @notificationWarningColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-warning .z-notification-right {\r
+ border-left-color: @notificationWarningColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-warning .z-notification-up {\r
+ border-bottom-color: @notificationWarningColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-warning .z-notification-down {\r
+ border-top-color: @notificationWarningColorIE8;\r
+ }\r
+}\r
+\r
+// notification arrow: error\r
+.ie8 {\r
+ .z-notification-error .z-notification-content {\r
+ background: @notificationErrorColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-error .z-notification-left {\r
+ border-right-color: @notificationErrorColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-error .z-notification-right {\r
+ border-left-color: @notificationErrorColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-error .z-notification-up {\r
+ border-bottom-color: @notificationErrorColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-error .z-notification-down {\r
+ border-top-color: @notificationErrorColorIE8;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-notification-info .z-notification-close:hover {\r
+ color: @notificationInfoColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-warning .z-notification-close:hover {\r
+ color: @notificationWarningColorIE8;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-notification-error .z-notification-close:hover {\r
+ color: @notificationErrorColorIE8;\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-progressmeter {\r
+ height: @baseIconHeight;\r
+ border:1px solid @baseBorderColor;\r
+ background: @baseBackgroundColor 0 0 repeat-x;\r
+ .encodeThemeURL(background-image, '~./zul/img/misc/prgmeter-anim.gif');\r
+ text-align: left;\r
+ overflow: hidden;\r
+\r
+ &-image {\r
+ font-size: 0;\r
+ display: inline-block;\r
+ height: @baseIconHeight - 2;\r
+ line-height: 0;\r
+ .verGradient(@progressmeterGradientStart, @progressmeterGradientEnd);\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-progressmeter {\r
+ &-image {\r
+ .gradientFallback(@progressmeterGradientStart, @progressmeterGradientEnd);\r
+ }\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-separator {\r
+ &-horizontal,\r
+ &-horizontal-bar {\r
+ font-size: 0;\r
+ height: 7px;\r
+ line-height: 0;\r
+ overflow: hidden;\r
+ }\r
+ &-horizontal-bar {\r
+ .encodeURL(background-image, "~./img/dot.gif");\r
+ background-position: center left; \r
+ background-repeat: repeat-x;\r
+ }\r
+ \r
+ &-vertical,\r
+ &-vertical-bar {\r
+ display: inline-block;\r
+ width: 10px;\r
+ overflow: hidden;\r
+ }\r
+ &-vertical-bar {\r
+ .encodeURL(background-image, "~./img/dot.gif");\r
+ background-position: top center; \r
+ background-repeat: repeat-y;\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.z-toolbar {\r
+ display: block;\r
+ border-color: @baseBorderColor;\r
+ border-style: solid;\r
+ border-width: 0 0 1px;\r
+ padding: 4px 4px 3px;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ position: relative;\r
+}\r
+.z-caption .z-toolbar {\r
+ background: none;\r
+ border: 0;\r
+}\r
+.z-toolbar-tabs .z-toolbar-content,\r
+.z-toolbar-tabs .z-toolbar-content span,\r
+.z-toolbar-content, .z-toolbar-content span {\r
+ font-size: @fontSizeSmall;\r
+}\r
+.z-toolbar-panel .z-toolbar-content,\r
+.z-toolbar-panel .z-toolbar-content span {\r
+ font-size: @fontSizeMedium;\r
+}\r
+// toolbar horizontal alignment\r
+.z-toolbar-start {\r
+ float: left;\r
+ clear: none;\r
+}\r
+.z-toolbar-center {\r
+ text-align: center;\r
+ margin: 0 auto;\r
+}\r
+.z-toolbar-end {\r
+ float: right;\r
+ clear: none;\r
+}\r
+// Toolbar Panel Mold\r
+.z-toolbar-panel {\r
+ border-width: 0;\r
+ padding: 5px;\r
+ .resetGradient();\r
+}\r
+\r
+.z-toolbar-panel .z-toolbar-horizontal,\r
+.z-toolbar-panel .z-toolbar-vertical {\r
+ border: 0;\r
+ padding: 0;\r
+}\r
+.z-toolbar-panel .z-toolbar-horizontal {\r
+ padding-left: 3px;\r
+}\r
+.z-toolbar-panel .z-toolbar-vertical {\r
+ padding-bottom: 1px;\r
+}\r
+\r
+// Toolbarbutton\r
+.z-toolbarbutton {\r
+ display: inline-block;\r
+ border: 1px solid transparent;\r
+ .borderRadius(@borderRadiusSmall);\r
+ margin: 0 2px;\r
+ padding: 1px 0;\r
+ line-height: @baseLineHeight;\r
+ position: relative;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ border: 1px solid @activeBorderColor;\r
+ .verGradient(@activeGradientStart, @activeGradientEnd);\r
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75), 0 0 7px #CFCFCF');\r
+ }\r
+ &[disabled] {\r
+ color: @disabledColor !important;\r
+ border: 1px solid transparent;\r
+ .resetGradient();\r
+ .opacity(@disabledOpacity);\r
+ cursor: default !important;\r
+ .boxShadow('none');\r
+ }\r
+}\r
+\r
+.z-toolbarbutton-checked {\r
+ border: 1px solid @checkedBorderColor;\r
+ .borderRadius(@borderRadiusSmall);\r
+ .verGradient(@checkedGradientStart, @checkedGradientEnd);\r
+}\r
+.z-toolbarbutton-content {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeSmall, normal, @baseTextColor);\r
+ padding: 2px;\r
+ line-height: @baseLineHeight + 6; // 20px for IE to v-align center\r
+ vertical-align: middle;\r
+ position: relative;\r
+ text-shadow: 0 1px #FFFFFF;\r
+ white-space:nowrap;\r
+}\r
+\r
+.ie8 {\r
+ .z-toolbar {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ .z-toolbarbutton {\r
+ &:hover {\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+ &:active {\r
+ .gradientFallback(@activeGradientStart, @activeGradientEnd);\r
+ }\r
+ }\r
+ .z-toolbarbutton-checked {\r
+ .gradientFallback(@checkedGradientStart, @checkedGradientEnd);\r
+ }\r
+}
\ No newline at end of file
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.defaultOverflowZoom() {\r
+ overflow: hidden;\r
+ zoom: 1;\r
+}\r
+\r
+.z-panel {\r
+ .defaultOverflowZoom();\r
+ \r
+ &-shadow {\r
+ .borderRadius(@baseBorderRadius);\r
+ .boxShadow('0 0 4px rgba(0, 0, 0, 0.5)');\r
+ }\r
+ \r
+ &-collapsed {\r
+ height: auto !important;\r
+ }\r
+ \r
+ &-head {\r
+ border: 1px solid @panelBorderColor;\r
+ border-bottom-color: @baseBorderColor;\r
+ .topBorderRadius(@baseBorderRadius);\r
+ padding: 5px 5px 1px;\r
+ background: @panelBackgroundColor;\r
+ overflow: hidden;\r
+ .boxShadow('inset 0px 1px 1px #FFFFFF');\r
+ }\r
+ \r
+ &-header {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, @textColorGrayDark);\r
+ border: 0;\r
+ padding: 3px 0 5px 0;\r
+ line-height: 24px;\r
+ background: @panelBackgroundColor;\r
+ .defaultOverflowZoom();\r
+ \r
+ &-move {\r
+ cursor: move;\r
+ }\r
+ }\r
+ \r
+ &-body {\r
+ border: 1px solid @panelBorderColor;\r
+ border-top-width: 0;\r
+ .bottomBorderRadius(@baseBorderRadius);\r
+ margin: 0;\r
+ padding: 6px 3px 6px 3px;\r
+ background: @panelBodyBackground;\r
+ .defaultOverflowZoom();\r
+ \r
+ &:first-child {\r
+ height: 100%;\r
+ }\r
+ }\r
+ \r
+ .z-toolbar {\r
+ padding: 4px;\r
+ }\r
+ \r
+ &-top .z-toolbar,\r
+ &-footer .z-toolbar,\r
+ &-bottom .z-toolbar {\r
+ border-width: 0 1px 1px 1px;\r
+ padding: 4px 3px 3px 3px;\r
+ }\r
+\r
+ &-top .z-toolbar.z-toolbar-panel,\r
+ &-footer .z-toolbar.z-toolbar-panel {\r
+ border-width: 0px;\r
+ padding: 4px;\r
+ }\r
+ \r
+ &-icon {\r
+ color: @iconColor;\r
+ display: block;\r
+ border: 1px solid @baseBorderColor;\r
+ .borderRadius(@baseBorderRadius);\r
+ margin: auto 1px;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ text-align: center;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ float: right;\r
+ \r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ border-color: @hoverBorderColor;\r
+ .resetGradient();\r
+ background: @hoverBackgroundColor;\r
+ }\r
+\r
+ }\r
+ \r
+ &-maximize, &-minimize, &-close, &-expand {\r
+ font-size: @fontSizeLarge;\r
+ .size(@baseButtonWidth + 4, @baseButtonHeight);\r
+ line-height: @baseButtonHeight;\r
+ }\r
+ \r
+ &-close {\r
+ font-size: @fontSizeXLarge;\r
+ line-height: 23px;\r
+ }\r
+ \r
+ &-minimize {\r
+ padding-top: 5px;\r
+ }\r
+ \r
+ &-expand {\r
+ font-size: @fontSizeXLarge;\r
+ }\r
+ \r
+ &-resize-faker {\r
+ border: 1px dashed #1854C2;\r
+ background: #D7E6F7;\r
+ .opacity(0.5);\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ overflow: hidden;\r
+ z-index: 60000;\r
+ }\r
+ \r
+ &-move-ghost {\r
+ .topBorderRadius(@baseBorderRadius);\r
+ margin: 0;\r
+ padding: 0;\r
+ background: #D7E6F7;\r
+ .opacity(0.6);\r
+ position: absolute;\r
+ overflow: hidden;\r
+ cursor: move;\r
+ \r
+ .z-panel-body {\r
+ padding: 0;\r
+ }\r
+ \r
+ dl {\r
+ font-size: 0;\r
+ display: block;\r
+ border: 1px solid @baseBorderColor;\r
+ border-top: 0;\r
+ margin: 0;\r
+ padding: 0;\r
+ line-height: 0;\r
+ overflow: hidden;\r
+ }\r
+ }\r
+ \r
+ &-move-block {\r
+ border: 2px dashed #B2CAD6;\r
+ }\r
+ \r
+ &-noframe &-body {\r
+ border: 0;\r
+ .borderRadius(0);\r
+ padding: 0;\r
+ background: white;\r
+ \r
+ .z-panelchildren {\r
+ border-top: 0;\r
+ }\r
+ }\r
+ \r
+ &-noheader &-body {\r
+ border-top: 1px solid @panelBorderColor;\r
+ .borderRadius(@baseBorderRadius);\r
+ }\r
+ \r
+ &-noheader&-noframe &-body {\r
+ border: 0;\r
+ .borderRadius(0);\r
+ }\r
+ \r
+ &-noheader&-noframe .z-panelchildren {\r
+ border-top: 1px solid @baseBorderColor;\r
+ }\r
+ \r
+ &-noborder&-noframe .z-panelchildren {\r
+ border: none;\r
+ }\r
+ \r
+ &-noborder .z-panel-bottom .z-toolbar {\r
+ border: 0;\r
+ padding: 4px;\r
+ }\r
+}\r
+\r
+.z-panelchildren {\r
+ border: 1px solid @baseBorderColor;\r
+ background: @baseBackgroundColor;\r
+ position: relative;\r
+ .defaultOverflowZoom();\r
+}\r
+\r
+.ie8 {\r
+ .z-panel-icon {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ .z-icon-minus {\r
+ margin-left: 1px;\r
+ }\r
+ }\r
+ .z-panel {\r
+ &-move-ghost {\r
+ .z-panel-icon {\r
+ .opacity(1);\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+\r
+.defaultOverflowZoom() {\r
+ overflow: hidden;\r
+ zoom: 1;\r
+}\r
+\r
+.z-window {\r
+ // ZK-2115: the style should apply [overflow: hidden]\r
+ .defaultOverflowZoom();\r
+ border: 1px solid @windowBorderColor;\r
+ .borderRadius(@baseBorderRadius);\r
+ padding: @windowFramePadding;\r
+ background: @windowBackgroundColor;\r
+\r
+ &-shadow {\r
+ .boxShadow('0 0 4px rgba(0, 0, 0, 0.25)');\r
+ }\r
+\r
+ &-header {\r
+ .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, @textColorGrayDark);\r
+ padding: 3px 0 5px 0;\r
+ line-height: @baseButtonWidth;\r
+ .defaultOverflowZoom();\r
+ cursor: default;\r
+\r
+ &-move {\r
+ cursor: move;\r
+ }\r
+ }\r
+\r
+ &-content {\r
+ border: 1px solid @baseBorderColor;\r
+ margin: 0px;\r
+ padding: 4px;\r
+ background: @baseBackgroundColor;\r
+ .defaultOverflowZoom();\r
+ }\r
+\r
+ &-icon {\r
+ font-size: @fontSizeLarge;\r
+ color: @iconColor;\r
+ .displaySize(block, @baseButtonWidth + 4, @baseButtonHeight);\r
+ border: 1px solid @baseBorderColor;\r
+ .borderRadius(@baseBorderRadius);\r
+ margin: auto 1px;\r
+ line-height: @baseButtonHeight;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ text-align: center;\r
+ overflow: hidden;\r
+ cursor: pointer;\r
+ float: right;\r
+\r
+ &:hover {\r
+ color: @iconHoverColor;\r
+ border-color: @hoverBorderColor;\r
+ .resetGradient();\r
+ background: @hoverBackgroundColor;\r
+ }\r
+ }\r
+\r
+ &-close {\r
+ font-size: @fontSizeXLarge;\r
+ line-height: 23px;\r
+ }\r
+\r
+ &-minimize {\r
+ padding-top: 5px;\r
+ }\r
+\r
+ &-resize-faker {\r
+ border: 1px dashed #1854C2;\r
+ background: #D7E6F7;\r
+ .opacity(0.5);\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ overflow: hidden;\r
+ z-index: 60000;\r
+ }\r
+\r
+ &-move-ghost {\r
+ border: 1px solid #9F9F9F;\r
+ .topBorderRadius(@baseBorderRadius);\r
+ padding: 0;\r
+ background: #D7E6F7;\r
+ .opacity(0.65);\r
+ position: absolute;\r
+ overflow: hidden;\r
+ cursor: move !important;\r
+\r
+ .z-window-header {\r
+ padding: 7px 4px 5px 4px;\r
+ }\r
+\r
+ dl {\r
+ font-size: 0;\r
+ display: block;\r
+ border-top: 1px solid @baseBorderColor;\r
+ margin: 0;\r
+ padding: 0;\r
+ line-height: 0;\r
+ overflow: hidden;\r
+ }\r
+ }\r
+\r
+ &-popup {\r
+ .topBorderRadius(@baseBorderRadius);\r
+ padding: @windowFramePadding @windowFramePadding 0;\r
+ \r
+ > .z-window-content {\r
+ border-width: 0;\r
+ margin: 0 -1*@windowFramePadding 0 -1*@windowFramePadding;\r
+ }\r
+\r
+ &.z-window-noheader {\r
+ padding-top: 0;\r
+ \r
+ > .z-window-content {\r
+ margin: 0 -1*@windowFramePadding;\r
+ }\r
+ }\r
+\r
+ &.z-window-noborder > .z-window-content {\r
+ margin: 0 -1*@windowFramePadding -1*@windowFramePadding;\r
+ }\r
+ }\r
+\r
+ &-modal&-shadow, &-highlighted&-shadow {\r
+ .borderRadius(@baseBorderRadius);\r
+ .boxShadow('inset 0px 1px 1px #FFFFFF, 0 0 4px rgba(0, 0, 0, 0.7)');\r
+ }\r
+\r
+ &-embedded {\r
+ .borderRadius(0);\r
+\r
+ .z-window-shadow {\r
+ .boxShadow('none');\r
+ }\r
+ }\r
+\r
+ &-noborder {\r
+ border: 0;\r
+ padding: @windowFramePadding @windowFramePadding 0;\r
+\r
+ > .z-window-content {\r
+ border: 0;\r
+ margin: 0 -1*@windowFramePadding;\r
+ }\r
+\r
+ &.z-window-noheader {\r
+ padding: 0;\r
+\r
+ > .z-window-content {\r
+ margin: 0;\r
+ }\r
+ }\r
+\r
+ &.z-window-shadow {\r
+ .boxShadow('0 0 3px rgba(0, 0, 0, 0.5)');\r
+ }\r
+ }\r
+}\r
+\r
+.z-messagebox {\r
+ &-window.z-window-modal .z-window-content, \r
+ &-window.z-window-highlighted .z-window-content {\r
+ padding: 17px;\r
+ padding-bottom: 15px;\r
+ }\r
+\r
+ .z-label {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ color: @textColorGrayDark;\r
+ }\r
+\r
+ &-button {\r
+ width: 100%;\r
+ min-width: 48px;\r
+ }\r
+\r
+ &-icon {\r
+ font-size: 30px;\r
+ .displaySize(inline-block, @baseBarWidth, @baseBarHeight);\r
+ border: 0;\r
+ background-repeat: no-repeat;\r
+ text-align: center;\r
+ vertical-align: top;\r
+ cursor: pointer;\r
+ }\r
+\r
+ &-question {\r
+ .encodeThemeURL(background-image, '~./zul/img/msgbox/question-btn.png');\r
+ }\r
+\r
+ &-exclamation {\r
+ .encodeThemeURL(background-image, '~./zul/img/msgbox/warning-btn.png');\r
+ }\r
+\r
+ &-information {\r
+ .encodeThemeURL(background-image, '~./zul/img/msgbox/info-btn.png');\r
+ }\r
+\r
+ &-error {\r
+ .encodeThemeURL(background-image, '~./zul/img/msgbox/stop-btn.png');\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-window-icon {\r
+ .gradientFallback(@baseGradientStart, @baseGradientEnd);\r
+ .z-icon-minus {\r
+ margin-left: 1px;\r
+ }\r
+ }\r
+ .z-window {\r
+ &-move-ghost {\r
+ .z-window-icon {\r
+ .opacity(1);\r
+ }\r
+ }\r
+ }\r
+}\r
--- /dev/null
+// Variables for Tablet device\r
+\r
+@iphone: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px)";\r
+@android: ~"only screen and (min-device-width : 480px) and (max-device-width : 720px)";\r
--- /dev/null
+@import "~./zul/less/_header.less";\r
+@import "~./zkmax/less/_zkvariables.less";\r
+\r
+*,\r
+*:before,\r
+*:after {\r
+ -webkit-touch-callout: none;\r
+ -webkit-user-drag: none;\r
+ -webkit-user-select: none;\r
+}\r
+*:focus {\r
+ outline: none;\r
+}\r
+input[type=number]::-webkit-inner-spin-button,\r
+input[type=number]::-webkit-outer-spin-button {\r
+ -webkit-appearance: none;\r
+ margin: 0;\r
+}\r
+input,\r
+input:focus,\r
+textarea,\r
+textarea:focus {\r
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\r
+ -webkit-appearance: none;\r
+ -moz-appearance: none;\r
+ -webkit-user-modify: read-write-plaintext-only; //Android 4.0.3 bug\r
+ outline: none;\r
+ -webkit-user-select: text;\r
+}\r
+\r
+// Checkbox and Radio\r
+input[type=checkbox],\r
+input[type=radio] {\r
+ -webkit-appearance: none;\r
+ .size(@baseButtonWidth, @baseButtonHeight);\r
+ border: 1px solid @baseBorderColor;\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ position: relative;\r
+ top: -2px;\r
+ \r
+ &:active {\r
+ .verGradient(@baseGradientEnd, @baseGradientStart);\r
+ .boxShadow('inset 0 1px 1px rgba(210, 210, 210, 0.75)');\r
+ }\r
+}\r
+input[type=checkbox]:checked {\r
+ .iconFontStyle(20px, #2184BA);\r
+}\r
+input[type=radio] {\r
+ .borderRadius('2em');\r
+ \r
+ &:checked {\r
+ .verGradient(@baseGradientStart, @baseGradientEnd);\r
+ background-size: contain;\r
+ \r
+ &:after {\r
+ content:'';\r
+ .size(0, 0);\r
+ border: 5px solid #2184BA;\r
+ .borderRadius('2em');\r
+ position: absolute;\r
+ top: 6px;\r
+ left: 6px;\r
+ }\r
+ \r
+ &:active {\r
+ .verGradient(@baseGradientEnd, @baseGradientStart);\r
+ }\r
+ }\r
+}\r
+.z-label,\r
+.z-loading,\r
+.z-apply-loading-indicator,\r
+.z-a,\r
+.z-temp .z-loading,\r
+.z-temp .z-loading-indicator {\r
+ font-size: 12px;\r
+}\r
+.z-apply-loading-icon,\r
+.z-loading-icon,\r
+.z-renderdefer {\r
+ background-image: url('data:image/gif;base64,R0lGODlhEAAQAPQAAP///2lpafX19bm5uezs7JKSkrCwsGlpaZycnH5+fs3NzdjY2HR0dMTExGtra4iIiKampgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==');\r
+}\r
+.z-radio,\r
+.z-checkbox {\r
+ display: inline-block;\r
+ line-height: 28px;\r
+ \r
+ &-content {\r
+ font-size: 12px;\r
+ cursor: pointer;\r
+ }\r
+}\r
+\r
+//ProgressMeter\r
+@-webkit-keyframes z-progressmeter {\r
+ 0% {\r
+ background-position: 0 0;\r
+ }\r
+ 100% {\r
+ background-position: 20px 20px;\r
+ }\r
+}\r
+.z-progressmeter {\r
+ height: 15px;\r
+ border: 1px solid @baseBorderColor;\r
+ .borderRadius(5px);\r
+ background: #F0F0F0;\r
+ text-align: start;\r
+ position: relative;\r
+ .boxShadow('inset 0 -1px 1px rgba(255,255,255,0.3)');\r
+ \r
+ &-image {\r
+ font-size: 0;\r
+ display: inline-block;\r
+ height: 13px;\r
+ .leftBorderRadius(5px);\r
+ line-height: 0;\r
+ .verGradient(#E8F6FD, #C6E9FA);\r
+ vertical-align: top;\r
+ \r
+ > span {\r
+ .rightBorderRadius(5px);\r
+ .gradient('diag-', 'rgba(255, 255, 255, 1) 25%; transparent 25%; transparent 50%; rgba(255, 255, 255, 1) 50%; rgba(255, 255, 255, 1) 75%; transparent 75%; transparent 100%');\r
+ .applyCSS3('background-size', '20px 20px');\r
+ .applyCSS3('animation', 'z-progressmeter 2s linear infinite');\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ bottom: 0;\r
+ right: 0;\r
+ overflow: hidden;\r
+ z-index: 1;\r
+ }\r
+ }\r
+}\r
+\r
+.z-html {\r
+ display: inline-block;\r
+}\r
+\r
+// JS debug error box\r
+.z-error .button {\r
+ .size(24px, 24px);\r
+ margin-left: 0px;\r
+ \r
+ > .z-icon-remove {\r
+ font-size: 20px;\r
+ }\r
+ > .z-icon-refresh {\r
+ font-size: 18px;\r
+ position: relative;\r
+ top: 2px;\r
+ }\r
+}\r
+\r
+@import "~./zkmax/less/tablet/_biglistbox.less";\r
+@import "~./zkmax/less/tablet/_borderlayout.less";\r
+@import "~./zkmax/less/tablet/_box.less";\r
+@import "~./zkmax/less/tablet/_button.less";\r
+@import "~./zkmax/less/tablet/_calendar.less";\r
+@import "~./zkmax/less/tablet/_chosenbox.less";\r
+@import "~./zkmax/less/tablet/_colorbox.less";\r
+@import "~./zkmax/less/tablet/_combo.less";\r
+@import "~./zkmax/less/tablet/_combobutton.less";\r
+@import "~./zkmax/less/tablet/_grid.less";\r
+@import "~./zkmax/less/tablet/_groupbox.less";\r
+@import "~./zkmax/less/tablet/_listbox.less";\r
+@import "~./zkmax/less/tablet/_input.less";\r
+@import "~./zkmax/less/tablet/_menu.less";\r
+@import "~./zkmax/less/tablet/_paging.less";\r
+@import "~./zkmax/less/tablet/_panel.less";\r
+@import "~./zkmax/less/tablet/_popup.less";\r
+@import "~./zkmax/less/tablet/_slider.less";\r
+@import "~./zkmax/less/tablet/_tabbox.less";\r
+@import "~./zkmax/less/tablet/_toolbar.less";\r
+@import "~./zkmax/less/tablet/_tree.less";\r
+@import "~./zkmax/less/tablet/_window.less";\r
+@import "~./zkmax/less/tablet/_caption.less";\r
--- /dev/null
+.z-biglistbox {\r
+ &-body td {\r
+ font-size: 12px;\r
+ }\r
+ &-outer {\r
+ margin: 0 32px 32px 0;\r
+ }\r
+ &-verticalbar-tick {\r
+ height: 32px;\r
+ border: 1px solid @baseBorderColor;\r
+ .horGradient(@baseGradientStart, @baseGradientEnd);\r
+ }\r
+ // Wscroll Vertical\r
+ &-wscroll-vertical {\r
+ width: 32px;\r
+ right: -33px;\r
+ .boxShadow('inset 1px 1px 7px rgba(210, 210, 210, 0.75), inset -1px -1px 7px rgba(210, 210, 210, 0.75)');\r
+ \r
+ .z-biglistbox-wscroll-drag {\r
+ .size(32px, 176px);\r
+ border: 1px solid #A6A6A6;\r
+ .borderRadius(2em);\r
+ .encodeURL-verGradient('~./zkmax/img/tablet/big/drag-v.png', #FEFEFE, #EEEEEE);\r
+ background-position: center center;\r
+ background-repeat: no-repeat;\r
+ \r
+ .z-biglistbox-wscroll-home,\r
+ .z-biglistbox-wscroll-up,\r
+ .z-biglistbox-wscroll-down,\r
+ .z-biglistbox-wscroll-end {\r
+ .size(100%, 32px);\r
+ background-position: center center;\r
+ background-repeat: no-repeat;\r
+ }\r
+ .z-biglistbox-wscroll-home {\r
+ border-bottom: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-v-home.png');\r
+ }\r
+ .z-biglistbox-wscroll-up {\r
+ border-bottom: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-v-up.png');\r
+ top: 32px;\r
+ }\r
+ .z-biglistbox-wscroll-down {\r
+ border-top: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-v-down.png');\r
+ bottom: 32px;\r
+ }\r
+ .z-biglistbox-wscroll-end {\r
+ border-top: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-v-end.png');\r
+ }\r
+ }\r
+ .z-biglistbox-wscroll-pos {\r
+ .size(24px, 176px);\r
+ .borderRadius(2em);\r
+ left: 4px;\r
+ }\r
+ .z-biglistbox-wscroll-endbar {\r
+ width: 30px;\r
+ background: #FDFDFD;\r
+ }\r
+ }\r
+ // Wscroll Horizontal\r
+ &-wscroll-horizontal {\r
+ height: 32px;\r
+ bottom: -33px;\r
+ .boxShadow('inset 1px 1px 7px rgba(210, 210, 210, 0.75), inset -1px -1px 7px rgba(210, 210, 210, 0.75)');\r
+ \r
+ .z-biglistbox-wscroll-drag {\r
+ .size(176px, 32px);\r
+ border: 1px solid #A6A6A6;\r
+ .borderRadius(2em);\r
+ .encodeURL-verGradient('~./zkmax/img/tablet/big/drag-h.png', #FEFEFE, #EEEEEE);\r
+ background-position: center center;\r
+ background-repeat: no-repeat;\r
+ \r
+ .z-biglistbox-wscroll-home,\r
+ .z-biglistbox-wscroll-up,\r
+ .z-biglistbox-wscroll-down,\r
+ .z-biglistbox-wscroll-end {\r
+ .size(32px, 100%);\r
+ background-position: center center;\r
+ background-repeat: no-repeat;\r
+ }\r
+ .z-biglistbox-wscroll-home {\r
+ border-right: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-h-home.png');\r
+ }\r
+ .z-biglistbox-wscroll-up {\r
+ border-right: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-h-up.png');\r
+ left: 32px;\r
+ }\r
+ .z-biglistbox-wscroll-down {\r
+ border-left: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-h-down.png');\r
+ right: 32px;\r
+ }\r
+ .z-biglistbox-wscroll-end {\r
+ border-left: 1px solid #A6A6A6;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/big/drag-h-end.png');\r
+ }\r
+ }\r
+ .z-biglistbox-wscroll-pos {\r
+ .size(176px, 24px);\r
+ .borderRadius(2em);\r
+ top: 4px;\r
+ }\r
+ .z-biglistbox-wscroll-endbar {\r
+ height: 30px;\r
+ background: #FDFDFD;\r
+ }\r
+ }\r
+}\r
--- /dev/null
+.z-borderlayout-icon {
+ font-size: 22px;
+ line-height: normal;
+ top: 5px;
+}
+.z-north-header,
+.z-south-header,
+.z-west-header,
+.z-center-header,
+.z-east-header {
+ font-size: @baseFontSize;
+ line-height: 20px;
+}
+.z-east-splitter,
+.z-west-splitter,
+.z-north-splitter,
+.z-south-splitter {
+ overflow: visible;
+}
+.z-north-splitter-button,
+.z-south-splitter-button {
+ .size(32px, 16px);
+ border-width: 1px;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ top: -4px;
+}
+.z-west-splitter-button,
+.z-east-splitter-button {
+ .size(16px, 32px);
+ border-width: 1px;
+ .horGradient(@baseGradientStart, @baseGradientEnd);
+ left: -4px;
+}
+.z-north-splitter-button-disabled,
+.z-south-splitter-button-disabled,
+.z-west-splitter-button-disabled,
+.z-east-splitter-button-disabled {
+ display: none;
+}
+.z-north-icon,
+.z-south-icon,
+.z-west-icon,
+.z-east-icon {
+ font-size: 16px;
+ opacity: 0.7;
+}
+.z-west-icon,
+.z-east-icon {
+ top: 50%;
+ margin-top: -6px;
+ left: 4px;
+}
+.z-east-icon {
+ left: 5px;
+}
+.z-north-icon, .z-south-icon {
+ left: 11px;
+ top: 50%;
+ margin-top: -6px;
+}
+.z-north-icon {
+ margin-top: -7px;
+}
+.z-north-icon.z-icon-ellipsis-horizontal,
+.z-south-icon.z-icon-ellipsis-horizontal,
+.z-west-icon.z-icon-ellipsis-vertical,
+.z-east-icon.z-icon-ellipsis-vertical {
+ display: none;
+}
--- /dev/null
+// Splitter
+.z-splitter {
+ &-vertical,
+ &-horizontal {
+ overflow: visible;
+ }
+ &-icon {
+ font-size: @fontSizeLarge;
+ }
+ &-vertical {
+ > .z-splitter-button {
+ .size(32px, 16px);
+ border-width: 1px;
+ background: @baseBackgroundColor;
+ top: -4px;
+
+ &.z-splitter-button-disabled {
+ .size(0, 0);
+ }
+ }
+ .z-splitter-icon {
+ font-size: @fontSizeLarge;
+ top: -2px;
+
+ &.z-icon-ellipsis-horizontal {
+ display: none;
+ }
+ }
+ &.z-splitter-nosplitter .z-splitter-icon {
+ top: 0;
+ }
+ }
+ &-horizontal {
+ > .z-splitter-button {
+ .size(16px, 32px);
+ border-width: 1px;
+ background: @baseBackgroundColor;
+ left: -5px;
+
+ &.z-splitter-button-disabled {
+ .size(0, 0);
+ }
+ }
+ .z-splitter-icon {
+ font-size: @fontSizeLarge;
+ top: 9px;
+ left: 4px;
+
+ &.z-icon-ellipsis-vertical {
+ display: none;
+ }
+ }
+ &.z-splitter-nosplitter .z-splitter-icon {
+ left: 6px;
+ }
+ }
+}
--- /dev/null
+.z-button {
+ min-height: 32px;
+}
--- /dev/null
+.z-calendar {
+ min-width: 420px;
+
+ &-icon {
+ font-size: 24px;
+ .size(32px, 32px);
+ padding: 0 12px;
+ }
+ &-cell {
+ font-size: @baseFontSize;
+ }
+}
+
+//Calendar wheel
+.z-datebox-popup .z-calendar {
+ border: 0px;
+ min-width: 100px;
+}
+.z-calendar-wheel {
+ &-date {
+ .boxOrientHorFlex();
+ width: 100%;
+ .borderRadius(3px);
+ margin-right: 4px;
+ position: relative;
+ .gradient('ver', '#000 0%; #333 35%; #888 50%; #333 65%; #000 100%');
+ }
+ &-cave {
+ position: relative;
+ }
+ &-body {
+ .boxOrientHor();
+ width: 100%;
+ }
+ &-line {
+ .size(100%, 0);
+ border-top: 1px solid #333333;
+ border-bottom: 1px solid #555555;
+ position: absolute;
+ top: 50%;
+ z-index: 1;
+ }
+ &-list {
+ .applyCSS3(box-flex, 1);
+ color: #FFFFFF;
+ height: 210px;
+ margin: 0 2px;
+ .gradient('ver', '#000 0%; #444 45%; #444 55%; #000 100%');
+ position: relative;
+ overflow: hidden;
+
+ ul {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ list-style: none;
+ z-index: 2;
+ }
+
+ li {
+ font-size: 40px;
+ display: block;
+ height: 70px;
+ margin: 0;
+ padding: 0 5px;
+ line-height: 70px;
+ opacity: 0.3;
+ text-align: center;
+ white-space: nowrap;
+ text-shadow: 0 1px #FFFFFF;
+ list-style: none;
+ }
+ }
+ &-footer {
+ height: 50px;
+ padding: 5px 0;
+ clear: both;
+ }
+ &-button {
+ .fontStyle(@baseContentFontFamily, 30px, bold, #000000);
+ width: 45%;
+ border: 1px solid #A6A6A6;
+ .borderRadius(3px);
+ margin: 1px 1px 0 0;
+ padding: 5px 15px;
+ line-height: 28px;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ text-shadow: 0 1px #FFFFFF;
+
+ &:hover,
+ &:focus {
+ border-color: #0CBCFF;
+ .boxShadow('inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF');
+ }
+ &:active {
+ border-color: #808080 #B6B6B6 #B6B6B6 #808080;
+ .verGradient(@baseGradientEnd, @baseGradientStart);
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75), 0 0 7px #CFCFCF');
+ }
+ }
+ &-left {
+ float: left;
+ }
+ &-right {
+ float: right;
+ }
+}
+li.z-calendar-wheel-list-selected {
+ opacity: 1;
+}
+//iPhone
+@media @iphone {
+ .z-calendar-wheel {
+ &-date {
+ margin-right: 2px;
+ }
+ &-list {
+ height: 120px;
+ margin: 0 1px 0 0;
+
+ li {
+ font-size: 20px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ }
+ }
+ &-button {
+ font-size: 22px;
+ }
+ // Bug ZK-Z773
+ //&-footer {
+ // height: 35px;
+ //}
+ }
+}
+//Android
+@media @android {
+ .z-calendar-wheel {
+ &-date {
+ margin-right: 2px;
+ }
+ &-list {
+ margin: 0 1px 0 0;
+ height: 150px;
+
+ li {
+ font-size: 24px;
+ height: 50px;
+ padding: 0;
+ line-height: 50px;
+ }
+ }
+ &-button {
+ font-size: 26px;
+ }
+ &-footer {
+ height: 40px;
+ }
+ }
+}
--- /dev/null
+.z-caption-content,\r
+.z-caption .z-label {\r
+ line-height: 24px;\r
+}
\ No newline at end of file
--- /dev/null
+.z-chosenbox {
+ min-height: 32px;
+
+ &-item {
+ height: auto;
+ margin: 1px;
+
+ &-content {
+ height: auto;
+ padding: 3px 20px 3px 4px;
+ }
+ }
+
+ &-button {
+ width: 16px;
+ height: 16px;
+ line-height: normal;
+ font-size: 14px;
+ }
+ &-popup {
+ .gradient('ver', '#D3D3D3 0%; #E5E5E5 10%; #F2F2F2 25%; #FFFFFF 50%; #F2F2F2 75%; #E5E5E5 90%; #D3D3D3 100%');
+ }
+ &-option {
+ font-size: @fontSizeXLarge;
+ padding: 5px;
+ }
+}
--- /dev/null
+//Colorbox\r
+.z-colorbox {\r
+ .size(44px, 32px);\r
+}\r
+.z-colorpalette {\r
+ .size(586px, 460px);\r
+ \r
+ &-newcolor {\r
+ height: 32px;\r
+ left: 450px;\r
+ }\r
+ &-input {\r
+ height: 32px;\r
+ left: auto;\r
+ right: 6px;\r
+ }\r
+ &-color {\r
+ .size(32px, 32px);\r
+ }\r
+}\r
+.z-colorpicker {\r
+ .size(620px, 430px);\r
+ \r
+ &-gradient,\r
+ &-overlay {\r
+ .size(384px, 384px);\r
+ }\r
+ &-gradient {\r
+ left: 5px;\r
+ top: 40px;\r
+ }\r
+ &-overlay {\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/colorbox/colorpicker_gradient.png');\r
+ }\r
+ &-hue {\r
+ .size(32px, 384px);\r
+ top: 40px;\r
+ left: 400px;\r
+ }\r
+ &-bar {\r
+ .size(26px, 384px);\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/colorbox/colorpicker_hue.png');\r
+ }\r
+ &-arrows {\r
+ width: 40px;\r
+ .encodeURL(background-image, '~./zkmax/img/tablet/colorbox/colorpicker_arrows.png');\r
+ }\r
+ &-color {\r
+ top: 40px;\r
+ left: 450px;\r
+ }\r
+ &-hex {\r
+ top: 46px;\r
+ left: 510px;\r
+ \r
+ .z-colorpicker-input {\r
+ margin-left: 2px;\r
+ top: 0;\r
+ }\r
+ }\r
+ &-input {\r
+ .size(55px, 32px);\r
+ padding: 3px;\r
+ position: relative;\r
+ top: -5px;\r
+ }\r
+ &-r, &-g, &-b {\r
+ width: 70px;\r
+ left: 450px;\r
+ }\r
+ &-h, &-s, &-v {\r
+ width: 70px;\r
+ left: 530px;\r
+ }\r
+ &-r, &-h {\r
+ top: 125px;\r
+ }\r
+ &-g, &-s {\r
+ top: 160px;\r
+ }\r
+ &-b, &-v {\r
+ top: 195px;\r
+ }\r
+ &-button {\r
+ width: 150px;\r
+ top: 235px;\r
+ left: 450px;\r
+ }\r
+ &-icon {\r
+ font-size: 20px;\r
+ }\r
+}\r
+.z-colorbox-paletteicon,\r
+.z-menu-paletteicon,\r
+.z-colorbox-pickericon,\r
+.z-menu-pickericon {\r
+ .size(32px, 32px);\r
+ .encodeURL(background, '~./zkmax/img/tablet/colorbox/cb-buttons.png');\r
+ background-position: 0 0;\r
+}\r
+.z-palette-button .z-colorbox-paletteicon,\r
+.z-palette-button .z-menu-paletteicon,\r
+.z-colorpalette-popup .z-menu-paletteicon {\r
+ background-position: -32px 0;\r
+}\r
+.z-colorbox-pickericon,\r
+.z-menu-pickericon,\r
+.z-colorpalette-popup .z-menu-pickericon {\r
+ background-position: 0 -32px;\r
+ left: 40px;\r
+}\r
+.z-picker-button .z-colorbox-pickericon,\r
+.z-picker-button .z-menu-pickericon,\r
+.z-colorpicker-popup .z-menu-pickericon {\r
+ background-position: -32px -32px;\r
+}\r
--- /dev/null
+.z-combobox,
+.z-bandbox,
+.z-datebox,
+.z-timebox,
+.z-spinner,
+.z-doublespinner,
+.z-timepicker {
+ min-height: 32px;
+
+ &-input {
+ height: 32px;
+ }
+ &-button {
+ font-size: 20px;
+ min-width: 34px;
+ height: 32px;
+ max-height: 32px;
+ padding: 8px 6px;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ text-align: center;
+ opacity: 0.9;
+ }
+}
+.z-timebox-button {
+ &:hover {
+ border-color: @hoverBorderColor;
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);
+
+ > i {
+ .size(auto, auto);
+ border-top-width: 0;
+ position: static;
+ }
+ }
+ &:active {
+ border-color: @activeBorderColor;
+ .verGradient(@activeGradientStart, @activeGradientEnd);
+ .boxShadow('inset 1px 1px 1px #91AAB7');
+ }
+}
+.z-spinner-button,
+.z-doublespinner-button {
+ padding: 0px;
+ border: none;
+
+ &:hover {
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+
+ > i {
+ border-top: none;
+ position: static;
+ }
+ }
+ &:active {
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ }
+ > a {
+ .size(32px, 32px);
+ border: 1px solid @baseBorderColor;
+ line-height: 36px;
+ background: inherit;
+ position: static;
+ float: right;
+
+ &:first-child {
+ border-left: none;
+ line-height: 32px;
+ }
+ &:hover,
+ &:active {
+ .verGradient(#F2F9FE, #D6F0FD);
+ }
+ }
+}
+
+.z-combobox-popup, .z-timepicker-popup {
+ padding: 0;
+ .gradient('ver', '#D3D3D3 0%; #E5E5E5 10%; #F2F2F2 25%; #FFFFFF 50%; #F2F2F2 75%; #E5E5E5 90%; #D3D3D3 100%');
+ overflow: hidden;
+}
+.z-comboitem, .z-timepicker-option {
+ font-size: @fontSizeXLarge;
+ padding: 15px 10px;
+
+ a,
+ a:visited {
+ font-size: @fontSizeXLarge;
+ }
+ &-inner {
+ font-size: @fontSizeMedium;
+ display: block;
+ margin-top: 4px;
+ }
+ &-text {
+ display: inline-block;
+ margin-top: -8px;
+ padding-left: 6px;
+ }
+ &-image {
+ width: auto;
+ margin-top: 0px;
+ float: left;
+ }
+}
+//Timebox Wheel
+.z-timebox-popup .z-timebox-wheel-body {
+ margin: 4px 0;
+}
+.z-timebox-wheel {
+ padding: 0 2px;
+
+ &-time {
+ .boxOrientHor();
+ width: 50%;
+ .borderRadius(3px);
+ position: relative;
+ .gradient('ver', '#000 0%; #333 35%; #888 50%; #333 65%; #000 100%');
+ }
+ &-cave {
+ position: relative;
+ }
+ &-body {
+ .boxOrientHor();
+ width: 100%;
+ }
+ &-line {
+ .size(100%, 0);
+ border-top: 1px solid #333333;
+ border-bottom: 1px solid #555555;
+ position: absolute;
+ top: 50%;
+ z-index: 1;
+ }
+ &-list {
+ .applyCSS3(box-flex, 1);
+ color: #FFFFFF;
+ height: 210px;
+ margin: 4px 0;
+ .gradient('ver', '#000 0%; #444 45%; #444 55%; #000 100%');
+ position: relative;
+ overflow: hidden;
+
+ ul {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ list-style: none;
+ z-index: 2;
+ }
+
+ li {
+ font-size: 40px;
+ display: block;
+ height: 70px;
+ margin: 0;
+ padding: 0 5px;
+ line-height: 70px;
+ opacity: 0.3;
+ text-align: center;
+ white-space: nowrap;
+ text-shadow: 0 1px #FFFFFF;
+ list-style: none;
+ }
+ }
+ &-footer {
+ height: 50px;
+ padding: 5px 0;
+ clear: both;
+ }
+ &-button {
+ .fontStyle(@baseContentFontFamily, 30px, bold, #000000);
+ width: 45%;
+ border: 1px solid #A6A6A6;
+ .borderRadius(3px);
+ margin: 1px 1px 0 0;
+ padding: 5px 15px;
+ line-height: 28px;
+ .verGradient(@baseGradientStart, @baseGradientEnd);
+ text-shadow: 0 1px #FFFFFF;
+
+ &:hover,
+ &:focus {
+ border-color: #0CBCFF;
+ .boxShadow('inset 1px 1px 1px #0CBCFF, inset -1px -1px 1px #0CBCFF');
+ }
+ &:active {
+ border-color: #808080 #B6B6B6 #B6B6B6 #808080;
+ .verGradient(@baseGradientEnd, @baseGradientStart);
+ .boxShadow('inset 1px 1px 1px rgba(210, 210, 210, 0.75), 0 0 7px #CFCFCF');
+ }
+ }
+ &-left {
+ float: left;
+ }
+ &-right {
+ float: right;
+ }
+}
+li.z-timebox-wheel-list-selected {
+ opacity: 1;
+}
+//iPhone
+@media @iphone {
+ .z-timebox-wheel {
+ &-list {
+ height: 120px;
+ margin: 0 1px 0 0;
+
+ li {
+ font-size: 20px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ }
+ }
+ &-button {
+ font-size: 22px;
+ }
+ // Bug ZK-Z773
+ //&-footer {
+ // height: 35px;
+ //}
+ }
+}
+//Android
+@media @android {
+ .z-timebox-wheel {
+ &-list {
+ margin: 0 1px 0 0;
+ height: 150px;
+
+ li {
+ font-size: 24px;
+ height: 50px;
+ padding: 0;
+ line-height: 50px;
+ }
+ }
+ &-button {
+ font-size: 26px;
+ }
+ &-footer {
+ height: 40px;
+ }
+ }
+}
--- /dev/null
+.z-combobutton {
+ min-height: 32px;
+
+ &-content {
+ min-height: 32px;
+ padding: 4px 36px 4px 5px;
+ }
+ &-button {
+ width: 32px;
+ min-height: 30px;
+ font-size: 20px;
+ padding: 2px 9px 6px;
+ opacity: 0.9;
+ }
+ &-text {
+ padding-top: 4px;
+ display: inline-block;
+ }
+ &-icon {
+ font-size: 20px;
+
+ &.z-icon-caret-down {
+ margin-top: -10px;
+ left: 9px;
+ }
+ }
+}
--- /dev/null
+.z-column:last-child .z-column-button {
+ right: 2px;
+}
+.z-column-button {
+ .iconFontStyle(16px, #707070);
+ display: block;
+ border-left-color: @meshTitleBorderColor;
+ right: 1px;
+}
+
+.z-detail {
+ .size(24px, 24px);
+ line-height: 24px;
+ position: relative;
+ left: -3px;
+
+ &-icon {
+ .iconFontStyle(18px, #707070);
+ top: 2px;
+
+ &.z-icon-angle-right {
+ top: -1px;
+ }
+ }
+}
+.z-group-icon {
+ font-size: 20px;
+ .size(24px, 24px);
+ vertical-align: top;
+
+ &-open,
+ &-close {
+ position: absolute;
+ left: 6px;
+ top: 4px;
+ }
+
+ &-close {
+ left: 8px;
+ }
+}
--- /dev/null
+.z-groupbox {\r
+ > .z-groupbox-header {\r
+ .z-caption-readonly,\r
+ .z-groupbox-title-readonly {\r
+ cursor: pointer;\r
+ }\r
+ }\r
+ > .z-groupbox-readonly .z-groupbox-title {\r
+ cursor: pointer;\r
+ }\r
+}\r
+\r
+.z-groupbox-header,\r
+.z-groupbox-3d .z-groupbox-header {\r
+ line-height: 24px;\r
+}\r
--- /dev/null
+.z-textbox,
+.z-decimalbox,
+.z-intbox,
+.z-longbox,
+.z-doublebox {
+ min-height: 32px;
+ padding: 4px 5px;
+ line-height: 16px;
+}
+.z-errorbox {
+ cursor: move;
+
+ &-content {
+ font-size: @fontSizeMedium;
+ word-wrap: break-word;
+ }
+ &-icon {
+ left: 5px;
+ }
+ > .z-errorbox-icon {
+ font-size: @fontSizeLarge;
+ }
+ &-close {
+ font-size: @fontSizeLarge;
+ .size(24px, 24px);
+ line-height: 24px;
+ text-align: center;
+ opacity: 0.9;
+ }
+}
+
+.z-errorbox-pointer ~ .z-errorbox-close {
+ top: 2px;
+ right: 4px;
+}
+.z-errorbox-right ~ .z-errorbox-close {
+ right: 10px;
+}
+.z-errorbox-up ~ .z-errorbox-close {
+ top: 8px;
+}
--- /dev/null
+.z-listheader:last-child .z-listheader-button {
+ right: 2px;
+}
+.z-listheader-button {
+ .iconFontStyle(16px, #707070);
+ display: block;
+ border-left-color: @meshTitleBorderColor;
+ right: 1px;
+}
+
+.z-listheader-checkable,
+.z-listitem-checkable,
+.z-listgroup-checkable {
+ .size(24px, 24px);
+ vertical-align: middle;
+}
+
+// Sandbox-G14: use strict selector to override style
+.z-listheader-checkable.z-listheader-checked .z-listheader-icon,
+.z-listitem-selected > .z-listcell > .z-listcell-content
+ > .z-listitem-checkable .z-listitem-icon {
+ font-size: @fontSizeXLarge;
+ line-height: 22px;
+ padding-left: 2px;
+}
+.z-listgroup-selected .z-listgroup-checkable .z-listgroup-icon {
+ font-size: @fontSizeXLarge;
+ line-height: 22px;
+}
+.z-listitem-checkable.z-listitem-radio {
+ .borderRadius(12px);
+}
+// Sandbox-G14: use strict selector to override style
+.z-listitem-selected > .z-listcell > .z-listcell-content
+ > .z-listitem-checkable .z-listitem-icon.z-icon-radio {
+ .size(10px, 10px);
+ .borderRadius(5px);
+ margin: 6px;
+}
+
+.z-listgroup-icon {
+ font-size: 20px;
+ .size(24px, 24px);
+ vertical-align: middle;
+
+ &-open,
+ &-close {
+ position: absolute;
+ left: 6px;
+ top: 4px;
+ }
+ &-close {
+ left: 9px;
+ }
+}
--- /dev/null
+.z-menubar-icon {\r
+ opacity: 1;\r
+}\r
+.z-menu,\r
+.z-menuitem {\r
+ &-content {\r
+ min-height: 32px;\r
+ padding-top: 3px;\r
+ padding-bottom: 3px;\r
+ line-height: normal;\r
+ }\r
+ &-image {\r
+ vertical-align: middle;\r
+ }\r
+}\r
+img ~ .z-menu-text, img ~ .z-menuitem-text {\r
+ line-height: 24px;\r
+ vertical-align: middle;\r
+}\r
+\r
+.z-menu-icon,\r
+.z-meunitem-icon,\r
+.z-menupopup .z-menu-icon,\r
+.z-menupopup .z-menuitem-icon,\r
+.z-menubar-vertical .z-menu-icon {\r
+ top: 7px;\r
+}\r
+\r
+.z-menubar-horizontal .z-menuseparator {\r
+ line-height: 32px;\r
+}\r
--- /dev/null
+.z-paging {
+ height: 40px;
+
+ &-button {
+ min-width: 32px;
+ height: 32px;
+ font-size: @fontSizeXLarge;
+ line-height: 24px;
+ }
+ &-input {
+ height: 32px;
+ font-size: @baseFontSize;
+ }
+ &-text {
+ font-size: @baseFontSize;
+ }
+ &-info {
+ top: 7px;
+ font-size: @baseFontSize;
+ }
+ &-noborder {
+ margin-right: 10px;
+ }
+}
--- /dev/null
+.z-panel {
+ &-header {
+ font-size: @baseFontSize;
+ line-height: 32px;
+ }
+ &-maximize,
+ &-minimize,
+ &-close,
+ &-expand {
+ font-size: 20px;
+ .size(32px, 32px);
+ line-height: 30px;
+ }
+ &-close {
+ font-size: 24px;
+ }
+ &-minimize {
+ padding-top: 8px;
+ }
+ &-expand {
+ font-size: 24px;
+ }
+}
--- /dev/null
+.z-notification {
+ &-content {
+ font-size: @baseFontSize;
+ }
+ &-close {
+ font-size: @fontSizeLarge;
+ .size(18px, 18px);
+ line-height: 18px;
+ opacity: 0.8;
+ }
+
+ &-icon {
+ left: 3px;
+ }
+
+ &-icon.z-icon-times {
+ margin-top: -8px;
+ }
+}
--- /dev/null
+.z-slider-center {
+ height: 10px;
+
+ .z-slider-vertical & {
+ width: 10px;
+ }
+}
+.z-slider-button {
+ .size(32px, 32px);
+
+ .z-slider-vertical & {
+ left: -12px;
+ }
+ .z-slider-horizontal & {
+ top: -12px
+ }
+}
--- /dev/null
+.z-tabbox-scroll {\r
+ .z-tabs {\r
+ margin: 0 24px;\r
+ \r
+ .z-tabbox-vertical &,\r
+ .z-tabbox-vertical-right & {\r
+ margin: 32px 0;\r
+ }\r
+ }\r
+ .z-tabbox-right,\r
+ .z-tabbox-left {\r
+ width: 32px;\r
+ }\r
+ .z-tabbox-up,\r
+ .z-tabbox-down {\r
+ .z-tabbox-vertical &,\r
+ .z-tabbox-vertical-right & {\r
+ height: 32px;\r
+ padding: 4px 0;\r
+ }\r
+ }\r
+}\r
+\r
+.z-tab {\r
+ padding-right: 2px;\r
+ \r
+ .z-caption-content{\r
+ padding: 4px 0px;\r
+ }\r
+ &-icon {\r
+ margin-top: -8px;\r
+ left: 3px;\r
+ \r
+ .z-tabbox-accordion & {\r
+ margin-top: -9px;\r
+ }\r
+ }\r
+ &-text {\r
+ .z-tabbox-accordion & {\r
+ padding: 4px 5px 4px 8px;\r
+ }\r
+ }\r
+ &-button {\r
+ font-size: @fontSizeLarge;\r
+ opacity: 0.5;\r
+ \r
+ .z-tabbox-vertical & {\r
+ left: 0;\r
+ }\r
+ .z-tabbox-vertical-right & {\r
+ right: 2px;\r
+ }\r
+ .z-tabbox-accordion & {\r
+ opacity: 0.5;\r
+ }\r
+ }\r
+ &-selected .z-tab-button {\r
+ opacity: 0.7;\r
+ \r
+ .z-tabbox-vertical &,\r
+ .z-tabbox-vertical-right &,\r
+ .z-tabbox-accordion {\r
+ opacity: 0.7;\r
+ }\r
+ }\r
+}\r
+.z-toolbar.z-toolbar-tabs {\r
+ padding: 0 4px;\r
+}\r
+.z-tab-button+.z-tab-text {\r
+ margin-right: 16px;\r
+}\r
+.z-tabbox-vertical .z-tab-button+.z-tab-text {\r
+ margin-left: 16px;\r
+}\r
--- /dev/null
+.z-toolbarbutton {\r
+ height: 32px;\r
+ padding: 2px 0 5px;\r
+ line-height: normal;\r
+\r
+ &-content {\r
+ font-size: @fontSizeMedium;\r
+ line-height: 28px;\r
+ \r
+ img {\r
+ vertical-align: text-top;\r
+ }\r
+ }\r
+}\r
+\r
+.z-toolbar-tabs .z-toolbar-content {\r
+ padding-top: 0;\r
+}\r
+.z-toolbar-content,\r
+.z-toolbar-content span,\r
+.z-toolbar-tabs .z-toolbar-content,\r
+.z-toolbar-tabs .z-toolbar-content span {\r
+ font-size: @fontSizeMedium;\r
+}\r
--- /dev/null
+.z-tree {
+ &-icon,
+ &-line {
+ .size(24px, 24px);
+ line-height: 24px;
+ vertical-align: top;
+ }
+ &-icon {
+ font-size: 20px;
+ opacity: 0.7;
+ left: 3px;
+ }
+}
+.z-treerow {
+ &-checkable {
+ .size(24px, 24px);
+
+ &.z-treerow-radio {
+ .borderRadius(12px);
+ }
+ }
+
+ // Sandbox-G14: use strict selector to override style
+ &-selected > .z-treecell > .z-treecell-content
+ > .z-treerow-checkable .z-treerow-icon {
+
+ font-size: @fontSizeXLarge;
+ padding-left: 2px;
+ line-height: 22px;
+
+ &.z-icon-radio {
+ .size(10px, 10px);
+ .borderRadius(5px);
+ margin: 6px;
+ }
+ }
+}
+.z-treecell-content {
+ line-height: 22px;
+}
--- /dev/null
+.z-window {
+ &-header {
+ font-size: @baseFontSize;
+ line-height: 32px;
+ }
+ &-maximize,
+ &-minimize,
+ &-close {
+ font-size: 20px;
+ .size(32px, 32px);
+ line-height: 30px;
+ }
+ &-close {
+ font-size: 24px;
+ }
+ &-minimize {
+ padding-top: 8px;
+ }
+}
+.z-messagebox .z-label {
+ font-size: @baseFontSize;
+}
--- /dev/null
+<%@ page contentType="text/css;charset=UTF-8" %>
+<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
+<%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %>
+${z:setCSSCacheControl()}
+
+<c:set var="val" value="${c:property('org.zkoss.zul.theme.fontSizeM')}"/>
+<c:set var="fontSizeM" value="${val}" scope="request" unless="${empty val}"/>
+<c:set var="val" value="${c:property('org.zkoss.zul.theme.fontSizeMS')}"/>
+<c:set var="fontSizeMS" value="${val}" scope="request" unless="${empty val}"/>
+<c:set var="val" value="${c:property('org.zkoss.zul.theme.fontSizeS')}"/>
+<c:set var="fontSizeS" value="${val}" scope="request" unless="${empty val}"/>
+<c:set var="val" value="${c:property('org.zkoss.zul.theme.fontSizeXS')}"/>
+<c:set var="fontSizeXS" value="${val}" scope="request" unless="${empty val}"/>
+<c:set var="val" value="${c:property('org.zkoss.zul.theme.fontFamilyT')}"/>
+<c:set var="fontFamilyT" value="${val}" scope="request" unless="${empty val}"/>
+<c:set var="val" value="${c:property('org.zkoss.zul.theme.fontFamilyC')}"/>
+<c:set var="fontFamilyC" value="${val}" scope="request" unless="${empty val}"/>
+
+<c:set var="fontSizeM" value="12px" scope="request" if="${empty fontSizeM}"/>
+<c:set var="fontSizeMS" value="11px" scope="request" if="${empty fontSizeMS}"/>
+<c:set var="fontSizeS" value="11px" scope="request" if="${empty fontSizeS}"/>
+<c:set var="fontSizeXS" value="10px" scope="request" if="${empty fontSizeXS}"/>
+
+<c:set var="fontFamilyT" value="arial, sans-serif"
+ scope="request" if="${empty fontFamilyT}"/><%-- title --%>
+<c:set var="fontFamilyC" value="arial, sans-serif"
+ scope="request" if="${empty fontFamilyC}"/><%-- content --%>
+p,span {
+ font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
+}
+h1 {
+ font-family: ${fontFamilyT};
+ font-size: x-large; font-weight: bold; color: #250070;
+ letter-spacing: -1px; margin-top: 3pt;
+}
+h2 {
+ font-family: ${fontFamilyT};
+ font-size: large; font-weight: bold; color: #200066;
+}
+h3 {
+ font-family: ${fontFamilyT};
+ font-size: medium; font-weight: bold; color: #100050;
+}
+h4 {
+ font-family: ${fontFamilyT};
+ font-size: small; font-weight: bold; color: #346B93;
+}
+h5 {
+ font-family: ${fontFamilyT};
+ font-size: small; font-weight: bold; color: #4BA7D2;
+}
+h6 {
+ font-family: ${fontFamilyT};
+ font-size: small; font-weight: normal; color: #404040;
+}
+
+h1 em {color: #dd0000}
+
+dt {
+ margin: 0.5em 0 0.3em 0;
+ font-weight: bold;
+}
+dd {
+ margin: 0 0 0 0.8em;
+}
+
+li, dt, dd, pre, body {
+ font-family: ${fontFamilyC};
+ font-weight: normal;
+ font-size: ${fontSizeM};
+}
+
+li {
+ margin-top: 2pt
+}
+
+code {
+ font-family: "Lucida Console", "Courier New", Courier, mono;
+ font-weight: normal;
+}
+dfn {
+ font-family: "Lucida Console", "Courier New", Courier, mono;
+ font-style: normal;
+}
+
+<%-- The hyperlink's style class. --%>
+.link {cursor: pointer;}
--- /dev/null
+<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>\r
+<%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %>\r
+<%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>\r
+\r
+// Core variables and mixins\r
+@import "_zkvariables.less"; // variables needed for ZK\r
+@import "_zkmixins.less";
\ No newline at end of file
--- /dev/null
+//\r
+// Reset CSS\r
+// Adapted from http://github.com/necolas/normalize.css\r
+// --------------------------------------------------\r
+\r
+\r
+// Display in IE6-9 and FF3\r
+// -------------------------\r
+\r
+article,\r
+aside,\r
+details,\r
+figcaption,\r
+figure,\r
+footer,\r
+header,\r
+hgroup,\r
+nav,\r
+section {\r
+ display: block;\r
+}\r
+\r
+// Display block in IE6-9 and FF3\r
+// -------------------------\r
+\r
+audio,\r
+canvas,\r
+video {\r
+ display: inline-block;\r
+ *display: inline;\r
+ *zoom: 1;\r
+}\r
+\r
+// Prevents modern browsers from displaying 'audio' without controls\r
+// -------------------------\r
+\r
+audio:not([controls]) {\r
+ display: none;\r
+}\r
+\r
+// Base settings\r
+// -------------------------\r
+\r
+html {\r
+ font-size: 100%;\r
+ -webkit-text-size-adjust: 100%;\r
+ -ms-text-size-adjust: 100%;\r
+}\r
+// Focus states\r
+a:focus {\r
+ outline: none;\r
+ // Disable for Potix on 5/29/2013\r
+ //.tab-focus();\r
+}\r
+// Hover & Active\r
+a:hover,\r
+a:active {\r
+ outline: 0;\r
+}\r
+\r
+// Prevents sub and sup affecting line-height in all browsers\r
+// -------------------------\r
+\r
+sub,\r
+sup {\r
+ position: relative;\r
+ font-size: 75%;\r
+ line-height: 0;\r
+ vertical-align: baseline;\r
+}\r
+sup {\r
+ top: -0.5em;\r
+}\r
+sub {\r
+ bottom: -0.25em;\r
+}\r
+\r
+// Img border in a's and image quality\r
+// -------------------------\r
+\r
+img {\r
+ /* Responsive images (ensure images don't scale beyond their parents) */\r
+\r
+ // Potix: this style will make img invisible in ie8\r
+ /* max-width: 100%; Part 1: Set a maxium relative to the parent */\r
+ width: auto\9; /* IE7-8 need help adjusting responsive images */\r
+ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */\r
+\r
+ vertical-align: middle;\r
+ border: 0;\r
+ -ms-interpolation-mode: bicubic;\r
+}\r
+\r
+// Prevent max-width from affecting Google Maps\r
+#map_canvas img,\r
+.google-maps img {\r
+ max-width: none;\r
+}\r
+\r
+// Forms\r
+// -------------------------\r
+\r
+// Font size in all browsers, margin changes, misc consistency\r
+button,\r
+input,\r
+select,\r
+textarea {\r
+ margin: 0;\r
+ font-size: 100%;\r
+ vertical-align: middle;\r
+}\r
+button,\r
+input {\r
+ *overflow: visible; // Inner spacing ie IE6/7\r
+ line-height: normal; // FF3/4 have !important on line-height in UA stylesheet\r
+}\r
+button::-moz-focus-inner,\r
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4\r
+ padding: 0;\r
+ border: 0;\r
+}\r
+button,\r
+html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.\r
+input[type="reset"],\r
+input[type="submit"] {\r
+ -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.\r
+ cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.\r
+}\r
+label,\r
+select,\r
+button,\r
+input[type="button"],\r
+input[type="reset"],\r
+input[type="submit"],\r
+input[type="radio"],\r
+input[type="checkbox"] {\r
+ cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.\r
+}\r
+input[type="search"] { // Appearance in Safari/Chrome\r
+ // Potix: using zk mixins\r
+ //.box-sizing(content-box);\r
+ .applyCSS3('box-sizing', 'content-box');\r
+ -webkit-appearance: textfield;\r
+}\r
+input[type="search"]::-webkit-search-decoration,\r
+input[type="search"]::-webkit-search-cancel-button {\r
+ -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5\r
+}\r
+textarea {\r
+ overflow: auto; // Remove vertical scrollbar in IE6-9\r
+ vertical-align: top; // Readability and alignment cross-browser\r
+}\r
+\r
+\r
+// Printing\r
+// -------------------------\r
+// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css\r
+\r
+@media print {\r
+\r
+ * {\r
+ text-shadow: none !important;\r
+ box-shadow: none !important;\r
+ }\r
+\r
+ a,\r
+ a:visited {\r
+ text-decoration: underline;\r
+ }\r
+\r
+ a[href]:after {\r
+ content: " (" attr(href) ")";\r
+ }\r
+\r
+ abbr[title]:after {\r
+ content: " (" attr(title) ")";\r
+ }\r
+\r
+ // Don't show links for images, or javascript/internal links\r
+ .ir a:after,\r
+ a[href^="javascript:"]:after,\r
+ a[href^="#"]:after {\r
+ content: "";\r
+ }\r
+\r
+ pre,\r
+ blockquote {\r
+ border: 1px solid #999;\r
+ page-break-inside: avoid;\r
+ }\r
+\r
+ thead {\r
+ display: table-header-group; // h5bp.com/t\r
+ }\r
+\r
+ tr,\r
+ img {\r
+ page-break-inside: avoid;\r
+ }\r
+\r
+ img {\r
+ // Potix: this style will make img invisible in ie8\r
+ // max-width: 100% !important; \r
+ }\r
+\r
+ @page {\r
+ margin: 0.5cm;\r
+ }\r
+\r
+ p,\r
+ h2,\r
+ h3 {\r
+ orphans: 3;\r
+ widows: 3;\r
+ }\r
+\r
+ h2,\r
+ h3 {\r
+ page-break-after: avoid;\r
+ }\r
+}\r
--- /dev/null
+// ZK Mixins Utility\r
+\r
+// EL Function\r
+// --------------------------------------------\r
+\r
+//---------------------------------------------\r
+// web/core.dsp.tld\r
+//---------------------------------------------\r
+.encodeURL(@property, @url, @rest...) when (@property = background) {\r
+ background: url(${c:encodeURL('@{url}')}) @rest;\r
+}\r
+.encodeURL(@property, @url, @rest...) when (@property = background-image) {\r
+ background-image: url(${c:encodeURL('@{url}')});\r
+}\r
+.encodeThemeURL(@property, @url, @rest...) when (@property = background) {\r
+ background: url(${c:encodeThemeURL('@{url}')}) @rest;\r
+}\r
+.encodeThemeURL(@property, @url, @rest...) when (@property = background-image) {\r
+ background-image: url(${c:encodeThemeURL('@{url}')});\r
+}\r
+// only tablet.less uses this, no need render css for old IE\r
+.encodeURL-verGradient(@url, @start, @end) {\r
+ background: url(${c:encodeURL('@{url}')});\r
+ background: url(${c:encodeURL('@{url}')}), -moz-linear-gradient(top, @start 0%, @end 100%); /* FF3.6+ */\r
+ background: url(${c:encodeURL('@{url}')}), -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start),color-stop(100%, @end)); /* Chrome,Safari4+ */\r
+ background: url(${c:encodeURL('@{url}')}), -webkit-linear-gradient(top, @start 0%, @end 100%); /* Chrome10+,Safari5.1+ */\r
+ background: url(${c:encodeURL('@{url}')}), -o-linear-gradient(top, @start 0%, @end 100%); /* Opera 11.10+ */\r
+ background: url(${c:encodeURL('@{url}')}), -ms-linear-gradient(top, @start 0%, @end 100%); /* IE10+ */\r
+ background: url(${c:encodeURL('@{url}')}), linear-gradient(to bottom, @start 0%, @end 100%); /* W3C */\r
+}\r
+//---------------------------------------------\r
+// theme.dsp.tld\r
+//---------------------------------------------\r
+// gradient\r
+.gradient(@direction, @value) {\r
+ // can be used directly for all except old webkit\r
+ @valueList: ~`(function(a){return a.replace(/;/g, ',')})(@{value})`;\r
+ @fallbackColor: ~`(function(a){return a.split(';')[0].trim().split(/\s(\d+%)$/g)[0]})(@{value})`;\r
+ // for old webkit\r
+ @valuesWebkit: ~`(function(a){var result='';var b=a.split(';');b.forEach(function(c){var d=c.trim().split(/\s(\d+%)$/g);result+='color-stop(' + d[1] + ',' + d[0] + '),';});return result.slice(0, -1)})(@{value})`;\r
+ // for ie9, color stop is the same in all gradient direction, only prefix/suffix are different\r
+ @svgContent: ~`(function(a){var result='';var b=a.split(';');b.forEach(function(c){var d=c.trim().split(/\s(\d+%)$/g);result+='<stop offset="' + d[1] + '" stop-color="' + d[0] + '"/>';});return result})(@{value})`;\r
+ .gradient-ver();\r
+ .gradient-hor();\r
+ .gradient-diagm();\r
+ .gradient-diagp();\r
+ .gradient-rad();\r
+}\r
+.gradient-ver() when (@direction = 'ver') {\r
+ background: @fallbackColor; /* Old browsers */\r
+ @svgPrefix: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="zkie9" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">';\r
+ @svgSuffix: ~'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ @svg: e('@{svgPrefix}@{svgContent}@{svgSuffix}');\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-linear-gradient(top, @valueList); /* FF3.6+ */\r
+ background: -webkit-gradient(linear, left top, left bottom, @valuesWebkit); /* Chrome,Safari4+ */\r
+ background: -webkit-linear-gradient(top, @valueList); /* Chrome10+,Safari5.1+ */\r
+ background: -o-linear-gradient(top, @valueList); /* Opera 11.10+ */\r
+ background: -ms-linear-gradient(top, @valueList); /* IE10+ */\r
+ background: linear-gradient(to bottom, @valueList); /* W3C */\r
+}\r
+\r
+.gradient-hor() when (@direction = 'hor') {\r
+ background: @fallbackColor; /* Old browsers */\r
+ @svgPrefix: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="zkie9" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">';\r
+ @svgSuffix: ~'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ @svg: e('@{svgPrefix}@{svgContent}@{svgSuffix}');\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-linear-gradient(left, @valueList); /* FF3.6+ */\r
+ background: -webkit-gradient(linear, left top, right top, @valuesWebkit); /* Chrome,Safari4+ */\r
+ background: -webkit-linear-gradient(left, @valueList); /* Chrome10+,Safari5.1+ */\r
+ background: -o-linear-gradient(left, @valueList); /* Opera 11.10+ */\r
+ background: -ms-linear-gradient(left, @valueList); /* IE10+ */\r
+ background: linear-gradient(to right, @valueList); /* W3C */\r
+}\r
+.gradient-diagm() when (@direction = 'diag-') {\r
+ background: @fallbackColor; /* Old browsers */\r
+ @svgPrefix: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="zkie9" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">';\r
+ @svgSuffix: ~'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ @svg: e('@{svgPrefix}@{svgContent}@{svgSuffix}');\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-linear-gradient(-45deg, @valueList); /* FF3.6+ */\r
+ background: -webkit-gradient(linear, left top, right bottom, @valuesWebkit); /* Chrome,Safari4+ */\r
+ background: -webkit-linear-gradient(-45deg, @valueList); /* Chrome10+,Safari5.1+ */\r
+ background: -o-linear-gradient(-45deg, @valueList); /* Opera 11.10+ */\r
+ background: -ms-linear-gradient(-45deg, @valueList); /* IE10+ */\r
+ background: linear-gradient(135deg, @valueList); /* W3C */\r
+}\r
+.gradient-diagp() when (@direction = 'diag+') {\r
+ background: @fallbackColor; /* Old browsers */\r
+ @svgPrefix: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="zkie9" gradientUnits="userSpaceOnUse" x1="0%" y1="100%" x2="100%" y2="0%">';\r
+ @svgSuffix: ~'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ @svg: e('@{svgPrefix}@{svgContent}@{svgSuffix}');\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-linear-gradient(45deg, @valueList); /* FF3.6+ */\r
+ background: -webkit-gradient(linear, left bottom, right top, @valuesWebkit); /* Chrome,Safari4+ */\r
+ background: -webkit-linear-gradient(45deg, @valueList); /* Chrome10+,Safari5.1+ */\r
+ background: -o-linear-gradient(45deg, @valueList); /* Opera 11.10+ */\r
+ background: -ms-linear-gradient(45deg, @valueList); /* IE10+ */\r
+ background: linear-gradient(45deg, @valueList); /* W3C */\r
+}\r
+.gradient-rad() when (@direction = 'rad') {\r
+ background: @fallbackColor; /* Old browsers */\r
+ @svgPrefix: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><radialGradient id="zkie9" gradientUnits="userSpaceOnUse" cx="50%" cy="50%" r="50%">';\r
+ @svgSuffix: ~'</radialGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ @svg: e('@{svgPrefix}@{svgContent}@{svgSuffix}');\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-radial-gradient(center, ellipse cover, @valueList); /* FF3.6+ */\r
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, @valuesWebkit); /* Chrome,Safari4+ */\r
+ background: -webkit-radial-gradient(center, ellipse cover, @valueList); /* Chrome10+,Safari5.1+ */\r
+ background: -o-radial-gradient(center, ellipse cover, @valueList); /* Opera 11.10+ */\r
+ background: -ms-radial-gradient(center, ellipse cover, @valueList); /* IE10+ */\r
+ background: radial-gradient(ellipse at center, @valueList); /* W3C */\r
+}\r
+\r
+// box layout\r
+.boxOrientHor() {\r
+ display: -webkit-box;\r
+ display: -moz-box;\r
+ display: box;\r
+\r
+ -webkit-box-orient: horizontal;\r
+ -moz-box-orient: horizontal;\r
+ -o-box-orient: horizontal;\r
+ -ms-box-orient: horizontal;\r
+ box-orient: horizontal;\r
+}\r
+.boxOrientHorFlex() {\r
+ display: -webkit-box;\r
+ display: -moz-box;\r
+ display: box;\r
+\r
+ -webkit-box-orient: horizontal;\r
+ -moz-box-orient: horizontal;\r
+ -o-box-orient: horizontal;\r
+ -ms-box-orient: horizontal;\r
+ box-orient: horizontal;\r
+\r
+ -webkit-box-flex: 1;\r
+ -moz-box-flex: 1;\r
+ -o-box-flex: 1;\r
+ -ms-box-flex: 1;\r
+ box-flex: 1;\r
+}\r
+// box-shadow\r
+.boxShadow(@value) when (isstring(@value)) {\r
+ -webkit-box-shadow: e(@value);\r
+ -moz-box-shadow: e(@value);\r
+ -o-box-shadow: e(@value);\r
+ -ms-box-shadow: e(@value);\r
+ box-shadow: e(@value);\r
+}\r
+.boxShadow(@value) when not (isstring(@value)) {\r
+ -webkit-box-shadow: @value;\r
+ -moz-box-shadow: @value;\r
+ -o-box-shadow: @value;\r
+ -ms-box-shadow: @value;\r
+ box-shadow: @value;\r
+}\r
+// border-radius\r
+.borderRadius(@size) when (isstring(@size)) {\r
+ -webkit-border-radius: e(@size);\r
+ -moz-border-radius: e(@size);\r
+ -o-border-radius: e(@size);\r
+ -ms-border-radius: e(@size);\r
+ border-radius: e(@size);\r
+}\r
+.borderRadius(@size) when not (isstring(@size)) {\r
+ -webkit-border-radius: @size;\r
+ -moz-border-radius: @size;\r
+ -o-border-radius: @size;\r
+ -ms-border-radius: @size;\r
+ border-radius: @size;\r
+}\r
+// transform\r
+.transform(@value) when (isstring(@value)) {\r
+ -webkit-transform: e(@value);\r
+ -moz-transform: e(@value);\r
+ -o-transform: e(@value);\r
+ -ms-transform: e(@value);\r
+ transform: e(@value)\r
+}\r
+.transform(@value) when not (isstring(@value)) {\r
+ -webkit-transform: @value;\r
+ -moz-transform: @value;\r
+ -o-transform: @value;\r
+ -ms-transform: @value;\r
+ transform: @value\r
+}\r
+// CSS3\r
+.applyCSS3(@key, @value) {\r
+ @ekey: e(@key);\r
+ -webkit-@{ekey}: e(@value);\r
+ -moz-@{ekey}: e(@value);\r
+ -o-@{ekey}: e(@value);\r
+ -ms-@{ekey}: e(@value);\r
+ @{ekey}: e(@value)\r
+}\r
+\r
+//---------------------------------------------\r
+// Other helpful utilities\r
+//---------------------------------------------\r
+// gradient utility\r
+.horGradient(@start, @end) when (@start = @end) {\r
+ background: @start;\r
+}\r
+.horGradient(@start, @end) when not (@start = @end) {\r
+ background: @start; /* Old browsers */\r
+ @svg: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="zkie9" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"><stop stop-color="@{start}" offset="0%"/><stop stop-color="@{end}" offset="100%"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-linear-gradient(left, @start 0%, @end 100%); /* FF3.6+ */\r
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,@start), color-stop(100%, @end)); /* Chrome,Safari4+ */\r
+ background: -webkit-linear-gradient(left, @start 0%, @end 100%); /* Chrome10+,Safari5.1+ */\r
+ background: -o-linear-gradient(left, @start 0%, @end 100%); /* Opera 11.10+ */\r
+ background: -ms-linear-gradient(left, @start 0%, @end 100%); /* IE10+ */\r
+ background: linear-gradient(to right, @start 0%, @end 100%); /* W3C */\r
+}\r
+.verGradient(@start, @end) when (@start = @end) {\r
+ background: @start;\r
+}\r
+.verGradient(@start, @end) when not (@start = @end) {\r
+ background: @start; /* Old browsers */\r
+ @svg: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="zkie9" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop stop-color="@{start}" offset="0%"/><stop stop-color="@{end}" offset="100%"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#zkie9)" /></svg>';\r
+ .base64DataUriBackground(@svg); /* IE9 */\r
+ background: -moz-linear-gradient(top, @start 0%, @end 100%); /* FF3.6+ */\r
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start),color-stop(100%, @end)); /* Chrome,Safari4+ */\r
+ background: -webkit-linear-gradient(top, @start 0%, @end 100%); /* Chrome10+,Safari5.1+ */\r
+ background: -o-linear-gradient(top, @start 0%, @end 100%); /* Opera 11.10+ */\r
+ background: -ms-linear-gradient(top, @start 0%, @end 100%); /* IE10+ */\r
+ background: linear-gradient(to bottom, @start 0%, @end 100%); /* W3C */\r
+}\r
+.base64DataUriBackground(@svgToEncode, @type: ~"image/svg+xml") {\r
+ @dataUriPrefix: ~"url(data:@{type};base64,";\r
+ @dataUriSuffix: ~")";\r
+ @b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{svgToEncode}','@{dataUriSuffix}')`;\r
+ background: @b64DataUri;\r
+}\r
+.gradientFallback(@start, @end) {\r
+ background: average(@start, @end);\r
+}\r
+.resetGradient() {\r
+ background: none;\r
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);\r
+}\r
+\r
+// border-radius utility\r
+.topBorderRadius(@size) {\r
+ -webkit-border-radius: @size @size 0 0;\r
+ -moz-border-radius: @size @size 0 0;\r
+ -o-border-radius: @size @size 0 0;\r
+ -ms-border-radius: @size @size 0 0;\r
+ border-radius: @size @size 0 0;\r
+}\r
+.rightBorderRadius(@size) {\r
+ -webkit-border-radius: 0 @size @size 0;\r
+ -moz-border-radius: 0 @size @size 0;\r
+ -o-border-radius: 0 @size @size 0;\r
+ -ms-border-radius: 0 @size @size 0;\r
+ border-radius: 0 @size @size 0;\r
+}\r
+.bottomBorderRadius(@size) {\r
+ -webkit-border-radius: 0 0 @size @size;\r
+ -moz-border-radius: 0 0 @size @size;\r
+ -o-border-radius: 0 0 @size @size;\r
+ -ms-border-radius: 0 0 @size @size;\r
+ border-radius: 0 0 @size @size;\r
+}\r
+.leftBorderRadius(@size) {\r
+ -webkit-border-radius: @size 0 0 @size;\r
+ -moz-border-radius: @size 0 0 @size;\r
+ -o-border-radius: @size 0 0 @size;\r
+ -ms-border-radius: @size 0 0 @size;\r
+ border-radius: @size 0 0 @size;\r
+}\r
+\r
+// opacity utility\r
+.opacity(@opacity) {\r
+ opacity: @opacity;\r
+ @opacity100: @opacity * 100;\r
+ filter: ~'alpha(opacity=@{opacity100});';\r
+}\r
+\r
+// icon font utility\r
+.baseIconFont() {\r
+ display: inline-block;\r
+ font-family: FontAwesome;\r
+ font-style: normal;\r
+ font-weight: normal;\r
+ font-size: inherit;\r
+ -webkit-font-smoothing: antialiased;\r
+ -moz-osx-font-smoothing: grayscale;\r
+ text-rendering: auto; // optimizelegibility throws things off #1094\r
+ transform: translate(0, 0); // ensures no half-pixel rendering in firefox\r
+}\r
+\r
+// other utility\r
+.size(@width, @height) {\r
+ width: @width;\r
+ height: @height;\r
+}\r
+.displaySize(@display, @width, @height) {\r
+ display: @display;\r
+ .size(@width, @height);\r
+}\r
+.fontStyle(@family, @size, @weight, @color) {\r
+ font-family: @family;\r
+ font-size: @size;\r
+ font-weight: @weight;\r
+ font-style: normal;\r
+ color: @color;\r
+}\r
+.fontStyle(@family, @size, @weight) {\r
+ font-family: @family;\r
+ font-size: @size;\r
+ font-weight: @weight;\r
+ font-style: normal;\r
+}\r
+.iconFontStyle(@size, @color) {\r
+ font-size: @size;\r
+ color: @color;\r
+}\r
--- /dev/null
+// Global Variables
+// -------------------------------------
+// Typography
+// -------------------------------------
+@baseFontSize: 14px;
+@baseTitleFontFamily: Verdana;
+@baseContentFontFamily: Verdana;
+@baseLineHeight: 14px;
+
+// Component height
+@baseHeight: 8px;
+@baseIconHeight: @baseHeight * 2; // 16px
+@baseButtonHeight: @baseHeight * 3; // 24px
+@baseBarHeight: @baseHeight * 4; // 32px
+@baseTitleHeight: @baseHeight * 5; // 40px
+
+// Component width
+@baseWidth: 8px;
+@baseIconWidth: @baseWidth * 2; // 16px
+@baseButtonWidth: @baseWidth * 3; // 24px
+@baseBarWidth: @baseWidth * 4; // 32px
+
+// -------------------------------------
+// Component sizing
+// -------------------------------------
+// Based on 14px font-size and 20px line-height
+@fontSizeXLarge: ceil(@baseFontSize * 1.25); // 18px
+@fontSizeLarge: floor(@baseFontSize * 1.15); // 16px
+@fontSizeMedium: ceil(@baseFontSize * 0.85); // 12px
+@fontSizeSmall: floor(@baseFontSize * 0.8); // 11px
+@fontSizeXSmall: ceil(@baseFontSize * 0.7); // 10px
+
+@baseBorderRadius: 4px;
+@borderRadiusLarge: 6px;
+@borderRadiusSmall: 3px;
+
+@basePopupZIndex: 88000;
+
+// -------------------------------------
+// Component Basic Coloring for userdark (all gray colors are changed to blue)
+// -------------------------------------
+// Font color
+@baseTextColor: #e3e3e3;
+@textColorGray: #e3e3e3;
+@textColorGrayDark: #e3e3e3;
+@textColorGrayLight: #e3e3e3;
+@textColorBlue: #e3e3e3;
+@textColorGreen: #e3e3e3;
+@textColorOrange: #e3e3e3;
+
+// Border color
+@baseBorderColor: #1d1d1d;
+
+// Background color
+@baseBackgroundColor: #303030;
+//@baseBackgroundColor: red;
+
+// Gradient background
+@baseGradientStart: @baseBackgroundColor;
+@baseGradientEnd: @baseBackgroundColor;
+
+// -------------------------------------
+// Icon font color (used for font-awesome)
+// -------------------------------------
+@iconColor: #ffffff;
+@iconHoverColor: #ffffff;
+@iconDisabledColor: #AAAAAA;
+
+// -------------------------------------
+// Button (used for button, combobutton)
+// -------------------------------------
+@buttonBorderColor: @baseBorderColor;
+@buttonGradientStart: #1c1c1c;
+@buttonGradientEnd: #1c1c1c;
+
+// -------------------------------------
+// Input (used for textbox, intbox, spinner, ...)
+// -------------------------------------
+@inputBorderColor: @baseBorderColor;
+@inputBackgroundColor: #ffffff;
+
+// -------------------------------------
+// Mesh Table (used for grid, listbox, tree, biglistbox)
+// -------------------------------------
+@meshTitleBorderColor: @baseBorderColor;
+@meshContentBorderColor: @baseBorderColor;
+@meshBackgroundColor: transparent;
+@meshStripeBackgroundColor: #1d1d1d;
+@meshFootBackgroundColor: #FAFAFA;
+//grid fejlec
+@meshTitleHoverStart: #000000;
+@meshTitleHoverEnd: #000000;
+@meshContentHoverStart: transparent;
+@meshContentHoverEnd: transparent;
+@meshContentFocusStart: #82B1C7;
+@meshContentFocusEnd: #82B1C7;
+@meshAutoPagingRowHeight: 32px;
+
+// -------------------------------------
+// Component State
+// -------------------------------------
+// Active
+@activeColor: @baseTextColor;
+@activeBorderColor: @baseBorderColor;
+@activeBackgroundColor: red;//#86E2F9;
+@activeGradientStart: #C3F5FE;
+@activeGradientEnd: #86E2F9;
+
+// Focus
+@focusColor: @baseTextColor;
+@focusBorderColor: #00B9FF;
+@focusBackgroundColor: @baseGradientEnd;
+@focusGradientStart: @baseGradientStart;
+@focusGradientEnd: @baseGradientEnd;
+
+// Hover
+@hoverColor: #FFFFFF;
+@hoverBorderColor: #131313;
+@hoverBackgroundColor: transparent;
+@hoverGradientStart: #000000;
+@hoverGradientEnd: #000000;
+
+// Disabled
+@disabledColor: #AAAAAA;
+@disabledBackgroundColor: #F0F0F0;
+@disabledOpacity: 0.6;
+
+// Invalid
+@invalidBorderColor: #DD7777;
+
+// Read-only
+@readonlyBorderColor: #E6E6E6;
+@readonlyBackgroundColor: #FAFAFA;
+
+// Selected (used on listbox, tree, comboitem)
+@selectedColor: #F1F8E9;
+@selectedBorderColor: @baseBorderColor;
+@selectedBackgroundColor: darken(@hoverBackgroundColor, 5%);
+@selectedGradientStart: #3E697C;
+@selectedGradientEnd: #3E697C;
+
+// Selected Hover (used on listbox, tree, comboitem)
+@selectedHoverColor: #FFFFFF;
+@selectedHoverBorderColor: @baseBorderColor;
+@selectedHoverBackgroundColor: darken(@selectedGradientEnd, 3%);
+@selectedHoverGradientStart: #548DA7;
+@selectedHoverGradientEnd: #548DA7;
+
+// Selected Focus (used on listbox, tree, comboitem)
+@selectedFocusColor: @selectedColor;
+@selectedFocusBorderColor: @selectedBorderColor;
+@selectedFocusBackgroundColor: @selectedBackgroundColor;
+@selectedFocusGradientStart: #315463;
+@selectedFocusGradientEnd: #315463;
+
+// Checked (used on menuitem, listbox, tree, toolbarbutton)
+@checkedColor: #000000;
+@checkedBorderColor: #8E8F8F;
+@checkedBackgroundColor: #000000;
+@checkedGradientStart: #000000;
+@checkedGradientEnd: #000000;
+
+// Collapsed (used on Borderlayout)
+@collapsedBorderColor: @baseBorderColor;
+@collapsedBackgroundColor: @baseBackgroundColor;
+
+// -------------------------------------
+// Component independent variables
+// -------------------------------------
+// mask and loading
+@maskBackgroundColor: #E0E1E3;
+@loadingBackgroundColor: #1d1d1d;
+
+// scrollbar
+@scrollbarWidth: 16px;
+@scrollbarHeight: 16px;
+@scrollbarBorderColor: #838383;
+@scrollbarBackgroundColor: #DDDDDD;
+@scrollbarGradientStart: #FFFFFF;
+@scrollbarGradientEnd: #CFCFCF;
+
+// drag and drop
+@dragColor: #FFFFFF;
+@dragBackgroundColor: #E0EAF0;
+@dragHoverBackgroundColor: #ADD2FF;
+@dragAllowBorderColor: #11AA33;
+@dragAllowBackgroundColor: #11AA33;
+@dragDisAllowBorderColor: #C13634;
+@dragDisAllowBackgroundColor: #C13634;
+
+// splitter (hbox, vbox, borderlayout)
+@splitterSize: 8px;
+@splitterGradientStart: #1c1c1c;
+@splitterGradientEnd: #1c1c1c;
+
+// calendar
+@calendarTitleColor: @textColorGrayLight;
+@calendarTitleHoverColor: @textColorGrayLight;
+@calendarCellColor: @textColorGrayLight;
+@calendarSelectedColor: #FFFFFF;
+@calendarSelectedHoverColor: #FFFFFF;
+@weekendColor: @textColorOrange;
+@weekendBackgroundColor: #F2F2F2;
+@weekColor: @textColorGrayLight;
+@weekofyearColor: #FFFFFF;
+@weekofyearBackgroundColor: #636363;
+
+// popup
+@popupBorderColor: @baseBorderColor;
+@popupBackgroundColor: @baseBackgroundColor;
+@popupGradientStart: @baseBackgroundColor;
+@popupGradientEnd: @baseBackgroundColor;
+
+// group (group, listgroup)
+@groupGradientStart: #E7F6FD;
+@groupGradientEnd: #C6E9FA;
+
+// paging
+@pagingColor: @textColorBlue;
+@pagingSelectedColor: @textColorGrayDark;
+@pagingBorderColor: @baseBorderColor;
+@pagingActiveBorderColor: #A9A9A9;
+@pagingBackgroundColor: @baseBackgroundColor;
+@pagingSelectedBackgroundColor:#E6E6E6;
+
+// slider
+@sliderBorderColor: @baseBorderColor;
+@sliderActiveBorderColor: #838383;
+
+// errorbox (input constraint)
+@errorboxColor: #990000;
+@errorboxBorderColor: #990000;
+@errorboxBackgroundColor: #FFEEEE;
+
+// notification
+@notificationInfoColor: rgba(33, 155, 166, 0.88);
+@notificationWarningColor: rgba(234, 67, 23, 0.88);
+@notificationErrorColor: rgba(190, 0, 5, 0.88);
+@notificationArrowColor: rgba(51, 51, 51, 0.9);
+@notificationInfoColorIE8: rgb(33, 155, 166);
+@notificationWarningColorIE8: rgb(234, 67, 23);
+@notificationErrorColorIE8: rgb(190, 0, 5);
+@notificationArrowColorIE8: rgb(51, 51, 51);
+
+// progressmeter
+@progressmeterGradientStart: #AFD3E2;
+@progressmeterGradientEnd: #8DBDD1;
+
+// window
+@windowBorderColor: #9C9C9C;
+@windowBackgroundColor: @baseBackgroundColor;
+@windowFramePadding: 4px;
+
+// panel
+@panelBorderColor: #8FB9D0;
+@panelBackgroundColor: @baseBackgroundColor;
+@panelBodyBackground: #F0F6F9;
+
+// tabbox
+@tabSelectedBackgroundColor: #131313;
+
+// menu
+@menuImageSize: 16px;
+@menuActiveBorderColorTR: #838383;
+@menuActiveBorderColorBL: #B6B6B6;
+@menuPopupBackground: @baseBackgroundColor;
+@menuSeparatorBorderColor: #838383;
+@menuSeparatorBackgroundColor: #B8B8B8;
+@menuPopupSeparatorBorder: #D9F0FC;
+@menuPopupSeparatorBackground: #A2C0CE;
+
+// navbar
+@navImageSize: 16px;
+@navColor: #333333;
+@navBorderColor: #F4F4F3;
+@navBackgroundColor: #FFFFFF; //first level, each level is 3% darker (darken(@navBackgroundColor, 3 * level));
+@navHoverBackgroundColor: #E8E8E8;
+@navSelectedColor: #FFFFFF;
+@navSelectedBackgroundColor: #372F2B;
+@navSeparatorColor: #838383;
+@navCollapsedWidth: 32px;
+
+// colorbox
+@colorboxBorderColor: #9C9C9C;
+
+// chosenbox
+@chosenboxItemBorderColor: #8FB9D0;
+@chosenboxCreateIconColor: @textColorGreen;
+
+// biglistbox
+@biglistboxBackgroundColor: #F0F0F0;
+@biglistboxFrozenBackground: #E0E0E0;
+
+// mesh for ie8
+@meshBackgroundColorIE8: #D7F0FC;
+@meshHoverBackgroundColorIE8: #6BA6BF;
+@meshSelectedBackgroundColorIE8: #3E697C;
+@meshSelectedHoverBackgroundColorIE8: #548DA7;
+@meshGroupBackgroundColorIE8: #D0EDFB;
+@meshGroupFooterBackgroundColorIE8: #DDF2FC;
--- /dev/null
+/** Font Awesome 4.0.1
+ * License
+ * -------------------------------------------------------
+ * - The Font Awesome font is licensed under the SIL Open Font License v1.1 -
+ * http://scripts.sil.org/OFL
+ * - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
+ * http://opensource.org/licenses/mit-license.html
+ * - Font Awesome documentation licensed under CC BY 3.0 License -
+ * http://creativecommons.org/licenses/by/3.0/
+ * - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+ * "Font Awesome by Dave Gandy - http://fontawesome.io"
+*/
+@import "~./zul/less/_zkmixins.less";
+@import "_variables.less";
+@import "_mixins.less";
+@import "_path.less";
+@import "_core.less";
+@import "_larger.less";
+@import "_fixed-width.less";
+@import "_list.less";
+@import "_bordered-pulled.less";
+@import "_animated.less";
+@import "_rotated-flipped.less";
+@import "_stacked.less";
+@import "_icons.less";
\ No newline at end of file
--- /dev/null
+// Animated Icons
+// --------------------------
+
+.@{fa-css-prefix}-spin {
+ -webkit-animation: fa-spin 2s infinite linear;
+ animation: fa-spin 2s infinite linear;
+}
+
+.@{fa-css-prefix}-pulse {
+ -webkit-animation: fa-spin 1s infinite steps(8);
+ animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
+
+@keyframes fa-spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
--- /dev/null
+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+ padding: .2em .25em .15em;
+ border: solid .08em @fa-border-color;
+ border-radius: .1em;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+ &.pull-left { margin-right: .3em; }
+ &.pull-right { margin-left: .3em; }
+}
--- /dev/null
+/* FONT AWESOME CORE
+ * -------------------------- */
+
+[class^="z-icon-"],
+[class*=" z-icon-"] {
+ .baseIconFont();
+}
+
+[class^="z-icon-"]:before,
+[class*=" z-icon-"]:before {
+ text-decoration: inherit;
+ display: inline-block;
+ speak: none;
+}
+
+/* makes sure icons active on rollover in links */
+a {
+ [class^="z-icon-"],
+ [class*=" z-icon-"] {
+ display: inline;
+ }
+}
\ No newline at end of file
--- /dev/null
+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+ width: (18em / 14);
+ text-align: center;
+}
--- /dev/null
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+ readers do not read off random characters that represent icons */
+
+.@{fa-css-prefix}-glass:before { content: @fa-var-glass; }
+.@{fa-css-prefix}-music:before { content: @fa-var-music; }
+.@{fa-css-prefix}-search:before { content: @fa-var-search; }
+.@{fa-css-prefix}-envelope-o:before { content: @fa-var-envelope-o; }
+.@{fa-css-prefix}-heart:before { content: @fa-var-heart; }
+.@{fa-css-prefix}-star:before { content: @fa-var-star; }
+.@{fa-css-prefix}-star-o:before { content: @fa-var-star-o; }
+.@{fa-css-prefix}-user:before { content: @fa-var-user; }
+.@{fa-css-prefix}-film:before { content: @fa-var-film; }
+.@{fa-css-prefix}-th-large:before { content: @fa-var-th-large; }
+.@{fa-css-prefix}-th:before { content: @fa-var-th; }
+.@{fa-css-prefix}-th-list:before { content: @fa-var-th-list; }
+.@{fa-css-prefix}-check:before { content: @fa-var-check; }
+.@{fa-css-prefix}-remove:before,
+.@{fa-css-prefix}-close:before,
+.@{fa-css-prefix}-times:before { content: @fa-var-times; }
+.@{fa-css-prefix}-search-plus:before { content: @fa-var-search-plus; }
+.@{fa-css-prefix}-search-minus:before { content: @fa-var-search-minus; }
+.@{fa-css-prefix}-power-off:before { content: @fa-var-power-off; }
+.@{fa-css-prefix}-signal:before { content: @fa-var-signal; }
+.@{fa-css-prefix}-gear:before,
+.@{fa-css-prefix}-cog:before { content: @fa-var-cog; }
+.@{fa-css-prefix}-trash-o:before { content: @fa-var-trash-o; }
+.@{fa-css-prefix}-home:before { content: @fa-var-home; }
+.@{fa-css-prefix}-file-o:before { content: @fa-var-file-o; }
+.@{fa-css-prefix}-clock-o:before { content: @fa-var-clock-o; }
+.@{fa-css-prefix}-road:before { content: @fa-var-road; }
+.@{fa-css-prefix}-download:before { content: @fa-var-download; }
+.@{fa-css-prefix}-arrow-circle-o-down:before { content: @fa-var-arrow-circle-o-down; }
+.@{fa-css-prefix}-arrow-circle-o-up:before { content: @fa-var-arrow-circle-o-up; }
+.@{fa-css-prefix}-inbox:before { content: @fa-var-inbox; }
+.@{fa-css-prefix}-play-circle-o:before { content: @fa-var-play-circle-o; }
+.@{fa-css-prefix}-rotate-right:before,
+.@{fa-css-prefix}-repeat:before { content: @fa-var-repeat; }
+.@{fa-css-prefix}-refresh:before { content: @fa-var-refresh; }
+.@{fa-css-prefix}-list-alt:before { content: @fa-var-list-alt; }
+.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
+.@{fa-css-prefix}-flag:before { content: @fa-var-flag; }
+.@{fa-css-prefix}-headphones:before { content: @fa-var-headphones; }
+.@{fa-css-prefix}-volume-off:before { content: @fa-var-volume-off; }
+.@{fa-css-prefix}-volume-down:before { content: @fa-var-volume-down; }
+.@{fa-css-prefix}-volume-up:before { content: @fa-var-volume-up; }
+.@{fa-css-prefix}-qrcode:before { content: @fa-var-qrcode; }
+.@{fa-css-prefix}-barcode:before { content: @fa-var-barcode; }
+.@{fa-css-prefix}-tag:before { content: @fa-var-tag; }
+.@{fa-css-prefix}-tags:before { content: @fa-var-tags; }
+.@{fa-css-prefix}-book:before { content: @fa-var-book; }
+.@{fa-css-prefix}-bookmark:before { content: @fa-var-bookmark; }
+.@{fa-css-prefix}-print:before { content: @fa-var-print; }
+.@{fa-css-prefix}-camera:before { content: @fa-var-camera; }
+.@{fa-css-prefix}-font:before { content: @fa-var-font; }
+.@{fa-css-prefix}-bold:before { content: @fa-var-bold; }
+.@{fa-css-prefix}-italic:before { content: @fa-var-italic; }
+.@{fa-css-prefix}-text-height:before { content: @fa-var-text-height; }
+.@{fa-css-prefix}-text-width:before { content: @fa-var-text-width; }
+.@{fa-css-prefix}-align-left:before { content: @fa-var-align-left; }
+.@{fa-css-prefix}-align-center:before { content: @fa-var-align-center; }
+.@{fa-css-prefix}-align-right:before { content: @fa-var-align-right; }
+.@{fa-css-prefix}-align-justify:before { content: @fa-var-align-justify; }
+.@{fa-css-prefix}-list:before { content: @fa-var-list; }
+.@{fa-css-prefix}-dedent:before,
+.@{fa-css-prefix}-outdent:before { content: @fa-var-outdent; }
+.@{fa-css-prefix}-indent:before { content: @fa-var-indent; }
+.@{fa-css-prefix}-video-camera:before { content: @fa-var-video-camera; }
+.@{fa-css-prefix}-photo:before,
+.@{fa-css-prefix}-image:before,
+.@{fa-css-prefix}-picture-o:before { content: @fa-var-picture-o; }
+.@{fa-css-prefix}-pencil:before { content: @fa-var-pencil; }
+.@{fa-css-prefix}-map-marker:before { content: @fa-var-map-marker; }
+.@{fa-css-prefix}-adjust:before { content: @fa-var-adjust; }
+.@{fa-css-prefix}-tint:before { content: @fa-var-tint; }
+.@{fa-css-prefix}-edit:before,
+.@{fa-css-prefix}-pencil-square-o:before { content: @fa-var-pencil-square-o; }
+.@{fa-css-prefix}-share-square-o:before { content: @fa-var-share-square-o; }
+.@{fa-css-prefix}-check-square-o:before { content: @fa-var-check-square-o; }
+.@{fa-css-prefix}-arrows:before { content: @fa-var-arrows; }
+.@{fa-css-prefix}-step-backward:before { content: @fa-var-step-backward; }
+.@{fa-css-prefix}-fast-backward:before { content: @fa-var-fast-backward; }
+.@{fa-css-prefix}-backward:before { content: @fa-var-backward; }
+.@{fa-css-prefix}-play:before { content: @fa-var-play; }
+.@{fa-css-prefix}-pause:before { content: @fa-var-pause; }
+.@{fa-css-prefix}-stop:before { content: @fa-var-stop; }
+.@{fa-css-prefix}-forward:before { content: @fa-var-forward; }
+.@{fa-css-prefix}-fast-forward:before { content: @fa-var-fast-forward; }
+.@{fa-css-prefix}-step-forward:before { content: @fa-var-step-forward; }
+.@{fa-css-prefix}-eject:before { content: @fa-var-eject; }
+.@{fa-css-prefix}-chevron-left:before { content: @fa-var-chevron-left; }
+.@{fa-css-prefix}-chevron-right:before { content: @fa-var-chevron-right; }
+.@{fa-css-prefix}-plus-circle:before { content: @fa-var-plus-circle; }
+.@{fa-css-prefix}-minus-circle:before { content: @fa-var-minus-circle; }
+.@{fa-css-prefix}-times-circle:before { content: @fa-var-times-circle; }
+.@{fa-css-prefix}-check-circle:before { content: @fa-var-check-circle; }
+.@{fa-css-prefix}-question-circle:before { content: @fa-var-question-circle; }
+.@{fa-css-prefix}-info-circle:before { content: @fa-var-info-circle; }
+.@{fa-css-prefix}-crosshairs:before { content: @fa-var-crosshairs; }
+.@{fa-css-prefix}-times-circle-o:before { content: @fa-var-times-circle-o; }
+.@{fa-css-prefix}-check-circle-o:before { content: @fa-var-check-circle-o; }
+.@{fa-css-prefix}-ban:before { content: @fa-var-ban; }
+.@{fa-css-prefix}-arrow-left:before { content: @fa-var-arrow-left; }
+.@{fa-css-prefix}-arrow-right:before { content: @fa-var-arrow-right; }
+.@{fa-css-prefix}-arrow-up:before { content: @fa-var-arrow-up; }
+.@{fa-css-prefix}-arrow-down:before { content: @fa-var-arrow-down; }
+.@{fa-css-prefix}-mail-forward:before,
+.@{fa-css-prefix}-share:before { content: @fa-var-share; }
+.@{fa-css-prefix}-expand:before { content: @fa-var-expand; }
+.@{fa-css-prefix}-compress:before { content: @fa-var-compress; }
+.@{fa-css-prefix}-plus:before { content: @fa-var-plus; }
+.@{fa-css-prefix}-minus:before { content: @fa-var-minus; }
+.@{fa-css-prefix}-asterisk:before { content: @fa-var-asterisk; }
+.@{fa-css-prefix}-exclamation-circle:before { content: @fa-var-exclamation-circle; }
+.@{fa-css-prefix}-gift:before { content: @fa-var-gift; }
+.@{fa-css-prefix}-leaf:before { content: @fa-var-leaf; }
+.@{fa-css-prefix}-fire:before { content: @fa-var-fire; }
+.@{fa-css-prefix}-eye:before { content: @fa-var-eye; }
+.@{fa-css-prefix}-eye-slash:before { content: @fa-var-eye-slash; }
+.@{fa-css-prefix}-warning:before,
+.@{fa-css-prefix}-exclamation-triangle:before { content: @fa-var-exclamation-triangle; }
+.@{fa-css-prefix}-plane:before { content: @fa-var-plane; }
+.@{fa-css-prefix}-calendar:before { content: @fa-var-calendar; }
+.@{fa-css-prefix}-random:before { content: @fa-var-random; }
+.@{fa-css-prefix}-comment:before { content: @fa-var-comment; }
+.@{fa-css-prefix}-magnet:before { content: @fa-var-magnet; }
+.@{fa-css-prefix}-chevron-up:before { content: @fa-var-chevron-up; }
+.@{fa-css-prefix}-chevron-down:before { content: @fa-var-chevron-down; }
+.@{fa-css-prefix}-retweet:before { content: @fa-var-retweet; }
+.@{fa-css-prefix}-shopping-cart:before { content: @fa-var-shopping-cart; }
+.@{fa-css-prefix}-folder:before { content: @fa-var-folder; }
+.@{fa-css-prefix}-folder-open:before { content: @fa-var-folder-open; }
+.@{fa-css-prefix}-arrows-v:before { content: @fa-var-arrows-v; }
+.@{fa-css-prefix}-arrows-h:before { content: @fa-var-arrows-h; }
+.@{fa-css-prefix}-bar-chart-o:before,
+.@{fa-css-prefix}-bar-chart:before { content: @fa-var-bar-chart; }
+.@{fa-css-prefix}-twitter-square:before { content: @fa-var-twitter-square; }
+.@{fa-css-prefix}-facebook-square:before { content: @fa-var-facebook-square; }
+.@{fa-css-prefix}-camera-retro:before { content: @fa-var-camera-retro; }
+.@{fa-css-prefix}-key:before { content: @fa-var-key; }
+.@{fa-css-prefix}-gears:before,
+.@{fa-css-prefix}-cogs:before { content: @fa-var-cogs; }
+.@{fa-css-prefix}-comments:before { content: @fa-var-comments; }
+.@{fa-css-prefix}-thumbs-o-up:before { content: @fa-var-thumbs-o-up; }
+.@{fa-css-prefix}-thumbs-o-down:before { content: @fa-var-thumbs-o-down; }
+.@{fa-css-prefix}-star-half:before { content: @fa-var-star-half; }
+.@{fa-css-prefix}-heart-o:before { content: @fa-var-heart-o; }
+.@{fa-css-prefix}-sign-out:before { content: @fa-var-sign-out; }
+.@{fa-css-prefix}-linkedin-square:before { content: @fa-var-linkedin-square; }
+.@{fa-css-prefix}-thumb-tack:before { content: @fa-var-thumb-tack; }
+.@{fa-css-prefix}-external-link:before { content: @fa-var-external-link; }
+.@{fa-css-prefix}-sign-in:before { content: @fa-var-sign-in; }
+.@{fa-css-prefix}-trophy:before { content: @fa-var-trophy; }
+.@{fa-css-prefix}-github-square:before { content: @fa-var-github-square; }
+.@{fa-css-prefix}-upload:before { content: @fa-var-upload; }
+.@{fa-css-prefix}-lemon-o:before { content: @fa-var-lemon-o; }
+.@{fa-css-prefix}-phone:before { content: @fa-var-phone; }
+.@{fa-css-prefix}-square-o:before { content: @fa-var-square-o; }
+.@{fa-css-prefix}-bookmark-o:before { content: @fa-var-bookmark-o; }
+.@{fa-css-prefix}-phone-square:before { content: @fa-var-phone-square; }
+.@{fa-css-prefix}-twitter:before { content: @fa-var-twitter; }
+.@{fa-css-prefix}-facebook-f:before,
+.@{fa-css-prefix}-facebook:before { content: @fa-var-facebook; }
+.@{fa-css-prefix}-github:before { content: @fa-var-github; }
+.@{fa-css-prefix}-unlock:before { content: @fa-var-unlock; }
+.@{fa-css-prefix}-credit-card:before { content: @fa-var-credit-card; }
+.@{fa-css-prefix}-rss:before { content: @fa-var-rss; }
+.@{fa-css-prefix}-hdd-o:before { content: @fa-var-hdd-o; }
+.@{fa-css-prefix}-bullhorn:before { content: @fa-var-bullhorn; }
+.@{fa-css-prefix}-bell:before { content: @fa-var-bell; }
+.@{fa-css-prefix}-certificate:before { content: @fa-var-certificate; }
+.@{fa-css-prefix}-hand-o-right:before { content: @fa-var-hand-o-right; }
+.@{fa-css-prefix}-hand-o-left:before { content: @fa-var-hand-o-left; }
+.@{fa-css-prefix}-hand-o-up:before { content: @fa-var-hand-o-up; }
+.@{fa-css-prefix}-hand-o-down:before { content: @fa-var-hand-o-down; }
+.@{fa-css-prefix}-arrow-circle-left:before { content: @fa-var-arrow-circle-left; }
+.@{fa-css-prefix}-arrow-circle-right:before { content: @fa-var-arrow-circle-right; }
+.@{fa-css-prefix}-arrow-circle-up:before { content: @fa-var-arrow-circle-up; }
+.@{fa-css-prefix}-arrow-circle-down:before { content: @fa-var-arrow-circle-down; }
+.@{fa-css-prefix}-globe:before { content: @fa-var-globe; }
+.@{fa-css-prefix}-wrench:before { content: @fa-var-wrench; }
+.@{fa-css-prefix}-tasks:before { content: @fa-var-tasks; }
+.@{fa-css-prefix}-filter:before { content: @fa-var-filter; }
+.@{fa-css-prefix}-briefcase:before { content: @fa-var-briefcase; }
+.@{fa-css-prefix}-arrows-alt:before { content: @fa-var-arrows-alt; }
+.@{fa-css-prefix}-group:before,
+.@{fa-css-prefix}-users:before { content: @fa-var-users; }
+.@{fa-css-prefix}-chain:before,
+.@{fa-css-prefix}-link:before { content: @fa-var-link; }
+.@{fa-css-prefix}-cloud:before { content: @fa-var-cloud; }
+.@{fa-css-prefix}-flask:before { content: @fa-var-flask; }
+.@{fa-css-prefix}-cut:before,
+.@{fa-css-prefix}-scissors:before { content: @fa-var-scissors; }
+.@{fa-css-prefix}-copy:before,
+.@{fa-css-prefix}-files-o:before { content: @fa-var-files-o; }
+.@{fa-css-prefix}-paperclip:before { content: @fa-var-paperclip; }
+.@{fa-css-prefix}-save:before,
+.@{fa-css-prefix}-floppy-o:before { content: @fa-var-floppy-o; }
+.@{fa-css-prefix}-square:before { content: @fa-var-square; }
+.@{fa-css-prefix}-navicon:before,
+.@{fa-css-prefix}-reorder:before,
+.@{fa-css-prefix}-bars:before { content: @fa-var-bars; }
+.@{fa-css-prefix}-list-ul:before { content: @fa-var-list-ul; }
+.@{fa-css-prefix}-list-ol:before { content: @fa-var-list-ol; }
+.@{fa-css-prefix}-strikethrough:before { content: @fa-var-strikethrough; }
+.@{fa-css-prefix}-underline:before { content: @fa-var-underline; }
+.@{fa-css-prefix}-table:before { content: @fa-var-table; }
+.@{fa-css-prefix}-magic:before { content: @fa-var-magic; }
+.@{fa-css-prefix}-truck:before { content: @fa-var-truck; }
+.@{fa-css-prefix}-pinterest:before { content: @fa-var-pinterest; }
+.@{fa-css-prefix}-pinterest-square:before { content: @fa-var-pinterest-square; }
+.@{fa-css-prefix}-google-plus-square:before { content: @fa-var-google-plus-square; }
+.@{fa-css-prefix}-google-plus:before { content: @fa-var-google-plus; }
+.@{fa-css-prefix}-money:before { content: @fa-var-money; }
+.@{fa-css-prefix}-caret-down:before { content: @fa-var-caret-down; }
+.@{fa-css-prefix}-caret-up:before { content: @fa-var-caret-up; }
+.@{fa-css-prefix}-caret-left:before { content: @fa-var-caret-left; }
+.@{fa-css-prefix}-caret-right:before { content: @fa-var-caret-right; }
+.@{fa-css-prefix}-columns:before { content: @fa-var-columns; }
+.@{fa-css-prefix}-unsorted:before,
+.@{fa-css-prefix}-sort:before { content: @fa-var-sort; }
+.@{fa-css-prefix}-sort-down:before,
+.@{fa-css-prefix}-sort-desc:before { content: @fa-var-sort-desc; }
+.@{fa-css-prefix}-sort-up:before,
+.@{fa-css-prefix}-sort-asc:before { content: @fa-var-sort-asc; }
+.@{fa-css-prefix}-envelope:before { content: @fa-var-envelope; }
+.@{fa-css-prefix}-linkedin:before { content: @fa-var-linkedin; }
+.@{fa-css-prefix}-rotate-left:before,
+.@{fa-css-prefix}-undo:before { content: @fa-var-undo; }
+.@{fa-css-prefix}-legal:before,
+.@{fa-css-prefix}-gavel:before { content: @fa-var-gavel; }
+.@{fa-css-prefix}-dashboard:before,
+.@{fa-css-prefix}-tachometer:before { content: @fa-var-tachometer; }
+.@{fa-css-prefix}-comment-o:before { content: @fa-var-comment-o; }
+.@{fa-css-prefix}-comments-o:before { content: @fa-var-comments-o; }
+.@{fa-css-prefix}-flash:before,
+.@{fa-css-prefix}-bolt:before { content: @fa-var-bolt; }
+.@{fa-css-prefix}-sitemap:before { content: @fa-var-sitemap; }
+.@{fa-css-prefix}-umbrella:before { content: @fa-var-umbrella; }
+.@{fa-css-prefix}-paste:before,
+.@{fa-css-prefix}-clipboard:before { content: @fa-var-clipboard; }
+.@{fa-css-prefix}-lightbulb-o:before { content: @fa-var-lightbulb-o; }
+.@{fa-css-prefix}-exchange:before { content: @fa-var-exchange; }
+.@{fa-css-prefix}-cloud-download:before { content: @fa-var-cloud-download; }
+.@{fa-css-prefix}-cloud-upload:before { content: @fa-var-cloud-upload; }
+.@{fa-css-prefix}-user-md:before { content: @fa-var-user-md; }
+.@{fa-css-prefix}-stethoscope:before { content: @fa-var-stethoscope; }
+.@{fa-css-prefix}-suitcase:before { content: @fa-var-suitcase; }
+.@{fa-css-prefix}-bell-o:before { content: @fa-var-bell-o; }
+.@{fa-css-prefix}-coffee:before { content: @fa-var-coffee; }
+.@{fa-css-prefix}-cutlery:before { content: @fa-var-cutlery; }
+.@{fa-css-prefix}-file-text-o:before { content: @fa-var-file-text-o; }
+.@{fa-css-prefix}-building-o:before { content: @fa-var-building-o; }
+.@{fa-css-prefix}-hospital-o:before { content: @fa-var-hospital-o; }
+.@{fa-css-prefix}-ambulance:before { content: @fa-var-ambulance; }
+.@{fa-css-prefix}-medkit:before { content: @fa-var-medkit; }
+.@{fa-css-prefix}-fighter-jet:before { content: @fa-var-fighter-jet; }
+.@{fa-css-prefix}-beer:before { content: @fa-var-beer; }
+.@{fa-css-prefix}-h-square:before { content: @fa-var-h-square; }
+.@{fa-css-prefix}-plus-square:before { content: @fa-var-plus-square; }
+.@{fa-css-prefix}-angle-double-left:before { content: @fa-var-angle-double-left; }
+.@{fa-css-prefix}-angle-double-right:before { content: @fa-var-angle-double-right; }
+.@{fa-css-prefix}-angle-double-up:before { content: @fa-var-angle-double-up; }
+.@{fa-css-prefix}-angle-double-down:before { content: @fa-var-angle-double-down; }
+.@{fa-css-prefix}-angle-left:before { content: @fa-var-angle-left; }
+.@{fa-css-prefix}-angle-right:before { content: @fa-var-angle-right; }
+.@{fa-css-prefix}-angle-up:before { content: @fa-var-angle-up; }
+.@{fa-css-prefix}-angle-down:before { content: @fa-var-angle-down; }
+.@{fa-css-prefix}-desktop:before { content: @fa-var-desktop; }
+.@{fa-css-prefix}-laptop:before { content: @fa-var-laptop; }
+.@{fa-css-prefix}-tablet:before { content: @fa-var-tablet; }
+.@{fa-css-prefix}-mobile-phone:before,
+.@{fa-css-prefix}-mobile:before { content: @fa-var-mobile; }
+.@{fa-css-prefix}-circle-o:before { content: @fa-var-circle-o; }
+.@{fa-css-prefix}-quote-left:before { content: @fa-var-quote-left; }
+.@{fa-css-prefix}-quote-right:before { content: @fa-var-quote-right; }
+.@{fa-css-prefix}-spinner:before { content: @fa-var-spinner; }
+.@{fa-css-prefix}-circle:before { content: @fa-var-circle; }
+.@{fa-css-prefix}-mail-reply:before,
+.@{fa-css-prefix}-reply:before { content: @fa-var-reply; }
+.@{fa-css-prefix}-github-alt:before { content: @fa-var-github-alt; }
+.@{fa-css-prefix}-folder-o:before { content: @fa-var-folder-o; }
+.@{fa-css-prefix}-folder-open-o:before { content: @fa-var-folder-open-o; }
+.@{fa-css-prefix}-smile-o:before { content: @fa-var-smile-o; }
+.@{fa-css-prefix}-frown-o:before { content: @fa-var-frown-o; }
+.@{fa-css-prefix}-meh-o:before { content: @fa-var-meh-o; }
+.@{fa-css-prefix}-gamepad:before { content: @fa-var-gamepad; }
+.@{fa-css-prefix}-keyboard-o:before { content: @fa-var-keyboard-o; }
+.@{fa-css-prefix}-flag-o:before { content: @fa-var-flag-o; }
+.@{fa-css-prefix}-flag-checkered:before { content: @fa-var-flag-checkered; }
+.@{fa-css-prefix}-terminal:before { content: @fa-var-terminal; }
+.@{fa-css-prefix}-code:before { content: @fa-var-code; }
+.@{fa-css-prefix}-mail-reply-all:before,
+.@{fa-css-prefix}-reply-all:before { content: @fa-var-reply-all; }
+.@{fa-css-prefix}-star-half-empty:before,
+.@{fa-css-prefix}-star-half-full:before,
+.@{fa-css-prefix}-star-half-o:before { content: @fa-var-star-half-o; }
+.@{fa-css-prefix}-location-arrow:before { content: @fa-var-location-arrow; }
+.@{fa-css-prefix}-crop:before { content: @fa-var-crop; }
+.@{fa-css-prefix}-code-fork:before { content: @fa-var-code-fork; }
+.@{fa-css-prefix}-unlink:before,
+.@{fa-css-prefix}-chain-broken:before { content: @fa-var-chain-broken; }
+.@{fa-css-prefix}-question:before { content: @fa-var-question; }
+.@{fa-css-prefix}-info:before { content: @fa-var-info; }
+.@{fa-css-prefix}-exclamation:before { content: @fa-var-exclamation; }
+.@{fa-css-prefix}-superscript:before { content: @fa-var-superscript; }
+.@{fa-css-prefix}-subscript:before { content: @fa-var-subscript; }
+.@{fa-css-prefix}-eraser:before { content: @fa-var-eraser; }
+.@{fa-css-prefix}-puzzle-piece:before { content: @fa-var-puzzle-piece; }
+.@{fa-css-prefix}-microphone:before { content: @fa-var-microphone; }
+.@{fa-css-prefix}-microphone-slash:before { content: @fa-var-microphone-slash; }
+.@{fa-css-prefix}-shield:before { content: @fa-var-shield; }
+.@{fa-css-prefix}-calendar-o:before { content: @fa-var-calendar-o; }
+.@{fa-css-prefix}-fire-extinguisher:before { content: @fa-var-fire-extinguisher; }
+.@{fa-css-prefix}-rocket:before { content: @fa-var-rocket; }
+.@{fa-css-prefix}-maxcdn:before { content: @fa-var-maxcdn; }
+.@{fa-css-prefix}-chevron-circle-left:before { content: @fa-var-chevron-circle-left; }
+.@{fa-css-prefix}-chevron-circle-right:before { content: @fa-var-chevron-circle-right; }
+.@{fa-css-prefix}-chevron-circle-up:before { content: @fa-var-chevron-circle-up; }
+.@{fa-css-prefix}-chevron-circle-down:before { content: @fa-var-chevron-circle-down; }
+.@{fa-css-prefix}-html5:before { content: @fa-var-html5; }
+.@{fa-css-prefix}-css3:before { content: @fa-var-css3; }
+.@{fa-css-prefix}-anchor:before { content: @fa-var-anchor; }
+.@{fa-css-prefix}-unlock-alt:before { content: @fa-var-unlock-alt; }
+.@{fa-css-prefix}-bullseye:before { content: @fa-var-bullseye; }
+.@{fa-css-prefix}-ellipsis-h:before { content: @fa-var-ellipsis-h; }
+.@{fa-css-prefix}-ellipsis-v:before { content: @fa-var-ellipsis-v; }
+.@{fa-css-prefix}-rss-square:before { content: @fa-var-rss-square; }
+.@{fa-css-prefix}-play-circle:before { content: @fa-var-play-circle; }
+.@{fa-css-prefix}-ticket:before { content: @fa-var-ticket; }
+.@{fa-css-prefix}-minus-square:before { content: @fa-var-minus-square; }
+.@{fa-css-prefix}-minus-square-o:before { content: @fa-var-minus-square-o; }
+.@{fa-css-prefix}-level-up:before { content: @fa-var-level-up; }
+.@{fa-css-prefix}-level-down:before { content: @fa-var-level-down; }
+.@{fa-css-prefix}-check-square:before { content: @fa-var-check-square; }
+.@{fa-css-prefix}-pencil-square:before { content: @fa-var-pencil-square; }
+.@{fa-css-prefix}-external-link-square:before { content: @fa-var-external-link-square; }
+.@{fa-css-prefix}-share-square:before { content: @fa-var-share-square; }
+.@{fa-css-prefix}-compass:before { content: @fa-var-compass; }
+.@{fa-css-prefix}-toggle-down:before,
+.@{fa-css-prefix}-caret-square-o-down:before { content: @fa-var-caret-square-o-down; }
+.@{fa-css-prefix}-toggle-up:before,
+.@{fa-css-prefix}-caret-square-o-up:before { content: @fa-var-caret-square-o-up; }
+.@{fa-css-prefix}-toggle-right:before,
+.@{fa-css-prefix}-caret-square-o-right:before { content: @fa-var-caret-square-o-right; }
+.@{fa-css-prefix}-euro:before,
+.@{fa-css-prefix}-eur:before { content: @fa-var-eur; }
+.@{fa-css-prefix}-gbp:before { content: @fa-var-gbp; }
+.@{fa-css-prefix}-dollar:before,
+.@{fa-css-prefix}-usd:before { content: @fa-var-usd; }
+.@{fa-css-prefix}-rupee:before,
+.@{fa-css-prefix}-inr:before { content: @fa-var-inr; }
+.@{fa-css-prefix}-cny:before,
+.@{fa-css-prefix}-rmb:before,
+.@{fa-css-prefix}-yen:before,
+.@{fa-css-prefix}-jpy:before { content: @fa-var-jpy; }
+.@{fa-css-prefix}-ruble:before,
+.@{fa-css-prefix}-rouble:before,
+.@{fa-css-prefix}-rub:before { content: @fa-var-rub; }
+.@{fa-css-prefix}-won:before,
+.@{fa-css-prefix}-krw:before { content: @fa-var-krw; }
+.@{fa-css-prefix}-bitcoin:before,
+.@{fa-css-prefix}-btc:before { content: @fa-var-btc; }
+.@{fa-css-prefix}-file:before { content: @fa-var-file; }
+.@{fa-css-prefix}-file-text:before { content: @fa-var-file-text; }
+.@{fa-css-prefix}-sort-alpha-asc:before { content: @fa-var-sort-alpha-asc; }
+.@{fa-css-prefix}-sort-alpha-desc:before { content: @fa-var-sort-alpha-desc; }
+.@{fa-css-prefix}-sort-amount-asc:before { content: @fa-var-sort-amount-asc; }
+.@{fa-css-prefix}-sort-amount-desc:before { content: @fa-var-sort-amount-desc; }
+.@{fa-css-prefix}-sort-numeric-asc:before { content: @fa-var-sort-numeric-asc; }
+.@{fa-css-prefix}-sort-numeric-desc:before { content: @fa-var-sort-numeric-desc; }
+.@{fa-css-prefix}-thumbs-up:before { content: @fa-var-thumbs-up; }
+.@{fa-css-prefix}-thumbs-down:before { content: @fa-var-thumbs-down; }
+.@{fa-css-prefix}-youtube-square:before { content: @fa-var-youtube-square; }
+.@{fa-css-prefix}-youtube:before { content: @fa-var-youtube; }
+.@{fa-css-prefix}-xing:before { content: @fa-var-xing; }
+.@{fa-css-prefix}-xing-square:before { content: @fa-var-xing-square; }
+.@{fa-css-prefix}-youtube-play:before { content: @fa-var-youtube-play; }
+.@{fa-css-prefix}-dropbox:before { content: @fa-var-dropbox; }
+.@{fa-css-prefix}-stack-overflow:before { content: @fa-var-stack-overflow; }
+.@{fa-css-prefix}-instagram:before { content: @fa-var-instagram; }
+.@{fa-css-prefix}-flickr:before { content: @fa-var-flickr; }
+.@{fa-css-prefix}-adn:before { content: @fa-var-adn; }
+.@{fa-css-prefix}-bitbucket:before { content: @fa-var-bitbucket; }
+.@{fa-css-prefix}-bitbucket-square:before { content: @fa-var-bitbucket-square; }
+.@{fa-css-prefix}-tumblr:before { content: @fa-var-tumblr; }
+.@{fa-css-prefix}-tumblr-square:before { content: @fa-var-tumblr-square; }
+.@{fa-css-prefix}-long-arrow-down:before { content: @fa-var-long-arrow-down; }
+.@{fa-css-prefix}-long-arrow-up:before { content: @fa-var-long-arrow-up; }
+.@{fa-css-prefix}-long-arrow-left:before { content: @fa-var-long-arrow-left; }
+.@{fa-css-prefix}-long-arrow-right:before { content: @fa-var-long-arrow-right; }
+.@{fa-css-prefix}-apple:before { content: @fa-var-apple; }
+.@{fa-css-prefix}-windows:before { content: @fa-var-windows; }
+.@{fa-css-prefix}-android:before { content: @fa-var-android; }
+.@{fa-css-prefix}-linux:before { content: @fa-var-linux; }
+.@{fa-css-prefix}-dribbble:before { content: @fa-var-dribbble; }
+.@{fa-css-prefix}-skype:before { content: @fa-var-skype; }
+.@{fa-css-prefix}-foursquare:before { content: @fa-var-foursquare; }
+.@{fa-css-prefix}-trello:before { content: @fa-var-trello; }
+.@{fa-css-prefix}-female:before { content: @fa-var-female; }
+.@{fa-css-prefix}-male:before { content: @fa-var-male; }
+.@{fa-css-prefix}-gittip:before,
+.@{fa-css-prefix}-gratipay:before { content: @fa-var-gratipay; }
+.@{fa-css-prefix}-sun-o:before { content: @fa-var-sun-o; }
+.@{fa-css-prefix}-moon-o:before { content: @fa-var-moon-o; }
+.@{fa-css-prefix}-archive:before { content: @fa-var-archive; }
+.@{fa-css-prefix}-bug:before { content: @fa-var-bug; }
+.@{fa-css-prefix}-vk:before { content: @fa-var-vk; }
+.@{fa-css-prefix}-weibo:before { content: @fa-var-weibo; }
+.@{fa-css-prefix}-renren:before { content: @fa-var-renren; }
+.@{fa-css-prefix}-pagelines:before { content: @fa-var-pagelines; }
+.@{fa-css-prefix}-stack-exchange:before { content: @fa-var-stack-exchange; }
+.@{fa-css-prefix}-arrow-circle-o-right:before { content: @fa-var-arrow-circle-o-right; }
+.@{fa-css-prefix}-arrow-circle-o-left:before { content: @fa-var-arrow-circle-o-left; }
+.@{fa-css-prefix}-toggle-left:before,
+.@{fa-css-prefix}-caret-square-o-left:before { content: @fa-var-caret-square-o-left; }
+.@{fa-css-prefix}-dot-circle-o:before { content: @fa-var-dot-circle-o; }
+.@{fa-css-prefix}-wheelchair:before { content: @fa-var-wheelchair; }
+.@{fa-css-prefix}-vimeo-square:before { content: @fa-var-vimeo-square; }
+.@{fa-css-prefix}-turkish-lira:before,
+.@{fa-css-prefix}-try:before { content: @fa-var-try; }
+.@{fa-css-prefix}-plus-square-o:before { content: @fa-var-plus-square-o; }
+.@{fa-css-prefix}-space-shuttle:before { content: @fa-var-space-shuttle; }
+.@{fa-css-prefix}-slack:before { content: @fa-var-slack; }
+.@{fa-css-prefix}-envelope-square:before { content: @fa-var-envelope-square; }
+.@{fa-css-prefix}-wordpress:before { content: @fa-var-wordpress; }
+.@{fa-css-prefix}-openid:before { content: @fa-var-openid; }
+.@{fa-css-prefix}-institution:before,
+.@{fa-css-prefix}-bank:before,
+.@{fa-css-prefix}-university:before { content: @fa-var-university; }
+.@{fa-css-prefix}-mortar-board:before,
+.@{fa-css-prefix}-graduation-cap:before { content: @fa-var-graduation-cap; }
+.@{fa-css-prefix}-yahoo:before { content: @fa-var-yahoo; }
+.@{fa-css-prefix}-google:before { content: @fa-var-google; }
+.@{fa-css-prefix}-reddit:before { content: @fa-var-reddit; }
+.@{fa-css-prefix}-reddit-square:before { content: @fa-var-reddit-square; }
+.@{fa-css-prefix}-stumbleupon-circle:before { content: @fa-var-stumbleupon-circle; }
+.@{fa-css-prefix}-stumbleupon:before { content: @fa-var-stumbleupon; }
+.@{fa-css-prefix}-delicious:before { content: @fa-var-delicious; }
+.@{fa-css-prefix}-digg:before { content: @fa-var-digg; }
+.@{fa-css-prefix}-pied-piper:before { content: @fa-var-pied-piper; }
+.@{fa-css-prefix}-pied-piper-alt:before { content: @fa-var-pied-piper-alt; }
+.@{fa-css-prefix}-drupal:before { content: @fa-var-drupal; }
+.@{fa-css-prefix}-joomla:before { content: @fa-var-joomla; }
+.@{fa-css-prefix}-language:before { content: @fa-var-language; }
+.@{fa-css-prefix}-fax:before { content: @fa-var-fax; }
+.@{fa-css-prefix}-building:before { content: @fa-var-building; }
+.@{fa-css-prefix}-child:before { content: @fa-var-child; }
+.@{fa-css-prefix}-paw:before { content: @fa-var-paw; }
+.@{fa-css-prefix}-spoon:before { content: @fa-var-spoon; }
+.@{fa-css-prefix}-cube:before { content: @fa-var-cube; }
+.@{fa-css-prefix}-cubes:before { content: @fa-var-cubes; }
+.@{fa-css-prefix}-behance:before { content: @fa-var-behance; }
+.@{fa-css-prefix}-behance-square:before { content: @fa-var-behance-square; }
+.@{fa-css-prefix}-steam:before { content: @fa-var-steam; }
+.@{fa-css-prefix}-steam-square:before { content: @fa-var-steam-square; }
+.@{fa-css-prefix}-recycle:before { content: @fa-var-recycle; }
+.@{fa-css-prefix}-automobile:before,
+.@{fa-css-prefix}-car:before { content: @fa-var-car; }
+.@{fa-css-prefix}-cab:before,
+.@{fa-css-prefix}-taxi:before { content: @fa-var-taxi; }
+.@{fa-css-prefix}-tree:before { content: @fa-var-tree; }
+.@{fa-css-prefix}-spotify:before { content: @fa-var-spotify; }
+.@{fa-css-prefix}-deviantart:before { content: @fa-var-deviantart; }
+.@{fa-css-prefix}-soundcloud:before { content: @fa-var-soundcloud; }
+.@{fa-css-prefix}-database:before { content: @fa-var-database; }
+.@{fa-css-prefix}-file-pdf-o:before { content: @fa-var-file-pdf-o; }
+.@{fa-css-prefix}-file-word-o:before { content: @fa-var-file-word-o; }
+.@{fa-css-prefix}-file-excel-o:before { content: @fa-var-file-excel-o; }
+.@{fa-css-prefix}-file-powerpoint-o:before { content: @fa-var-file-powerpoint-o; }
+.@{fa-css-prefix}-file-photo-o:before,
+.@{fa-css-prefix}-file-picture-o:before,
+.@{fa-css-prefix}-file-image-o:before { content: @fa-var-file-image-o; }
+.@{fa-css-prefix}-file-zip-o:before,
+.@{fa-css-prefix}-file-archive-o:before { content: @fa-var-file-archive-o; }
+.@{fa-css-prefix}-file-sound-o:before,
+.@{fa-css-prefix}-file-audio-o:before { content: @fa-var-file-audio-o; }
+.@{fa-css-prefix}-file-movie-o:before,
+.@{fa-css-prefix}-file-video-o:before { content: @fa-var-file-video-o; }
+.@{fa-css-prefix}-file-code-o:before { content: @fa-var-file-code-o; }
+.@{fa-css-prefix}-vine:before { content: @fa-var-vine; }
+.@{fa-css-prefix}-codepen:before { content: @fa-var-codepen; }
+.@{fa-css-prefix}-jsfiddle:before { content: @fa-var-jsfiddle; }
+.@{fa-css-prefix}-life-bouy:before,
+.@{fa-css-prefix}-life-buoy:before,
+.@{fa-css-prefix}-life-saver:before,
+.@{fa-css-prefix}-support:before,
+.@{fa-css-prefix}-life-ring:before { content: @fa-var-life-ring; }
+.@{fa-css-prefix}-circle-o-notch:before { content: @fa-var-circle-o-notch; }
+.@{fa-css-prefix}-ra:before,
+.@{fa-css-prefix}-rebel:before { content: @fa-var-rebel; }
+.@{fa-css-prefix}-ge:before,
+.@{fa-css-prefix}-empire:before { content: @fa-var-empire; }
+.@{fa-css-prefix}-git-square:before { content: @fa-var-git-square; }
+.@{fa-css-prefix}-git:before { content: @fa-var-git; }
+.@{fa-css-prefix}-hacker-news:before { content: @fa-var-hacker-news; }
+.@{fa-css-prefix}-tencent-weibo:before { content: @fa-var-tencent-weibo; }
+.@{fa-css-prefix}-qq:before { content: @fa-var-qq; }
+.@{fa-css-prefix}-wechat:before,
+.@{fa-css-prefix}-weixin:before { content: @fa-var-weixin; }
+.@{fa-css-prefix}-send:before,
+.@{fa-css-prefix}-paper-plane:before { content: @fa-var-paper-plane; }
+.@{fa-css-prefix}-send-o:before,
+.@{fa-css-prefix}-paper-plane-o:before { content: @fa-var-paper-plane-o; }
+.@{fa-css-prefix}-history:before { content: @fa-var-history; }
+.@{fa-css-prefix}-genderless:before,
+.@{fa-css-prefix}-circle-thin:before { content: @fa-var-circle-thin; }
+.@{fa-css-prefix}-header:before { content: @fa-var-header; }
+.@{fa-css-prefix}-paragraph:before { content: @fa-var-paragraph; }
+.@{fa-css-prefix}-sliders:before { content: @fa-var-sliders; }
+.@{fa-css-prefix}-share-alt:before { content: @fa-var-share-alt; }
+.@{fa-css-prefix}-share-alt-square:before { content: @fa-var-share-alt-square; }
+.@{fa-css-prefix}-bomb:before { content: @fa-var-bomb; }
+.@{fa-css-prefix}-soccer-ball-o:before,
+.@{fa-css-prefix}-futbol-o:before { content: @fa-var-futbol-o; }
+.@{fa-css-prefix}-tty:before { content: @fa-var-tty; }
+.@{fa-css-prefix}-binoculars:before { content: @fa-var-binoculars; }
+.@{fa-css-prefix}-plug:before { content: @fa-var-plug; }
+.@{fa-css-prefix}-slideshare:before { content: @fa-var-slideshare; }
+.@{fa-css-prefix}-twitch:before { content: @fa-var-twitch; }
+.@{fa-css-prefix}-yelp:before { content: @fa-var-yelp; }
+.@{fa-css-prefix}-newspaper-o:before { content: @fa-var-newspaper-o; }
+.@{fa-css-prefix}-wifi:before { content: @fa-var-wifi; }
+.@{fa-css-prefix}-calculator:before { content: @fa-var-calculator; }
+.@{fa-css-prefix}-paypal:before { content: @fa-var-paypal; }
+.@{fa-css-prefix}-google-wallet:before { content: @fa-var-google-wallet; }
+.@{fa-css-prefix}-cc-visa:before { content: @fa-var-cc-visa; }
+.@{fa-css-prefix}-cc-mastercard:before { content: @fa-var-cc-mastercard; }
+.@{fa-css-prefix}-cc-discover:before { content: @fa-var-cc-discover; }
+.@{fa-css-prefix}-cc-amex:before { content: @fa-var-cc-amex; }
+.@{fa-css-prefix}-cc-paypal:before { content: @fa-var-cc-paypal; }
+.@{fa-css-prefix}-cc-stripe:before { content: @fa-var-cc-stripe; }
+.@{fa-css-prefix}-bell-slash:before { content: @fa-var-bell-slash; }
+.@{fa-css-prefix}-bell-slash-o:before { content: @fa-var-bell-slash-o; }
+.@{fa-css-prefix}-trash:before { content: @fa-var-trash; }
+.@{fa-css-prefix}-copyright:before { content: @fa-var-copyright; }
+.@{fa-css-prefix}-at:before { content: @fa-var-at; }
+.@{fa-css-prefix}-eyedropper:before { content: @fa-var-eyedropper; }
+.@{fa-css-prefix}-paint-brush:before { content: @fa-var-paint-brush; }
+.@{fa-css-prefix}-birthday-cake:before { content: @fa-var-birthday-cake; }
+.@{fa-css-prefix}-area-chart:before { content: @fa-var-area-chart; }
+.@{fa-css-prefix}-pie-chart:before { content: @fa-var-pie-chart; }
+.@{fa-css-prefix}-line-chart:before { content: @fa-var-line-chart; }
+.@{fa-css-prefix}-lastfm:before { content: @fa-var-lastfm; }
+.@{fa-css-prefix}-lastfm-square:before { content: @fa-var-lastfm-square; }
+.@{fa-css-prefix}-toggle-off:before { content: @fa-var-toggle-off; }
+.@{fa-css-prefix}-toggle-on:before { content: @fa-var-toggle-on; }
+.@{fa-css-prefix}-bicycle:before { content: @fa-var-bicycle; }
+.@{fa-css-prefix}-bus:before { content: @fa-var-bus; }
+.@{fa-css-prefix}-ioxhost:before { content: @fa-var-ioxhost; }
+.@{fa-css-prefix}-angellist:before { content: @fa-var-angellist; }
+.@{fa-css-prefix}-cc:before { content: @fa-var-cc; }
+.@{fa-css-prefix}-shekel:before,
+.@{fa-css-prefix}-sheqel:before,
+.@{fa-css-prefix}-ils:before { content: @fa-var-ils; }
+.@{fa-css-prefix}-meanpath:before { content: @fa-var-meanpath; }
+.@{fa-css-prefix}-buysellads:before { content: @fa-var-buysellads; }
+.@{fa-css-prefix}-connectdevelop:before { content: @fa-var-connectdevelop; }
+.@{fa-css-prefix}-dashcube:before { content: @fa-var-dashcube; }
+.@{fa-css-prefix}-forumbee:before { content: @fa-var-forumbee; }
+.@{fa-css-prefix}-leanpub:before { content: @fa-var-leanpub; }
+.@{fa-css-prefix}-sellsy:before { content: @fa-var-sellsy; }
+.@{fa-css-prefix}-shirtsinbulk:before { content: @fa-var-shirtsinbulk; }
+.@{fa-css-prefix}-simplybuilt:before { content: @fa-var-simplybuilt; }
+.@{fa-css-prefix}-skyatlas:before { content: @fa-var-skyatlas; }
+.@{fa-css-prefix}-cart-plus:before { content: @fa-var-cart-plus; }
+.@{fa-css-prefix}-cart-arrow-down:before { content: @fa-var-cart-arrow-down; }
+.@{fa-css-prefix}-diamond:before { content: @fa-var-diamond; }
+.@{fa-css-prefix}-ship:before { content: @fa-var-ship; }
+.@{fa-css-prefix}-user-secret:before { content: @fa-var-user-secret; }
+.@{fa-css-prefix}-motorcycle:before { content: @fa-var-motorcycle; }
+.@{fa-css-prefix}-street-view:before { content: @fa-var-street-view; }
+.@{fa-css-prefix}-heartbeat:before { content: @fa-var-heartbeat; }
+.@{fa-css-prefix}-venus:before { content: @fa-var-venus; }
+.@{fa-css-prefix}-mars:before { content: @fa-var-mars; }
+.@{fa-css-prefix}-mercury:before { content: @fa-var-mercury; }
+.@{fa-css-prefix}-transgender:before { content: @fa-var-transgender; }
+.@{fa-css-prefix}-transgender-alt:before { content: @fa-var-transgender-alt; }
+.@{fa-css-prefix}-venus-double:before { content: @fa-var-venus-double; }
+.@{fa-css-prefix}-mars-double:before { content: @fa-var-mars-double; }
+.@{fa-css-prefix}-venus-mars:before { content: @fa-var-venus-mars; }
+.@{fa-css-prefix}-mars-stroke:before { content: @fa-var-mars-stroke; }
+.@{fa-css-prefix}-mars-stroke-v:before { content: @fa-var-mars-stroke-v; }
+.@{fa-css-prefix}-mars-stroke-h:before { content: @fa-var-mars-stroke-h; }
+.@{fa-css-prefix}-neuter:before { content: @fa-var-neuter; }
+.@{fa-css-prefix}-facebook-official:before { content: @fa-var-facebook-official; }
+.@{fa-css-prefix}-pinterest-p:before { content: @fa-var-pinterest-p; }
+.@{fa-css-prefix}-whatsapp:before { content: @fa-var-whatsapp; }
+.@{fa-css-prefix}-server:before { content: @fa-var-server; }
+.@{fa-css-prefix}-user-plus:before { content: @fa-var-user-plus; }
+.@{fa-css-prefix}-user-times:before { content: @fa-var-user-times; }
+.@{fa-css-prefix}-hotel:before,
+.@{fa-css-prefix}-bed:before { content: @fa-var-bed; }
+.@{fa-css-prefix}-viacoin:before { content: @fa-var-viacoin; }
+.@{fa-css-prefix}-train:before { content: @fa-var-train; }
+.@{fa-css-prefix}-subway:before { content: @fa-var-subway; }
+.@{fa-css-prefix}-medium:before { content: @fa-var-medium; }
--- /dev/null
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+ font-size: (4em / 3);
+ line-height: (3em / 4);
+ vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }
--- /dev/null
+// List Icons
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+ padding-left: 0;
+ margin-left: @fa-li-width;
+ list-style-type: none;
+ > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+ position: absolute;
+ left: -@fa-li-width;
+ width: @fa-li-width;
+ top: (2em / 14);
+ text-align: center;
+ &.@{fa-css-prefix}-lg {
+ left: (-@fa-li-width + (4em / 14));
+ }
+}
--- /dev/null
+// Mixins
+// --------------------------
+
+.fa-icon() {
+ display: inline-block;
+ font: normal normal normal @fa-font-size-base/1 FontAwesome; // shortening font declaration
+ font-size: inherit; // can't have font-size inherit on line above, so need to override
+ text-rendering: auto; // optimizelegibility throws things off #1094
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ transform: translate(0, 0); // ensures no half-pixel rendering in firefox
+
+}
+
+.fa-icon-rotate(@degrees, @rotation) {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
+ -webkit-transform: rotate(@degrees);
+ -ms-transform: rotate(@degrees);
+ transform: rotate(@degrees);
+}
+
+.fa-icon-flip(@horiz, @vert, @rotation) {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1);
+ -webkit-transform: scale(@horiz, @vert);
+ -ms-transform: scale(@horiz, @vert);
+ transform: scale(@horiz, @vert);
+}
--- /dev/null
+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+ font-family: 'FontAwesome';
+ src: url(${c:encodeURL('~./zul/less/font/fontawesome-webfont.eot?v=@{fa-version}')});
+ src: url(${c:encodeURL('~./zul/less/font/fontawesome-webfont.eot?#iefix&v=@{fa-version}')}) format('embedded-opentype'),
+ url(${c:encodeURL('~./zul/less/font/fontawesome-webfont.woff2?v=@{fa-version}')}) format('woff2'),
+ url(${c:encodeURL('~./zul/less/font/fontawesome-webfont.woff?v=@{fa-version}')}) format('woff'),
+ url(${c:encodeURL('~./zul/less/font/fontawesome-webfont.ttf?v=@{fa-version}')}) format('truetype'),
+ url(${c:encodeURL('~./zul/less/font/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular')}) format('svg');
+// src: url(${c:encodeURL('~./zul/less/font/FontAwesome.otf')}) format('opentype'); // used when developing fonts
+
+ font-weight: normal;
+ font-style: normal;
+}
--- /dev/null
+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
+.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .@{fa-css-prefix}-rotate-90,
+:root .@{fa-css-prefix}-rotate-180,
+:root .@{fa-css-prefix}-rotate-270,
+:root .@{fa-css-prefix}-flip-horizontal,
+:root .@{fa-css-prefix}-flip-vertical {
+ filter: none;
+}
--- /dev/null
+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+ position: relative;
+ display: inline-block;
+ width: 2em;
+ height: 2em;
+ line-height: 2em;
+ vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ text-align: center;
+}
+.@{fa-css-prefix}-stack-1x { line-height: inherit; }
+.@{fa-css-prefix}-stack-2x { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-inverse; }
--- /dev/null
+// Variables
+// --------------------------
+
+@fa-font-path: "../fonts";
+@fa-font-size-base: 14px;
+//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts"; // for referencing Bootstrap CDN font files directly
+@fa-css-prefix: z-icon;
+@fa-version: "4.3.0";
+@fa-border-color: #eee;
+@fa-inverse: #fff;
+@fa-li-width: (30em / 14);
+
+@fa-var-adjust: "\f042";
+@fa-var-adn: "\f170";
+@fa-var-align-center: "\f037";
+@fa-var-align-justify: "\f039";
+@fa-var-align-left: "\f036";
+@fa-var-align-right: "\f038";
+@fa-var-ambulance: "\f0f9";
+@fa-var-anchor: "\f13d";
+@fa-var-android: "\f17b";
+@fa-var-angellist: "\f209";
+@fa-var-angle-double-down: "\f103";
+@fa-var-angle-double-left: "\f100";
+@fa-var-angle-double-right: "\f101";
+@fa-var-angle-double-up: "\f102";
+@fa-var-angle-down: "\f107";
+@fa-var-angle-left: "\f104";
+@fa-var-angle-right: "\f105";
+@fa-var-angle-up: "\f106";
+@fa-var-apple: "\f179";
+@fa-var-archive: "\f187";
+@fa-var-area-chart: "\f1fe";
+@fa-var-arrow-circle-down: "\f0ab";
+@fa-var-arrow-circle-left: "\f0a8";
+@fa-var-arrow-circle-o-down: "\f01a";
+@fa-var-arrow-circle-o-left: "\f190";
+@fa-var-arrow-circle-o-right: "\f18e";
+@fa-var-arrow-circle-o-up: "\f01b";
+@fa-var-arrow-circle-right: "\f0a9";
+@fa-var-arrow-circle-up: "\f0aa";
+@fa-var-arrow-down: "\f063";
+@fa-var-arrow-left: "\f060";
+@fa-var-arrow-right: "\f061";
+@fa-var-arrow-up: "\f062";
+@fa-var-arrows: "\f047";
+@fa-var-arrows-alt: "\f0b2";
+@fa-var-arrows-h: "\f07e";
+@fa-var-arrows-v: "\f07d";
+@fa-var-asterisk: "\f069";
+@fa-var-at: "\f1fa";
+@fa-var-automobile: "\f1b9";
+@fa-var-backward: "\f04a";
+@fa-var-ban: "\f05e";
+@fa-var-bank: "\f19c";
+@fa-var-bar-chart: "\f080";
+@fa-var-bar-chart-o: "\f080";
+@fa-var-barcode: "\f02a";
+@fa-var-bars: "\f0c9";
+@fa-var-bed: "\f236";
+@fa-var-beer: "\f0fc";
+@fa-var-behance: "\f1b4";
+@fa-var-behance-square: "\f1b5";
+@fa-var-bell: "\f0f3";
+@fa-var-bell-o: "\f0a2";
+@fa-var-bell-slash: "\f1f6";
+@fa-var-bell-slash-o: "\f1f7";
+@fa-var-bicycle: "\f206";
+@fa-var-binoculars: "\f1e5";
+@fa-var-birthday-cake: "\f1fd";
+@fa-var-bitbucket: "\f171";
+@fa-var-bitbucket-square: "\f172";
+@fa-var-bitcoin: "\f15a";
+@fa-var-bold: "\f032";
+@fa-var-bolt: "\f0e7";
+@fa-var-bomb: "\f1e2";
+@fa-var-book: "\f02d";
+@fa-var-bookmark: "\f02e";
+@fa-var-bookmark-o: "\f097";
+@fa-var-briefcase: "\f0b1";
+@fa-var-btc: "\f15a";
+@fa-var-bug: "\f188";
+@fa-var-building: "\f1ad";
+@fa-var-building-o: "\f0f7";
+@fa-var-bullhorn: "\f0a1";
+@fa-var-bullseye: "\f140";
+@fa-var-bus: "\f207";
+@fa-var-buysellads: "\f20d";
+@fa-var-cab: "\f1ba";
+@fa-var-calculator: "\f1ec";
+@fa-var-calendar: "\f073";
+@fa-var-calendar-o: "\f133";
+@fa-var-camera: "\f030";
+@fa-var-camera-retro: "\f083";
+@fa-var-car: "\f1b9";
+@fa-var-caret-down: "\f0d7";
+@fa-var-caret-left: "\f0d9";
+@fa-var-caret-right: "\f0da";
+@fa-var-caret-square-o-down: "\f150";
+@fa-var-caret-square-o-left: "\f191";
+@fa-var-caret-square-o-right: "\f152";
+@fa-var-caret-square-o-up: "\f151";
+@fa-var-caret-up: "\f0d8";
+@fa-var-cart-arrow-down: "\f218";
+@fa-var-cart-plus: "\f217";
+@fa-var-cc: "\f20a";
+@fa-var-cc-amex: "\f1f3";
+@fa-var-cc-discover: "\f1f2";
+@fa-var-cc-mastercard: "\f1f1";
+@fa-var-cc-paypal: "\f1f4";
+@fa-var-cc-stripe: "\f1f5";
+@fa-var-cc-visa: "\f1f0";
+@fa-var-certificate: "\f0a3";
+@fa-var-chain: "\f0c1";
+@fa-var-chain-broken: "\f127";
+@fa-var-check: "\f00c";
+@fa-var-check-circle: "\f058";
+@fa-var-check-circle-o: "\f05d";
+@fa-var-check-square: "\f14a";
+@fa-var-check-square-o: "\f046";
+@fa-var-chevron-circle-down: "\f13a";
+@fa-var-chevron-circle-left: "\f137";
+@fa-var-chevron-circle-right: "\f138";
+@fa-var-chevron-circle-up: "\f139";
+@fa-var-chevron-down: "\f078";
+@fa-var-chevron-left: "\f053";
+@fa-var-chevron-right: "\f054";
+@fa-var-chevron-up: "\f077";
+@fa-var-child: "\f1ae";
+@fa-var-circle: "\f111";
+@fa-var-circle-o: "\f10c";
+@fa-var-circle-o-notch: "\f1ce";
+@fa-var-circle-thin: "\f1db";
+@fa-var-clipboard: "\f0ea";
+@fa-var-clock-o: "\f017";
+@fa-var-close: "\f00d";
+@fa-var-cloud: "\f0c2";
+@fa-var-cloud-download: "\f0ed";
+@fa-var-cloud-upload: "\f0ee";
+@fa-var-cny: "\f157";
+@fa-var-code: "\f121";
+@fa-var-code-fork: "\f126";
+@fa-var-codepen: "\f1cb";
+@fa-var-coffee: "\f0f4";
+@fa-var-cog: "\f013";
+@fa-var-cogs: "\f085";
+@fa-var-columns: "\f0db";
+@fa-var-comment: "\f075";
+@fa-var-comment-o: "\f0e5";
+@fa-var-comments: "\f086";
+@fa-var-comments-o: "\f0e6";
+@fa-var-compass: "\f14e";
+@fa-var-compress: "\f066";
+@fa-var-connectdevelop: "\f20e";
+@fa-var-copy: "\f0c5";
+@fa-var-copyright: "\f1f9";
+@fa-var-credit-card: "\f09d";
+@fa-var-crop: "\f125";
+@fa-var-crosshairs: "\f05b";
+@fa-var-css3: "\f13c";
+@fa-var-cube: "\f1b2";
+@fa-var-cubes: "\f1b3";
+@fa-var-cut: "\f0c4";
+@fa-var-cutlery: "\f0f5";
+@fa-var-dashboard: "\f0e4";
+@fa-var-dashcube: "\f210";
+@fa-var-database: "\f1c0";
+@fa-var-dedent: "\f03b";
+@fa-var-delicious: "\f1a5";
+@fa-var-desktop: "\f108";
+@fa-var-deviantart: "\f1bd";
+@fa-var-diamond: "\f219";
+@fa-var-digg: "\f1a6";
+@fa-var-dollar: "\f155";
+@fa-var-dot-circle-o: "\f192";
+@fa-var-download: "\f019";
+@fa-var-dribbble: "\f17d";
+@fa-var-dropbox: "\f16b";
+@fa-var-drupal: "\f1a9";
+@fa-var-edit: "\f044";
+@fa-var-eject: "\f052";
+@fa-var-ellipsis-h: "\f141";
+@fa-var-ellipsis-v: "\f142";
+@fa-var-empire: "\f1d1";
+@fa-var-envelope: "\f0e0";
+@fa-var-envelope-o: "\f003";
+@fa-var-envelope-square: "\f199";
+@fa-var-eraser: "\f12d";
+@fa-var-eur: "\f153";
+@fa-var-euro: "\f153";
+@fa-var-exchange: "\f0ec";
+@fa-var-exclamation: "\f12a";
+@fa-var-exclamation-circle: "\f06a";
+@fa-var-exclamation-triangle: "\f071";
+@fa-var-expand: "\f065";
+@fa-var-external-link: "\f08e";
+@fa-var-external-link-square: "\f14c";
+@fa-var-eye: "\f06e";
+@fa-var-eye-slash: "\f070";
+@fa-var-eyedropper: "\f1fb";
+@fa-var-facebook: "\f09a";
+@fa-var-facebook-f: "\f09a";
+@fa-var-facebook-official: "\f230";
+@fa-var-facebook-square: "\f082";
+@fa-var-fast-backward: "\f049";
+@fa-var-fast-forward: "\f050";
+@fa-var-fax: "\f1ac";
+@fa-var-female: "\f182";
+@fa-var-fighter-jet: "\f0fb";
+@fa-var-file: "\f15b";
+@fa-var-file-archive-o: "\f1c6";
+@fa-var-file-audio-o: "\f1c7";
+@fa-var-file-code-o: "\f1c9";
+@fa-var-file-excel-o: "\f1c3";
+@fa-var-file-image-o: "\f1c5";
+@fa-var-file-movie-o: "\f1c8";
+@fa-var-file-o: "\f016";
+@fa-var-file-pdf-o: "\f1c1";
+@fa-var-file-photo-o: "\f1c5";
+@fa-var-file-picture-o: "\f1c5";
+@fa-var-file-powerpoint-o: "\f1c4";
+@fa-var-file-sound-o: "\f1c7";
+@fa-var-file-text: "\f15c";
+@fa-var-file-text-o: "\f0f6";
+@fa-var-file-video-o: "\f1c8";
+@fa-var-file-word-o: "\f1c2";
+@fa-var-file-zip-o: "\f1c6";
+@fa-var-files-o: "\f0c5";
+@fa-var-film: "\f008";
+@fa-var-filter: "\f0b0";
+@fa-var-fire: "\f06d";
+@fa-var-fire-extinguisher: "\f134";
+@fa-var-flag: "\f024";
+@fa-var-flag-checkered: "\f11e";
+@fa-var-flag-o: "\f11d";
+@fa-var-flash: "\f0e7";
+@fa-var-flask: "\f0c3";
+@fa-var-flickr: "\f16e";
+@fa-var-floppy-o: "\f0c7";
+@fa-var-folder: "\f07b";
+@fa-var-folder-o: "\f114";
+@fa-var-folder-open: "\f07c";
+@fa-var-folder-open-o: "\f115";
+@fa-var-font: "\f031";
+@fa-var-forumbee: "\f211";
+@fa-var-forward: "\f04e";
+@fa-var-foursquare: "\f180";
+@fa-var-frown-o: "\f119";
+@fa-var-futbol-o: "\f1e3";
+@fa-var-gamepad: "\f11b";
+@fa-var-gavel: "\f0e3";
+@fa-var-gbp: "\f154";
+@fa-var-ge: "\f1d1";
+@fa-var-gear: "\f013";
+@fa-var-gears: "\f085";
+@fa-var-genderless: "\f1db";
+@fa-var-gift: "\f06b";
+@fa-var-git: "\f1d3";
+@fa-var-git-square: "\f1d2";
+@fa-var-github: "\f09b";
+@fa-var-github-alt: "\f113";
+@fa-var-github-square: "\f092";
+@fa-var-gittip: "\f184";
+@fa-var-glass: "\f000";
+@fa-var-globe: "\f0ac";
+@fa-var-google: "\f1a0";
+@fa-var-google-plus: "\f0d5";
+@fa-var-google-plus-square: "\f0d4";
+@fa-var-google-wallet: "\f1ee";
+@fa-var-graduation-cap: "\f19d";
+@fa-var-gratipay: "\f184";
+@fa-var-group: "\f0c0";
+@fa-var-h-square: "\f0fd";
+@fa-var-hacker-news: "\f1d4";
+@fa-var-hand-o-down: "\f0a7";
+@fa-var-hand-o-left: "\f0a5";
+@fa-var-hand-o-right: "\f0a4";
+@fa-var-hand-o-up: "\f0a6";
+@fa-var-hdd-o: "\f0a0";
+@fa-var-header: "\f1dc";
+@fa-var-headphones: "\f025";
+@fa-var-heart: "\f004";
+@fa-var-heart-o: "\f08a";
+@fa-var-heartbeat: "\f21e";
+@fa-var-history: "\f1da";
+@fa-var-home: "\f015";
+@fa-var-hospital-o: "\f0f8";
+@fa-var-hotel: "\f236";
+@fa-var-html5: "\f13b";
+@fa-var-ils: "\f20b";
+@fa-var-image: "\f03e";
+@fa-var-inbox: "\f01c";
+@fa-var-indent: "\f03c";
+@fa-var-info: "\f129";
+@fa-var-info-circle: "\f05a";
+@fa-var-inr: "\f156";
+@fa-var-instagram: "\f16d";
+@fa-var-institution: "\f19c";
+@fa-var-ioxhost: "\f208";
+@fa-var-italic: "\f033";
+@fa-var-joomla: "\f1aa";
+@fa-var-jpy: "\f157";
+@fa-var-jsfiddle: "\f1cc";
+@fa-var-key: "\f084";
+@fa-var-keyboard-o: "\f11c";
+@fa-var-krw: "\f159";
+@fa-var-language: "\f1ab";
+@fa-var-laptop: "\f109";
+@fa-var-lastfm: "\f202";
+@fa-var-lastfm-square: "\f203";
+@fa-var-leaf: "\f06c";
+@fa-var-leanpub: "\f212";
+@fa-var-legal: "\f0e3";
+@fa-var-lemon-o: "\f094";
+@fa-var-level-down: "\f149";
+@fa-var-level-up: "\f148";
+@fa-var-life-bouy: "\f1cd";
+@fa-var-life-buoy: "\f1cd";
+@fa-var-life-ring: "\f1cd";
+@fa-var-life-saver: "\f1cd";
+@fa-var-lightbulb-o: "\f0eb";
+@fa-var-line-chart: "\f201";
+@fa-var-link: "\f0c1";
+@fa-var-linkedin: "\f0e1";
+@fa-var-linkedin-square: "\f08c";
+@fa-var-linux: "\f17c";
+@fa-var-list: "\f03a";
+@fa-var-list-alt: "\f022";
+@fa-var-list-ol: "\f0cb";
+@fa-var-list-ul: "\f0ca";
+@fa-var-location-arrow: "\f124";
+@fa-var-lock: "\f023";
+@fa-var-long-arrow-down: "\f175";
+@fa-var-long-arrow-left: "\f177";
+@fa-var-long-arrow-right: "\f178";
+@fa-var-long-arrow-up: "\f176";
+@fa-var-magic: "\f0d0";
+@fa-var-magnet: "\f076";
+@fa-var-mail-forward: "\f064";
+@fa-var-mail-reply: "\f112";
+@fa-var-mail-reply-all: "\f122";
+@fa-var-male: "\f183";
+@fa-var-map-marker: "\f041";
+@fa-var-mars: "\f222";
+@fa-var-mars-double: "\f227";
+@fa-var-mars-stroke: "\f229";
+@fa-var-mars-stroke-h: "\f22b";
+@fa-var-mars-stroke-v: "\f22a";
+@fa-var-maxcdn: "\f136";
+@fa-var-meanpath: "\f20c";
+@fa-var-medium: "\f23a";
+@fa-var-medkit: "\f0fa";
+@fa-var-meh-o: "\f11a";
+@fa-var-mercury: "\f223";
+@fa-var-microphone: "\f130";
+@fa-var-microphone-slash: "\f131";
+@fa-var-minus: "\f068";
+@fa-var-minus-circle: "\f056";
+@fa-var-minus-square: "\f146";
+@fa-var-minus-square-o: "\f147";
+@fa-var-mobile: "\f10b";
+@fa-var-mobile-phone: "\f10b";
+@fa-var-money: "\f0d6";
+@fa-var-moon-o: "\f186";
+@fa-var-mortar-board: "\f19d";
+@fa-var-motorcycle: "\f21c";
+@fa-var-music: "\f001";
+@fa-var-navicon: "\f0c9";
+@fa-var-neuter: "\f22c";
+@fa-var-newspaper-o: "\f1ea";
+@fa-var-openid: "\f19b";
+@fa-var-outdent: "\f03b";
+@fa-var-pagelines: "\f18c";
+@fa-var-paint-brush: "\f1fc";
+@fa-var-paper-plane: "\f1d8";
+@fa-var-paper-plane-o: "\f1d9";
+@fa-var-paperclip: "\f0c6";
+@fa-var-paragraph: "\f1dd";
+@fa-var-paste: "\f0ea";
+@fa-var-pause: "\f04c";
+@fa-var-paw: "\f1b0";
+@fa-var-paypal: "\f1ed";
+@fa-var-pencil: "\f040";
+@fa-var-pencil-square: "\f14b";
+@fa-var-pencil-square-o: "\f044";
+@fa-var-phone: "\f095";
+@fa-var-phone-square: "\f098";
+@fa-var-photo: "\f03e";
+@fa-var-picture-o: "\f03e";
+@fa-var-pie-chart: "\f200";
+@fa-var-pied-piper: "\f1a7";
+@fa-var-pied-piper-alt: "\f1a8";
+@fa-var-pinterest: "\f0d2";
+@fa-var-pinterest-p: "\f231";
+@fa-var-pinterest-square: "\f0d3";
+@fa-var-plane: "\f072";
+@fa-var-play: "\f04b";
+@fa-var-play-circle: "\f144";
+@fa-var-play-circle-o: "\f01d";
+@fa-var-plug: "\f1e6";
+@fa-var-plus: "\f067";
+@fa-var-plus-circle: "\f055";
+@fa-var-plus-square: "\f0fe";
+@fa-var-plus-square-o: "\f196";
+@fa-var-power-off: "\f011";
+@fa-var-print: "\f02f";
+@fa-var-puzzle-piece: "\f12e";
+@fa-var-qq: "\f1d6";
+@fa-var-qrcode: "\f029";
+@fa-var-question: "\f128";
+@fa-var-question-circle: "\f059";
+@fa-var-quote-left: "\f10d";
+@fa-var-quote-right: "\f10e";
+@fa-var-ra: "\f1d0";
+@fa-var-random: "\f074";
+@fa-var-rebel: "\f1d0";
+@fa-var-recycle: "\f1b8";
+@fa-var-reddit: "\f1a1";
+@fa-var-reddit-square: "\f1a2";
+@fa-var-refresh: "\f021";
+@fa-var-remove: "\f00d";
+@fa-var-renren: "\f18b";
+@fa-var-reorder: "\f0c9";
+@fa-var-repeat: "\f01e";
+@fa-var-reply: "\f112";
+@fa-var-reply-all: "\f122";
+@fa-var-retweet: "\f079";
+@fa-var-rmb: "\f157";
+@fa-var-road: "\f018";
+@fa-var-rocket: "\f135";
+@fa-var-rotate-left: "\f0e2";
+@fa-var-rotate-right: "\f01e";
+@fa-var-rouble: "\f158";
+@fa-var-rss: "\f09e";
+@fa-var-rss-square: "\f143";
+@fa-var-rub: "\f158";
+@fa-var-ruble: "\f158";
+@fa-var-rupee: "\f156";
+@fa-var-save: "\f0c7";
+@fa-var-scissors: "\f0c4";
+@fa-var-search: "\f002";
+@fa-var-search-minus: "\f010";
+@fa-var-search-plus: "\f00e";
+@fa-var-sellsy: "\f213";
+@fa-var-send: "\f1d8";
+@fa-var-send-o: "\f1d9";
+@fa-var-server: "\f233";
+@fa-var-share: "\f064";
+@fa-var-share-alt: "\f1e0";
+@fa-var-share-alt-square: "\f1e1";
+@fa-var-share-square: "\f14d";
+@fa-var-share-square-o: "\f045";
+@fa-var-shekel: "\f20b";
+@fa-var-sheqel: "\f20b";
+@fa-var-shield: "\f132";
+@fa-var-ship: "\f21a";
+@fa-var-shirtsinbulk: "\f214";
+@fa-var-shopping-cart: "\f07a";
+@fa-var-sign-in: "\f090";
+@fa-var-sign-out: "\f08b";
+@fa-var-signal: "\f012";
+@fa-var-simplybuilt: "\f215";
+@fa-var-sitemap: "\f0e8";
+@fa-var-skyatlas: "\f216";
+@fa-var-skype: "\f17e";
+@fa-var-slack: "\f198";
+@fa-var-sliders: "\f1de";
+@fa-var-slideshare: "\f1e7";
+@fa-var-smile-o: "\f118";
+@fa-var-soccer-ball-o: "\f1e3";
+@fa-var-sort: "\f0dc";
+@fa-var-sort-alpha-asc: "\f15d";
+@fa-var-sort-alpha-desc: "\f15e";
+@fa-var-sort-amount-asc: "\f160";
+@fa-var-sort-amount-desc: "\f161";
+@fa-var-sort-asc: "\f0de";
+@fa-var-sort-desc: "\f0dd";
+@fa-var-sort-down: "\f0dd";
+@fa-var-sort-numeric-asc: "\f162";
+@fa-var-sort-numeric-desc: "\f163";
+@fa-var-sort-up: "\f0de";
+@fa-var-soundcloud: "\f1be";
+@fa-var-space-shuttle: "\f197";
+@fa-var-spinner: "\f110";
+@fa-var-spoon: "\f1b1";
+@fa-var-spotify: "\f1bc";
+@fa-var-square: "\f0c8";
+@fa-var-square-o: "\f096";
+@fa-var-stack-exchange: "\f18d";
+@fa-var-stack-overflow: "\f16c";
+@fa-var-star: "\f005";
+@fa-var-star-half: "\f089";
+@fa-var-star-half-empty: "\f123";
+@fa-var-star-half-full: "\f123";
+@fa-var-star-half-o: "\f123";
+@fa-var-star-o: "\f006";
+@fa-var-steam: "\f1b6";
+@fa-var-steam-square: "\f1b7";
+@fa-var-step-backward: "\f048";
+@fa-var-step-forward: "\f051";
+@fa-var-stethoscope: "\f0f1";
+@fa-var-stop: "\f04d";
+@fa-var-street-view: "\f21d";
+@fa-var-strikethrough: "\f0cc";
+@fa-var-stumbleupon: "\f1a4";
+@fa-var-stumbleupon-circle: "\f1a3";
+@fa-var-subscript: "\f12c";
+@fa-var-subway: "\f239";
+@fa-var-suitcase: "\f0f2";
+@fa-var-sun-o: "\f185";
+@fa-var-superscript: "\f12b";
+@fa-var-support: "\f1cd";
+@fa-var-table: "\f0ce";
+@fa-var-tablet: "\f10a";
+@fa-var-tachometer: "\f0e4";
+@fa-var-tag: "\f02b";
+@fa-var-tags: "\f02c";
+@fa-var-tasks: "\f0ae";
+@fa-var-taxi: "\f1ba";
+@fa-var-tencent-weibo: "\f1d5";
+@fa-var-terminal: "\f120";
+@fa-var-text-height: "\f034";
+@fa-var-text-width: "\f035";
+@fa-var-th: "\f00a";
+@fa-var-th-large: "\f009";
+@fa-var-th-list: "\f00b";
+@fa-var-thumb-tack: "\f08d";
+@fa-var-thumbs-down: "\f165";
+@fa-var-thumbs-o-down: "\f088";
+@fa-var-thumbs-o-up: "\f087";
+@fa-var-thumbs-up: "\f164";
+@fa-var-ticket: "\f145";
+@fa-var-times: "\f00d";
+@fa-var-times-circle: "\f057";
+@fa-var-times-circle-o: "\f05c";
+@fa-var-tint: "\f043";
+@fa-var-toggle-down: "\f150";
+@fa-var-toggle-left: "\f191";
+@fa-var-toggle-off: "\f204";
+@fa-var-toggle-on: "\f205";
+@fa-var-toggle-right: "\f152";
+@fa-var-toggle-up: "\f151";
+@fa-var-train: "\f238";
+@fa-var-transgender: "\f224";
+@fa-var-transgender-alt: "\f225";
+@fa-var-trash: "\f1f8";
+@fa-var-trash-o: "\f014";
+@fa-var-tree: "\f1bb";
+@fa-var-trello: "\f181";
+@fa-var-trophy: "\f091";
+@fa-var-truck: "\f0d1";
+@fa-var-try: "\f195";
+@fa-var-tty: "\f1e4";
+@fa-var-tumblr: "\f173";
+@fa-var-tumblr-square: "\f174";
+@fa-var-turkish-lira: "\f195";
+@fa-var-twitch: "\f1e8";
+@fa-var-twitter: "\f099";
+@fa-var-twitter-square: "\f081";
+@fa-var-umbrella: "\f0e9";
+@fa-var-underline: "\f0cd";
+@fa-var-undo: "\f0e2";
+@fa-var-university: "\f19c";
+@fa-var-unlink: "\f127";
+@fa-var-unlock: "\f09c";
+@fa-var-unlock-alt: "\f13e";
+@fa-var-unsorted: "\f0dc";
+@fa-var-upload: "\f093";
+@fa-var-usd: "\f155";
+@fa-var-user: "\f007";
+@fa-var-user-md: "\f0f0";
+@fa-var-user-plus: "\f234";
+@fa-var-user-secret: "\f21b";
+@fa-var-user-times: "\f235";
+@fa-var-users: "\f0c0";
+@fa-var-venus: "\f221";
+@fa-var-venus-double: "\f226";
+@fa-var-venus-mars: "\f228";
+@fa-var-viacoin: "\f237";
+@fa-var-video-camera: "\f03d";
+@fa-var-vimeo-square: "\f194";
+@fa-var-vine: "\f1ca";
+@fa-var-vk: "\f189";
+@fa-var-volume-down: "\f027";
+@fa-var-volume-off: "\f026";
+@fa-var-volume-up: "\f028";
+@fa-var-warning: "\f071";
+@fa-var-wechat: "\f1d7";
+@fa-var-weibo: "\f18a";
+@fa-var-weixin: "\f1d7";
+@fa-var-whatsapp: "\f232";
+@fa-var-wheelchair: "\f193";
+@fa-var-wifi: "\f1eb";
+@fa-var-windows: "\f17a";
+@fa-var-won: "\f159";
+@fa-var-wordpress: "\f19a";
+@fa-var-wrench: "\f0ad";
+@fa-var-xing: "\f168";
+@fa-var-xing-square: "\f169";
+@fa-var-yahoo: "\f19e";
+@fa-var-yelp: "\f1e9";
+@fa-var-yen: "\f157";
+@fa-var-youtube: "\f167";
+@fa-var-youtube-play: "\f16a";
+@fa-var-youtube-square: "\f166";
+
--- /dev/null
+@import "~./zul/less/_header.less";\r
+@import "~./zul/less/_reset.less";\r
+@import "~./zul/less/font/_all.less"; // Font-Awesome 3.1.1\r
+\r
+html, body {\r
+ height: 100%;\r
+ margin: 0;\r
+ padding: 0;\r
+}\r
+\r
+// affect ZK component only\r
+[class^="z-"],\r
+[class*=" z-"],\r
+[class^="z-"]:after,\r
+[class*=" z-"]:after,\r
+[class^="z-"]:before,\r
+[class*=" z-"]:before,\r
+.z-borderbox {\r
+ .applyCSS3('box-sizing', 'border-box');\r
+}\r
+\r
+// Reset\r
+input[type=number]::-webkit-inner-spin-button,\r
+input[type=number]::-webkit-outer-spin-button {\r
+ -webkit-appearance: none;\r
+ margin: 0;\r
+}\r
+input,\r
+input:focus,\r
+textarea,\r
+textarea:focus {\r
+ -webkit-appearance: none;\r
+ -moz-appearance: none;\r
+ outline: none;\r
+ -webkit-user-select: text;\r
+}\r
+\r
+*:focus {\r
+ outline: none;\r
+}\r
+\r
+fieldset { \r
+ border: 1px solid #c0c0c0;\r
+ border-radius: 0;\r
+ margin: 0 2px;\r
+ padding: 0px;\r
+}\r
+\r
+legend {\r
+ border: 0;\r
+ padding: 0;\r
+}\r
+\r
+.gecko {\r
+ button::-moz-focus-inner {\r
+ border: 0;\r
+ }\r
+}\r
+\r
+<c:if test="${empty c:property('org.zkoss.zul.theme.browserDefault')}">\r
+body {\r
+ margin: 0;\r
+ padding: 0 5px;\r
+}\r
+</c:if>\r
+\r
+//mobile\r
+.mobile * {\r
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r
+}\r
+\r
+//ZK JavaScript debug box\r
+.z-error {\r
+ display: none;\r
+ width: 450px;\r
+ border: 1px solid @errorboxBorderColor;\r
+ padding: 3px 5px 3px 3px;\r
+ background: @errorboxBackgroundColor;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 40%;\r
+ .boxShadow('1px 1px 3px rgba(0, 0, 0, 0.35)');\r
+ z-index: 9999999;\r
+ \r
+ .messagecontent {\r
+ border: 1px solid @errorboxBorderColor;\r
+ padding: 0;\r
+ background: @baseBackgroundColor;\r
+ }\r
+ .messages {\r
+ padding: 2px 3px 15px;\r
+ word-wrap: break-word;\r
+ overflow: auto;\r
+ \r
+ .message {\r
+ padding: 3px 0 2px;\r
+ }\r
+ }\r
+ .newmessage {\r
+ background: @errorboxBackgroundColor;\r
+ display: none;\r
+ }\r
+ .button {\r
+ color: @errorboxColor;\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ margin-left: 4px;\r
+ cursor: pointer; \r
+ float: right;\r
+ \r
+ > .z-icon-remove {\r
+ font-size: @fontSizeXLarge;\r
+ }\r
+ }\r
+ #zk_err-p {\r
+ height: 24px;\r
+ padding-top: 6px;\r
+ cursor: move;\r
+ }\r
+ .errornumbers {\r
+ font-weight: bold;\r
+ color: @errorboxColor;\r
+ padding-left: 4px;\r
+ float: left;\r
+ }\r
+}\r
+\r
+//zk.log box\r
+div.z-log {\r
+ width: 50%;\r
+ text-align: right; \r
+ position: absolute;\r
+ right: 10px;\r
+ bottom: 5px;\r
+ z-index: 99000;\r
+ \r
+ textarea {\r
+ width: 100%;\r
+ border-color: rgba(82,168,236,0.8);\r
+ outline: 0;\r
+ .boxShadow('inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)');\r
+ }\r
+ button {\r
+ font-size: @fontSizeXSmall;\r
+ }\r
+}\r
+\r
+//General\r
+.noscript { //the content of noscript\r
+ .size(100%, 100%);\r
+ background: #E0E1E3;\r
+ .opacity(0.6);\r
+ text-align: center;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ zoom: 1;\r
+ z-index: 32000;\r
+\r
+ p {\r
+ font-weight: bold;\r
+ color: black;\r
+ border: 1px solid black;\r
+ margin: 10% 15%;\r
+ padding: 10px 0;\r
+ background: white;\r
+ .opacity(1.0);\r
+ }\r
+}\r
+\r
+//radio, radiogroup\r
+input[type="radio"] {\r
+ -webkit-appearance: radio;\r
+ -moz-appearance: radio;\r
+ margin: 0px 2px 2px;\r
+}\r
+\r
+//checkbox\r
+input[type="checkbox"] {\r
+ -webkit-appearance: checkbox;\r
+ -moz-appearance: checkbox;\r
+ margin: 0px 2px 2px;\r
+}\r
+\r
+//label\r
+.z-label {\r
+ line-height: normal;\r
+ color: green;\r
+}\r
+.z-label,\r
+.z-radio-content,\r
+.z-checkbox-content,\r
+.z-loading {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+}\r
+\r
+.z-temp,\r
+.z-modal-mask {\r
+ .size(100%, 100%);\r
+ background: @maskBackgroundColor;\r
+ .opacity(0.6);\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+}\r
+\r
+.z-initing {\r
+ .size(60px, 60px);\r
+ background: transparent no-repeat center;\r
+\r
+<c:if test="${z:isEditionValid()}">\r
+ background-image: url('//www.zkoss.org/zk/img/${z:encodeWithZK("zkpowered.png")}');\r
+</c:if>\r
+ position: absolute;\r
+ right: 10px;\r
+ bottom: 10px;\r
+ z-index: 32000;\r
+}\r
+<c:if test="${z:isEditionValid()}">\r
+.z-uptime {\r
+ background-image: url('//www.zkoss.org/zk/img/${z:encodeWithZK("zkuptime.png")}');\r
+}\r
+</c:if>\r
+\r
+.z-loading,\r
+.z-apply-loading {\r
+ border: 1px solid @baseBorderColor;\r
+ padding: 3px;\r
+ background: @loadingBackgroundColor;\r
+ position: absolute;\r
+ cursor: wait;\r
+ white-space: nowrap;\r
+}\r
+.z-loading {\r
+ top: 50% !important;\r
+ left: 45% !important;\r
+ align: center;\r
+ vertical-align: middle;\r
+ z-index: 31000;\r
+}\r
+.z-apply-loading {\r
+ overflow: hidden;\r
+ z-index: 89500;\r
+}\r
+.z-loading-indicator,\r
+.z-apply-loading-indicator {\r
+ color: @textColorGrayDark;\r
+ border: 1px solid @baseBorderColor;\r
+ background: @baseBackgroundColor;\r
+ white-space: nowrap;\r
+}\r
+.z-loading-indicator {\r
+ padding: 6px;\r
+}\r
+.z-apply-loading-indicator {\r
+ font-family: @baseTitleFontFamily;\r
+ font-size: @fontSizeMedium;\r
+ font-weight: normal;\r
+ padding: 2px;\r
+}\r
+.z-apply-loading-icon,\r
+.z-loading-icon,\r
+.z-renderdefer {\r
+ .size(16px, 16px);\r
+ background: transparent no-repeat center;\r
+ .encodeThemeURL(background-image, '~./zul/img/misc/progress.gif');\r
+}\r
+.z-apply-loading-icon,\r
+.z-loading-icon {\r
+ display: inline-block;\r
+ vertical-align: top;\r
+}\r
+.z-apply-mask {\r
+ .size(100%, 100%);\r
+ background: @maskBackgroundColor;\r
+ .opacity(0.6);\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ z-index: 89000;\r
+}\r
+.z-inline-block { //used with label/checkbox and others to ensure the dimension\r
+ display: inline-block;\r
+ vertical-align: top; //vertical-align: make it looks same in diff browsers\r
+}\r
+.z-word-wrap {\r
+ word-wrap: break-word;\r
+}\r
+.z-word-nowrap {\r
+ white-space: nowrap;\r
+}\r
+.z-overflow-hidden {\r
+ overflow: hidden;\r
+}\r
+.z-dd-stackup {\r
+ .size(100%, 100%);\r
+ .encodeURL(background-image, '~./img/spacer.gif');\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ z-index: 16800;\r
+}\r
+\r
+.z-temp * { //temporary\r
+ font-size: 5px;\r
+ color: #FFFFFF;\r
+ background: #FFFFFF;\r
+ text-decoration: none;\r
+}\r
+.z-temp {\r
+ .z-loading {\r
+ background: @loadingBackgroundColor;\r
+ top: 49%;\r
+ left: 46%;\r
+ }\r
+ .z-loading-indicator {\r
+ font-size: @fontSizeMedium;\r
+ color: @textColorGrayDark;\r
+ }\r
+}\r
+\r
+//Fix float issue for CSS\r
+.z-clear {\r
+ font-size: 0;\r
+ .size(0, 0);\r
+ line-height: 0;\r
+ overflow: hidden;\r
+ clear: both;\r
+}\r
+\r
+//Shadow for not CSS3\r
+.ie8 {\r
+ .z-shadow {\r
+ display: none;\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ overflow: hidden;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow-wrapper {\r
+ height: 100%;\r
+ padding-bottom: 6px;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow .z-shadow-cl {\r
+ height: 100%;\r
+ padding-left: 6px;\r
+ background: transparent repeat-y 0 0;\r
+ .encodeThemeURL(background-image, '~./zul/img/shadow-cl.png');\r
+ overflow: hidden;\r
+ zoom: 1;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow .z-shadow-cr {\r
+ height: 100%;\r
+ padding-right: 6px;\r
+ background: transparent repeat-y right;\r
+ .encodeThemeURL(background-image, '~./zul/img/shadow-cr.png');\r
+ overflow: hidden;\r
+ zoom: 1;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow .z-shadow-cm {\r
+ height: 100%;\r
+ background: transparent repeat 0 0;\r
+ .encodeThemeURL(background-image, '~./zul/img/shadow-m.png');\r
+ overflow: hidden;\r
+ zoom: 1;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-shadow .z-shadow-tl,\r
+ .z-shadow .z-shadow-tr,\r
+ .z-shadow .z-shadow-bl,\r
+ .z-shadow .z-shadow-br {\r
+ font-size: 0;\r
+ height: 6px;\r
+ margin-right: 6px;\r
+ line-height: 0;\r
+ background: transparent no-repeat 0 top;\r
+ zoom: 1;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow .z-shadow-tr,\r
+ .z-shadow .z-shadow-br {\r
+ background-position: right -6px;\r
+ margin-right: -6px;\r
+ position: relative;\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow .z-shadow-tl,\r
+ .z-shadow .z-shadow-tr {\r
+ .encodeThemeURL(background-image, '~./zul/img/shadow-tlr.png');\r
+ }\r
+}\r
+.ie8 {\r
+ .z-shadow .z-shadow-bl,\r
+ .z-shadow .z-shadow-br {\r
+ .encodeThemeURL(background-image, '~./zul/img/shadow-blr.png');\r
+ }\r
+}\r
+\r
+//Drag-Drop\r
+.z-dragged {\r
+ color: @dragColor;\r
+ background: none no-repeat scroll 0 0 @dragBackgroundColor;\r
+}\r
+.z-drag {\r
+ &-over {\r
+ background: @dragHoverBackgroundColor;\r
+ }\r
+ &-ghost {\r
+ list-style: none;\r
+ }\r
+}\r
+// ZK-3195: only apply to the first layer of children\r
+.gecko {\r
+ .z-draggable-over {\r
+ > * {\r
+ -moz-user-select: none;\r
+ }\r
+ }\r
+}\r
+.z-drop {\r
+ &-allow {\r
+ background: @dragAllowBackgroundColor;\r
+\r
+ .z-drop-icon {\r
+ color: @dragAllowBackgroundColor;\r
+ }\r
+ }\r
+ &-disallow {\r
+ background: @dragDisAllowBackgroundColor;\r
+\r
+ .z-drop-icon {\r
+ color: @dragDisAllowBackgroundColor;\r
+ padding-right: 1px;\r
+ }\r
+ }\r
+ &-content {\r
+ .fontStyle(@baseContentFontFamily, @fontSizeMedium, normal, @dragColor);\r
+ .size(auto, @baseButtonHeight);\r
+ padding: 4px;\r
+ padding-left: @baseIconWidth + 8; // for icon\r
+ line-height: @baseButtonHeight - 8;\r
+ position: relative;\r
+ }\r
+ &-icon {\r
+ font-size: @fontSizeMedium;\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ .borderRadius(@baseIconWidth / 2);\r
+ line-height: @baseIconHeight;\r
+ background: @baseBackgroundColor;\r
+ text-align: center;\r
+ position: absolute;\r
+ top: 4px;\r
+ left: 6px;\r
+ }\r
+}\r
+\r
+// Focus Anchor\r
+.z-focus-a {\r
+ font-size: 0 !important;\r
+ .size(1px, 1px) !important;\r
+ border: 0 !important;\r
+ margin: 0 !important;\r
+ padding: 0 !important;\r
+ line-height: 0 !important;\r
+ background: transparent !important;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ -moz-outline: 0 none;\r
+ outline: 0 none;\r
+ -moz-user-select: text;\r
+ -khtml-user-select: text;\r
+ overflow: hidden;\r
+ \r
+ &:focus {\r
+ -moz-outline: 0 none;\r
+ outline: 0 none;\r
+ }\r
+}\r
+\r
+//upload button\r
+span.z-upload {\r
+ font-size: 0;\r
+ .displaySize(inline-block, 0, 0);\r
+ margin: 0;\r
+ padding: 0;\r
+ position: relative;\r
+}\r
+span.z-upload input {\r
+ font-size: 45pt;\r
+ margin: 0;\r
+ padding: 0;\r
+ .opacity(0);\r
+ position: absolute;\r
+ cursor: pointer;\r
+ z-index: -1;\r
+}\r
+\r
+.ie8, .ie9, .ie10 {\r
+ span.z-upload input {\r
+ z-index: 1;\r
+ }\r
+}\r
+\r
+.z-upload-icon {\r
+ .encodeThemeURL(background-image, '~./zul/img/misc/prgmeter.png');\r
+ overflow: hidden;\r
+}\r
+\r
+.ie8 {\r
+ .z-upload-hover {\r
+ border-color: @hoverBorderColor;\r
+ .gradientFallback(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+}\r
+.ie9, .ie10 {\r
+ .z-upload-hover {\r
+ border-color: @hoverBorderColor;\r
+ .verGradient(@hoverGradientStart, @hoverGradientEnd);\r
+ }\r
+}\r
+\r
+//fileupload dialog\r
+.z-fileupload-add,\r
+.z-fileupload-remove {\r
+ color: #1096BC;\r
+ .size(16px, 17px);\r
+ cursor: pointer;\r
+}\r
+.z-fileupload-progress {\r
+ width: 300px;\r
+}\r
+.z-fileupload-manager {\r
+ width: 350px;\r
+}\r
+\r
+//Selectbox\r
+.z-selectbox {\r
+ font-family: @baseContentFontFamily;\r
+ font-size: @fontSizeMedium;\r
+}\r
+\r
+//scrollbar\r
+.z-scrollbar {\r
+ display: none;\r
+ .opacity(0);\r
+ position: absolute;\r
+ line-height: 1;\r
+\r
+ //vertical\r
+ &-vertical {\r
+ .size(@scrollbarWidth, 100%);\r
+ top: 0;\r
+ right: 0;\r
+\r
+ .z-scrollbar {\r
+ &-wrapper {\r
+ width: 100%;\r
+ position: absolute;\r
+ top: @baseIconHeight;\r
+ left: 0;\r
+ }\r
+ &-indicator {\r
+ width: @scrollbarWidth - 2;\r
+ border: 1px solid @scrollbarBorderColor;\r
+ .borderRadius(2px);\r
+ .horGradient(@scrollbarGradientStart, @scrollbarGradientEnd);\r
+ position: absolute;\r
+ left: 1px;\r
+ cursor: pointer;\r
+ z-index: 100;\r
+ }\r
+ &-rail {\r
+ .size(100%, 100%);\r
+ background: @scrollbarBackgroundColor;\r
+ }\r
+ &-icon {\r
+ color: @iconColor;\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ margin-top: -8px;\r
+ position: absolute;\r
+ left: -1px;\r
+ top: 50%;\r
+ .transform('scale(0.5, 0.7)');\r
+ }\r
+ }\r
+ &-embed {\r
+ .size(@scrollbarWidth / 2, 100%);\r
+ .borderRadius(@baseBorderRadius);\r
+ background: #000000;\r
+ .opacity(0.2);\r
+ position: absolute;\r
+ top: 0;\r
+ right: 0;\r
+ .boxShadow('inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07)');\r
+ }\r
+ }\r
+ &-up,\r
+ &-down {\r
+ .iconFontStyle(@baseFontSize, @iconColor);\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ background: @scrollbarBackgroundColor;\r
+ position: absolute;\r
+ cursor: pointer;\r
+ }\r
+ &-up {\r
+ > .z-icon-caret-up:before {\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ position: absolute;\r
+ left: 4px;\r
+ top: -1px;\r
+ }\r
+ }\r
+ &-down {\r
+ bottom: 0;\r
+ > .z-icon-caret-down:before {\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ position: absolute;\r
+ left: 4px;\r
+ top: 1px;\r
+ }\r
+ }\r
+\r
+ //horizontal\r
+ &-horizontal {\r
+ .size(100%, @scrollbarHeight);\r
+ left: 0;\r
+ bottom: 0;\r
+\r
+ .z-scrollbar {\r
+ &-wrapper {\r
+ height: 100%;\r
+ position: absolute;\r
+ bottom: 0;\r
+ left: @baseIconWidth;\r
+ }\r
+ &-indicator {\r
+ height: @scrollbarHeight - 2;\r
+ border: 1px solid @scrollbarBorderColor;\r
+ .borderRadius(2px);\r
+ .verGradient(@scrollbarGradientStart, @scrollbarGradientEnd);\r
+ position: absolute;\r
+ top: 1px;\r
+ cursor: pointer;\r
+ z-index: 100;\r
+ }\r
+ &-rail {\r
+ .size(100%, 100%);\r
+ background: @scrollbarBackgroundColor;\r
+ }\r
+ &-icon {\r
+ color: @iconColor;\r
+ margin-left: -8px;\r
+ position: absolute;\r
+ left: 50%;\r
+ top: -1px;\r
+ .transform('rotate(90deg) scale(0.5, 0.7)');\r
+ }\r
+ }\r
+ &-embed {\r
+ .size(100%, @scrollbarHeight / 2);\r
+ .borderRadius(@baseBorderRadius);\r
+ background: #000000;\r
+ .opacity(0.2);\r
+ position: absolute;\r
+ bottom: 0;\r
+ left: 0;\r
+ .boxShadow('inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07)');\r
+ }\r
+ }\r
+ &-left,\r
+ &-right {\r
+ .iconFontStyle(@baseFontSize, @iconColor);\r
+ .size(@baseIconWidth, @baseIconHeight);\r
+ padding: 1px 6px 0 5px;\r
+ background: @scrollbarBackgroundColor;\r
+ position: absolute;\r
+ cursor: pointer;\r
+ }\r
+ &-right {\r
+ right: 0;\r
+ }\r
+}\r
+\r
+.ie8 {\r
+ .z-scrollbar {\r
+ &-vertical {\r
+ .z-scrollbar {\r
+ &-indicator {\r
+ .gradientFallback(@scrollbarGradientStart, @scrollbarGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ &-horizontal {\r
+ .z-scrollbar {\r
+ &-indicator {\r
+ .gradientFallback(@scrollbarGradientStart, @scrollbarGradientEnd);\r
+ }\r
+ }\r
+ }\r
+ }\r
+}\r
+\r
+.z-macro {\r
+ display: inline-block;\r
+ min-width: 1px;\r
+}
\ No newline at end of file
--- /dev/null
+/* Version.java
+
+{{IS_NOTE
+ Purpose:
+
+ Description:
+
+ History:
+ Oct 6, 2010 12:30:37 PM , Created by jimmy
+}}IS_NOTE
+
+Copyright (C) 2010 Potix Corporation. All Rights Reserved.
+
+{{IS_RIGHT
+ This program is distributed under LGPL Version 3.0 in the hope that
+ it will be useful, but WITHOUT ANY WARRANTY.
+}}IS_RIGHT
+*/
+package org.zkoss.theme.___THEME_NAME___;
+
+/**
+ * The version of the userdark theme.
+ * {@link #UID} must be the same as the version specified in lang-addon.xml.
+ * @author Jimmy
+ */
+public class Version {
+ /** Returns the version UID.
+ */
+ public static final String UID = "___VERSION___";
+}
--- /dev/null
+/* ___THEME_NAME_CAP___ThemeWebAppInit.java
+
+ Purpose:
+
+ Description:
+
+ History:
+ Jun 29, 2010 11:56:16 AM , Created by Sam
+
+Copyright (C) 2010 Potix Corporation. All Rights Reserved.
+
+{{IS_RIGHT
+ This program is distributed under LGPL Version 3.0 in the hope that
+ it will be useful, but WITHOUT ANY WARRANTY.
+}}IS_RIGHT
+*/
+package org.zkoss.theme.___THEME_NAME___;
+
+import org.zkoss.zk.ui.WebApp;
+import org.zkoss.zk.ui.WebApps;
+import org.zkoss.zk.ui.util.WebAppInit;
+import org.zkoss.zkmax.theme.ResponsiveThemeRegistry;
+import org.zkoss.zul.theme.Themes;
+
+/**
+ * Initial the theme relative setting, includes
+ * Library property setting, Theme provider setting and Component definition setting
+ *
+ */
+public class ___THEME_NAME_CAP___ThemeWebAppInit implements WebAppInit {
+
+ private final static String THEME_NAME = "___THEME_NAME___";
+ private final static String THEME_DISPLAY = "___DISPLAY_NAME___";
+ private final static int THEME_PRIORITY = 700;
+
+ public void init(WebApp webapp) throws Exception {
+ Themes.register(THEME_NAME, THEME_DISPLAY, THEME_PRIORITY);
+ String edition = WebApps.getEdition();
+ if ("EE".equals(edition)) {
+ Themes.register(ResponsiveThemeRegistry.TABLET_PREFIX + THEME_NAME, THEME_DISPLAY, THEME_PRIORITY);
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+/* UserdarkThemeWebAppInit.java\r
+\r
+ Purpose:\r
+ \r
+ Description:\r
+ \r
+ History:\r
+ Jun 29, 2010 11:56:16 AM , Created by Sam\r
+\r
+Copyright (C) 2010 Potix Corporation. All Rights Reserved.\r
+\r
+{{IS_RIGHT\r
+ This program is distributed under LGPL Version 3.0 in the hope that\r
+ it will be useful, but WITHOUT ANY WARRANTY.\r
+}}IS_RIGHT\r
+*/\r
+package org.zkoss.theme.userdark;\r
+\r
+import org.zkoss.zk.ui.WebApp;\r
+import org.zkoss.zk.ui.WebApps;\r
+import org.zkoss.zk.ui.util.WebAppInit;\r
+import org.zkoss.zkmax.theme.ResponsiveThemeRegistry;\r
+import org.zkoss.zul.theme.Themes;\r
+\r
+/**\r
+ * Initial the theme relative setting, includes\r
+ * Library property setting, Theme provider setting and Component definition setting \r
+ * \r
+ */\r
+public class UserdarkThemeWebAppInit implements WebAppInit {\r
+\r
+ private final static String USERDARK_NAME = "userdark";\r
+ private final static String USERDARK_DISPLAY = "userdark";\r
+ private final static int USERDARK_PRIORITY = 700;\r
+ \r
+ public void init(WebApp webapp) throws Exception {\r
+ Themes.register(USERDARK_NAME, USERDARK_DISPLAY, USERDARK_PRIORITY);\r
+ String edition = WebApps.getEdition();\r
+ if ("EE".equals(edition)) {\r
+ Themes.register(ResponsiveThemeRegistry.TABLET_PREFIX + USERDARK_NAME, USERDARK_DISPLAY, USERDARK_PRIORITY);\r
+ }\r
+ }\r
+ \r
+}
\ No newline at end of file
--- /dev/null
+/* Version.java
+
+{{IS_NOTE
+ Purpose:
+
+ Description:
+
+ History:
+ Oct 6, 2010 12:30:37 PM , Created by jimmy
+}}IS_NOTE
+
+Copyright (C) 2010 Potix Corporation. All Rights Reserved.
+
+{{IS_RIGHT
+ This program is distributed under LGPL Version 3.0 in the hope that
+ it will be useful, but WITHOUT ANY WARRANTY.
+}}IS_RIGHT
+*/
+package org.zkoss.theme.userdark;
+
+/**
+ * The version of the sapphire theme.
+ * {@link #UID} must be the same as the version specified in lang-addon.xml.
+ * @author Jimmy
+ */
+public class Version {
+ /** Returns the version UID.
+ */
+ public static final String UID = "8.0.3";
+}
https://git.useribm.hu / mediacube.git / commitdiff
