principles-ui-components/UI_Component/css/Button.css

Supporting UI controller for Tizen TV web application, which developed base on React Framework.

/* three button types  */

.iconArea{
	position: relative;
	left: 0px;
	top: 0px;
	width:82px;
	height:84px;
	z-index:  1000;
}

.image-bg{
    position: relative;
	left: 0px;
	top: 0px;
	width:82px;
	height:84px;
	background-repeat: no-repeat;
	background-size: 100%;
}

.image-bg > img{
	position: relative;
	left:22px;
	top:23px;
	background-repeat: no-repeat;
}

.button-ani {
	position: absolute;
    width:414px;
    height:84px;
}

.btn-text{
    position: absolute;
	width: 414px;
	height: 84px;
	line-height: 84px;

    font-size: 30px;
    font-family: SamsungOneGui_600;
    color: #262626;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-text-highContrast{
    position: absolute;
	width: 414px;
	height: 84px;
	line-height: 84px;

    font-size: 30px;
    font-family: SamsungOneGui_600;
    color: #ffffff;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-stroke: 1px rgba(34, 48, 54, 0.4);
}

.text-image-bg{
	position: absolute;
	width: 232px;
	height: 84px;
}

.text-icon-img{
	position: absolute;
	top: 35px;
	left: 181px;
	width: 14px;
	height: 14px;
	background-image:url('images/btn/c_buttondropdown_arrow_up.png');
    background-repeat: no-repeat;
    background-size: 100%;
	z-index:  1000;
}

.text-icon-title{
	position: relative;
	left: 25px;
	height: 84px;
	line-height: 84px;

	font-size: 30px;
    font-family: SamsungOneGui_600;
    color: #262626;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes doScale
{
	0% {transform: scale(1, 1) translateZ(100px); }
	100%   {transform: scale(1.08, 1.08) translateZ(100px);}
}

@keyframes doScaleBack
{
	0% {transform: scale(1.08, 1.08); }
	100%   {transform: scale(1, 1);}
}

@keyframes doScaleEnlarge
{
	0% {transform: scale(1.296, 1.296); }
	100%   {transform: scale(1.2, 1.2); }
}

@keyframes doScaleEnlargeFocus
{
	0% {transform: scale(1.2, 1.2) translateZ(100px); }
	100%   {transform: scale(1.296, 1.296) translateZ(100px);}
}

@keyframes DimIn
{
	0%   {opacity: 1.0;}
	100% {opacity: 0.4;}
}

@keyframes DimOut
{
	0%   {opacity: 0.4;}
	100% {opacity: 1.0;}
}