gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 @import "../../assets/components/themes/default/theme.less";
   2 @import "../../assets/components/themes/common/plx-input.less";
   3 @import "../../assets/components/themes/common/plx-button.less";
   4
   5 .owl-dateTime {
   6   display: inline-block;
   7   position: relative;
   8   width: 100%;
   9   font-family: @font-family;
  10   font-size: @font-size;
  11   background: @component-bg;
  12   color: @text-color;
  13 }
  14
  15 .owl-dateTime input {
  16   .plx-input;
  17 }
  18
  19 .owl-dateTime input:-ms-input-placeholder {
  20   color: @unselected-text-color !important;
  21 }
  22 .owl-dateTime input::-webkit-input-placeholder {
  23   color: @unselected-text-color !important;
  24 }
  25
  26 .owl-dateTime-input {
  27   width: 100%;
  28   padding-right: 1.5em; }
  29
  30 .owl-dateTime-cancel {
  31   position: absolute;
  32   top: 50%;
  33   right: .1em;
  34   border-radius: 50%;
  35   transform: translateY(-50%);
  36   cursor: pointer;
  37   color: inherit; }
  38
  39 .owl-dateTime-inputWrapper {
  40   position: relative; }
  41
  42 .owl-dateTime-customTemp {
  43   display: inline-block;
  44   position: relative; }
  45
  46 .owl-dateTime-dialog {
  47   padding:  0px;
  48   position: absolute; }
  49
  50 .owl-dateTime-dialogHeader {
  51   display: flex;
  52   justify-content: center;
  53   align-items: center;
  54   width: 100%; }
  55
  56 .owl-calendar-wrapper,
  57 .owl-timer-wrapper {
  58   position: relative;
  59   width: 100%;
  60   padding: .2em .5em; }
  61
  62 .owl-calendar-control {
  63   display: flex;
  64   justify-content: space-around;
  65   width: 100%;
  66   height: 2em; }
  67   .owl-calendar-control .owl-calendar-controlNav {
  68     position: relative;
  69     cursor: pointer;
  70     width: 12.5%; }
  71   .owl-calendar-control .owl-calendar-controlContent {
  72     display: flex;
  73     justify-content: center;
  74     align-items: center;
  75     width: 75%;
  76     height: 100%; }
  77
  78 .owl-calendar {
  79   position: relative;
  80   min-height: 13.7em; }
  81   .owl-calendar table {
  82     width: 100%;
  83     border-collapse: collapse; }
  84   .owl-calendar tbody td {
  85     position: relative;
  86     text-align: center; }
  87     .owl-calendar tbody td a {
  88       display: block;
  89       width: 100%;
  90       height: 100%;
  91       text-decoration: none;
  92       color: inherit;
  93       font-size:12px;
  94        }
  95   .owl-calendar .owl-calendar-yearArrow {
  96     position: absolute;
  97     top: 50%;
  98     width: 1.5em;
  99     height: 1.5em;
 100     transform: translateY(-50%);
 101     cursor: pointer; }
 102     .owl-calendar .owl-calendar-yearArrow.left {
 103       left: -.5em; }
 104     .owl-calendar .owl-calendar-yearArrow.right {
 105       right: -.5em; }
 106
 107 .owl-timer-wrapper {
 108   position: relative;
 109   display: flex;
 110   justify-content: center; }
 111   .owl-timer-wrapper .owl-timer {
 112     position: relative;
 113     display: flex;
 114     flex-direction: column;
 115     justify-content: center;
 116     align-items: center;
 117     width: 25%;
 118     height: 100%; }
 119   .owl-timer-wrapper .owl-timer-control {
 120     display: flex;
 121     justify-content: center;
 122     align-items: center;
 123     height: 30%;
 124     width: 100%;
 125     cursor: pointer; }
 126     .owl-timer-wrapper .owl-timer-control .icon:before {
 127       margin: 0; }
 128   .owl-timer-wrapper .owl-timer-input {
 129     width: 60%;
 130     height: 100%; }
 131
 132 /*# sourceMappingURL=picker.component.css.map */
 133 .font-face {
 134   font-weight: normal;
 135   font-style: normal; }
 136
 137 [class^="paletx-datepicker-icon-"]:before, [class*="paletx-datepicker-icon-"]:before {
 138   font-family: "fontello";
 139   font-style: normal;
 140   font-weight: normal;
 141   speak: none;
 142   display: inline-block;
 143   text-decoration: inherit;
 144   width: 1em;
 145   margin-right: .2em;
 146   text-align: center;
 147   /* opacity: .8; */
 148   /* For safety - reset parent styles, that can break glyph codes*/
 149   font-variant: normal;
 150   text-transform: none;
 151   /* fix buttons height, for twitter bootstrap */
 152   line-height: 1em;
 153   /* Animation center compensation - margins should be symmetric */
 154   /* remove if not needed */
 155   margin-left: .2em;
 156   /* you can be more comfortable with increased icons size */
 157   /* font-size: 120%; */
 158   /* Font smoothing. That was taken from TWBS */
 159   -webkit-font-smoothing: antialiased;
 160   -moz-osx-font-smoothing: grayscale;
 161   /* Uncomment for 3D effect */
 162   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
 163
 164 .paletx-datepicker-icon-cancel:before {
 165   content: '\e802'; }
 166
 167 /* '' */
 168 .paletx-datepicker-icon-up-open:before {
 169   content: '\e805'; }
 170
 171 /* '' */
 172 .paletx-datepicker-icon-down-open:before {
 173   content: '\e80b'; }
 174
 175 /* '' */
 176 .paletx-datepicker-icon-left-open:before {
 177   content: '\e817'; }
 178
 179 /* '' */
 180 .paletx-datepicker-icon-right-open:before {
 181   content: '\e818'; }
 182
 183 /* '' */
 184 .owl-widget,
 185 .owl-widget * {
 186   box-sizing: border-box; }
 187
 188 .owl-widget {
 189   font-size: 1em; }
 190 .owl-padding{
 191   padding: 0px;
 192 }
 193 .owl-corner-all {
 194   border-radius: 3px; }
 195
 196 .owl-corner-top {
 197   border-top-left-radius: 3px;
 198   border-top-right-radius: 3px; }
 199
 200 .owl-state-default {
 201   border: 1px solid @border-color-base;
 202   background: @component-bg;
 203   color: @text-color; }
 204
 205 .owl-inputtext {
 206   margin: 0;
 207   outline: medium none;
 208   transition: .2s; }
 209
 210
 211   .owl-dateTime.owl-dateTime-inline {
 212     width: auto; }
 213     .owl-dateTime.owl-dateTime-inline .owl-dateTime-dialog {
 214       position: relative;
 215       z-index: auto; }
 216
 217 .owl-dateTime-dialog {
 218   width: 300px;
 219   user-select: none;
 220   z-index: 99999; }
 221
 222 .owl-dateTime-dialogHeader {
 223   height: 2.5em;
 224   padding: .25em;
 225   background-color: @component-bg;
 226   overflow-y: auto; }
 227
 228 .owl-calendar-control .owl-calendar-controlNav .nav-prev,
 229 .owl-calendar-control .owl-calendar-controlNav .nav-next {
 230   position: absolute;
 231   top: 50%;
 232   right: auto;
 233   bottom: auto;
 234   left: 50%;
 235   transform: translate(-50%, -50%);
 236 }
 237
 238 .owl-cal-header{
 239   background: @selected-bg-color;
 240   //color: @form-label;
 241   height: 35px;
 242   //width: 105%;
 243   //margin-left: -7px;
 244 }
 245   .owl-calendar-control .owl-calendar-controlNav .nav-prev:before,
 246   .owl-calendar-control .owl-calendar-controlNav .nav-next:before {
 247     //content: "";
 248     border-top: .5em solid transparent;
 249     border-bottom: .5em solid transparent;
 250     border-right: 0.75em solid #000000;
 251     width: 0;
 252     height: 0;
 253     display: block;
 254     margin: 0 auto; }
 255 .owl-calendar-control .owl-calendar-controlNav .nav-next:before {
 256   border-right: 0;
 257   border-left: 0.75em solid #000000; }
 258 .owl-calendar-control .owl-calendar-controlContent .month-control,
 259 .owl-calendar-control .owl-calendar-controlContent .year-control {
 260   color: @unselected-text-color;
 261   display: inline-block;
 262   cursor: pointer;
 263   transition: transform 200ms ease; }
 264   .owl-calendar-control .owl-calendar-controlContent .month-control:hover,
 265   .owl-calendar-control .owl-calendar-controlContent .year-control:hover {
 266    // transform: scale(1.2); }
 267     color: @guide-color; }
 268 .owl-calendar-control .owl-calendar-controlContent .month-control {
 269   font-size: @font-size-title-group;
 270   margin-right: .8rem;
 271 }
 272 .owl-calendar-control .owl-calendar-controlContent .year-control {
 273   font-size: @font-size-title-group;
 274 }
 275
 276 .owl-calendar tbody td.owl-calendar-selected {
 277   background-color: @guide-color;
 278   color: @component-bg }
 279 .owl-calendar tbody td.owl-calendar-invalid {
 280   color: @disabled-text-color }
 281 .owl-calendar tbody td.owl-calendar-outFocus {
 282   color: @unselected-text-color; }
 283 .owl-calendar tbody td.owl-calendar-hidden {
 284   visibility: hidden; }
 285   /**
 286 .owl-calendar tbody td:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
 287   background-color: @hover-bg-color;
 288   color: @shadow-color }
 289 **/
 290 .owl-years td.owl-year,
 291 .owl-years td.owl-month,
 292 .owl-months td.owl-year,
 293 .owl-months td.owl-month {
 294   font-size: 1.2em;
 295   height: 2.5em;
 296   width: 33.33%;
 297   line-height: 2.5em;
 298   border-radius: 60px;
 299   }
 300
 301 .owl-weekdays th.owl-weekday {
 302   height: 1em;
 303   line-height: 2em;
 304   text-align: center;
 305   font-weight: normal;
 306   font-size: @font-size;
 307   /**color: @unselected-text-color; **/
 308   }
 309
 310 .owl-days td.owl-day {
 311   border-radius: 30px;
 312   height: 2em;
 313   width: calc(100% / 7);
 314   line-height: 2em; }
 315   .owl-days td.owl-day.owl-day-today:before {
 316     content: '';
 317     display: block;
 318     position: absolute;
 319     right: 2px;
 320     top: 2px;
 321     color: @primary-color;
 322     border-top: 0.5em solid @primary-color-hover;
 323     border-left: .5em solid transparent;
 324   }
 325
 326 .owl-timer-wrapper {
 327   height: 5.4em;
 328   background-color: @shadow-color; }
 329   .owl-timer-wrapper .owl-timer-text {
 330     display: flex;
 331     justify-content: center;
 332     align-items: center;
 333     width: 100%;
 334     height: 40%;
 335     font-size: 1.5em; }
 336   .owl-timer-wrapper .owl-meridian-btn {
 337     font-size: .8em;
 338     color: @guide-color;
 339     background-image: none;
 340     background-color: transparent;
 341     border-color: @guide-color; }
 342     .owl-timer-wrapper .owl-meridian-btn:hover {
 343       color: @scene-textcolor;
 344       background-color: @guide-color;
 345       border-color: @guide-color; }
 346
 347 .owl-timer-divider {
 348   display: inline-block;
 349   align-self: flex-end;
 350   position: absolute;
 351   width: .6em;
 352   height: 100%;
 353   left: -.3em; }
 354   .owl-timer-divider .owl-timer-dot {
 355     display: block;
 356     width: .3em;
 357     height: .3em;
 358     position: absolute;
 359     left: 50%;
 360     border-radius: 50%;
 361     transform: translateX(-50%); }
 362     .owl-timer-divider .owl-timer-dot.dot-top {
 363       top: 38%; }
 364     .owl-timer-divider .owl-timer-dot.dot-bottom {
 365       bottom: 38%; }
 366 .owl-icon{
 367   position: absolute;
 368   top: 50%;
 369   right: .1em;
 370   border-radius: 50%;
 371   -webkit-transform: translateY(-50%);
 372   transform: translateY(-50%);
 373   cursor: pointer;
 374   color: @fonticon-color;
 375 }
 376
 377 .oes-time-control{
 378   color: @text-color !important;
 379 }
 380 .owl-calendar-selected {
 381   background-color: @guide-color;
 382   color: #fff;
 383   border-radius: 50%;
 384 }
 385 .owl-calendar tbody td div.day:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
 386   background-color: @hover-bg-color;
 387   color:#000;
 388   border-radius: 50%; }
 389 .oes-time-control{
 390   font-size: @font-size;
 391 }
 392 .owl-calendar-year-part{
 393   width: 42px;
 394   margin-left: 30px;
 395   text-align: center;
 396 }
 397 .owl-calendar-year-part:hover{
 398   background-color: @hover-bg-color;
 399   color:#000;
 400   border-radius: 50%;
 401 }
 402 .owl-calendar-year-selected{
 403   background-color: @guide-color;
 404   color: #fff;
 405   border-radius: 50%;
 406 }
 407 .owl-calendar-year-selected:hover{
 408   background-color: @guide-color;
 409   color: #fff;
 410   border-radius: 50%;
 411 }
 412 .owl-calendar-month-part{
 413   width: 42px;
 414   margin-left: 30px;
 415   text-align: center;
 416 }
 417 .owl-calendar-month-part:hover{
 418   background-color: @hover-bg-color;
 419   color:#000;
 420   border-radius: 50%;
 421 }
 422 .owl-calendar-month-selected{
 423   background-color: @guide-color;
 424   color: #fff;
 425   border-radius: 50%;
 426 }
 427 .owl-calendar-month-selected:hover{
 428   background-color: @guide-color;
 429   color: #fff;
 430   border-radius: 50%;
 431 }
 432
 433 /*# sourceMappingURL=picker.css.map */
 434