Changeset 20020 in main


Ignore:
Timestamp:
03/12/20 00:17:57 (2 years ago)
Author:
GarthBraithwaite_STG
Message:

view - css rough search bar.

Location:
trunk/ibisph-view/src/main/webapp
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/ibisph-view/src/main/webapp/css/_SiteSpecific.css

    r19997 r20020  
    3232        See responsive_notes.txt for more info on why what was chosen.
    3333*/
    34 @import url("_responsive-tiny.css")   only screen and                        (max-width: 1120px);
    35 @import url("_responsive-small.css")  only screen and (min-width: 640px) and (max-width:  959px);
    36 @import url("_responsive-medium.css") only screen and (min-width: 1120px) and (max-width:  1279px);
     34@import url("_responsive-tiny.css")   only screen and                         (max-width:  1149px);
     35@import url("_responsive-small.css")  only screen and (min-width: 1080px) and (max-width:  1149px);
     36@import url("_responsive-medium.css") only screen and (min-width: 1150px) and (max-width:  1279px);
    3737@import url("_responsive-large.css")  only screen and (min-width: 1280px);
    3838@import url("_responsive-huge.css")   only screen and (min-width: 1700px);

  • trunk/ibisph-view/src/main/webapp/css/_general.css

    r19906 r20020  
    2424        --button-border-radius:         4px;
    2525        --container-border-radius:      5px;
     26        --inputBackgroundColor:         lightyellow;
    2627}
    2728
    … …  
    177178{
    178179        background-color:       lightyellow;
     180        background-color:       var(--inputBackgroundColor);
    179181}
    180182

  • trunk/ibisph-view/src/main/webapp/css/_layout-header.css

    r19997 r20020  
    109109        color:                          #003366;
    110110        color:                          var(--heading-color);
    111         line-height:            32px;
     111        line-height:            33px;
    112112        font-size:                      32px;
    113113        font-weight:            normal;
    … …  
    137137}
    138138
    139 
    140 /* site search */
    141 #siteNavigationMenu > li:last-child
    142 {
    143         margin:                         -7px 0;
    144         float: right;
    145 }
    146 #siteNavigationMenu > li:last-child:hover
    147 {
    148         background-color: transparent;
    149 }
    150 
    151 
    152 
    153 
    154 
    155 
    156 
    157139#siteNavigationMenu .MegaMenu .Body .Block .Description
    158140{
    … …  
    169151}
    170152
    171 
    172 
    173 
    174 
    175153#siteNavigationMenu #homeMenu a
    176154{
    177 /* icon
    178         margin-top:                     -2px;
    179         padding:                        2px 0 2px 0;
    180         font-family:            "WebComponentsIcons";
    181         font-size:                      24px;
    182         text-decoration:        none;
    183 
    184         speak:                          none;
    185         vertical-align:         top;
    186 
    187     margin-right: 5px;
    188 font:
    189 */
    190155    padding: 3px 4px 2px 5px;
    191156        margin-bottom:          1px;
    … …  
    199164
    200165
     166
     167
     168
     169
     170
     171
     172/* site search
     173#siteNavigationMenu > li:last-child
     174{
     175        position: relative;
     176        width: calc(100% - 900px);
     177}
     178#siteNavigationMenu > li:last-child:hover
     179{
     180        background-color: transparent;
     181}
     182*/
     183
     184
     185
    201186form.Search
    202187{
     188        display: inline-block;
     189width: calc(100% - 1090px);
     190        max-width: 385px;
     191        position: absolute;
     192        right: 0;
     193        top: -5px;
    203194        border:                         1px solid #003366;
    204195        background-color:       #e8e8e8;
    205196        border-radius:          5px 0 0 5px;
     197        z-index: 1;
    206198}
    207199#siteNavigationMenu form.Search:hover
    … …  
    210202}
    211203
     204#siteSearch:focus-within,
     205form.Search:focus-within
     206{
     207width: 35em;
     208max-width: 35em;
     209        width: calc(35em - 38px);
     210}
    212211form.Search input[type="text"]
    213212{
     213        width: calc(100% - 40px);
     214        min-width: 120px;
     215        max-width: 350px;
    214216        height:                         45px;
    215217        font-size:                      16px;
    … …  
    220222        transition:             width 0.8s ease;
    221223}
    222 form.Search input[type="text"]:focus
     224form.Search:focus-within input[type="text"]
    223225{
    224226        width:                          30em;
     227        max-width:                              30em;
    225228        z-index:                        110;
    226229}
    … …  
    232235        line-height:            38px;
    233236        min-width:                      38px;
     237        max-width:                      38px;
    234238        border:                         none;
    235239        background-color:       transparent;
    … …  
    243247        vertical-align:         top;
    244248}
    245 
    246 
    247 #indicatorSearch input[type="text"]
    248 {
    249         width:                          calc(100% - 60px);
    250 }
    251 #indicatorSearch input[type="submit"]
    252 {
    253         height:                         38px;
    254         width:                          30px;
     249form.Search:focus-within button[type="submit"]:hover::before
     250{
     251        border-radius: 5px;
     252        color: var(--color-hover);
     253        background-color: var(--background-color-hover);
    255254}
    256255

  • trunk/ibisph-view/src/main/webapp/css/_responsive-medium.css

    r19997 r20020  
    22
    33/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ V E R T I C A L   M E N U */
     4html {background-color: green;}
    45#siteMenuPanelsControl + label
    56{
    … …  
    1213
    1314
    14 
     15/*
    1516#siteNavigationMenu #siteSearch
    1617{
    1718        top: -50px;
    18         margin-top: 5px;
    1919        border-radius:          5px;
    2020}
     21*/
     22
    2123#siteNavigationMenu form.Search:hover
    2224{
    … …  
    2426}
    2527
    26 form.Search input[type="text"],
    27 form.Search input[type="text"]:focus
     28form.Search,
     29form.Search input[type="text"]
    2830{
    29         width:                          0px;
     31top: 3px;
     32right: 15px;
     33background-color: transparent;
     34border: 0;
     35border-radius: 0;
     36        max-width: 35px;
     37        min-width: 35px;
     38}
     39form.Search input[type="text"]
     40{
     41        position: absolute;
     42right: 0;
     43top: -1px;
     44/*
     45    height: 32px;
     46*/
     47        background-color: transparent;
     48        cursor: pointer;
     49}
     50form.Search input[type="text"]::placeholder
     51{
     52
     53color: transparent;
     54display: none;
     55}
     56
     57#siteSearch:focus-within #siteSearchInput
     58{
     59        /*
     60        font-size:                      16px;
     61        padding:                        2px 5px 0px 5px;
     62
     63        line-height:            30px;
     64        */
     65        top: -6px;
     66        width: 35em;
     67border: 1px solid #336699;
     68radius: 5px;
     69        background-color:       lightyellow;
     70        background-color:       var(--inputBackgroundColor);
     71        right: 35px;
     72        z-index: 1;
     73        cursor: text;
     74}
     75#siteSearch:focus-within #siteSearchInput::placeholder
     76{
     77color: #777;
    3078}
    3179
    3280
    33 
     81form.Search button[type="submit"]
     82{
     83        right: 0px;
     84line-height: 32px;
     85min-width: 35px;
     86max-width: 35px;
     87}
     88form.Search:focus-within button[type="submit"]
     89{
     90        position: absolute;
     91}
    3492
    3593

  • trunk/ibisph-view/src/main/webapp/css/_responsive-tiny.css

    r19997 r20020  
    3939{
    4040        position:                       absolute;
    41         top:                            6px;
     41        top:                            5px;
    4242        right:                          10px;
    4343        color:                                  #225588; /*var(--color);*/
    … …  
    4545        font-size: 20px;
    4646        padding: 5px;
     47        border: 1px solid #336699;
    4748        border-radius: 5px;
    4849}
    … …  
    205206
    206207
    207 #siteNavigationMenu > li:last-child
     208#siteNavigationMenu
    208209{
    209210        float: none;
    210211}
    211 #siteNavigationMenu #siteSearch
    212 {
    213         margin-top: 5px;
     212
     213
     214
     215
     216
     217#xxxuserMenu.Popup
     218{
     219        top:                            40px;
     220}
     221
     222
     223
     224#siteSearch
     225{
    214226        border-radius:          5px;
    215 }
    216 #siteNavigationMenu #siteSearch:hover
    217 {
    218         border-width:           inherit;
    219 }
    220 
    221 #siteNavigationMenu #siteSearch input[type="text"],
    222 #siteNavigationMenu #siteSearch input[type="text"]:focus
    223 {
    224 width: 155px;
    225 max-width: 155px;
    226 }
    227 
    228 
    229 
    230 
    231 
    232 
    233 
    234 
    235 
    236 
    237 
    238 #siteNavigation #userMenu
    239 {
    240         top:                                    0;
    241 }
    242 #siteNavigation #userMenu .Container .Content
    243 {
    244         line-height:                    normal;
    245 }
    246 :not(#foo) #userMenu.Click input.Control:checked ~ .Container
    247 {
    248         left:                                   -3px;
    249         top:                                    30px;
    250 }
     227background-color: white;
     228}
     229
     230form.Search
     231{
     232        right: 50px;
     233        top: 5px;
     234        width: auto;
     235}
     236form.Search input[type="text"]
     237{
     238        height:                         31px;
     239        font-size:                      16px;
     240        padding:                        2px 5px 0px 5px;
     241}
     242form.Search input[type="text"]:focus
     243{
     244}
     245
     246form.Search button[type="submit"]
     247{
     248        line-height:            30px;
     249        min-width:                      30px;
     250}
     251form.Search button[type="submit"]::before
     252{
     253        line-height:            30px;
     254        font-size:                      25px;
     255        padding: 0;
     256}
     257
     258
     259
     260
     261
     262
     263
     264
     265
     266
     267
     268
     269
     270
    251271
    252272

  • trunk/ibisph-view/src/main/webapp/xslt/html/SiteSpecific.xslt

    r19912 r20020  
    154154                                </div>
    155155                        </div>
    156 
    157156                        <xsl:call-template name="SiteSpecific.siteNavigation"/>
    158157                        <img src="{$ibis.baseRequestPath}image/logo.png" class="Logo"/>
    159158                </header>
    160159        </xsl:template>
     160
     161
     162
     163
     164
     165
     166        <xsl:template name="xxxxxxxxxxxMenuSelectionsList.additionalPrimaryListItems">
     167                        <form id="siteSearch" name="siteSearch" method="get" action="http://www.google.com/search" contenteditable="contenteditable" class="Search">
     168                                <label for="siteSearchInput" accesskey="s" class="OffPage">Search the site:</label>
     169                                <input id="siteSearchInput" name="q"
     170                                        placeholder="Search the Site..."
     171                                        type="text" autocomplete="on"
     172                                        dir="ltr" spellcheck="false" style="outline: none;"
     173                                />
     174                                <button type="submit" value="" alt="Search" title="Search" font-icon="&#xe13e;"></button>
     175                                <input type="hidden" name="sitesearch" value="{$ibis.baseRequestPath}" title="site URL to be searched"/>
     176                        </form>
     177        </xsl:template>
     178
     179
     180
     181
     182
     183
     184
     185
    161186
    162187
    … …  
    170195                                <xsl:with-param name="selectedSelectionName" select="$SiteSpecific.siteNavigationSelectedSelectionName"/>
    171196                        </xsl:call-template>
    172                 </nav>
    173         </xsl:template>
    174 
    175         <xsl:template name="MenuSelectionsList.additionalPrimaryListItems">
    176                 <li>
    177                         <form id="siteSearch" name="siteSearch" method="get" action="http://www.google.com/search" class="Search">
     197                        <form id="siteSearch" name="siteSearch" method="get" action="http://www.google.com/search" contenteditable="contenteditable" class="Search">
    178198                                <label for="siteSearchInput" accesskey="s" class="OffPage">Search the site:</label>
    179199                                <input id="siteSearchInput" name="q"
    … …  
    185205                                <input type="hidden" name="sitesearch" value="{$ibis.baseRequestPath}" title="site URL to be searched"/>
    186206                        </form>
    187                 </li>
     207                </nav>
    188208        </xsl:template>
    189209
Note: See TracChangeset for help on using the changeset viewer.